table-client-props.html (3900B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>client* 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 [ `<div style="display: flex"> 47 <table style="width: 20px; height: 30px; 48 border-width: 1px 2px 3px 4px; border-style: solid; 49 border-collapse: separate; box-sizing: content-box">`, 50 26, 34, 51 "Flex-level table with separated border" ], 52 [ `<div style="display: flex"> 53 <table style="width: 20px; height: 30px; 54 border-width: 2px 4px 6px 8px; border-style: solid; 55 border-collapse: collapse; box-sizing: content-box"> 56 <tr><td>`, 57 26, 34, 58 "Flex-level table with collapsed border" ], 59 [ `<table> 60 <caption style="width: 40px; height: 50px; padding: 1px 2px 3px 4px">`, 61 46, 54, 62 "Caption with padding" ], 63 [ `<table> 64 <caption style="width: 40px; height: 50px; 65 border-width: 1px 2px 3px 4px; border-style: solid">`, 66 46, 54, 67 "Caption with border" ], 68 [ `<table> 69 <caption style="width: 40px; height: 50px; margin: 1px 2px 3px 4px;">`, 70 46, 54, 71 "Caption with margin" ], 72 [ `<table style="caption-side: bottom"> 73 <caption style="width: 40px; height: 50px;">`, 74 40, 50, 75 "Bottom caption" ], 76 ]; 77 78 function target() { 79 return document.getElementById("test-target"); 80 } 81 82 function table() { 83 return target().querySelector("table"); 84 } 85 86 for (var t of tests) { 87 test(function() { 88 target().innerHTML = t[0]; 89 assert_equals(table().clientWidth, t[1], t[3] + " clientWidth"); 90 assert_equals(table().clientHeight, t[2], t[3] + " clientHeight"); 91 assert_equals(table().clientLeft, 0, t[3] + " clientLeft"); 92 assert_equals(table().clientTop, 0, t[3] + " clientTop"); 93 }, t[3]); 94 } 95 }, "Overall test to make sure there are no exceptions"); 96 </script>