html5-table-formatting-1.html (4027B)
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/#table-layout-algorithm"> 6 <main> 7 8 <h1>HTML5 Table Formatting algorithm (row/column grid computation)</h1> 9 <p>Verifies how browser define and act on empty tables</p> 10 11 <hr/> 12 <p>This should be a 50px by 50px blue square:</p> 13 <p>The table grid is 0x0, so the table is empty and follows step 3B of the table layout algorithm</p> 14 <x-table style="min-width: 50px; height: 50px; background: blue;"></x-table> 15 16 <hr/> 17 <p>This should be a 50px by 50px blue square:</p> 18 <p>The table grid is 2x0, so the table is empty and follows step 3B of the table layout algorithm</p> 19 <x-table style="min-width: 50px; height: 50px; background: blue;"> 20 <x-col style="width: 100px"></x-col> 21 <x-col style="width: 100px"></x-col> 22 </x-table> 23 24 <hr/> 25 <p>This should be a 50px by 50px blue square:</p> 26 <p>The table grid is 0x1, so the table is empty and follows step 3B of the table layout algorithm</p> 27 <x-table style="min-width: 50px; height: 50px; background: blue;"> 28 <x-tr style="height: 100px; background: orange;"></x-tr> 29 </x-table> 30 31 <hr/> 32 <p>This should be a 200px by 100px blue rectangle:</p> 33 <p>The table grid is 2x1, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> 34 <x-table style="min-width: 50px; height: 50px; background: blue;"> 35 <x-col style="width: 100px"></x-col> 36 <x-col style="width: 100px"></x-col> 37 <x-tr style="height: 100px; background: orange;"></x-tr> 38 </x-table> 39 40 <hr/> 41 <p>This should be a 200px by 100px half-blue half-orange rectangle:</p> 42 <p>The table grid is 2x1, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> 43 <x-table style="min-width: 50px; height: 50px; background: blue;"> 44 <x-col style="width: 100px"></x-col> 45 <x-col style="width: 100px"></x-col> 46 <x-tr style="height: 100px; background: orange;"><x-td></x-td></x-tr> 47 </x-table> 48 49 <hr/> 50 <p>This should be a 200px by 100px orange rectangle:</p> 51 <p>The table grid is 2x1, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> 52 <x-table style="min-width: 50px; height: 50px; background: blue;"> 53 <x-col style="width: 100px"></x-col> 54 <x-col style="width: 100px"></x-col> 55 <x-tr style="height: 100px; background: orange;"><x-td></x-td><x-td></x-td></x-tr> 56 </x-table> 57 58 </main> 59 60 <script> 61 62 generate_tests(assert_equals, [ 63 [ 64 "Empty tables can still get a lsyout", 65 document.querySelector("x-table:nth-of-type(1)").offsetWidth, 66 50 67 ], 68 [ 69 "Empty tables do not take table-columns into account", 70 document.querySelector("x-table:nth-of-type(2)").offsetWidth, 71 50 72 ], 73 [ 74 "Empty tables do not take table-rows into account", 75 document.querySelector("x-table:nth-of-type(3)").offsetHeight, 76 50 77 ], 78 ]) 79 80 generate_tests(assert_equals, [ 81 [ 82 "Table-columns are taken into account after missing cells are generated (empty line)", 83 document.querySelector("x-table:nth-of-type(4)").offsetWidth, 84 200 85 ], 86 [ 87 "Table-columns are taken into account after missing cells are generated (partially empty line)", 88 document.querySelector("x-table:nth-of-type(5)").offsetWidth, 89 200 90 ], 91 [ 92 "Table-columns are taken into account after missing cells are generated (non-empty line)", 93 document.querySelector("x-table:nth-of-type(6)").offsetWidth, 94 200 95 ], 96 ]) 97 98 </script>