src/cobalt/layout_tests/testdata/cssom-view/6-scrolling-area-fix-positioned-children-included.html - cobalt - Git at Google

 <!DOCTYPE html>
 <html>
 <!--
  | Fixed positioned elements in the containing block are included in the
  | scrolling area.
  |   https://www.w3.org/TR/cssom-view-1/#extension-to-the-element-interface
  |   https://www.w3.org/TR/cssom-view-1/#scrolling-area
  -->
 <head>
   <style>
     body {
       font-family: Roboto;
       font-size: 16px;
       background-color: #FF0000;
     }

     .overflow-scroll {
       width: 150px;
       height: 150px;
       overflow: scroll;
       position: absolute;
       background-color: #808080;
       transform: translateX(0px);
     }

     .content-positioned {
       width: 50px;
       height: 50px;
       position: fixed;
       background-color: #0000FF;
     }
   </style>
   <script>
     if (window.testRunner) {
       window.testRunner.waitUntilDone();
     }

     function runTest() {
       var error = "";
       var scroller = document.getElementById("scroller");
       if (scroller.scrollWidth != 175) {
         error += "\nValue of: scrollWidth"
                + "\n  Actual: " + scroller.scrollWidth
                + "\nExpected: " + 175;
       }
       if (scroller.scrollHeight != 150) {
         error += "\nValue of: scrollHeight"
                + "\n  Actual: " + scroller.scrollHeight
                + "\nExpected: " + 150;
       }
       return error;
     }

     window.onload = function() {
       var error = runTest();
       if (error) {
         console.log("FAIL" + error);
       } else {
         document.body.style.backgroundColor = "rgba(0,0,0,0)";
       }

       if (window.testRunner) {
         window.testRunner.notifyDone();
       }
     }
   </script>
 </head>
 <body>
   <div id="scroller" class="overflow-scroll">
     <div class="content-positioned" style="transform: translateX(-25px)"></div>
     <div class="content-positioned" style="transform: translateX(50px)"></div>
     <div class="content-positioned" style="transform: translateX(125px)"></div>
   </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<!--
	\| Fixed positioned elements in the containing block are included in the
	\| scrolling area.
	\| https://www.w3.org/TR/cssom-view-1/#extension-to-the-element-interface
	\| https://www.w3.org/TR/cssom-view-1/#scrolling-area
	-->
	<head>
	<style>
	body {
	font-family: Roboto;
	font-size: 16px;
	background-color: #FF0000;
	}

	.overflow-scroll {
	width: 150px;
	height: 150px;
	overflow: scroll;
	position: absolute;
	background-color: #808080;
	transform: translateX(0px);
	}

	.content-positioned {
	width: 50px;
	height: 50px;
	position: fixed;
	background-color: #0000FF;
	}
	</style>
	<script>
	if (window.testRunner) {
	window.testRunner.waitUntilDone();
	}

	function runTest() {
	var error = "";
	var scroller = document.getElementById("scroller");
	if (scroller.scrollWidth != 175) {
	error += "\nValue of: scrollWidth"
	+ "\n Actual: " + scroller.scrollWidth
	+ "\nExpected: " + 175;
	}
	if (scroller.scrollHeight != 150) {
	error += "\nValue of: scrollHeight"
	+ "\n Actual: " + scroller.scrollHeight
	+ "\nExpected: " + 150;
	}
	return error;
	}

	window.onload = function() {
	var error = runTest();
	if (error) {
	console.log("FAIL" + error);
	} else {
	document.body.style.backgroundColor = "rgba(0,0,0,0)";
	}

	if (window.testRunner) {
	window.testRunner.notifyDone();
	}
	}
	</script>
	</head>
	<body>
	<div id="scroller" class="overflow-scroll">
	<div class="content-positioned" style="transform: translateX(-25px)"></div>
	<div class="content-positioned" style="transform: translateX(50px)"></div>
	<div class="content-positioned" style="transform: translateX(125px)"></div>
	</div>
	</body>
	</html>