fixed-layout-1.html (4074B)
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/#width-distribution-in-fixed-mode"> 6 <main> 7 8 <h1>Fixed Layout</h1> 9 <p>Checks whether fixed layout is implemented properly</p> 10 11 <hr/> 12 <p>This should be a 100px-wide blue square:</p> 13 <p>Width is distributed equally between columns of auto size</p> 14 <x-table style="table-layout: fixed; width: 200px; border-spacing: 0px"> 15 <x-tr> 16 <x-td style="padding: 0; background: blue; height: 100px;"></x-td> 17 <x-td style="padding: 0"></x-td> 18 </x-tr> 19 </x-table> 20 21 <hr/> 22 <p>This should be a 100px-wide blue square:</p> 23 <p>Width is distributed equally between columns of auto size (even if they are defined by rows other than the first)</p> 24 <x-table style="table-layout: fixed; width: 200px; border-spacing: 0px"> 25 <x-tr><x-td style="padding: 0; background: blue; height: 100px;"></x-td></x-tr> 26 <x-tr><x-td style="padding: 0; height: 0px"></x-td><x-td style="padding: 0"></x-td></x-tr> 27 </x-table> 28 29 <hr/> 30 <p>This should be a 100px-wide blue square:</p> 31 <p>Widths defined on cells that are not the first row are ignored</p> 32 <x-table style="table-layout: fixed; width: 200px; border-spacing: 0px"> 33 <x-tr><x-td style="padding: 0; background: blue; height: 100px;"></x-td></x-tr> 34 <x-tr><x-td style="padding: 0; height: 0px; width: 200px;"></x-td><x-td style="padding: 0; width: 200px;"></x-td></x-tr> 35 </x-table> 36 37 <hr/> 38 <p>This should be a 100px-wide blue square:</p> 39 <p>The table has to grow to contain the widths defined for its columns</p> 40 <x-table style="table-layout: fixed; width: 50px; border-spacing: 0px"> 41 <x-tr><x-td style="padding: 0; background: blue; height: 100px; width: 100px;"></x-td></x-tr> 42 <x-tr><x-td style="padding: 0; height: 0px"></x-td><x-td style="padding: 0"></x-td></x-tr> 43 </x-table> 44 45 <hr/> 46 <p>This should be a 100px-wide blue square:</p> 47 <p>The first row is based on the visual order, not the dom order</p> 48 <x-table style="table-layout: fixed; width: 100px; border-spacing: 0px"> 49 <x-tr><x-td style="padding: 0; height: 0px"></x-td><x-td style="padding: 0"></x-td></x-tr> 50 <x-thead><x-tr><x-td style="padding: 0; background: blue; height: 100px; width: 100px;"></x-td></x-tr></x-thead> 51 </x-table> 52 53 </main> 54 55 <script> 56 while(true) { 57 var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; 58 var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } 59 xtd.parentNode.replaceChild(td,xtd); 60 } 61 62 generate_tests(assert_equals, [ 63 [ 64 "Table-layout:fixed distributes width equally to all auto-columns", 65 document.querySelector("x-table:nth-of-type(1) > x-tr:first-child > x-td:first-child").offsetWidth, 66 100 67 ], 68 [ 69 "Table-layout:fixed deals with columns generated by subsequent rows", 70 document.querySelector("x-table:nth-of-type(2) > x-tr:first-child > x-td:first-child").offsetWidth, 71 100 72 ], 73 [ 74 "Table-layout:fixed ignores sizes specified by subsequent rows", 75 document.querySelector("x-table:nth-of-type(3) > x-tr:first-child > x-td:first-child").offsetWidth, 76 100 77 ], 78 [ 79 "Table-layout:fixed grows the table if needed for minimum-width", 80 document.querySelector("x-table:nth-of-type(4) > x-tr:first-child > x-td:first-child").offsetWidth, 81 100 82 ], 83 [ 84 "Table-layout:fixed takes visual order into account, not dom order", 85 document.querySelector("x-table:nth-of-type(5) > x-tr:first-child > x-td:first-child").offsetWidth, 86 100 87 ], 88 ]) 89 90 </script>