Try not to expand :matches pseudo-classes
Reported by
oriol-bu...@hotmail.com,
Mar 1 2018
|
||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
Steps to reproduce the problem:
Enable "Experimental Web Platform features" flag, required by :matches.
Open attached testcase. It uses this CSS:
:matches(div, .c1, .z)
:matches(div, .c2, .z)
:matches(div, .c3, .z)
:matches(div, .c4, .z)
:matches(div, .c5, .z)
:matches(div, .c6, .z)
:matches(div, .c7, .z) {
color: green
}
What is the expected behavior?
The selector matches and the text is green.
What went wrong?
The selector does not match.
Did this work before? No
Does this work in other browsers? N/A
Chrome version: 66.0.3342.0 Channel: n/a
OS Version: 10.0
Flash Version: Shockwave Flash 28.0 r0
The problem is that :matches pseudo-classes are expanded. So the resulting selector list is exponentially long, and Chromium imposes a limit: https://chromium-review.googlesource.com/c/chromium/src/+/879982/15/third_party/WebKit/Source/core/css/CSSSelectorList.cpp#165
Not sure if it's possible, but I think you should try to implement :matches without expansions, then you won't have this problem.
This could imply that the specificity of :matches needs to be reconsidered, see https://github.com/w3c/csswg-drafts/issues/1027
,
Dec 24
,
Jan 8
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/cc86123fa6b08b7819bdcbc295d39941324adbdf commit cc86123fa6b08b7819bdcbc295d39941324adbdf Author: Eric Willigers <ericwilligers@chromium.org> Date: Tue Jan 08 09:27:27 2019 CSS: Reduce invalidation from final compound When a CSS Selector like .a .b ~ c.d#e ends in a compound selector, and an element is modified such that some siblings or descendants need to have their styles invalidated, only use a most specific simple selector in the final compound selector when marking siblings or descendants for invalidation. In this context, consider id more specific than class, class more specific than arbirary attribute, attribute more specific than tag, tag more specific than *, :not(), -webkit-any() etc. For more context, see https://docs.google.com/document/d/1ZYNofWc2MMr7Pp5MHJ29dmdlNfM0YcM0CNfw_r1UJp0/edit?usp=sharing BUG=817835 Change-Id: I962ab46423a65f2d04d2d0532d283907fb180ca1 Reviewed-on: https://chromium-review.googlesource.com/c/1390016 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Eric Willigers <ericwilligers@chromium.org> Cr-Commit-Position: refs/heads/master@{#620664} [modify] https://crrev.com/cc86123fa6b08b7819bdcbc295d39941324adbdf/third_party/blink/renderer/core/css/rule_feature_set.cc [modify] https://crrev.com/cc86123fa6b08b7819bdcbc295d39941324adbdf/third_party/blink/renderer/core/css/rule_feature_set.h [modify] https://crrev.com/cc86123fa6b08b7819bdcbc295d39941324adbdf/third_party/blink/renderer/core/css/rule_feature_set_test.cc [modify] https://crrev.com/cc86123fa6b08b7819bdcbc295d39941324adbdf/third_party/blink/renderer/core/css/style-invalidation.md [modify] https://crrev.com/cc86123fa6b08b7819bdcbc295d39941324adbdf/third_party/blink/web_tests/fast/css/invalidation/compound.html [add] https://crrev.com/cc86123fa6b08b7819bdcbc295d39941324adbdf/third_party/blink/web_tests/fast/css/invalidation/invalidation-set-compound.html |
||
►
Sign in to add a comment |
||
Comment 1 by e...@chromium.org
, Mar 1 2018