fast/css/counters/complex-before.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="reference" href="http://test.csswg.org/suites/css2.1/20101210/html4/before-after-display-types-001-ref.xht">
    <title>CSS Test: generated content complex content for :before
    pseudo-element.</title>
    <link rel="author" title="Carol Szabo" href="mailto:carol.szabo@nokia.com">
    <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org">
    <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
    <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">
    <meta name="flags" content="">
<style type="text/css">
    #test { counter-reset:ctr; quotes:"\0022" "\0022" "\0022" "\0022"}

    #test:before {
        content:counter(ctr) url(support/square-outline-32x32.png) open-quote "Before-" attr(class);
        counter-increment:ctr;
    }
    #test:after {
        content:counter(ctr) url(support/square-outline-32x32.png) "After-" attr(class) close-quote;
        counter-increment:ctr;
    }
    .table:before, .table:after { display:table; }
    div { border:1px solid green; margin:5px; }
</style>
<script type="text/javascript">
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    function log(text) {
        console = document.getElementById("console");
        console.innerText = console.innerText + text + "\n";
    }

    function compareProperty(testStyle, referenceStyle, propertyName) {
        testValue = testStyle.getPropertyValue(propertyName);
        referenceValue = referenceStyle.getPropertyValue(propertyName);
        if (testValue == referenceValue)
            log(propertyName + ": PASSED");
        else
            log(propertyName + ": FAILED: testValue=" + testValue +"; expected " + referenceValue);
    }

    function run() {
        if (window.testRunner)
            document.getElementById("onlyInBrowser").setAttribute("style", "display: none;");
        testStyle = window.getComputedStyle(document.getElementById("testContainer"), null);
        referenceStyle = window.getComputedStyle(document.getElementById("reference"), null);
        compareProperty(testStyle, referenceStyle, "width")
        compareProperty(testStyle, referenceStyle, "height")
       if (window.testRunner)
            testRunner.notifyDone();
    }
</script>
</head><body onload="setTimeout('run()', 0);">
    <p id="onlyInBrowser">The texts between the markers should be identical.</p>
    <p>========Marker1========</p>
    <table>
        <tr>
            <td id="testContainer"><div id="test" class="table">Inner</div></td>
            <td>1 1 1 1</td>
        </tr>
    </table>
    <p>========Marker2========</p>
    <table>
        <tr>
            <td id="reference"><div><span style="display: table;">1<img
            src="support/square-outline-32x32.png"/>"Before-table</span>Inner<span
            style="display: table">2<img
            src="support/square-outline-32x32.png"/>After-table"</span></div></td>
            <td>1 1 1 1</td>
        </tr>
    </table>
    <p>========Marker3========</p>
    <pre id="console"/>
</td><td valign="top">
</body></html>