LayoutTests/fast/selectors/attribute-list-with-whitespace-in-value.html - WebKit - Git at Google

 <!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>
	<!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="value1valuevalue3"></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 &#x2003value3 &#x2003value4 &#x2003value5&#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 &#x2003value3&#x3000 &#x2003value4&#x3000 &#x2003value5&#x3000&#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>