<!doctype html>
<html>
<head>
<style>
span { display: none }
*[test~="0"] #sp { color: green; display: block}
</style>
</head>
<body onload="startTest();">
<div test="1">
<p>
Test for bug <a href="https://bugs.webkit.org/show_bug.cgi?id=60752">https://bugs.webkit.org/show_bug.cgi?id=60752</a>
</p>
<p>This test checks whether CSS attribute selector [att~=val] is re-evaluated after attribute changes in DOM elements which have no style associated with them.</p>
<span id="sp">PASSED</span>
</div>
<script>
function change() {
var element = document.getElementsByTagName('div')[0];
element.attributes.test.value = "updated attributed value 0";
if (window.testRunner) {
testRunner.notifyDone();
}
}
function startTest() {
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
// Trigger an attribute change after all load processing is done. Doing the change
// here immediately does not exhibit the problem.
setTimeout("change();", 0);
}
</script>
</body>
</html>