| <?xml version="1.0" encoding="UTF-8"?> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <title>CSS Test: CSSOM View scrollWidth/scrollHeight (for nonscrollable elements)</title> |
| <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> |
| <link rel="help" href="http://www.w3.org/TR/cssom-view/#dom-element-scrollwidth" /> |
| <meta name="flags" content="dom" /> |
| <script src="/resources/testharness.js" type="text/javascript" /> |
| <script src="/resources/testharnessreport.js" type="text/javascript" /> |
| <style type="text/css"><![CDATA[ |
| #elemSimple, #elemOverflow, #elemNestedOverflow { |
| border:1px solid black; |
| width:200px; |
| height:40px; |
| padding-bottom:50px; |
| padding-right:40px; |
| } |
| #elemSimple > div { |
| background:yellow; |
| width:60px; |
| height:30px; |
| } |
| #elemOverflow > div { |
| background:yellow; |
| width:250px; |
| height:150px; |
| } |
| #elemNestedOverflow > div { |
| background:yellow; |
| width:60px; |
| height:30px; |
| } |
| #elemNestedOverflow > div > div { |
| background:blue; |
| width:250px; |
| height:150px; |
| } |
| ]]></style> |
| </head> |
| <body> |
| <noscript>Test not run - javascript required.</noscript> |
| <div id="log" /> |
| <div id="elemSimple"> |
| <div /> |
| </div> |
| <div id="elemOverflow"> |
| <div /> |
| </div> |
| <div id="elemNestedOverflow"> |
| <div> |
| <div /> |
| </div> |
| </div> |
| <script type="text/javascript"><![CDATA[ |
| var elemSimple = document.getElementById("elemSimple"); |
| var elemOverflow = document.getElementById("elemOverflow"); |
| var elemNestedOverflow = document.getElementById("elemNestedOverflow"); |
| |
| test(function(){ |
| assert_equals(elemSimple.clientHeight, 90); |
| }, "elemSimple.clientHeight is the height of the padding edge"); |
| |
| test(function(){ |
| assert_equals(elemSimple.scrollHeight, 90); |
| }, "elemSimple.scrollHeight is its clientHeight"); |
| |
| test(function(){ |
| assert_equals(elemSimple.clientWidth, 240); |
| }, "elemSimple.clientWidth is the width of the padding edge"); |
| |
| test(function(){ |
| assert_equals(elemSimple.scrollWidth, 240); |
| }, "elemSimple.scrollWidth is its clientWidth"); |
| |
| test(function(){ |
| assert_equals(elemOverflow.clientHeight, 90); |
| }, "elemOverflow.clientHeight is the height of the padding edge"); |
| |
| /* This test differs from the spec. All major browsers give the result here, ignoring |
| the bottom padding. |
| */ |
| test(function(){ |
| assert_equals(elemOverflow.scrollHeight, 150); |
| }, "elemOverflow.scrollHeight is the height of its scrolled contents (ignoring padding, since we overflowed)"); |
| |
| test(function(){ |
| }, "elemOverflow.clientWidth is the width of the padding edge"); |
| assert_equals(elemOverflow.clientWidth, 240); |
| |
| /* This test differs from the spec. All major browsers give the result here, ignoring |
| the right padding. |
| */ |
| test(function(){ |
| assert_equals(elemOverflow.scrollWidth, 250); |
| }, "elemOverflow.scrollHeight is the width of its scrolled contents (ignoring padding, since we overflowed)"); |
| |
| test(function(){ |
| assert_equals(elemNestedOverflow.clientHeight, 90); |
| }, "elemNestedOverflow.clientHeight is the height of the padding edge"); |
| |
| /* This test differs from the spec. All major browsers give the result here, ignoring the |
| bottom padding. |
| */ |
| test(function(){ |
| assert_equals(elemNestedOverflow.scrollHeight, 150); |
| }, "elemNestedOverflow.scrollHeight is the height of its scrolled contents (ignoring padding, since we overflowed)"); |
| |
| test(function(){ |
| assert_equals(elemNestedOverflow.clientWidth, 240); |
| }, "elemNestedOverflow.clientWidth is the height of the padding edge"); |
| |
| /* This test differs from the spec. All major browsers give the result here, ignoring |
| the right padding. |
| */ |
| test(function(){ |
| assert_equals(elemNestedOverflow.scrollWidth, 250); |
| }, "elemNestedOverflow.scrollWidth is the width of its scrolled contents (ignoring padding, since we overflowed)"); |
| |
| ]]></script> |
| </body> |
| </html> |
