You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This PR is adding support for inheritance of the pointer-events CSS property to getComputedStyle(). If a parent element specifies pointer-events: none, then for a child element getComputedStyle(childEl).pointerEvents should be none, too.
This has been implemented for visibility for some time, and pointer-events is also an "Inherited: yes" (#) property, with the same inheritance behavior, and deserves to be supported.
A real-world impact of this should be improved performance of Testing Library, namely the closestPointerEventsDeclaration helper in @testing-library/user-event. Every userEvent.click(el) call runs this to find out if pointer-events are allowed. Its complexity should be reduced from O(n^2) to just O(n) (more here).
A real-world impact of this should be improved performance of Testing Library
Well, when I ran one of our Testing Library tests on this patched JSDOM, it's actually 50% slower 🙁 Most likely because for every getComputedStyle call, JSDOM used to traverse the parent elements, match styles against them, and figure out the inherited visibility. Now it does that traversal twice, newly also for pointer-events.
To fix this regression, we'd either have to optimize the getResolvedValue calls so that the forEachMatchingSheetRuleOfElement loop is done only once, or implement computed style caching.
Well, when I ran one of our Testing Library tests on this patched JSDOM, it's actually 50% slower
I added a computed styles cache in #3482, and when this pointer-events patch is applied on top of that, it actually delivers the expected performance improvements for @testing-library/user-event. There's a 30% improvement. Described in detail in #3482 PR description.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR is adding support for inheritance of the
pointer-eventsCSS property togetComputedStyle(). If a parent element specifiespointer-events: none, then for a child elementgetComputedStyle(childEl).pointerEventsshould benone, too.This has been implemented for
visibilityfor some time, andpointer-eventsis also an "Inherited: yes" (#) property, with the same inheritance behavior, and deserves to be supported.A real-world impact of this should be improved performance of Testing Library, namely the
closestPointerEventsDeclarationhelper in@testing-library/user-event. EveryuserEvent.click(el)call runs this to find out ifpointer-events are allowed. Its complexity should be reduced from O(n^2) to just O(n) (more here).