html-to-css-mapping-2.html (11769B)
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/#mapping"> 6 <main> 7 8 <h1>HTML-2-CSS Mapping</h1> 9 <p>Checks that browsers implement properly the html2css stylesheet (rules about borders, disabling border-collapse for clarity)</p> 10 <style>table { border-collapse: separate !important; }</style> 11 12 <hr/> 13 <p>1: The border of the table element should be 0px hidden gray:</p> 14 <p> 15 <code>border-width:0px</code> is the <code>initial</code> value;<br/> 16 <code>border-style:hidden</code> comes from <code>table:matches(..., [rules=groups], ...)</code>;<br/> 17 <code>border-color:gray</code> comes from <code>table</code> 18 </p> 19 <div><table border="0" rules="groups"><tbody><tr><td></td></tr></tbody></table></div> 20 21 <hr/> 22 <p>2: The border of the table element should be 1px outset black:</p> 23 <p> 24 <code>border-width:1px</code> comes from <code>table[frame=box] (1/2)</code>;<br/> 25 <code>border-style:outset</code> comes from <code>table[frame=box] (2/2)</code>;<br/> 26 <code>border-color:black</code> comes from <code>table:matches(..., [rules=groups], ...)</code> 27 </p> 28 <div><table border="0" rules="groups" frame="box"><tbody><tr><td></td></tr></tbody></table></div> 29 30 <hr/> 31 <p>3a: The border of the table element should be 10px outset gray:</p> 32 <p> 33 <code>border-width:10px</code> comes from <code>table[border=$w]</code>;<br/> 34 <code>border-style:outset</code> comes from <code>table[frame=box] (2/2)</code>;<br/> 35 <code>border-color:gray</code> comes from <code>table[border=$w]</code> 36 </p> 37 <hr style="display:none"/> 38 <p>3b: The border-top of the td element should be 1px inset gray:</p> 39 <p> 40 <code>border-width:1px</code> comes from <code>table[border=$w] > ...td</code>;<br/> 41 <code>border-style:inset</code> comes from <code>table[border=$w] > ...td</code>;<br/> 42 <code>border-color:gray</code> comes from <code>table[border=$w] > ...td</code> 43 </p> 44 <hr style="display:none"/> 45 <p>3c: The border-left of the td element should be 1px hidden gray:</p> 46 <p> 47 <code>border-width:1px</code> comes from <code>table[border=$w] > ...td</code>;<br/> 48 <code>border-style:inset</code> comes from <code>table[border=$w] > ...td</code>;<br/> 49 <code>border-color:gray</code> comes from <code>table[border=$w] > ...td</code> 50 </p> 51 <div><table border="10" rules="groups" frame="box"><tbody><tr><td></td></tr></tbody></table></div> 52 53 <hr/> 54 <p>4a: The border of the table element should be 1px outset gray:</p> 55 <p> 56 <code>border-width:10px</code> comes from <code>table[border=$w]</code>;<br/> 57 <code>border-style:outset</code> comes from <code>table[border=$w]</code>;<br/> 58 <code>border-color:gray</code> comes from <code>table[border=$w]</code> 59 </p> 60 <hr style="display:none"> 61 <p>4b: The top border of the td element should be 1px solid gray:</p> 62 <p> 63 <code>border-width:1px</code> comes from <code>table[rules=all] > ... td</code>;<br/> 64 <code>border-style:solid</code> comes from <code>table[rules=all] > ... td</code>;<br/> 65 <code>border-color:gray</code> comes from <code>table[rules=all] > ... td</code> 66 </p> 67 <div><table border="yes" rules="all"><tr><td></td></tr></table></div> 68 69 <hr> 70 <p>5a: The left border of the table element should be ? hidden ?:</p> 71 <p> 72 <code>border-style:hidden</code> comes from <code>table[frame=hsides]</code>;<br/> 73 </p> 74 <hr style="display:none"> 75 <p>5b: The right border of the table element should be 10px solid gray:</p> 76 <p> 77 <code>border-width:10px</code> comes from <code>table[border=$w]</code>;<br/> 78 <code>border-style:solid</code> comes from <code>[style]</code>;<br/> 79 <code>border-color:gray</code> comes from <code>table[border=$w]</code> 80 </p> 81 <div><table border="10" frame="hsides" style="border-right-style: solid"><tr><td></td></tr></table></div> 82 83 <script>void function() { var table; while(table = document.querySelector('.to-remove')) table.parentNode.replaceChild(table.firstChild,table) }();</script> 84 <script>void function() { var td; while(td = document.querySelector('table.no-td td')) td.parentNode.replaceChild(document.createElement('x-td'),td) }();</script> 85 <script>void function() { var divs = document.querySelectorAll("main > div"); for(var i = divs.length; i--;) { var div = divs[i]; var pre = document.createElement('pre'); pre.title = pre.textContent = div.innerHTML; div.parentNode.insertBefore(pre, div); }; }();</script> 86 <hr/> 87 88 </main> 89 90 <script> 91 92 var i = 1; 93 generate_tests(assert_equals, [ 94 /*========================================*/ 95 [ 96 "1: HTML -> CSS Mapping for borders is applied correctly on table markup (table left width)", 97 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i++)+") table")).borderLeftWidth, 98 "0px" 99 ], 100 [ 101 "1: HTML -> CSS Mapping for borders is applied correctly on table markup (table left style)", 102 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftStyle, 103 "hidden" 104 ], 105 [ 106 "1: HTML -> CSS Mapping for borders is applied correctly on table markup (table left color)", 107 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftColor, 108 "rgb(128, 128, 128)" 109 ], 110 /*========================================*/ 111 [ 112 "2: HTML -> CSS Mapping for borders is applied correctly on table markup (table left width)", 113 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i++)+") table")).borderLeftWidth, 114 "1px" 115 ], 116 [ 117 "2: HTML -> CSS Mapping for borders is applied correctly on table markup (table left style)", 118 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftStyle, 119 "outset" 120 ], 121 [ 122 "2: HTML -> CSS Mapping for borders is applied correctly on table markup (table left color)", 123 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftColor, 124 "rgb(0, 0, 0)" 125 ], 126 /*========================================*/ 127 [ 128 "3a: HTML -> CSS Mapping for borders is applied correctly on table markup (table left width)", 129 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i++)+") table")).borderLeftWidth, 130 "10px" 131 ], 132 [ 133 "3a: HTML -> CSS Mapping for borders is applied correctly on table markup (table left style)", 134 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftStyle, 135 "outset" 136 ], 137 [ 138 "3a: HTML -> CSS Mapping for borders is applied correctly on table markup (table left color)", 139 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftColor, 140 "rgb(128, 128, 128)" 141 ], 142 [ 143 "3b: HTML -> CSS Mapping for borders is applied correctly on table markup (td top width)", 144 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderTopWidth, 145 "1px" 146 ], 147 [ 148 "3b: HTML -> CSS Mapping for borders is applied correctly on table markup (td top style)", 149 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderTopStyle, 150 "inset" 151 ], 152 [ 153 "3b: HTML -> CSS Mapping for borders is applied correctly on table markup (td top color)", 154 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderTopColor, 155 "rgb(128, 128, 128)" 156 ], 157 [ 158 "3c: HTML -> CSS Mapping for borders is applied correctly on table markup (td left width)", 159 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftWidth, 160 "1px" 161 ], 162 [ 163 "3c: HTML -> CSS Mapping for borders is applied correctly on table markup (td left style)", 164 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftStyle, 165 "inset" 166 ], 167 [ 168 "3c: HTML -> CSS Mapping for borders is applied correctly on table markup (td left color)", 169 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftColor, 170 "rgb(128, 128, 128)" 171 ], 172 /*========================================*/ 173 [ 174 "4: HTML -> CSS Mapping for borders is applied correctly on table markup (table left width)", 175 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i++)+") table")).borderLeftWidth, 176 "1px" 177 ], 178 [ 179 "4: HTML -> CSS Mapping for borders is applied correctly on table markup (table left style)", 180 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftStyle, 181 "outset" 182 ], 183 [ 184 "4: HTML -> CSS Mapping for borders is applied correctly on table markup (table left color)", 185 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftColor, 186 "rgb(128, 128, 128)" 187 ], 188 [ 189 "4: HTML -> CSS Mapping for borders is applied correctly on table markup (td left width)", 190 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftWidth, 191 "1px" 192 ], 193 [ 194 "4: HTML -> CSS Mapping for borders is applied correctly on table markup (td left style)", 195 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftStyle, 196 "solid" 197 ], 198 [ 199 "4: HTML -> CSS Mapping for borders is applied correctly on table markup (td left color)", 200 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftColor, 201 "rgb(128, 128, 128)" 202 ], 203 /*========================================*/ 204 [ 205 "5a: HTML -> CSS Mapping for borders is applied correctly on table markup (table left style)", 206 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i++)+") table")).borderLeftStyle, 207 "hidden" 208 ], 209 [ 210 "5b: HTML -> CSS Mapping for borders is applied correctly on table markup (table right width)", 211 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderRightWidth, 212 "10px" 213 ], 214 [ 215 "5b: HTML -> CSS Mapping for borders is applied correctly on table markup (table right style)", 216 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderRightStyle, 217 "solid" 218 ], 219 [ 220 "5b: HTML -> CSS Mapping for borders is applied correctly on table markup (table right color)", 221 getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderRightColor, 222 "rgb(128, 128, 128)" 223 ], 224 ]) 225 226 </script>