css-selector-text.html | Explore in Territory

<html>
<head id="head">
<script src="../../resources/js-test.js"></script>
</head>
<body>
<script>

description("This tests parsing and re-serialization of some CSS selectors.");

function parseThenSerializeRule(rule)
{
    var styleElement = document.getElementById("style");
    var head = document.getElementById("head");
    if (styleElement)
        head.removeChild(styleElement);

    styleElement = document.createElement("style");
    styleElement.id = "style";
    var head = document.getElementById("head");
    head.appendChild(styleElement);
    
    styleElement.appendChild(document.createTextNode("@namespace n url('test');"));
    styleElement.appendChild(document.createTextNode(rule));
    return styleElement.sheet.cssRules[1].cssText;
}

function testSelectorRoundTrip(selector)
{
    shouldBe("parseThenSerializeRule('" + selector + " { }')", "'" + selector + " { }'");
}

testSelectorRoundTrip('*');
testSelectorRoundTrip('\\\\*');
shouldBe("parseThenSerializeRule('\\\\2a { }')", "'\\\\* { }'");
testSelectorRoundTrip('a');
testSelectorRoundTrip('#a');
testSelectorRoundTrip('.a');
testSelectorRoundTrip(':active');
testSelectorRoundTrip('[a]');
testSelectorRoundTrip('[a="b"]');
testSelectorRoundTrip('[a~="b"]');
testSelectorRoundTrip('[a|="b"]');
testSelectorRoundTrip('[a^="b"]');
testSelectorRoundTrip('[a$="b"]');
testSelectorRoundTrip('[a*="b"]');

debug('');

shouldBe("parseThenSerializeRule('*|a { }')", "'a { }'");
testSelectorRoundTrip('n|a');
shouldBe("parseThenSerializeRule('*|* { }')", "'* { }'");
testSelectorRoundTrip('n|*');
testSelectorRoundTrip('[*|a]');
testSelectorRoundTrip('[n|a]');

debug('');

testSelectorRoundTrip('a:active');
testSelectorRoundTrip('a b');
testSelectorRoundTrip('a + b');
testSelectorRoundTrip('a ~ b');
testSelectorRoundTrip('a > b');

debug('');

testSelectorRoundTrip(":active");
testSelectorRoundTrip(":autofill");
testSelectorRoundTrip(":checked");
testSelectorRoundTrip(":disabled");
testSelectorRoundTrip(":empty");
testSelectorRoundTrip(":enabled");
testSelectorRoundTrip(":first-child");
testSelectorRoundTrip(":first-of-type");
testSelectorRoundTrip(":focus");
testSelectorRoundTrip(":focus-within");
testSelectorRoundTrip(":hover");
testSelectorRoundTrip(":indeterminate");
testSelectorRoundTrip(":link");
testSelectorRoundTrip(":not(:placeholder-shown)");
testSelectorRoundTrip(":placeholder-shown");
testSelectorRoundTrip(":root");
testSelectorRoundTrip(":target");
testSelectorRoundTrip(":visited");

debug('');

testSelectorRoundTrip(":lang(a)");
testSelectorRoundTrip(":not(a)");
testSelectorRoundTrip(":-webkit-any(a, b, p)");

debug('');

testSelectorRoundTrip("::after");
testSelectorRoundTrip("::before");
testSelectorRoundTrip("::first-letter");
testSelectorRoundTrip("::first-line");
testSelectorRoundTrip("::selection");

debug('');

testSelectorRoundTrip(":-webkit-any-link");
testSelectorRoundTrip(":-webkit-autofill");
testSelectorRoundTrip(":-webkit-drag");

debug('');

shouldBe("parseThenSerializeRule('::-webkit-file-upload-button { }')", "'::-webkit-file-upload-button { }'");
shouldBe("parseThenSerializeRule('::-webkit-search-cancel-button { }')", "'::-webkit-search-cancel-button { }'");
shouldBe("parseThenSerializeRule('::-webkit-search-decoration { }')", "'::-webkit-search-decoration { }'");
shouldBe("parseThenSerializeRule('::-webkit-search-results-button { }')", "'::-webkit-search-results-button { }'");
shouldBe("parseThenSerializeRule('::-webkit-search-results-decoration { }')", "'::-webkit-search-results-decoration { }'");
shouldBe("parseThenSerializeRule('::-webkit-slider-thumb { }')", "'::-webkit-slider-thumb { }'");

debug('');

testSelectorRoundTrip("a::-webkit-slider-thumb");
shouldBe("parseThenSerializeRule('a ::-webkit-slider-thumb { }')", "'a ::-webkit-slider-thumb { }'");
testSelectorRoundTrip("[a]::-webkit-slider-thumb");
shouldBe("parseThenSerializeRule('[a] ::-webkit-slider-thumb { }')", "'[a] ::-webkit-slider-thumb { }'");
testSelectorRoundTrip(".a::-webkit-slider-thumb");
shouldBe("parseThenSerializeRule('.a ::-webkit-slider-thumb { }')", "'.a ::-webkit-slider-thumb { }'");
testSelectorRoundTrip("#a::-webkit-slider-thumb");
shouldBe("parseThenSerializeRule('#a ::-webkit-slider-thumb { }')", "'#a ::-webkit-slider-thumb { }'");
shouldBe("parseThenSerializeRule('* ::-webkit-slider-thumb { }')", "'* ::-webkit-slider-thumb { }'");

debug('');

testSelectorRoundTrip("a[b]::-webkit-slider-thumb");
testSelectorRoundTrip("a.b::-webkit-slider-thumb");
testSelectorRoundTrip("a#b::-webkit-slider-thumb");
testSelectorRoundTrip("a[b].c#d::-webkit-slider-thumb");

debug('');

testSelectorRoundTrip('input:not([type="file"]):focus');
testSelectorRoundTrip('input:not([type="file"]):focus-within');
testSelectorRoundTrip(':-webkit-any([type="file"])');
testSelectorRoundTrip(':-webkit-any(:hover)');
testSelectorRoundTrip('input:-webkit-any([type="file"], :hover, :focus):enabled');
testSelectorRoundTrip(':-webkit-any(input[type="file"], a:hover, button:focus)');
testSelectorRoundTrip(':-webkit-any(.class1.class2.class3)');
testSelectorRoundTrip(':-webkit-any(.class1:hover)');
testSelectorRoundTrip(':-webkit-any(a.class1.class2.class3:hover)');

debug('');

shouldBe("parseThenSerializeRule('*:active { }')", "':active { }'");
testSelectorRoundTrip("|a");

debug('');

shouldBe("parseThenSerializeRule('input[type=file]:focus { }')", "'input[type=\"file\"]:focus { }'");
shouldBe("parseThenSerializeRule('input[type=file]:focus-within { }')", "'input[type=\"file\"]:focus-within { }'");

debug('');

shouldBe("parseThenSerializeRule('a+b { }')", "'a + b { }'");
shouldBe("parseThenSerializeRule('a~b { }')", "'a ~ b { }'");
shouldBe("parseThenSerializeRule('a>b { }')", "'a > b { }'");

debug('');

shouldBe("parseThenSerializeRule(':after { }')", "'::after { }'");
shouldBe("parseThenSerializeRule(':before { }')", "'::before { }'");
shouldBe("parseThenSerializeRule(':first-letter { }')", "'::first-letter { }'");
shouldBe("parseThenSerializeRule(':first-line { }')", "'::first-line { }'");
shouldBe("parseThenSerializeRule(':-webkit-any(    a.class1  ,  	#id,[attr]  ) { }')","':-webkit-any(a.class1, #id, [attr]) { }'");

debug('');

</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css/css-selector-text.html
