html5-table-formatting-fixed-layout-1.html (1888B)
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 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#dimensioning-the-row-column-grid"> 6 <main> 7 8 <h1>HTML5 Table Formatting algorithm and Fixed Layout (row/column grid computation)</h1> 9 <p>Verifies how browsers deal with implicit tracks from which no cell does originate in fixed mode</p> 10 11 <hr/> 12 <p>This should be a 100px by 50px blue rectangle:</p> 13 <p>The table grid is 1x3, so the table is not empty and follows step 3A of the table layout algorithm</p> 14 <p>The consecutive columns were merged not together because the table-layout is fixed, but consecutive rows were.</p> 15 <p>Each track has a 0px breadth; the table width (respect. height) comes from 4x (respect. 2x) 25px-wide border spacings</p> 16 <x-table style="table-layout: fixed; width: 0; background: blue; border-spacing: 25px"> 17 <x-tr><x-td width="0" height="0" colspan="3" rowspan="3" style="padding: 0"></x-td></x-tr> 18 </x-table> 19 20 <hr/> 21 22 </main> 23 24 <script> 25 while(true) { 26 var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; 27 var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } 28 xtd.parentNode.replaceChild(td,xtd); 29 } 30 31 generate_tests(assert_equals, [ 32 [ 33 "Redundant columns of fixed-layout tables are not being merged", 34 document.querySelector("x-table:nth-of-type(1)").offsetWidth, 35 100 36 ], 37 [ 38 "Redundant rows of fixed-layout tables are not being merged", 39 document.querySelector("x-table:nth-of-type(1)").offsetHeight, 40 50 41 ], 42 ]) 43 44 </script>