| <!doctype html> |
| <script src='/resources/testharness.js'></script> |
| <script src='/resources/testharnessreport.js'></script> |
| <link rel='stylesheet' href='./support/base.css' /> |
| <link rel="help" href="https://drafts.csswg.org/css-tables-3/#mapping"> |
| <main> |
| |
| <h1>HTML-2-CSS Mapping</h1> |
| <p>Checks that browsers implement properly the html2css stylesheet (rules about borders, disabling border-collapse for clarity)</p> |
| <style>table { border-collapse: separate !important; }</style> |
| |
| <hr/> |
| <p>1: The border of the table element should be 0px hidden gray:</p> |
| <p> |
| <code>border-width:0px</code> is the <code>initial</code> value;<br/> |
| <code>border-style:hidden</code> comes from <code>table:matches(..., [rules=groups], ...)</code>;<br/> |
| <code>border-color:gray</code> comes from <code>table</code> |
| </p> |
| <div><table border="0" rules="groups"><tbody><tr><td></td></tr></tbody></table></div> |
| |
| <hr/> |
| <p>2: The border of the table element should be 1px outset black:</p> |
| <p> |
| <code>border-width:1px</code> comes from <code>table[frame=box] (1/2)</code>;<br/> |
| <code>border-style:outset</code> comes from <code>table[frame=box] (2/2)</code>;<br/> |
| <code>border-color:black</code> comes from <code>table:matches(..., [rules=groups], ...)</code> |
| </p> |
| <div><table border="0" rules="groups" frame="box"><tbody><tr><td></td></tr></tbody></table></div> |
| |
| <hr/> |
| <p>3a: The border of the table element should be 10px outset gray:</p> |
| <p> |
| <code>border-width:10px</code> comes from <code>table[border=$w]</code>;<br/> |
| <code>border-style:outset</code> comes from <code>table[frame=box] (2/2)</code>;<br/> |
| <code>border-color:gray</code> comes from <code>table[border=$w]</code> |
| </p> |
| <hr style="display:none"/> |
| <p>3b: The border-top of the td element should be 1px inset gray:</p> |
| <p> |
| <code>border-width:1px</code> comes from <code>table[border=$w] > ...td</code>;<br/> |
| <code>border-style:inset</code> comes from <code>table[border=$w] > ...td</code>;<br/> |
| <code>border-color:gray</code> comes from <code>table[border=$w] > ...td</code> |
| </p> |
| <hr style="display:none"/> |
| <p>3c: The border-left of the td element should be 1px hidden gray:</p> |
| <p> |
| <code>border-width:1px</code> comes from <code>table[border=$w] > ...td</code>;<br/> |
| <code>border-style:inset</code> comes from <code>table[border=$w] > ...td</code>;<br/> |
| <code>border-color:gray</code> comes from <code>table[border=$w] > ...td</code> |
| </p> |
| <div><table border="10" rules="groups" frame="box"><tbody><tr><td></td></tr></tbody></table></div> |
| |
| <hr/> |
| <p>4a: The border of the table element should be 1px outset gray:</p> |
| <p> |
| <code>border-width:10px</code> comes from <code>table[border=$w]</code>;<br/> |
| <code>border-style:outset</code> comes from <code>table[border=$w]</code>;<br/> |
| <code>border-color:gray</code> comes from <code>table[border=$w]</code> |
| </p> |
| <hr style="display:none"> |
| <p>4b: The top border of the td element should be 1px solid gray:</p> |
| <p> |
| <code>border-width:1px</code> comes from <code>table[rules=all] > ... td</code>;<br/> |
| <code>border-style:solid</code> comes from <code>table[rules=all] > ... td</code>;<br/> |
| <code>border-color:gray</code> comes from <code>table[rules=all] > ... td</code> |
| </p> |
| <div><table border="yes" rules="all"><tr><td></td></tr></table></div> |
| |
| <hr> |
| <p>5a: The left border of the table element should be ? hidden ?:</p> |
| <p> |
| <code>border-style:hidden</code> comes from <code>table[frame=hsides]</code>;<br/> |
| </p> |
| <hr style="display:none"> |
| <p>5b: The right border of the table element should be 10px solid gray:</p> |
| <p> |
| <code>border-width:10px</code> comes from <code>table[border=$w]</code>;<br/> |
| <code>border-style:solid</code> comes from <code>[style]</code>;<br/> |
| <code>border-color:gray</code> comes from <code>table[border=$w]</code> |
| </p> |
| <div><table border="10" frame="hsides" style="border-right-style: solid"><tr><td></td></tr></table></div> |
| |
| <script>void function() { var table; while(table = document.querySelector('.to-remove')) table.parentNode.replaceChild(table.firstChild,table) }();</script> |
| <script>void function() { var td; while(td = document.querySelector('table.no-td td')) td.parentNode.replaceChild(document.createElement('x-td'),td) }();</script> |
| <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> |
| <hr/> |
| |
| </main> |
| |
| <script> |
| |
| var i = 1; |
| generate_tests(assert_equals, [ |
| /*========================================*/ |
| [ |
| "1: HTML -> CSS Mapping for borders is applied correctly on table markup (table left width)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i++)+") table")).borderLeftWidth, |
| "0px" |
| ], |
| [ |
| "1: HTML -> CSS Mapping for borders is applied correctly on table markup (table left style)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftStyle, |
| "hidden" |
| ], |
| [ |
| "1: HTML -> CSS Mapping for borders is applied correctly on table markup (table left color)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftColor, |
| "rgb(128, 128, 128)" |
| ], |
| /*========================================*/ |
| [ |
| "2: HTML -> CSS Mapping for borders is applied correctly on table markup (table left width)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i++)+") table")).borderLeftWidth, |
| "1px" |
| ], |
| [ |
| "2: HTML -> CSS Mapping for borders is applied correctly on table markup (table left style)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftStyle, |
| "outset" |
| ], |
| [ |
| "2: HTML -> CSS Mapping for borders is applied correctly on table markup (table left color)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftColor, |
| "rgb(0, 0, 0)" |
| ], |
| /*========================================*/ |
| [ |
| "3a: HTML -> CSS Mapping for borders is applied correctly on table markup (table left width)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i++)+") table")).borderLeftWidth, |
| "10px" |
| ], |
| [ |
| "3a: HTML -> CSS Mapping for borders is applied correctly on table markup (table left style)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftStyle, |
| "outset" |
| ], |
| [ |
| "3a: HTML -> CSS Mapping for borders is applied correctly on table markup (table left color)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftColor, |
| "rgb(128, 128, 128)" |
| ], |
| [ |
| "3b: HTML -> CSS Mapping for borders is applied correctly on table markup (td top width)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderTopWidth, |
| "1px" |
| ], |
| [ |
| "3b: HTML -> CSS Mapping for borders is applied correctly on table markup (td top style)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderTopStyle, |
| "inset" |
| ], |
| [ |
| "3b: HTML -> CSS Mapping for borders is applied correctly on table markup (td top color)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderTopColor, |
| "rgb(128, 128, 128)" |
| ], |
| [ |
| "3c: HTML -> CSS Mapping for borders is applied correctly on table markup (td left width)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftWidth, |
| "1px" |
| ], |
| [ |
| "3c: HTML -> CSS Mapping for borders is applied correctly on table markup (td left style)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftStyle, |
| "inset" |
| ], |
| [ |
| "3c: HTML -> CSS Mapping for borders is applied correctly on table markup (td left color)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftColor, |
| "rgb(128, 128, 128)" |
| ], |
| /*========================================*/ |
| [ |
| "4: HTML -> CSS Mapping for borders is applied correctly on table markup (table left width)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i++)+") table")).borderLeftWidth, |
| "1px" |
| ], |
| [ |
| "4: HTML -> CSS Mapping for borders is applied correctly on table markup (table left style)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftStyle, |
| "outset" |
| ], |
| [ |
| "4: HTML -> CSS Mapping for borders is applied correctly on table markup (table left color)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderLeftColor, |
| "rgb(128, 128, 128)" |
| ], |
| [ |
| "4: HTML -> CSS Mapping for borders is applied correctly on table markup (td left width)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftWidth, |
| "1px" |
| ], |
| [ |
| "4: HTML -> CSS Mapping for borders is applied correctly on table markup (td left style)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftStyle, |
| "solid" |
| ], |
| [ |
| "4: HTML -> CSS Mapping for borders is applied correctly on table markup (td left color)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table td")).borderLeftColor, |
| "rgb(128, 128, 128)" |
| ], |
| /*========================================*/ |
| [ |
| "5a: HTML -> CSS Mapping for borders is applied correctly on table markup (table left style)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i++)+") table")).borderLeftStyle, |
| "hidden" |
| ], |
| [ |
| "5b: HTML -> CSS Mapping for borders is applied correctly on table markup (table right width)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderRightWidth, |
| "10px" |
| ], |
| [ |
| "5b: HTML -> CSS Mapping for borders is applied correctly on table markup (table right style)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderRightStyle, |
| "solid" |
| ], |
| [ |
| "5b: HTML -> CSS Mapping for borders is applied correctly on table markup (table right color)", |
| getComputedStyle(document.querySelector("main > div:nth-of-type("+(i-1)+") table")).borderRightColor, |
| "rgb(128, 128, 128)" |
| ], |
| ]) |
| |
| </script> |
