<!doctype html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
#testBlock * {
    background-color: black;
}
#testBlock [attr~=value] {
    background-color: rgb(1, 2, 3);
}
</style>
</head>
<body>
    <div style="display:none" id="testBlock">
        <target attr="value"></target>

        <!-- Regular spaces. -->
        <target attr=" value"></target>
        <target attr="value "></target>
        <target attr=" value "></target>
        <target attr=" value value value "></target>

        <!-- Tabs. -->
        <invalidTarget attr="&#9;"></invalidTarget>
        <target attr="&#9;value"></target>
        <target attr="value&#9;"></target>
        <target attr="&#9;value&#9;"></target>
        <target attr="&#9;value1&#9;value&#9;value3&#9;"></target>

        <!-- Line feed. -->
        <invalidTarget attr="&#10;"></invalidTarget>
        <target attr="&#10;value"></target>
        <target attr="value&#10;"></target>
        <target attr="&#10;value&#10;"></target>
        <target attr="&#10;value1&#10;value&#10;value3&#10;"></target>

        <!-- Carriage return. -->
        <invalidTarget attr="&#13;"></invalidTarget>
        <target attr="&#13;value"></target>
        <target attr="value&#13;"></target>
        <target attr="&#13;value&#13;"></target>
        <target attr="&#13;value1&#13;value&#13;value3&#13;"></target>

        <!-- Carriage return. -->
        <invalidTarget attr="&#12;"></invalidTarget>
        <target attr="&#12;value"></target>
        <target attr="value&#12;"></target>
        <target attr="&#12;value&#12;"></target>
        <target attr="&#12;value1&#12;value&#12;value3&#12;"></target>

        <!-- The spec explicitely says EM SPACE (U+2003) and IDEOGRAPHIC SPACE (U+3000) are not whitespace. Let's test for that. -->
        <!-- EM SPACE (U+2003). -->
        <invalidTarget attr="&#x2003"></invalidTarget>
        <emSpaceTarget attr="&#x2003value"></emSpaceTarget>
        <invalidTarget attr="value&#x2003"></invalidTarget>
        <invalidTarget attr="&#x2003value1&#x2003value&#x2003value3&#x2003"></invalidTarget>
        <emSpaceTarget attr="&#x2003value1 &#x2003value2&#9;&#x2003value3&#10;&#x2003value4&#13;&#x2003value5&#12;&#x2003value"></emSpaceTarget>

        <!-- IDEOGRAPHIC SPACE (U+3000). -->
        <invalidTarget attr="&#x3000"></invalidTarget>
        <invalidTarget attr="&#x3000value"></invalidTarget>
        <invalidTarget attr="value&#x3000"></invalidTarget>
        <invalidTarget attr="&#x3000value1&#x3000value&#x3000value3&#x3000"></invalidTarget>
        <ideographicSpaceTarget attr="&#x2003value1&#x3000 &#x2003value2&#x3000&#9;&#x2003value3&#x3000&#10;&#x2003value4&#x3000&#13;&#x2003value5&#x3000&#12;&#x2003value&#x3000"></ideographicSpaceTarget>
    </div>
</body>
<script>
description('When matching space separated tokens with the attribute selector [attr~=value], any of the following characters can be used as space separator: SPACE (U+0020), TAB (U+0009), LINE FEED (U+000A), CARRIAGE RETURN (U+000D), and FORM FEED (U+000C).');

shouldBe('document.querySelectorAll("[attr~=value]").length', 'document.querySelectorAll("target").length');
shouldBe('document.querySelectorAll("[attr~=value]").length', '' + document.querySelectorAll("target").length); // For result readability.

// Test querySelector.
var allMatches = document.querySelectorAll("[attr~=value]");
for (var i = 0; i < allMatches.length; ++i)
    shouldBeEqualToString('document.querySelectorAll("[attr~=value]")[' + i + '].tagName', 'TARGET');

// Test styling.
var allTestElements = document.querySelectorAll("#testBlock *");
for (var i = 0; i < allTestElements.length; ++i)
    shouldBeEqualToString('getComputedStyle(document.querySelectorAll("#testBlock *")[' + i + ']).backgroundColor', allTestElements[i].tagName === 'TARGET' ? 'rgb(1, 2, 3)' : 'rgb(0, 0, 0)');

// Make sure neither EM SPACE nor IDEOGRAPHIC SPACE get a special value.
shouldBe('document.querySelectorAll("[attr~=\\\\002003 value]").length', '2');
shouldBe('document.querySelectorAll("[attr~=\\\\002003 value\\\\003000]").length', '1');
</script>
<script src="../../resources/js-test-post.js"></script>
</html>
