LayoutTests/fast/css/attribute-selector-recursive-update-on-setAttribute.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <script src="../js/resources/js-test-pre.js"></script>
 <style>
 .entry[status="foo"] .toggle {
     color: green;
 }
 .entry[status="bar"] .toggle {
     color: red;
 }
 </style>
 </head>
 <body>
 <div class="entry" status="foo">
     <span class="toggle">Text.</span>
 </div>
 <script>

 description("This test checks that attribute selectors are recursively re-evaluated when the attribute changes.");

 var entry= document.getElementsByClassName("entry")[0];
 var toggle = document.getElementsByClassName("toggle")[0];

 shouldBe("getComputedStyle(toggle).color", "'rgb(0, 128, 0)'");
 entry.setAttribute("status", "bar");
 shouldBe("getComputedStyle(toggle).color", "'rgb(255, 0, 0)'");

 document.body.removeChild(entry);

 </script>
 <script src="../js/resources/js-test-post.js"></script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="../js/resources/js-test-pre.js"></script>
	<style>
	.entry[status="foo"] .toggle {
	color: green;
	}
	.entry[status="bar"] .toggle {
	color: red;
	}
	</style>
	</head>
	<body>
	<div class="entry" status="foo">
	<span class="toggle">Text.</span>
	</div>
	<script>

	description("This test checks that attribute selectors are recursively re-evaluated when the attribute changes.");

	var entry= document.getElementsByClassName("entry")[0];
	var toggle = document.getElementsByClassName("toggle")[0];

	shouldBe("getComputedStyle(toggle).color", "'rgb(0, 128, 0)'");
	entry.setAttribute("status", "bar");
	shouldBe("getComputedStyle(toggle).color", "'rgb(255, 0, 0)'");

	document.body.removeChild(entry);

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