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

 <!doctype html>
 <html>
 <head>
 <script src="../../resources/js-test-pre.js"></script>
 <style id="style-container">
 </style>
 </head>
 <body>
     <div style="display:none">
         <!-- Empty -->
         <target attr=" "></target>

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

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

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

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

         <!-- Carriage return. -->
         <target attr="&#12;"></target>
         <target attr="&#12;value"></target>
         <target attr="value&#12;"></target>
         <target attr="&#12;value&#12;"></target>
         <target attr="&#12;value&#12;value&#12;value&#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). -->
         <target attr="&#x2003"></target>
         <target attr="&#x2003value"></target>
         <target attr="value&#x2003"></target>
         <target attr="&#x2003value&#x2003"></target>

         <!-- IDEOGRAPHIC SPACE (U+3000). -->
         <target attr="&#x3000"></target>
         <target attr="&#x3000value"></target>
         <target attr="value&#x3000"></target>
         <target attr="&#x3000value&#x3000"></target>
     </div>
 </body>
 <script>
 description('When performing attribute matching for space separated values (e.g. [attr~=value]), the selector cannot match anything if the selector\'s "value" contains a white space. This test check this is true for all the definitions of whitespace of the spec.');

 function hasElementStyledBySelector()
 {
     var allElements = document.querySelectorAll("*");
     for (var i = 0; i < allElements.length; ++i) {
         if (getComputedStyle(allElements[i]).backgroundColor == "rgb(1, 2, 3)")
             return true;
     }
     return false;
 }

 function testInvalidSelector(selectorString) {
     shouldBe('document.querySelectorAll(\'' + selectorString.replace(/\\/g, '\\\\') + '\').length', '0');

     var styleContainer = document.getElementById('style-container');
     styleContainer.innerHTML = '' + selectorString + ' { background-color: rgb(1, 2, 3); }';

     shouldBeFalse("hasElementStyledBySelector()");
     styleContainer.innerHTML = '';
 }

 var invalidValues = [
     // Empty.
     '[attr~=""]',

     // Regular whitespace.
     '[attr~=" "]',
     '[attr~="value "]',
     '[attr~=" value"]',
     '[attr~=" value "]',

     // Tab.
     '[attr~="\t"]',
     '[attr~="value\t"]',
     '[attr~="\tvalue"]',
     '[attr~="\tvalue\t"]',

     // Line feed.
     '[attr~="\\0a"]',
     '[attr~="\\0a "]',
     '[attr~="value\\0a"]',
     '[attr~="\\0a value"]',
     '[attr~="\\0a value\\0a"]',

     // Carriage return.
     '[attr~="\\0d"]',
     '[attr~="\\0d "]',
     '[attr~="value\\0d"]',
     '[attr~="\\0d value"]',
     '[attr~="\\0d value\\0d"]',

     // Form feed.
     '[attr~="\\0c"]',
     '[attr~="\\0c "]',
     '[attr~="value\\0c"]',
     '[attr~="\\0c value"]',
     '[attr~="\\0c value\\0c"]',
 ];

 for (var i = 0; i < invalidValues.length; ++i)
     testInvalidSelector(invalidValues[i]);

 var validValues = [
     // EM SPACE.
     '[attr~="\\002003"]',
     '[attr~="value\\002003"]',
     '[attr~="\\002003 value"]',
     '[attr~="\\002003 value\\002003"]',

     // IDEOGRAPHIC SPACE.
     '[attr~="\\003000"]',
     '[attr~="value\\003000"]',
     '[attr~="\\003000 value"]',
     '[attr~="\\003000 value\\003000"]',
 ];

 function testValidSelector(selectorString) {
     shouldBe('document.querySelectorAll(\'' + selectorString.replace(/\\/g, '\\\\') + '\').length', '1');

     var styleContainer = document.getElementById('style-container');
     styleContainer.innerHTML = '' + selectorString + ' { background-color: rgb(1, 2, 3); }';

     shouldBeTrue("hasElementStyledBySelector()");
     styleContainer.innerHTML = '';
 }

 for (var i = 0; i < validValues.length; ++i)
     testValidSelector(validValues[i]);
 </script>
 <script src="../../resources/js-test-post.js"></script>
 </html>
	<!doctype html>
	<html>
	<head>
	<script src="../../resources/js-test-pre.js"></script>
	<style id="style-container">
	</style>
	</head>
	<body>
	<div style="display:none">
	<!-- Empty -->
	<target attr=" "></target>

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

	<!-- Tabs. -->
	<target attr=" "></target>
	<target attr=" value"></target>
	<target attr="value "></target>
	<target attr=" value "></target>
	<target attr=" value value value "></target>

	<!-- Line feed. -->
	<target attr=" "></target>
	<target attr=" value"></target>
	<target attr="value "></target>
	<target attr=" value "></target>
	<target attr=" value value value "></target>

	<!-- Carriage return. -->
	<target attr=" "></target>
	<target attr=" value"></target>
	<target attr="value "></target>
	<target attr=" value "></target>
	<target attr=" value value value "></target>

	<!-- Carriage return. -->
	<target attr=""></target>
	<target attr="value"></target>
	<target attr="value"></target>
	<target attr="value"></target>
	<target attr="valuevaluevalue"></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). -->
	<target attr="&#x2003"></target>
	<target attr="&#x2003value"></target>
	<target attr="value&#x2003"></target>
	<target attr="&#x2003value&#x2003"></target>

	<!-- IDEOGRAPHIC SPACE (U+3000). -->
	<target attr="&#x3000"></target>
	<target attr="&#x3000value"></target>
	<target attr="value&#x3000"></target>
	<target attr="&#x3000value&#x3000"></target>
	</div>
	</body>
	<script>
	description('When performing attribute matching for space separated values (e.g. [attr~=value]), the selector cannot match anything if the selector\'s "value" contains a white space. This test check this is true for all the definitions of whitespace of the spec.');

	function hasElementStyledBySelector()
	{
	var allElements = document.querySelectorAll("*");
	for (var i = 0; i < allElements.length; ++i) {
	if (getComputedStyle(allElements[i]).backgroundColor == "rgb(1, 2, 3)")
	return true;
	}
	return false;
	}

	function testInvalidSelector(selectorString) {
	shouldBe('document.querySelectorAll(\'' + selectorString.replace(/\\/g, '\\\\') + '\').length', '0');

	var styleContainer = document.getElementById('style-container');
	styleContainer.innerHTML = '' + selectorString + ' { background-color: rgb(1, 2, 3); }';

	shouldBeFalse("hasElementStyledBySelector()");
	styleContainer.innerHTML = '';
	}

	var invalidValues = [
	// Empty.
	'[attr~=""]',

	// Regular whitespace.
	'[attr~=" "]',
	'[attr~="value "]',
	'[attr~=" value"]',
	'[attr~=" value "]',

	// Tab.
	'[attr~="\t"]',
	'[attr~="value\t"]',
	'[attr~="\tvalue"]',
	'[attr~="\tvalue\t"]',

	// Line feed.
	'[attr~="\\0a"]',
	'[attr~="\\0a "]',
	'[attr~="value\\0a"]',
	'[attr~="\\0a value"]',
	'[attr~="\\0a value\\0a"]',

	// Carriage return.
	'[attr~="\\0d"]',
	'[attr~="\\0d "]',
	'[attr~="value\\0d"]',
	'[attr~="\\0d value"]',
	'[attr~="\\0d value\\0d"]',

	// Form feed.
	'[attr~="\\0c"]',
	'[attr~="\\0c "]',
	'[attr~="value\\0c"]',
	'[attr~="\\0c value"]',
	'[attr~="\\0c value\\0c"]',
	];

	for (var i = 0; i < invalidValues.length; ++i)
	testInvalidSelector(invalidValues[i]);

	var validValues = [
	// EM SPACE.
	'[attr~="\\002003"]',
	'[attr~="value\\002003"]',
	'[attr~="\\002003 value"]',
	'[attr~="\\002003 value\\002003"]',

	// IDEOGRAPHIC SPACE.
	'[attr~="\\003000"]',
	'[attr~="value\\003000"]',
	'[attr~="\\003000 value"]',
	'[attr~="\\003000 value\\003000"]',
	];

	function testValidSelector(selectorString) {
	shouldBe('document.querySelectorAll(\'' + selectorString.replace(/\\/g, '\\\\') + '\').length', '1');

	var styleContainer = document.getElementById('style-container');
	styleContainer.innerHTML = '' + selectorString + ' { background-color: rgb(1, 2, 3); }';

	shouldBeTrue("hasElementStyledBySelector()");
	styleContainer.innerHTML = '';
	}

	for (var i = 0; i < validValues.length; ++i)
	testValidSelector(validValues[i]);
	</script>
	<script src="../../resources/js-test-post.js"></script>
	</html>