Add inheritance for pointer-events to getComputedStyle()

jsdom · Jan 22, 2023 · a5204df · a5204df
1 parent 709f33a
commit a5204df
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/lib/jsdom/living/helpers/style-rules.js b/lib/jsdom/living/helpers/style-rules.js
@@ -12,13 +12,19 @@ let parsedDefaultStyleSheet;
 // every supported property.
 // https://drafts.csswg.org/indexes/#properties
 exports.propertiesWithResolvedValueImplemented = {
-  __proto__: null,
+  "__proto__": null,
 
   // https://drafts.csswg.org/css2/visufx.html#visibility
-  visibility: {
+  "visibility": {
     inherited: true,
     initial: "visible",
     computedValue: "as-specified"
+  },
+  // https://svgwg.org/svg2-draft/interact.html#PointerEventsProperty
+  "pointer-events": {
+    inherited: true,
+    initial: "auto",
+    computedValue: "as-specified"
   }
 };
 
@@ -138,7 +144,7 @@ function getComputedValue(element, property) {
 }
 
 // https://drafts.csswg.org/cssom/#resolved-value
-// Only implements `visibility`
+// Only implements `visibility` and `pointer-events`
 exports.getResolvedValue = (element, property) => {
   // Determined for special case properties, none of which are implemented here.
   // So we skip to "any other property: The resolved value is the computed value."

diff --git a/test/web-platform-tests/to-upstream/cssom/getComputedStyle-pointerEvents.html b/test/web-platform-tests/to-upstream/cssom/getComputedStyle-pointerEvents.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Computed pointerEvents is inherited</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+  #parent {
+    pointer-events: none;
+  }
+</style>
+
+<body>
+  <div id="parent">
+      <div id="child">Hello, Jarda!</div>
+  </div>
+</body>
+
+<script>
+"use strict";
+
+test(() => {
+  const element = document.querySelector("body");
+  assert_equals(getComputedStyle(element).pointerEvents, "auto");
+}, "Body element has the initial value for pointerEvents");
+
+test(() => {
+  const element = document.querySelector("#parent");
+  assert_equals(getComputedStyle(element).pointerEvents, "none");
+}, "Parent element returns the directly specified value for pointerEvents");
+
+test(() => {
+  const element = document.querySelector("#child");
+  assert_equals(getComputedStyle(element).pointerEvents, "none");
+}, "Child element inherits the pointerEvents value from its parent");
+</script>