Bug 1418433 - Add tests for style data update mechanism for non-displayed elements. r=emilio, r=heycam, a=gchang
authorJeremy Chen <jeremychen@mozilla.com>
Sun, 26 Nov 2017 15:24:12 +0000
changeset 442680 005f0819a0cdbb88070d7fd1a8fa24e6903354c8
parent 442679 9ebc50b8692dfa0e779024b28396b69dea7ee6a5
child 442681 25f3d0651a78a6d30dfe4237d5d41d3d653b463e
push id8299
push userryanvm@gmail.com
push dateSun, 03 Dec 2017 18:46:48 +0000
treeherdermozilla-beta@43f74013ae08 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersemilio, heycam, gchang
bugs1418433
milestone58.0
Bug 1418433 - Add tests for style data update mechanism for non-displayed elements. r=emilio, r=heycam, a=gchang 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
layout/style/test/test_computed_style.html
--- 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>