LayoutTests/fast/dom/Element/scrollWidth.html - WebKit - Git at Google

 <!DOCTYPE HTML>
 <head>
     <style>
         #container > div {
             width: 50px;
             height: 50px;
             border-width: 5px 5px 10px 10px;
             border-style: solid;
             margin: 10px;
         }

         #container > div > div {
             width: 75px;
             height: 25px;
             background-color: lightblue;
         }
     </style>
     <script>
         function log(message)
         {
             document.getElementById("console").appendChild(document.createTextNode(message + "\n"));
         }

         function testDiv(div)
         {
             var childStyle = div.firstElementChild.style;
             var cssText = childStyle.cssText;
             if (cssText) cssText += " ";
             log(cssText + "-> scrollWidth: " + div.scrollWidth);
         }

         function test()
         {
             if (window.testRunner)
                 testRunner.dumpAsText();

             var container = document.getElementById("container");

             log ("LTR:")
             for (var d = container.firstElementChild; d; d = d.nextElementSibling)
                 testDiv(d);

             container.style.direction = "rtl";
             log ("\nRTL:")
             for (var d = container.firstElementChild; d; d = d.nextElementSibling)
                 testDiv(d);
         }
     </script>
 </head>
 <body onload="test()">
     <p>
         Test the value of scrollWidth on blocks with visible overflow. These
         results match IE8.
     </p>
     <pre id="console"></pre>
     <div id="container">
         <div>
             <div></div>
         </div>

         <div>
             <div style="margin-left: 9px;"></div>
         </div>

         <div>
             <div style="margin-right: 9px;"></div>
         </div>

         <div>
             <div style="margin-left: -27px;"></div>
         </div>

         <div>
             <div style="position: relative;"></div>
         </div>

         <div>
             <div style="position: relative; left: 9px;"></div>
         </div>

         <div>
             <div style="position: relative; left: -9px;"></div>
         </div>

         <div>
             <div style="position: relative; left: -27px;"></div>
         </div>

         <div>
             <div style="position: absolute;"></div>
         </div>
     </div>
 </body>
	<!DOCTYPE HTML>
	<head>
	<style>
	#container > div {
	width: 50px;
	height: 50px;
	border-width: 5px 5px 10px 10px;
	border-style: solid;
	margin: 10px;
	}

	#container > div > div {
	width: 75px;
	height: 25px;
	background-color: lightblue;
	}
	</style>
	<script>
	function log(message)
	{
	document.getElementById("console").appendChild(document.createTextNode(message + "\n"));
	}

	function testDiv(div)
	{
	var childStyle = div.firstElementChild.style;
	var cssText = childStyle.cssText;
	if (cssText) cssText += " ";
	log(cssText + "-> scrollWidth: " + div.scrollWidth);
	}

	function test()
	{
	if (window.testRunner)
	testRunner.dumpAsText();

	var container = document.getElementById("container");

	log ("LTR:")
	for (var d = container.firstElementChild; d; d = d.nextElementSibling)
	testDiv(d);

	container.style.direction = "rtl";
	log ("\nRTL:")
	for (var d = container.firstElementChild; d; d = d.nextElementSibling)
	testDiv(d);
	}
	</script>
	</head>
	<body onload="test()">
	<p>
	Test the value of scrollWidth on blocks with visible overflow. These
	results match IE8.
	</p>
	<pre id="console"></pre>
	<div id="container">
	<div>
	<div></div>
	</div>

	<div>
	<div style="margin-left: 9px;"></div>
	</div>

	<div>
	<div style="margin-right: 9px;"></div>
	</div>

	<div>
	<div style="margin-left: -27px;"></div>
	</div>

	<div>
	<div style="position: relative;"></div>
	</div>

	<div>
	<div style="position: relative; left: 9px;"></div>
	</div>

	<div>
	<div style="position: relative; left: -9px;"></div>
	</div>

	<div>
	<div style="position: relative; left: -27px;"></div>
	</div>

	<div>
	<div style="position: absolute;"></div>
	</div>
	</div>
	</body>