Skip to content

Commit

Permalink
Add inheritance for pointer-events to getComputedStyle()
Browse files Browse the repository at this point in the history
  • Loading branch information
jsnajdr committed Jan 22, 2023
1 parent 709f33a commit a5204df
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 3 deletions.
12 changes: 9 additions & 3 deletions lib/jsdom/living/helpers/style-rules.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
};

Expand Down Expand Up @@ -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."
Expand Down
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit a5204df

Please sign in to comment.