scrollWidthHeightWhenNotScrollable.xht (4749B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>CSS Test: CSSOM View scrollWidth/scrollHeight (for nonscrollable elements)</title> 6 <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> 7 <link rel="help" href="http://www.w3.org/TR/cssom-view/#dom-element-scrollwidth" /> 8 <meta name="flags" content="dom" /> 9 <script src="/resources/testharness.js" type="text/javascript" /> 10 <script src="/resources/testharnessreport.js" type="text/javascript" /> 11 <style type="text/css"><![CDATA[ 12 #elemSimple, #elemOverflow, #elemNestedOverflow { 13 border:1px solid black; 14 width:200px; 15 height:40px; 16 padding-bottom:50px; 17 padding-right:40px; 18 } 19 #elemSimple > div { 20 background:yellow; 21 width:60px; 22 height:30px; 23 } 24 #elemOverflow > div { 25 background:yellow; 26 width:250px; 27 height:150px; 28 } 29 #elemNestedOverflow > div { 30 background:yellow; 31 width:60px; 32 height:30px; 33 } 34 #elemNestedOverflow > div > div { 35 background:blue; 36 width:250px; 37 height:150px; 38 } 39 ]]></style> 40 </head> 41 <body> 42 <noscript>Test not run - javascript required.</noscript> 43 <div id="log" /> 44 <div id="elemSimple"> 45 <div /> 46 </div> 47 <div id="elemOverflow"> 48 <div /> 49 </div> 50 <div id="elemNestedOverflow"> 51 <div> 52 <div /> 53 </div> 54 </div> 55 <script type="text/javascript"><![CDATA[ 56 var elemSimple = document.getElementById("elemSimple"); 57 var elemOverflow = document.getElementById("elemOverflow"); 58 var elemNestedOverflow = document.getElementById("elemNestedOverflow"); 59 60 test(function(){ 61 assert_equals(elemSimple.clientHeight, 90); 62 }, "elemSimple.clientHeight is the height of the padding edge"); 63 64 test(function(){ 65 assert_equals(elemSimple.scrollHeight, 90); 66 }, "elemSimple.scrollHeight is its clientHeight"); 67 68 test(function(){ 69 assert_equals(elemSimple.clientWidth, 240); 70 }, "elemSimple.clientWidth is the width of the padding edge"); 71 72 test(function(){ 73 assert_equals(elemSimple.scrollWidth, 240); 74 }, "elemSimple.scrollWidth is its clientWidth"); 75 76 test(function(){ 77 assert_equals(elemOverflow.clientHeight, 90); 78 }, "elemOverflow.clientHeight is the height of the padding edge"); 79 80 test(function(){ 81 assert_equals(elemOverflow.scrollHeight, 200); 82 }, "elemOverflow.scrollHeight is the height of its scrolled contents (plus padding, since we overflowed)"); 83 84 test(function(){ 85 assert_equals(elemOverflow.clientWidth, 240); 86 }, "elemOverflow.clientWidth is the width of the padding edge"); 87 88 test(function(){ 89 assert_equals(elemOverflow.scrollWidth, 290); 90 }, "elemOverflow.scrollHeight is the width of its scrolled contents (plus padding)"); 91 92 test(function(){ 93 assert_equals(elemNestedOverflow.clientHeight, 90); 94 }, "elemNestedOverflow.clientHeight is the height of the padding edge"); 95 96 /* This test differs from the spec. All major browsers give the result here, ignoring the 97 bottom padding. 98 */ 99 test(function(){ 100 assert_equals(elemNestedOverflow.scrollHeight, 150); 101 }, "elemNestedOverflow.scrollHeight is the height of its scrolled contents (ignoring padding, since we overflowed)"); 102 103 test(function(){ 104 assert_equals(elemNestedOverflow.clientWidth, 240); 105 }, "elemNestedOverflow.clientWidth is the height of the padding edge"); 106 107 /* This test differs from the spec. All major browsers give the result here, ignoring 108 the right padding. 109 */ 110 test(function(){ 111 assert_equals(elemNestedOverflow.scrollWidth, 250); 112 }, "elemNestedOverflow.scrollWidth is the width of its scrolled contents (ignoring padding, since we overflowed)"); 113 114 ]]></script> 115 </body> 116 </html>