85 lines
2.8 KiB
HTML
85 lines
2.8 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<style id="style">
|
|
* {
|
|
color: black;
|
|
}
|
|
[style*="PURPLE" i] {
|
|
color: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="test-root-with-renderer">
|
|
<div id="target-with-renderer" style="background-color: purple;"></div>
|
|
</div>
|
|
|
|
<div style="display:none">
|
|
<div id="target-without-renderer"style="background-color: purple;"></div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
description('Test attribute matching with the case insensitive flag used to match the style attribute.');
|
|
|
|
function testStyle(expectedValues) {
|
|
for (var key in expectedValues) {
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target-with-renderer"))["' + key + '"]', expectedValues[key]);
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target-without-renderer"))["' + key + '"]', expectedValues[key]);
|
|
}
|
|
}
|
|
|
|
function testQuerySelector(expectMatch) {
|
|
if (expectMatch) {
|
|
shouldBe('document.querySelectorAll("[style*=PURPLE i]").length', '2');
|
|
shouldBeEqualToString('document.querySelectorAll("[style*=PURPLE i]")[0].id', 'target-with-renderer');
|
|
shouldBeEqualToString('document.querySelectorAll("[style*=PURPLE i]")[1].id', 'target-without-renderer');
|
|
} else {
|
|
shouldBe('document.querySelectorAll("[style*=PURPLE i]").length', '0');
|
|
}
|
|
}
|
|
|
|
function test(expectMatch, expectedValues) {
|
|
testQuerySelector(expectMatch);
|
|
testStyle(expectedValues);
|
|
}
|
|
|
|
// Force a layout.
|
|
var sideEffect = document.body.offsetTop;
|
|
|
|
|
|
debug("Initial state.");
|
|
test(true, {color: "rgb(255, 0, 0)", "background-color": "rgb(128, 0, 128)"});
|
|
|
|
document.getElementById('test-root-with-renderer').style.display = "None";
|
|
debug("");
|
|
|
|
debug("Let's change the background color to something else than purple.");
|
|
var targetWithRenderer = document.getElementById('target-with-renderer');
|
|
var targetWithoutRenderer = document.getElementById('target-without-renderer');
|
|
targetWithRenderer.style.backgroundColor = 'red';
|
|
targetWithoutRenderer.style.backgroundColor = 'red';
|
|
test(false, {color: "rgb(0, 0, 0)", "background-color": "rgb(255, 0, 0)"});
|
|
debug("");
|
|
|
|
debug("Back to purple.");
|
|
targetWithRenderer.style.backgroundColor = 'purple';
|
|
targetWithoutRenderer.style.backgroundColor = 'purple';
|
|
test(true, {color: "rgb(255, 0, 0)", "background-color": "rgb(128, 0, 128)"});
|
|
debug("");
|
|
|
|
debug("Remove the style attribute entirely.");
|
|
targetWithRenderer.removeAttribute('style');
|
|
targetWithoutRenderer.removeAttribute('style');
|
|
test(false, {});
|
|
debug("");
|
|
|
|
debug("Back to purple.");
|
|
targetWithRenderer.style.backgroundColor = 'purple';
|
|
targetWithoutRenderer.style.backgroundColor = 'purple';
|
|
test(true, {color: "rgb(255, 0, 0)", "background-color": "rgb(128, 0, 128)"});
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</html>
|