103 lines
2.6 KiB
HTML
103 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<style>
|
|
* {
|
|
color: black;
|
|
}
|
|
target:not(.Case1) {
|
|
color: rgb(0, 1, 2);
|
|
}
|
|
target:not(foo, .Case2, bar) {
|
|
color: rgb(3, 4, 5);
|
|
}
|
|
target:not(foo1, :matches(foo2, .Case3, bar1), bar2) {
|
|
color: rgb(6, 7, 8);
|
|
}
|
|
target:not(foo1, :not(foo2, .Case4, bar1), bar2) {
|
|
color: rgb(9, 10, 11);
|
|
}
|
|
target:not(foo1, :matches(foo2, :matches(foo3, .Case5, bar1), bar2), bar3) {
|
|
color: rgb(12, 13, 14);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<!-- With renderer -->
|
|
<target class="Case1 Case2 Case3 Case5"></target>
|
|
</div>
|
|
<div style="display:none;">
|
|
<!-- Without renderer -->
|
|
<target class="Case1 Case2 Case3 Case5"></target>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
|
|
description('Test that the style of elements is invalidated correctly when a class changes inside :not() can affect its style. Elements are only invalidate if the class changed affects the style. It is important to account nested selector lists.');
|
|
|
|
function addClass(name) {
|
|
var allTargets = document.querySelectorAll("target");
|
|
allTargets[0].classList.add(name);
|
|
allTargets[1].classList.add(name);
|
|
}
|
|
|
|
function removeClass(name) {
|
|
var allTargets = document.querySelectorAll("target");
|
|
allTargets[0].classList.remove(name);
|
|
allTargets[1].classList.remove(name);
|
|
}
|
|
|
|
function checkStyle(expectedColor) {
|
|
shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[0]).color', expectedColor);
|
|
shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[1]).color', expectedColor);
|
|
}
|
|
|
|
// Force a layout to ensure we don't have dirty styles.
|
|
var offsetTop = document.documentElement.offsetTop;
|
|
|
|
checkStyle('rgb(0, 0, 0)');
|
|
|
|
// Change the classes one by one.
|
|
removeClass('Case1');
|
|
checkStyle('rgb(0, 1, 2)');
|
|
addClass('Case1');
|
|
checkStyle('rgb(0, 0, 0)');
|
|
|
|
removeClass('Case2');
|
|
checkStyle('rgb(3, 4, 5)');
|
|
addClass('Case2');
|
|
checkStyle('rgb(0, 0, 0)');
|
|
|
|
removeClass('Case3');
|
|
checkStyle('rgb(6, 7, 8)');
|
|
addClass('Case3');
|
|
checkStyle('rgb(0, 0, 0)');
|
|
|
|
addClass('Case4');
|
|
checkStyle('rgb(9, 10, 11)');
|
|
removeClass('Case4');
|
|
checkStyle('rgb(0, 0, 0)');
|
|
|
|
removeClass('Case5');
|
|
checkStyle('rgb(12, 13, 14)');
|
|
addClass('Case5');
|
|
checkStyle('rgb(0, 0, 0)');
|
|
|
|
|
|
// Remove the classes one after the other.
|
|
removeClass('Case1');
|
|
checkStyle('rgb(0, 1, 2)');
|
|
removeClass('Case2');
|
|
checkStyle('rgb(3, 4, 5)');
|
|
removeClass('Case3');
|
|
checkStyle('rgb(6, 7, 8)');
|
|
addClass('Case4');
|
|
checkStyle('rgb(9, 10, 11)');
|
|
removeClass('Case5');
|
|
checkStyle('rgb(12, 13, 14)');
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</html>
|