Add support for unset CSS keyword to getComputedStyle()

jsdom · Jan 10, 2023 · 8a43fd5 · 8a43fd5
1 parent eb82a27
commit 8a43fd5
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 12 deletions.
diff --git a/lib/jsdom/browser/Window.js b/lib/jsdom/browser/Window.js
@@ -834,28 +834,37 @@ function Window(options) {
 
     const declaration = new CSSStyleDeclaration();
     const { forEach } = Array.prototype;
-    const { style } = elt;
 
-    forEachMatchingSheetRuleOfElement(elt, rule => {
-      forEach.call(rule.style, property => {
+    function handleProperty(style, property) {
+      const value = style.getPropertyValue(property);
+      // https://drafts.csswg.org/css-cascade-4/#valdef-all-unset
+      if (value === "unset") {
+        declaration.removeProperty(property);
+      } else {
         declaration.setProperty(
           property,
-          rule.style.getPropertyValue(property),
-          rule.style.getPropertyPriority(property)
+          value,
+          style.getPropertyPriority(property)
         );
+      }
+    }
+
+    forEachMatchingSheetRuleOfElement(elt, rule => {
+      forEach.call(rule.style, property => {
+        handleProperty(rule.style, property);
       });
     });
 
+    forEach.call(elt.style, property => {
+      handleProperty(elt.style, property);
+    });
+
     // https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle
     const declarations = Object.keys(propertiesWithResolvedValueImplemented);
     forEach.call(declarations, property => {
       declaration.setProperty(property, getResolvedValue(elt, property));
     });
 
-    forEach.call(style, property => {
-      declaration.setProperty(property, style.getPropertyValue(property), style.getPropertyPriority(property));
-    });
-
     return declaration;
   };
 

diff --git a/lib/jsdom/living/helpers/style-rules.js b/lib/jsdom/living/helpers/style-rules.js
@@ -61,14 +61,19 @@ function getCascadedPropertyValue(element, property) {
 
   exports.forEachMatchingSheetRuleOfElement(element, rule => {
     const propertyValue = rule.style.getPropertyValue(property);
-    // getPropertyValue returns "" if the property is not found
-    if (propertyValue !== "") {
+    // https://drafts.csswg.org/css-cascade-4/#valdef-all-unset
+    if (propertyValue === "unset") {
+      value = "";
+    } else if (propertyValue !== "") { // getPropertyValue returns "" if the property is not found
       value = propertyValue;
     }
   });
 
   const inlineValue = element.style.getPropertyValue(property);
-  if (inlineValue !== "" && inlineValue !== null) {
+  // https://drafts.csswg.org/css-cascade-4/#valdef-all-unset
+  if (inlineValue === "unset") {
+    value = "";
+  } else if (inlineValue !== "" && inlineValue !== null) {
     value = inlineValue;
   }
 

diff --git a/test/web-platform-tests/to-upstream/cssom/getComputedStyle-visibility-unset.html b/test/web-platform-tests/to-upstream/cssom/getComputedStyle-visibility-unset.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Inherited visibility can be unset</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+  #parent {
+    visibility: hidden;
+  }
+  #child {
+    visibility: visible;
+  }
+  div#child {
+    visibility: unset;
+  }
+</style>
+
+<body>
+  <div id="parent">
+      <div id="child">Hello, Dave!</div>
+  </div>
+</body>
+
+<script>
+"use strict";
+
+test(() => {
+  const element = document.querySelector("#parent");
+  assert_equals(getComputedStyle(element).visibility, "hidden");
+}, "Sanity check: Parent is actually visibly hidden");
+
+test(() => {
+  const element = document.querySelector("#child");
+  assert_equals(getComputedStyle(element).visibility, "hidden");
+}, "computed visibility gets unset and inherits from parent");
+</script>