| <!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> |
