diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-tables/html-to-css-mapping-2.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-tables/html-to-css-mapping-2.html | 226 |
1 files changed, 226 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-tables/html-to-css-mapping-2.html b/testing/web-platform/tests/css/css-tables/html-to-css-mapping-2.html new file mode 100644 index 0000000000..552270b539 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/html-to-css-mapping-2.html @@ -0,0 +1,226 @@ +<!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> |