css/css-tables/html-to-css-mapping-2.html

<!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>