| <?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 and scrollHeight</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; |
| overflow:hidden; |
| 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> |
| <script id="metadata_cache" type="text/javascript"><![CDATA[/* |
| { |
| "elemSimple.clientHeight is the height of the padding edge": {}, |
| "elemSimple.scrollHeight is its clientHeight": {}, |
| "elemSimple.clientWidth is the width of the padding edge": {}, |
| "elemSimple.scrollWidth is its clientWidth": {}, |
| "elemOverflow.clientHeight is the height of the padding edge": {}, |
| "elemOverflow.scrollHeight is the height of its scrolled contents (ignoring padding, since we overflowed)": {}, |
| "elemOverflow.clientWidth is the width of the padding edge": {}, |
| "elemOverflow.scrollHeight is the width of its scrolled contents (ignoring padding, since we overflowed)": {}, |
| "elemNestedOverflow.clientHeight is the height of the padding edge": {}, |
| "elemNestedOverflow.scrollHeight is the height of its scrolled contents (ignoring padding, since we overflowed)": {}, |
| "elemNestedOverflow.clientWidth is the height of the padding edge": {}, |
| "elemNestedOverflow.scrollWidth is the width of its scrolled contents (ignoring padding, since we overflowed)": {} |
| */ ]]></script> |
| </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. Opera and Webkit meet the spec, IE9 and Firefox |
| give the result here. It seems that in this case Opera and Webkit place |
| the padding-bottom below elemOverflow's child (i.e. below elemOverflow's bottom border); |
| you can scroll to it. IE9 and Firefox do not. I believe this is a Webkit/Opera bug |
| (If you remove overflow:hidden then the padding-bottom moves back to be above the bottom |
| border, as expected.) |
| The underlying issue seems to be whether bottom padding on a scrollable element is |
| always placed at the element's bottom border and not scrolled, or else deemed to |
| belong to the scrolled content and placed below the scrolled element's children. |
| Commenting out for now, because this is not really a CSSOM issue, but an issue |
| over the layout of elements with 'overflow'. |
| |
| test(function(){ |
| assert_equals(elemOverflow.scrollHeight, 150); |
| }, "elemOverflow.scrollHeight is the height of its scrolled contents (ignoring padding, since we overflowed)"); |
| */ |
| |
| test(function(){ |
| assert_equals(elemOverflow.clientWidth, 240); |
| }, "elemOverflow.clientWidth is the width 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(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. |
| */ |
| 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> |
