uri-token-parsing.html | Explore in Territory

<head>
<style>
#a { content: url(c); }
#b { content: url( d); }
#c { content: url(e ); }
#d { content: url( f ); }
#f { content: url('c'); }
#g { content: url(' d'); }
#h { content: url('e '); }
#i { content: url(' f '); }
#j { content: url("url(g)"); }
#l { content: url("c"); }
#m { content: url(" d"); }
#n { content: url("e "); }
#o { content: url(" f "); }
#p { content: url("url(g)"); }
#q { cursor: url("url(q)"), pointer; }
#r { list-style-image: url("url(r)"); }
#s { background-image: url("url(s)"); }
#t { -webkit-mask-image: url("url(t)"); }
#u { -webkit-border-image: url("url(u)") 1 2 3 4 fill stretch round; }
#v { -webkit-mask-box-image-source: url("url(v)"); }
#w { content: url("w\0d\
w"); /* URL string contains twice newline */ }
#x { content: url(" x x	x "); } /* URL string contains space and tab */
#y { content: url( y\20y\9y ); } /* URL string contains space and tab */
</style>

<script>

// Some ideas for additional things to test in the future:
//   1) Actual control characters in the <style> element.
//   2) URL with only space characters in it.
//   3) Different CSS space characters, and spaces that are not allowed in CSS.
//   4) Different CSS space characters, and spaces that are not allowed in CSS.
//   5) The src property inside font-face.
//   6) Quoted values that are themselves inside quotes (two levels of quotes).

function runTest()
{
    if (window.testRunner)
        testRunner.dumpAsText();

    var rules = document.styleSheets[0].cssRules;
    var text = "";
    for (var i = 0; i < rules.length; i++) {
        var itemText = rules.item(i).cssText;

        // Work around bug where WebKit completes the URLs in the CSS DOM.
        // The completion of the URL should be when they are used, not in the DOM.
        itemText = itemText.replace(/file:.*LayoutTests\/fast\/css\//, "");

        text += itemText;
        text += "\n";
    }

    document.getElementById("result").appendChild(document.createTextNode(text));

    if (document.getElementById("result").firstChild.data === document.getElementById("expected").firstChild.data)
        document.getElementById("message").firstChild.data = "SUCCESS";
    else
        document.getElementById("message").firstChild.data = "FAILURE";
}

</script>

</head>

<body onload="runTest()">

<p>Test parsing of CSS URI tokens. Older versions of WebKit did some double processing of these, hence this test would have failed.</p>

<p id="message">TEST DID NOT COMPLETE</p>

<p>Rules from the stylesheet:</p>

<pre id="result"></pre>

<p>Expected result:</p>

<pre id="expected">
#a { content: url("c"); }
#b { content: url("d"); }
#c { content: url("e"); }
#d { content: url("f"); }
#f { content: url("c"); }
#g { content: url(" d"); }
#h { content: url("e "); }
#i { content: url(" f "); }
#j { content: url("url(g)"); }
#l { content: url("c"); }
#m { content: url(" d"); }
#n { content: url("e "); }
#o { content: url(" f "); }
#p { content: url("url(g)"); }
#q { cursor: url("url(q)"), pointer; }
#r { list-style-image: url("url(r)"); }
#s { background-image: url("url(s)"); }
#t { mask-image: url("url(t)"); }
#u { -webkit-border-image: url("url(u)") 1 2 3 4 fill stretch round; }
#v { -webkit-mask-box-image-source: url("url(v)"); }
#w { content: url("w\d w"); }
#x { content: url(" x x\9 x "); }
#y { content: url("y y\9 y"); }
</pre>

<script>

</script>
</body>
chromium/third_party/blink/web_tests/fast/css/uri-token-parsing.html
