Bug 1418433 - add tests for style data update mechanism for non-displayed elements.
In certain situations, we might access a non-displayed (i.e., display: none;)
element's style data through getComputedStyle API. In this patch, we add some
tests to ensure that, if the inline style sheet is added/changed/removed, the
style data of a non-displayed element is always up-to-date. Some more tests
are added to verify the correctness of the style data when a style rule is
added/changed/removed via CSSOM.
MozReview-Commit-ID: Ggjd4FMqZlo
--- a/layout/style/test/test_computed_style.html
+++ b/layout/style/test/test_computed_style.html
@@ -1,20 +1,20 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Test for miscellaneous computed style issues</title>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+ <style id="style"></style>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a>
<p id="display"></p>
<div id="content" style="display: none">
-
</div>
<pre id="test">
<script type="application/javascript">
/** Test for miscellaneous computed style issues **/
var frame_container = document.getElementById("display");
var noframe_container = document.getElementById("content");
@@ -727,12 +727,53 @@ var noframe_container = document.getElem
p.style.clipPath = test[0];
is(cs.clipPath, test[1],
"computed value of clip-path for basic-shapes (" + test[2] + ")");
}
p.remove();
})();
+(function test_bug_1418433() {
+ // Test that the style data read through getComputedStyle is always up-to-date,
+ // even for non-displayed elements.
+
+ var d = document.createElement("div");
+ d.setAttribute("id", "nonDisplayedDiv");
+ var cs = getComputedStyle(d, null);
+ noframe_container.appendChild(d);
+
+ // Test for stylesheet change, i.e., added/changed/removed
+ var style = document.getElementById("style");
+ is(cs.height, "auto",
+ "computed value of display none element (before testing)");
+ style.textContent = "#nonDisplayedDiv { height: 100px; }";
+ is(cs.height, "100px",
+ "computed value of display none element (sheet added)");
+ style.textContent = "#nonDisplayedDiv { height: 10px; }";
+ is(cs.height, "10px",
+ "computed value of display none element (sheet changed)");
+ style.textContent = "";
+ is(cs.height, "auto",
+ "computed value of display none element (sheet removed)");
+
+ // Test for rule change, i.e., added/changed/removed
+ var styleSheet = style.sheet;
+ is(cs.width, "auto",
+ "computed value of display none element (before testing)");
+ styleSheet.insertRule("#nonDisplayedDiv { width: 100px; }", 0);
+ is(cs.width, "100px",
+ "computed value of display none element (rule added)");
+ styleSheet.deleteRule(0);
+ styleSheet.insertRule("#nonDisplayedDiv { width: 10px; }", 0);
+ is(cs.width, "10px",
+ "computed value of display none element (rule changed)");
+ styleSheet.deleteRule(0);
+ is(cs.width, "auto",
+ "computed value of display none element (rule removed)");
+
+ d.remove();
+})();
+
</script>
</pre>
</body>
</html>