third_party/WebKit/LayoutTests/fast/dom/Element/scrollWidth.html

   1 <!DOCTYPE HTML>
   2 <head>
   3     <style>
   4         #container > div {
   5             width: 50px;
   6             height: 50px;
   7             border-width: 5px 5px 10px 10px;
   8             border-style: solid;
   9             margin: 10px;
  10         }
  11
  12         #container > div > div {
  13             width: 75px;
  14             height: 25px;
  15             background-color: lightblue;
  16         }
  17     </style>
  18     <script>
  19         function log(message)
  20         {
  21             document.getElementById("console").appendChild(document.createTextNode(message + "\n"));
  22         }
  23
  24         function testDiv(div)
  25         {
  26             var childStyle = div.firstElementChild.style;
  27             var cssText = childStyle.cssText;
  28             if (cssText) cssText += " ";
  29             log(cssText + "-> scrollWidth: " + div.scrollWidth);
  30         }
  31
  32         function test()
  33         {
  34             if (window.testRunner)
  35                 testRunner.dumpAsText();
  36
  37             var container = document.getElementById("container");
  38
  39             log ("LTR:")
  40             for (var d = container.firstElementChild; d; d = d.nextElementSibling)
  41                 testDiv(d);
  42
  43             container.style.direction = "rtl";
  44             log ("\nRTL:")
  45             for (var d = container.firstElementChild; d; d = d.nextElementSibling)
  46                 testDiv(d);
  47         }
  48     </script>
  49 </head>
  50 <body onload="test()">
  51     <p>
  52         Test the value of scrollWidth on blocks with visible overflow. These
  53         results match IE8.
  54     </p>
  55     <pre id="console"></pre>
  56     <div id="container">
  57         <div>
  58             <div></div>
  59         </div>
  60
  61         <div>
  62             <div style="margin-left: 9px;"></div>
  63         </div>
  64
  65         <div>
  66             <div style="margin-right: 9px;"></div>
  67         </div>
  68
  69         <div>
  70             <div style="margin-left: -27px;"></div>
  71         </div>
  72
  73         <div>
  74             <div style="position: relative;"></div>
  75         </div>
  76
  77         <div>
  78             <div style="position: relative; left: 9px;"></div>
  79         </div>
  80
  81         <div>
  82             <div style="position: relative; left: -9px;"></div>
  83         </div>
  84
  85         <div>
  86             <div style="position: relative; left: -27px;"></div>
  87         </div>
  88
  89         <div>
  90             <div style="position: absolute;"></div>
  91         </div>
  92     </div>
  93 </body>