Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 12 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-tables/html-to-css-mapping-2.html - WPT Dashboard Interop Dashboard
<!doctype html>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<link rel='stylesheet' href='./support/base.css' />
<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>