computing-table-width-1.html (1658B)
1 <!doctype html> 2 <script src='/resources/testharness.js'></script> 3 <script src='/resources/testharnessreport.js'></script> 4 <link rel='stylesheet' href='../support/base.css' /> 5 6 <link rel="author" title="Greg Whitworth" href="gwhit@microsoft.com" /> 7 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width" /> 8 9 <style> 10 x-table span { 11 display: inline-block; 12 background: green; 13 height: 100px; 14 } 15 </style> 16 <main> 17 <h1>Width Distribution</h1> 18 <h4>"Computing the table width"</h4> 19 <p>This is testing that the table root's width when the TABLEROOT width is auto <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec Text</a></p> 20 <x-table id="one"> 21 <x-caption> 22 <span style="width: 100px; background: blue;"></span> 23 </x-caption> 24 <x-tr> 25 <x-td> 26 <span style="width: 100px;"></span> 27 </x-td> 28 <x-td> 29 <span style="width: 200px"></span> 30 </x-td> 31 </x-tr> 32 </x-table> 33 </main> 34 35 <script> 36 while(true) { 37 var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; 38 var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } 39 xtd.parentNode.replaceChild(td,xtd); 40 } 41 42 var i = 1; 43 generate_tests(assert_equals, [ 44 [ 45 'The box should be 300px since that is the size of the content', 46 document.getElementById('one').offsetWidth, 47 300 48 ] 49 ]); 50 </script> 51 </html>