New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 842157 link

Starred by 3 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug

Blocking:
issue 568705



Sign in to add a comment

:matches expansion isn't correct

Project Member Reported by emilio@chromium.org, May 11 2018

Issue description

Chrome Version       : Trunk
OS Version: N/A
URLs (if applicable) : https://dbaron.org/css/test/2018/matches-selector
Other browsers tested:
  Add OK or FAIL after other browsers where you have tested this issue:
     Safari: OK
    Firefox: N/A (:matches not implemented)
    IE/Edge: N/A (:matches not implemented)

What steps will reproduce the problem?
1. Load the attached test-case.
2. See how there's no yellow background nor left border in the first paragraph.

What is the expected result?

The two paragraphs should look the same.

What happens instead of that?

They don't look the same.

The issue is that matches expansion doesn't account for selectors that are branchy.
 

Comment 1 by emilio@chromium.org, May 11 2018

Blocking: 568705
.b ~ :matches(.a ~ .c) { ... }

Blink's experimental implementation treats this as ".b ~ .a ~ .c".

WebKit treats this as the intersection of ".b ~ .c" and ".a ~ .c".

The spec might need to be clearer.

No, the spec is quite clear about this. In that selector, you match elements that match `.b ~ X`, and then the X matches any elements that match `.a ~ .c`.

There is zero implication in any part of the spec that the thing inside of :matches() only applies "below/after" the preceding compound selectors.  The correct implementation of the selector intersects `.b ~ *` and `.a ~ c`, as WebKit does.

(The exponential possibility of `:matches()` is why Sass, which has similar functionality in its `@extend` rule, does intelligent pruning of the possible matches and only expands to a subset of possibilities they judge to be maximally useful.)
Project Member

Comment 4 by bugdroid1@chromium.org, May 21 2018

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/c1f91311a28508c744db10dd4428f3eec0f6c712

commit c1f91311a28508c744db10dd4428f3eec0f6c712
Author: Eric Willigers <ericwilligers@chromium.org>
Date: Mon May 21 04:47:26 2018

CSS: Update WPT :matches for intersection behavior

".a+:matches(.c>.e)" requires the intersection of ".a+*" and ".c>.e",
not ".a+.c>.e".

WebKit passes the test, Blink's current implementation does not.

BUG=842157

Change-Id: I51566255006199c511b1d235232c0d9bef40035a
Reviewed-on: https://chromium-review.googlesource.com/1059982
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#560228}
[add] https://crrev.com/c1f91311a28508c744db10dd4428f3eec0f6c712/third_party/WebKit/LayoutTests/external/wpt/css/selectors/invalidation/matches-expected.txt
[modify] https://crrev.com/c1f91311a28508c744db10dd4428f3eec0f6c712/third_party/WebKit/LayoutTests/external/wpt/css/selectors/invalidation/matches.html

Sign in to add a comment