Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-shadow-parts] Pseudo-classes to the right of the part pseudo and :focus. #4555

Open
emilio opened this issue Dec 3, 2019 · 1 comment
Open

[css-shadow-parts] Pseudo-classes to the right of the part pseudo and :focus. #4555

emilio opened this issue Dec 3, 2019 · 1 comment
Labels
css-shadow-parts-1

Comments

@emilio
Copy link
Collaborator

emilio commented Dec 3, 2019

It seems like we agreed on allowing ::part(foo):focus and co. That's alright.

But this gets interesting when combined with the new rules for matching :focus (where :focus from a scope matches the outermost shadow root containing the focused element).

TLDR, I think this test (which I wrote as part of fixing a Firefox bug) should pass, but it doesn't in Blink and I think it doesn't per spec:

<!doctype html>
<title>Shadow parts are invalidated correctly when only a pseudo-class state to the right of the part matches</title>
<link rel="help" href="https://drafts.csswg.org/css-shadow-parts/#part">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  #host::part(p) {
    background-color: red;
  }
  #host::part(p):focus {
    background-color: lime;
  }
</style>
<div id="host"></div>
<script>
test(function() {
  let host = document.getElementById("host");
  host.attachShadow({ mode: "open" }).innerHTML = `
    <style>
      div {
        width: 100px;
        height: 100px;
      }
    </style>
    <div part=p tabindex=0></div>
  `;
  let part = host.shadowRoot.querySelector("div");
  assert_equals(getComputedStyle(part).backgroundColor, "rgb(255, 0, 0)");
  part.focus();
  assert_equals(
    getComputedStyle(part).backgroundColor,
    "rgb(0, 255, 0)",
    "Style should've been properly invalidated"
  );
}, "Shadow parts are invalidated correctly when only a pseudo-class state to the right of the part matches");
</script>

Do people agree it should generally pass? If so, how do we define this?

cc @fergald @rakina @rniwa @tabatkins
@rniwa
Copy link

rniwa commented Dec 4, 2019

FWIW, the test seems to pass in Safari. It makes sense that :focus matches that a part that has the actual focus. I guess we may need to special case ::part so that :focus would evaluate against the part's tree's focused element, not current tree's.

xeonchen pushed a commit to xeonchen/gecko that referenced this issue Dec 9, 2019
@emilio
Bug 1600773 - Invalidate shadow part pseudo-class styles correctly. r…
2b99f7d 
…=heycam

I was going to send a test for `:focus` via wpt, but then realized it was
probably not spec-compliant with the new rules people want to follow for
:focus, so I filed w3c/csswg-drafts#4555 instead.

Testing `:hover` / `:active` via wpt looked quite a bit of a hassle.

Differential Revision: https://phabricator.services.mozilla.com/D55591
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Dec 9, 2019
@emilio
Bug 1600773 - Invalidate shadow part pseudo-class styles correctly. r…
353b658 
…=heycam

I was going to send a test for `:focus` via wpt, but then realized it was
probably not spec-compliant with the new rules people want to follow for
:focus, so I filed w3c/csswg-drafts#4555 instead.

Testing `:hover` / `:active` via wpt looked quite a bit of a hassle.

Differential Revision: https://phabricator.services.mozilla.com/D55591

--HG--
extra : moz-landing-system : lando
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified that referenced this issue Dec 10, 2019
@marco-c
Bug 1600773 - Invalidate shadow part pseudo-class styles correctly. r…
8463e1c 
…=heycam

I was going to send a test for `:focus` via wpt, but then realized it was
probably not spec-compliant with the new rules people want to follow for
:focus, so I filed w3c/csswg-drafts#4555 instead.

Testing `:hover` / `:active` via wpt looked quite a bit of a hassle.

Differential Revision: https://phabricator.services.mozilla.com/D55591

UltraBlame original commit: dc76935015345e9943fb3a363433b0309636dc07
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified-and-comments-removed that referenced this issue Dec 10, 2019
@marco-c
Bug 1600773 - Invalidate shadow part pseudo-class styles correctly. r…
b4b455e 
…=heycam

I was going to send a test for `:focus` via wpt, but then realized it was
probably not spec-compliant with the new rules people want to follow for
:focus, so I filed w3c/csswg-drafts#4555 instead.

Testing `:hover` / `:active` via wpt looked quite a bit of a hassle.

Differential Revision: https://phabricator.services.mozilla.com/D55591

UltraBlame original commit: dc76935015345e9943fb3a363433b0309636dc07
gecko-dev-updater pushed a commit to marco-c/gecko-dev-comments-removed that referenced this issue Dec 10, 2019
@marco-c
Bug 1600773 - Invalidate shadow part pseudo-class styles correctly. r…
3bf8bc7 
…=heycam

I was going to send a test for `:focus` via wpt, but then realized it was
probably not spec-compliant with the new rules people want to follow for
:focus, so I filed w3c/csswg-drafts#4555 instead.

Testing `:hover` / `:active` via wpt looked quite a bit of a hassle.

Differential Revision: https://phabricator.services.mozilla.com/D55591

UltraBlame original commit: dc76935015345e9943fb3a363433b0309636dc07
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Dec 10, 2019
@emilio
Bug 1600773 - Invalidate shadow part pseudo-class styles correctly. r…
afc9460 
…=heycam a=jcristau

I was going to send a test for `:focus` via wpt, but then realized it was
probably not spec-compliant with the new rules people want to follow for
:focus, so I filed w3c/csswg-drafts#4555 instead.

Testing `:hover` / `:active` via wpt looked quite a bit of a hassle.

Differential Revision: https://phabricator.services.mozilla.com/D55591

--HG--
extra : source : dc76935015345e9943fb3a363433b0309636dc07
emilio added a commit to emilio/servo that referenced this issue Dec 15, 2019
@emilio
style: Invalidate shadow part pseudo-class styles correctly.
03a9daa 
I was going to send a test for `:focus` via wpt, but then realized it was
probably not spec-compliant with the new rules people want to follow for
:focus, so I filed w3c/csswg-drafts#4555 instead.

Testing `:hover` / `:active` via wpt looked quite a bit of a hassle.

Differential Revision: https://phabricator.services.mozilla.com/D55591
emilio added a commit to emilio/servo that referenced this issue Dec 16, 2019
@emilio
style: Invalidate shadow part pseudo-class styles correctly.
7cd59da 
I was going to send a test for `:focus` via wpt, but then realized it was
probably not spec-compliant with the new rules people want to follow for
:focus, so I filed w3c/csswg-drafts#4555 instead.

Testing `:hover` / `:active` via wpt looked quite a bit of a hassle.

Differential Revision: https://phabricator.services.mozilla.com/D55591
xeonchen pushed a commit to xeonchen/gecko that referenced this issue Dec 23, 2019
@emilio
Bug 1600773 - Invalidate shadow part pseudo-class styles correctly. r…
68bd0e0 
…=heycam a=jcristau

I was going to send a test for `:focus` via wpt, but then realized it was
probably not spec-compliant with the new rules people want to follow for
:focus, so I filed w3c/csswg-drafts#4555 instead.

Testing `:hover` / `:active` via wpt looked quite a bit of a hassle.

Differential Revision: https://phabricator.services.mozilla.com/D55591
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-shadow-parts-1
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rniwa @emilio