98 lines
3.2 KiB
HTML
98 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<style>
|
|
* {
|
|
color: black;
|
|
}
|
|
[CamelCase] {
|
|
color: pink;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<!-- With renderer -->
|
|
<target></target>
|
|
</div>
|
|
<div style="display:none;">
|
|
<!-- Without renderer -->
|
|
<target></target>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
// It is okay to increase the amount of invalidation in this test for correctness if necessary.
|
|
description('Test that we only invalidate the style when changing an attribute referenced by a stylesheet. This test requires the internals object to work properly.');
|
|
|
|
function shouldNeedStyleRecalc(expected) {
|
|
var testFunction = expected ? shouldBeTrue : shouldBeFalse;
|
|
testFunction("window.internals.nodeNeedsStyleRecalc(document.querySelectorAll(\"target\")[0])");
|
|
testFunction("window.internals.nodeNeedsStyleRecalc(document.querySelectorAll(\"target\")[1])");
|
|
}
|
|
|
|
function setAttribute(name, value) {
|
|
var allTargets = document.querySelectorAll("target");
|
|
allTargets[0].setAttribute(name, value);
|
|
allTargets[1].setAttribute(name, value);
|
|
}
|
|
|
|
function removeAttribute(name) {
|
|
var allTargets = document.querySelectorAll("target");
|
|
allTargets[0].removeAttribute(name);
|
|
allTargets[1].removeAttribute(name);
|
|
}
|
|
|
|
function getStyle() {
|
|
var allTargets = document.querySelectorAll("target");
|
|
getComputedStyle(allTargets[0]).color;
|
|
getComputedStyle(allTargets[1]).color;
|
|
}
|
|
|
|
// Force a layout to ensure we don't have dirty styles.
|
|
var offsetTop = document.documentElement.offsetTop;
|
|
shouldNeedStyleRecalc(false);
|
|
|
|
debug("Changing the attribute 'foo', it is not referenced by any stylesheet and should not cause any invalidation.");
|
|
setAttribute("foo", "bar");
|
|
shouldNeedStyleRecalc(false);
|
|
|
|
debug("Changing the attribute 'CamelCase'. It is used by the stylesheet and should cause the target to be invalidated.");
|
|
setAttribute("CamelCase", "");
|
|
shouldNeedStyleRecalc(true);
|
|
|
|
debug("Getting the computed style should for the style to be resolved.");
|
|
getStyle();
|
|
shouldNeedStyleRecalc(false);
|
|
|
|
debug("Removing the attribute should also invalidate the style.");
|
|
removeAttribute("CamelCase");
|
|
shouldNeedStyleRecalc(true);
|
|
|
|
debug("Getting the computed style should for the style to be resolved.");
|
|
getStyle();
|
|
shouldNeedStyleRecalc(false)
|
|
|
|
debug("Changing the attribute 'camelcase'. It is not used as such by the stylesheet, but in HTML attribute names are case-insensitive and we should still invalidate the style.");
|
|
setAttribute("camelcase", "");
|
|
shouldNeedStyleRecalc(true);
|
|
|
|
debug("Getting the computed style should for the style to be resolved.");
|
|
getStyle();
|
|
shouldNeedStyleRecalc(false);
|
|
|
|
debug("Removing the attribute should also invalidate the style.");
|
|
removeAttribute("CamelCase");
|
|
shouldNeedStyleRecalc(true);
|
|
|
|
debug("Getting the computed style should for the style to be resolved.");
|
|
getStyle();
|
|
shouldNeedStyleRecalc(false)
|
|
|
|
debug("Changing the attribute 'CAMELCASE'. It is not used as such by the stylesheet, but in HTML attribute names are case-insensitive and we should still invalidate the style.");
|
|
setAttribute("CAMELCASE", "");
|
|
shouldNeedStyleRecalc(true);
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</html>
|