Fix some bad cascade computation in getComputedStyle()

Closes #3182.
jsdom · Aug 1, 2021 · 0dedfc0 · 0dedfc0
1 parent 8021a56
commit 0dedfc0
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 1 deletion.
diff --git a/lib/jsdom/living/helpers/style-rules.js b/lib/jsdom/living/helpers/style-rules.js
@@ -60,7 +60,11 @@ function getCascadedPropertyValue(element, property) {
   let value = "";
 
   exports.forEachMatchingSheetRuleOfElement(element, rule => {
-    value = rule.style.getPropertyValue(property);
+    const propertyValue = rule.style.getPropertyValue(property);
+    // getPropertyValue returns "" if the property is not found
+    if (propertyValue !== "") {
+      value = propertyValue;
+    }
   });
 
   const inlineValue = element.style.getPropertyValue(property);

diff --git a/...web-platform-tests/to-upstream/cssom/getComputedStyle-visibility-nominal-case-inline.html b/...web-platform-tests/to-upstream/cssom/getComputedStyle-visibility-nominal-case-inline.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Computed visibility in nominal case for inline styles</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<!-- Test for https://github.com/jsdom/jsdom/issues/3182 -->
+
+<body>
+  <div id="hiddenDiv" style="visibility: hidden;">Hello, Ronron!</div>
+</body>
+
+<script>
+"use strict";
+
+
+test(() => {
+  const element = document.querySelector("body");
+  assert_equals(getComputedStyle(element).visibility, "visible");
+}, "Sanity check: getComputedStyle returns apparent visibility");
+
+test(() => {
+  const element = document.querySelector("#hiddenDiv");
+  assert_equals(getComputedStyle(element).visibility, "hidden");
+}, "Real check: getComputedStyle returns hidden visibility for inline styles");
+
+</script>
diff --git a/test/web-platform-tests/to-upstream/cssom/getComputedStyle-visibility-nominal-case.html b/test/web-platform-tests/to-upstream/cssom/getComputedStyle-visibility-nominal-case.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Computed visibility in nominal case</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<!-- Test for https://github.com/jsdom/jsdom/issues/3182 -->
+
+<style>
+  #hiddenDiv {
+    visibility: hidden;
+  }
+
+  /* This rule is important because add rule on the div */
+  * {
+            margin-bottom: 10px;
+  }
+</style>
+
+<body>
+  <div id="hiddenDiv">Hello, Ronron!</div>
+</body>
+
+<script>
+"use strict";
+
+
+test(() => {
+  const element = document.querySelector("body");
+  assert_equals(getComputedStyle(element).visibility, "visible");
+}, "Sanity check: getComputedStyle returns apparent visibility");
+
+test(() => {
+  const element = document.querySelector("#hiddenDiv");
+  assert_equals(getComputedStyle(element).visibility, "hidden");
+}, "Real check: getComputedStyle returns hidden visibility");
+
+</script>