table-model-fixup.html (6599B)
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/#fixup"> 6 <main> 7 8 <h1>Table fixup</h1> 9 <p>Check that missing elements are being created properly</p> 10 11 <hr/> 12 <p>This should be a 100px by 100px blue square:</p> 13 <p>1.1. Children of a table-column are treated as if they had display: none.</p> 14 <div style="width: 100px; height: 100px; background: blue;"><x-col><div id="target1" style="display: block!important; visibility: visible!important; width: 100px; height: 100px; background: red;"></div></x-col></div> 15 16 <hr/> 17 <p>This should be a 100px by 100px blue square:</p> 18 <p>1.2. Children of a table-column-group which are not a table-column are treated as if they had display: none.</p> 19 <div style="width: 100px; height: 100px; background: blue;"><x-colgroup><div id="target2" style="display: block!important; visibility: visible!important; width: 100px; height: 100px; background: red;"></div></x-colgroup></div> 20 21 <hr/> 22 <p>This should be a 100px by 100px blue square:</p> 23 <p>2.1. An anonymous table-row box must be generated around each sequence of consecutive children of a table-root box which are not proper table child boxes. </p> 24 <x-table><x-td id="target3" style="width: 50%; height: 0px; background: blue;"></x-td> <x-td style="width: 50px; height: 100px; background: blue;"></x-td></x-table> 25 26 <hr/> 27 <p>This should read as "1\t2\t3\n x":</p> 28 <p>2.2. An anonymous table-row box must be generated around each sequence of consecutive children of a table-row-grouping box which are not table-row boxes.</p> 29 <x-table><x-tbody> 30 <span id="target4a">1</span> 31 <x-col style="width: 100px"></x-col> 32 <x-td id="target4b">2</x-td> 33 <span id="target4c">3</span> 34 <x-caption id="target4d">x</x-caption> 35 </x-tbody><x-col style="width: 50px"></x-col><x-col style="width: 50px"></x-col><x-col style="width: 50px"></x-col></x-table> 36 37 <hr/> 38 <p>This should read as "1\n1\t2":</p> 39 <p>2.1. and 2.2. happens before 2.3.</p> 40 <x-table> 41 <span id="target5a">1</span> 42 <x-col style="width: 50px"></x-col> 43 <x-td id="target5b">1</x-td> 44 <span id="target5c">2</span> 45 </x-table> 46 47 <hr/> 48 <p>This should read as "1\t2":</p> 49 <p>3.2. An anonymous table or inline-table box must be generated around each sequence of consecutive proper table child box which are misparented</p> 50 <table><tr><td id="target6a">1</td><td style="display: table-caption" id="target6b">2</td></tr><col style="width: 50px"></x-col></table> 51 52 <hr/> 53 <p>This should read as "A B":</p> 54 <p>1.4. Anonymous inline boxes which contains only white space and are between two immediate siblings *each* of which is a table-non-root element, are treated as if they had display: none.</p> 55 <x-table><x-tr> <span id="target7a">A</span> <span id="target7b">B</span> </x-tr></x-table> 56 57 </main> 58 59 <script> 60 while(true) { 61 var xtd = document.querySelector('x-td[rowspan], x-td[colspan]'); if(!xtd) break; 62 var td = document.createElement('td'); for(var i = xtd.attributes.length; i--;) { td.setAttribute(xtd.attributes[i].name,xtd.attributes[i].value) } 63 xtd.parentNode.replaceChild(td,xtd); 64 } 65 66 var i = 1; 67 generate_tests(assert_equals, [ 68 [ 69 "1.1. Children of a table-column are treated as if they had display: none.", 70 document.querySelector("div[style*='red']#target"+(i++)+"").offsetWidth, 71 0 72 ], 73 [ 74 "1.2. Children of a table-column-group which are not a table-column are treated as if they had display: none.", 75 document.querySelector("div[style*='red']#target"+(i++)+"").offsetWidth, 76 0 77 ], 78 [ 79 "2.1. An anonymous table-row box must be generated around each sequence of consecutive children of a table-root box which are not proper table child boxes. (1/2)", 80 document.querySelector("#target"+(i++)+"").offsetWidth, 81 50 82 ], 83 [ 84 "2.1. An anonymous table-row box must be generated around each sequence of consecutive children of a table-root box which are not proper table child boxes. (2/2)", 85 document.querySelector("#target"+(i-1)+"").offsetHeight, 86 100 87 ], 88 [ 89 "2.2. An anonymous table-row box must be generated around each sequence of consecutive children of a table-row-grouping box which are not table-row boxes. (1/3)", 90 document.querySelector("#target"+(i++)+"b").offsetLeft - document.querySelector("#target"+(i-1)+"a").offsetLeft, 91 50 92 ], 93 [ 94 "2.2. An anonymous table-row box must be generated around each sequence of consecutive children of a table-row-grouping box which are not table-row boxes. (2/3)", 95 document.querySelector("#target"+(i-1)+"c").offsetLeft - document.querySelector("#target"+(i-1)+"a").offsetLeft, 96 100 97 ], 98 [ 99 "2.2. An anonymous table-row box must be generated around each sequence of consecutive children of a table-row-grouping box which are not table-row boxes. (3/3)", 100 document.querySelector("#target"+(i-1)+"d").offsetLeft, 101 document.querySelector("#target"+(i-1)+"c").offsetLeft 102 ], 103 [ 104 "2.3 happens after 2.1. and 2.2. (1/2)", 105 document.querySelector("#target"+(i++)+"b").offsetLeft < 25, 106 true 107 ], 108 [ 109 "2.3 happens after 2.1. and 2.2. (2/2)", 110 document.querySelector("#target"+(i-1)+"c").offsetLeft > 50, 111 true 112 ], 113 [ 114 "3.2. An anonymous table or inline-table box must be generated around each sequence of consecutive proper table child box which are misparented", 115 document.querySelector("#target"+(i++)+"b").offsetLeft > document.querySelector("#target"+(i-1)+"a").offsetLeft, 116 true 117 ], 118 [ 119 "1.4. Anonymous inline boxes which contains only white space and are between two immediate siblings *each* of which is a table-non-root element, are treated as if they had display: none.", 120 document.querySelector("#target"+(i++)+"b").offsetLeft > 1 + document.querySelector("#target"+(i-1)+"a").offsetLeft + document.querySelector("#target"+(i-1)+"a").offsetWidth, 121 true 122 ], 123 ]) 124 125 </script>