position-absolute-table-001.html (4101B)
1 <!DOCTYPE html> 2 <title>CSS Position Absolute: table width/height</title> 3 <link rel="author" href="mailto:atotic@google.com"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <link rel="help" href="https://www.w3.org/TR/css-position-3/#abs-non-replaced-width"> 7 <meta name="assert" content="Table css width/height are different. Make sure absolute position respects the differences."> 8 <style> 9 10 .container { 11 margin-bottom: 8px; 12 position: relative; 13 width: 300px; 14 height: 220px; 15 background: gray; 16 } 17 table { 18 position: absolute; 19 border: 10px solid green; 20 width: 100px; 21 height: 100px; 22 background: yellow; 23 right: 0; 24 bottom: 0; 25 padding: 10px; 26 border-spacing: 0 0; 27 } 28 .contentbox { 29 box-sizing: content-box; 30 width: 60px; 31 height: 60px; 32 } 33 td { 34 padding: 0; 35 } 36 37 </style> 38 <p>Table css width/height are interpreted differently: they are the minimum width. Absolute positioning code should respect this.</p> 39 <div class="container"> 40 <table id="one"> 41 <td>t1</td> 42 </table> 43 </div> 44 <div class="container"> 45 <table id="two"> 46 <td><div style="width:160px;height:160px;background:orange">div makes cell larger.</div></td> 47 </table> 48 </div> 49 <div class="container"> 50 <table id="one-border" style="box-sizing: border-box"> 51 <td>t1</td> 52 </table> 53 </div> 54 <div class="container"> 55 <table id="two-border" style="box-sizing: border-box"> 56 <td><div style="width:160px;height:160px;background:orange">div makes cell larger.</div></td> 57 </table> 58 </div> 59 <div class="container"> 60 <table id="one-content" class="contentbox"> 61 <td>t1</td> 62 </table> 63 </div> 64 <div class="container"> 65 <table id="two-content" class="contentbox"> 66 <td><div style="width:160px;height:160px;background:orange">div makes cell larger.</div></td> 67 </table> 68 </div> 69 <script> 70 test(() => { 71 let t = document.getElementById("one"); 72 assert_equals(t.offsetWidth, 100); 73 assert_equals(t.offsetHeight, 100); 74 assert_equals(t.parentNode.offsetHeight, t.offsetTop + t.offsetHeight, "bottom position is 0"); 75 assert_equals(t.parentNode.offsetWidth, t.offsetLeft + t.offsetWidth, "right position is 0"); 76 }, 'table size is interpreted as border-box width by default'); 77 test(() => { 78 let t = document.getElementById("two"); 79 assert_equals(t.offsetWidth, 200); 80 assert_equals(t.offsetHeight, 200); 81 assert_equals(t.parentNode.offsetWidth, t.offsetLeft + t.offsetWidth, "right position is 0"); 82 assert_equals(t.parentNode.offsetHeight, t.offsetTop + t.offsetHeight, "bottom position is 0"); 83 }, 'table size is interpreted as minimum width'); 84 test(() => { 85 let t = document.getElementById("one-border"); 86 assert_equals(t.offsetWidth, 100); 87 assert_equals(t.offsetHeight, 100); 88 assert_equals(t.parentNode.offsetHeight, t.offsetTop + t.offsetHeight, "bottom position is 0"); 89 assert_equals(t.parentNode.offsetWidth, t.offsetLeft + t.offsetWidth, "right position is 0"); 90 }, 'table size border-box'); 91 test(() => { 92 let t = document.getElementById("two-border"); 93 assert_equals(t.offsetWidth, 200); 94 assert_equals(t.offsetHeight, 200); 95 assert_equals(t.parentNode.offsetWidth, t.offsetLeft + t.offsetWidth, "right position is 0"); 96 assert_equals(t.parentNode.offsetHeight, t.offsetTop + t.offsetHeight, "bottom position is 0"); 97 }, 'table size border-box interpreted as minimum width'); 98 test(() => { 99 let t = document.getElementById("one-content"); 100 assert_equals(t.offsetWidth, 100); 101 assert_equals(t.offsetHeight, 100); 102 assert_equals(t.parentNode.offsetHeight, t.offsetTop + t.offsetHeight, "bottom position is 0"); 103 assert_equals(t.parentNode.offsetWidth, t.offsetLeft + t.offsetWidth, "right position is 0"); 104 }, 'table size content-box'); 105 test(() => { 106 let t = document.getElementById("two-content"); 107 assert_equals(t.offsetWidth, 200); 108 assert_equals(t.offsetHeight, 200); 109 assert_equals(t.parentNode.offsetWidth, t.offsetLeft + t.offsetWidth, "right position is 0"); 110 assert_equals(t.parentNode.offsetHeight, t.offsetTop + t.offsetHeight, "bottom position is 0"); 111 }, 'table size content-box interpreted as minimum width'); 112 </script>