table-scroll-props.html (3250B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>scroll* properties on tables</title> 4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface"> 5 <script src=/resources/testharness.js></script> 6 <script src=/resources/testharnessreport.js></script> 7 <div id="test-target" style="position: absolute"></div> 8 <script> 9 test(function() { 10 // Each test consists of four elements: the markup to use, the expected 11 // value of offsetWidth on the table, the expected value of offsetHeight 12 // on the table, and the description string. 13 var tests = [ 14 [ `<table style="width: 20px; height: 30px">`, 15 20, 30, 16 "Basic table" ], 17 [ `<table><caption style="width: 40px; height: 50px">`, 18 40, 50, 19 "Basic caption" ], 20 [ `<table style="width: 20px; height: 30px"> 21 <caption style="width: 10px; height: 20px">`, 22 20, 50, 23 "Table and narrower caption" ], 24 [ `<table style="width: 20px; height: 30px"> 25 <caption style="width: 40px; height: 20px">`, 26 40, 50, 27 "Table and wider caption" ], 28 [ `<table style="width: 20px; height: 30px; padding: 1px 2px 3px 4px">`, 29 20, 30, 30 "Table with padding" ], 31 [ `<table style="width: 20px; height: 30px; padding: 1px 2px 3px 4px; 32 box-sizing: content-box">`, 33 26, 34, 34 "Table with padding and content-box sizing" ], 35 [ `<table style="width: 20px; height: 30px; 36 border-width: 1px 2px 3px 4px; border-style: solid; 37 border-collapse: separate; box-sizing: content-box">`, 38 26, 34, 39 "Table with separated border" ], 40 [ `<table style="width: 20px; height: 30px; 41 border-width: 2px 4px 6px 8px; border-style: solid; 42 border-collapse: collapse; box-sizing: content-box"> 43 <tr><td>`, 44 26, 34, 45 "Table with collapsed border" ], 46 [ `<table> 47 <caption style="width: 40px; height: 50px; padding: 1px 2px 3px 4px">`, 48 46, 54, 49 "Caption with padding" ], 50 [ `<table> 51 <caption style="width: 40px; height: 50px; 52 border-width: 1px 2px 3px 4px; border-style: solid">`, 53 46, 54, 54 "Caption with border" ], 55 [ `<table> 56 <caption style="width: 40px; height: 50px; margin: 1px 2px 3px 4px;">`, 57 46, 54, 58 "Caption with margin" ], 59 [ `<table style="caption-side: bottom"> 60 <caption style="width: 40px; height: 50px;">`, 61 40, 50, 62 "Bottom caption" ], 63 ]; 64 65 function target() { 66 return document.getElementById("test-target"); 67 } 68 69 function table() { 70 return target().querySelector("table"); 71 } 72 73 for (var t of tests) { 74 test(function() { 75 target().innerHTML = t[0]; 76 assert_equals(table().scrollWidth, t[1], t[3] + " scrollWidth"); 77 assert_equals(table().scrollHeight, t[2], t[3] + " scrollHeight"); 78 assert_equals(table().scrollLeft, 0, t[3] + " scrollLeft"); 79 assert_equals(table().scrollTop, 0, t[3] + " scrollTop"); 80 }, t[3]); 81 } 82 }, "Overall test to make sure there are no exceptions"); 83 </script>