css-set-selector-text.html | Explore in Territory

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

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

var bogusSelector = "_foo";

function setThenReadSelectorText(selector)
{
    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);

    // First, create a rule with a bogus selector.
    styleElement.appendChild(document.createTextNode("@namespace n url(test); " + bogusSelector + " { }"));
    // Now, set the desired selector text.
    styleElement.sheet.cssRules[1].selectorText = selector;
    return styleElement.sheet.cssRules[1].selectorText;
}

function testSelectorRoundTrip(selector, expectFailure)
{
    shouldBe("setThenReadSelectorText('" + selector + "')", "'" + (expectFailure ? bogusSelector : selector) + "'");
}

testSelectorRoundTrip('', true);
testSelectorRoundTrip('123', true);
testSelectorRoundTrip('-', true);
testSelectorRoundTrip('$', true);
testSelectorRoundTrip(':', true);
testSelectorRoundTrip('.', true);
testSelectorRoundTrip('#', true);
testSelectorRoundTrip('[]', true);
testSelectorRoundTrip('()', true);

debug('');

testSelectorRoundTrip('*');
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("setThenReadSelectorText('*|a')", "'a'");
testSelectorRoundTrip('n|a');
shouldBe("setThenReadSelectorText('*|*')", "'*'");
testSelectorRoundTrip('n|*');
testSelectorRoundTrip('[*|a]');
testSelectorRoundTrip('[n|a]');
testSelectorRoundTrip('unresolved|a', true);
testSelectorRoundTrip('unresolved|*', true);
testSelectorRoundTrip('[unresolved|a]', true);

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("setThenReadSelectorText('::-webkit-file-upload-button')", "'::-webkit-file-upload-button'");
shouldBe("setThenReadSelectorText('::-webkit-search-cancel-button')", "'::-webkit-search-cancel-button'");
shouldBe("setThenReadSelectorText('::-webkit-search-decoration')", "'::-webkit-search-decoration'");
shouldBe("setThenReadSelectorText('::-webkit-search-results-button')", "'::-webkit-search-results-button'");
shouldBe("setThenReadSelectorText('::-webkit-search-results-decoration')", "'::-webkit-search-results-decoration'");
shouldBe("setThenReadSelectorText('::-webkit-slider-thumb')", "'::-webkit-slider-thumb'");

debug('');

testSelectorRoundTrip("a::-webkit-slider-thumb");
shouldBe("setThenReadSelectorText('a ::-webkit-slider-thumb')", "'a ::-webkit-slider-thumb'");
testSelectorRoundTrip("[a]::-webkit-slider-thumb");
shouldBe("setThenReadSelectorText('[a] ::-webkit-slider-thumb')", "'[a] ::-webkit-slider-thumb'");
testSelectorRoundTrip(".a::-webkit-slider-thumb");
shouldBe("setThenReadSelectorText('.a ::-webkit-slider-thumb')", "'.a ::-webkit-slider-thumb'");
testSelectorRoundTrip("#a::-webkit-slider-thumb");
shouldBe("setThenReadSelectorText('#a ::-webkit-slider-thumb')", "'#a ::-webkit-slider-thumb'");
shouldBe("setThenReadSelectorText('* ::-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("setThenReadSelectorText('*:active')", "':active'");
testSelectorRoundTrip("|a");

debug('');

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

debug('');

shouldBe("setThenReadSelectorText('a+b')", "'a + b'");
shouldBe("setThenReadSelectorText('a~b')", "'a ~ b'");
shouldBe("setThenReadSelectorText('a>b')", "'a > b'");

debug('');

shouldBe("setThenReadSelectorText(':after')", "'::after'");
shouldBe("setThenReadSelectorText(':before')", "'::before'");
shouldBe("setThenReadSelectorText(':first-letter')", "'::first-letter'");
shouldBe("setThenReadSelectorText(':first-line')", "'::first-line'");
shouldBe("setThenReadSelectorText(':-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-set-selector-text.html
