html5-table-formatting-2.html (6794B)
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/#missing-cells-fixup"> 6 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#dimensioning-the-row-column-grid"> 7 <main> 8 9 <h1>HTML5 Table Formatting algorithm (row/column grid computation)</h1> 10 <p>Verifies how browsers deal with explicit tracks from which no cell does originate</p> 11 12 <hr/> 13 <p>This should be a 100px by 100px blue square:</p> 14 <p>The table grid is 2x2, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> 15 <p>The consecutive tracks are not merged together because they are all defined explicitely by a table-column or a table-row</p> 16 <x-table style="background: blue;"> 17 <x-col style="width: 50px"></x-col> 18 <x-col style="width: 50px"></x-col> 19 <x-tr style="height: 50px"></x-tr> 20 <x-tr style="height: 50px"></x-tr> 21 </x-table> 22 23 <hr/> 24 <p>This should be a 175px by 175px blue square:</p> 25 <p>The table grid is 2x2, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> 26 <p>The consecutive tracks are not merged together because they are all defined explicitely by a table-column or a table-row</p> 27 <p>Three 25px border-spacing causes the addition of 75px</p> 28 <x-table style="background: blue; border-spacing: 25px"> 29 <x-col style="width: 50px"></x-col> 30 <x-col style="width: 50px"></x-col> 31 <x-tr style="height: 50px"></x-tr> 32 <x-tr style="height: 50px"></x-tr> 33 </x-table> 34 35 <hr/> 36 <p>This should be a 175px by 175px blue square:</p> 37 <p>The table grid is 2x2, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> 38 <p>The consecutive tracks are not merged together because they are all defined explicitely by a table-column or a table-row</p> 39 <p>Three 25px border-spacing causes the addition of 75px</p> 40 <x-table style="background: blue; border-spacing: 25px"> 41 <x-col style="width: 50px"></x-col> 42 <x-col style="width: 50px"></x-col> 43 <x-tr style="height: 50px"><x-td></x-td><x-td></x-td></x-tr> 44 <x-tr style="height: 50px"></x-tr> 45 </x-table> 46 47 <hr/> 48 <p>This should be a 175px by 175px blue square:</p> 49 <p>The table grid is 2x2, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> 50 <p>The consecutive tracks are not merged together because they are all defined explicitely by a table-column or a table-row</p> 51 <p>Three 25px border-spacing causes the addition of 75px</p> 52 <x-table style="background: blue; border-spacing: 25px"> 53 <x-col style="width: 50px"></x-col> 54 <x-col style="width: 50px"></x-col> 55 <x-tr style="height: 50px"></x-tr> 56 <x-tr style="height: 50px"><x-td></x-td><x-td></x-td></x-tr> 57 </x-table> 58 59 <hr/> 60 <p>This should be a 175px by 175px blue square:</p> 61 <p>The table grid is 2x2, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> 62 <p>The consecutive tracks are not merged together because they are all defined explicitely by a table-column or a table-row</p> 63 <p>Three 25px border-spacing causes the addition of 75px</p> 64 <x-table style="background: blue; border-spacing: 25px"> 65 <x-col style="width: 50px"></x-col> 66 <x-col style="width: 50px"></x-col> 67 <x-tr style="height: 50px"><x-td></x-td><x-td></x-td></x-tr> 68 <x-tr style="height: 50px"><x-td></x-td><x-td></x-td></x-tr> 69 </x-table> 70 71 <hr/> 72 <p>This should be a 175px by 175px blue square:</p> 73 <p>The table grid is 2x2, so the table is not empty and follows step 3A of the table layout algorithm (which adds anonymous cell boxes)</p> 74 <p>The consecutive tracks are not merged together because they are all defined explicitely by a table-column or a table-row</p> 75 <p>Three 25px border-spacing causes the addition of 75px</p> 76 <x-table style="background: blue; border-spacing: 25px"> 77 <x-col style="width: 50px"></x-col> 78 <x-col style="width: 50px"></x-col> 79 <x-tr style="height: 50px"><x-td></x-td></x-tr> 80 <x-tr style="height: 50px"><x-td></x-td></x-tr> 81 </x-table> 82 83 </main> 84 85 <script> 86 87 generate_tests(assert_equals, [ 88 [ 89 "Explicitely defined columns are not merged", 90 document.querySelector("x-table:nth-of-type(1)").offsetWidth, 91 100 92 ], 93 [ 94 "Explicitely defined rows are not merged", 95 document.querySelector("x-table:nth-of-type(1)").offsetHeight, 96 100 97 ], 98 [ 99 "Border-spacing is added between any two unmerged columns (1)", 100 document.querySelector("x-table:nth-of-type(2)").offsetWidth, 101 175 102 ], 103 [ 104 "Border-spacing is added between any two unmerged rows (1)", 105 document.querySelector("x-table:nth-of-type(2)").offsetHeight, 106 175 107 ], 108 [ 109 "Border-spacing is added between any two unmerged columns (2)", 110 document.querySelector("x-table:nth-of-type(3)").offsetWidth, 111 175 112 ], 113 [ 114 "Border-spacing is added between any two unmerged rows (2)", 115 document.querySelector("x-table:nth-of-type(3)").offsetHeight, 116 175 117 ], 118 [ 119 "Border-spacing is added between any two unmerged columns (3)", 120 document.querySelector("x-table:nth-of-type(4)").offsetWidth, 121 175 122 ], 123 [ 124 "Border-spacing is added between any two unmerged rows (3)", 125 document.querySelector("x-table:nth-of-type(4)").offsetHeight, 126 175 127 ], 128 [ 129 "Border-spacing is added between any two unmerged columns (4)", 130 document.querySelector("x-table:nth-of-type(5)").offsetWidth, 131 175 132 ], 133 [ 134 "Border-spacing is added between any two unmerged rows (4)", 135 document.querySelector("x-table:nth-of-type(5)").offsetHeight, 136 175 137 ], 138 [ 139 "Border-spacing is added between any two unmerged columns (5)", 140 document.querySelector("x-table:nth-of-type(6)").offsetWidth, 141 175 142 ], 143 [ 144 "Border-spacing is added between any two unmerged rows (5)", 145 document.querySelector("x-table:nth-of-type(6)").offsetHeight, 146 175 147 ], 148 ]) 149 150 </script>