LayoutTests/fast/selectors/first-of-type-sibling-style-update.html - WebKit - Git at Google

 <!doctype html>
 <html>
 <head>
 <script src="../../resources/js-test-pre.js"></script>
 <style>
 * {
     background-color: white;
     color: black;
     fill-opacity: 1;
     min-width: 0px;
 }
 foo:first-of-type+padding+padding+padding+bar {
     background-color: rgb(1, 2, 3);
 }
 foo:first-of-type+padding~bar {
     fill-opacity: 0.5;
 }
 foo:first-of-type+padding+padding+padding+bar baz {
     color: rgb(4, 5, 6);
 }
 foo:first-of-type+padding~bar baz {
     min-width: 1px;
 }
 </style>
 </head>
 <body>
     <div>
         <foo></foo>
         <padding></padding>
         <padding></padding>
         <padding></padding>
         <bar id="bar-with-renderer">
             <baz id="baz-with-renderer"></baz>
         </bar>
     </div>
     <div style="display:none;">
         <foo></foo>
         <padding></padding>
         <padding></padding>
         <padding></padding>
         <bar id="bar-without-renderer">
             <baz id="baz-without-renderer"></baz>
         </bar>
     </div>
 </body>
 <script>
 description('Test style update caused by tree changes with the selector :first-of-type.');

 function testColor(expectMatch) {
     shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
     shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor', 'rgb(255, 255, 255)');
     shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
     shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor', 'rgb(255, 255, 255)');

     shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).fillOpacity', expectMatch ? '0.5' : '1');
     shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).fillOpacity', '1');
     shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).fillOpacity', expectMatch ? '0.5' : '1');
     shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).fillOpacity', '1');

     shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).color', 'rgb(0, 0, 0)');
     shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).color', expectMatch ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
     shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).color', 'rgb(0, 0, 0)');
     shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).color', expectMatch ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');

     shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).minWidth', '0px');
     shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).minWidth', expectMatch ? '1px': '0px');
     shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).minWidth', '0px');
     shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).minWidth', expectMatch ? '1px': '0px');
 }

 function addElementAsFirstChild(tagName, className)
 {
     var allFoos = document.querySelectorAll("foo");
     for (var i = 0; i < allFoos.length; ++i) {
         var newElement = document.createElement(tagName);
         newElement.className = className;
         allFoos[i].parentElement.insertBefore(newElement, allFoos[i]);
     }
 }

 debug("Initialy, &lt;foo&gt; is the first of its type, the style should match.");
 testColor(true);

 debug("Adding a few elements that are not &lt;foo&gt; do not invalidate the :first-of-type.");
 addElementAsFirstChild("notfoo");
 addElementAsFirstChild("notfoo");
 addElementAsFirstChild("notfoo");
 addElementAsFirstChild("notfoo");
 testColor(true);

 debug("Adding a second &lt;foo&gt;. This should breat the rules because the new foo does not match \"+ padding\".");
 addElementAsFirstChild("foo", "extra-foo");
 testColor(false);

 debug("Adding a few elements that are not &lt;foo&gt;, we should still not match because of the previously added &lt;foo&gt;.");
 addElementAsFirstChild("notfoo");
 addElementAsFirstChild("notfoo");
 addElementAsFirstChild("notfoo");
 addElementAsFirstChild("notfoo");
 testColor(false);

 debug("Removing the &lt;foo&gt; blocking foo:first-of-type+padding.");
 var extraFoos = document.querySelectorAll(".extra-foo");
 for (var i = 0; i < extraFoos.length; ++i)
     extraFoos[i].parentElement.removeChild(extraFoos[i]);
 testColor(true);
 </script>
 <script src="../../resources/js-test-post.js"></script>
 </html>
	<!doctype html>
	<html>
	<head>
	<script src="../../resources/js-test-pre.js"></script>
	<style>
	* {
	background-color: white;
	color: black;
	fill-opacity: 1;
	min-width: 0px;
	}
	foo:first-of-type+padding+padding+padding+bar {
	background-color: rgb(1, 2, 3);
	}
	foo:first-of-type+padding~bar {
	fill-opacity: 0.5;
	}
	foo:first-of-type+padding+padding+padding+bar baz {
	color: rgb(4, 5, 6);
	}
	foo:first-of-type+padding~bar baz {
	min-width: 1px;
	}
	</style>
	</head>
	<body>
	<div>
	<foo></foo>
	<padding></padding>
	<padding></padding>
	<padding></padding>
	<bar id="bar-with-renderer">
	<baz id="baz-with-renderer"></baz>
	</bar>
	</div>
	<div style="display:none;">
	<foo></foo>
	<padding></padding>
	<padding></padding>
	<padding></padding>
	<bar id="bar-without-renderer">
	<baz id="baz-without-renderer"></baz>
	</bar>
	</div>
	</body>
	<script>
	description('Test style update caused by tree changes with the selector :first-of-type.');

	function testColor(expectMatch) {
	shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
	shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).backgroundColor', 'rgb(255, 255, 255)');
	shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
	shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).backgroundColor', 'rgb(255, 255, 255)');

	shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).fillOpacity', expectMatch ? '0.5' : '1');
	shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).fillOpacity', '1');
	shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).fillOpacity', expectMatch ? '0.5' : '1');
	shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).fillOpacity', '1');

	shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).color', 'rgb(0, 0, 0)');
	shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).color', expectMatch ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');
	shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).color', 'rgb(0, 0, 0)');
	shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).color', expectMatch ? 'rgb(4, 5, 6)' : 'rgb(0, 0, 0)');

	shouldBeEqualToString('getComputedStyle(document.getElementById("bar-with-renderer")).minWidth', '0px');
	shouldBeEqualToString('getComputedStyle(document.getElementById("baz-with-renderer")).minWidth', expectMatch ? '1px': '0px');
	shouldBeEqualToString('getComputedStyle(document.getElementById("bar-without-renderer")).minWidth', '0px');
	shouldBeEqualToString('getComputedStyle(document.getElementById("baz-without-renderer")).minWidth', expectMatch ? '1px': '0px');
	}

	function addElementAsFirstChild(tagName, className)
	{
	var allFoos = document.querySelectorAll("foo");
	for (var i = 0; i < allFoos.length; ++i) {
	var newElement = document.createElement(tagName);
	newElement.className = className;
	allFoos[i].parentElement.insertBefore(newElement, allFoos[i]);
	}
	}

	debug("Initialy, <foo> is the first of its type, the style should match.");
	testColor(true);

	debug("Adding a few elements that are not <foo> do not invalidate the :first-of-type.");
	addElementAsFirstChild("notfoo");
	addElementAsFirstChild("notfoo");
	addElementAsFirstChild("notfoo");
	addElementAsFirstChild("notfoo");
	testColor(true);

	debug("Adding a second <foo>. This should breat the rules because the new foo does not match \"+ padding\".");
	addElementAsFirstChild("foo", "extra-foo");
	testColor(false);

	debug("Adding a few elements that are not <foo>, we should still not match because of the previously added <foo>.");
	addElementAsFirstChild("notfoo");
	addElementAsFirstChild("notfoo");
	addElementAsFirstChild("notfoo");
	addElementAsFirstChild("notfoo");
	testColor(false);

	debug("Removing the <foo> blocking foo:first-of-type+padding.");
	var extraFoos = document.querySelectorAll(".extra-foo");
	for (var i = 0; i < extraFoos.length; ++i)
	extraFoos[i].parentElement.removeChild(extraFoos[i]);
	testColor(true);
	</script>
	<script src="../../resources/js-test-post.js"></script>
	</html>