90 lines
4.1 KiB
HTML
90 lines
4.1 KiB
HTML
<!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="	"></invalidTarget>
|
|
<target attr="	value"></target>
|
|
<target attr="value	"></target>
|
|
<target attr="	value	"></target>
|
|
<target attr="	value1	value	value3	"></target>
|
|
|
|
<!-- Line feed. -->
|
|
<invalidTarget attr=" "></invalidTarget>
|
|
<target attr=" value"></target>
|
|
<target attr="value "></target>
|
|
<target attr=" value "></target>
|
|
<target attr=" value1 value value3 "></target>
|
|
|
|
<!-- Carriage return. -->
|
|
<invalidTarget attr=" "></invalidTarget>
|
|
<target attr=" value"></target>
|
|
<target attr="value "></target>
|
|
<target attr=" value "></target>
|
|
<target attr=" value1 value value3 "></target>
|
|
|
|
<!-- Carriage return. -->
|
|
<invalidTarget attr=""></invalidTarget>
|
|
<target attr="value"></target>
|
|
<target attr="value"></target>
|
|
<target attr="value"></target>
|
|
<target attr="value1valuevalue3"></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=" "></invalidTarget>
|
|
<emSpaceTarget attr=" value"></emSpaceTarget>
|
|
<invalidTarget attr="value "></invalidTarget>
|
|
<invalidTarget attr=" value1 value value3 "></invalidTarget>
|
|
<emSpaceTarget attr=" value1  value2	 value3  value4  value5 value"></emSpaceTarget>
|
|
|
|
<!-- IDEOGRAPHIC SPACE (U+3000). -->
|
|
<invalidTarget attr=" "></invalidTarget>
|
|
<invalidTarget attr=" value"></invalidTarget>
|
|
<invalidTarget attr="value "></invalidTarget>
|
|
<invalidTarget attr=" value1 value value3 "></invalidTarget>
|
|
<ideographicSpaceTarget attr=" value1   value2 	 value3   value4   value5  value "></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>
|