Bug 249706

Summary:

The :checked pseudoselector for slotted content fails to repaint

Product:

WebKit

Reporter:

Istvan Tutto <istvantutto>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

akeerthi, koivisto, rniwa, robin, simon.fraser, webkit-bug-importer, wenson_hsieh, zalan

Priority:

Keywords:

InRadar

Version:

Safari 15

Hardware:

Mac (Intel)

OS:

macOS 11

URL:

https://codepen.io/istutto/pen/eYjmywN

Bug Depends on:

Bug Blocks:

148695

Attachments:

Description	Flags
Reduction	none

Description Istvan Tutto 2022-12-21 03:45:07 PST

Hey team! 

I've noticed that a checkbox element's :checked state styles will not be immediately applied when using a keyboard (SPACE) to select it and the styles are coming from within a ShadowDom's `::slotted(...)` selector. The styles will be applied after blur event only. The pointer interaction works as expected and all other major browsers handle the keyboard event as well.

Demonstration in link:
https://codepen.io/istutto/pen/eYjmywN

Note, that the above mentioned case will be resolved in Safari as well if the following empty rule as added into the light-DOM.
```css
input[type=checkbox]:checked {}
```

Comment 1 Radar WebKit Bug Importer 2022-12-28 03:46:16 PST

<rdar://problem/103740708>

Comment 2 Ryosuke Niwa 2022-12-29 13:55:22 PST

Created attachment 464251 [details]
Reduction

Comment 3 Ryosuke Niwa 2022-12-29 14:02:37 PST

This seems to be a repaint bug. The attached test case uses Element::click() to mark the checkbox (instead of requiring keyboard input from user).

The checkbox turns blue as expected once you hover over the associated label, deactivate the window, etc...

Comment 4 zalan 2022-12-29 14:42:47 PST

interestingly it works fine when no customElements are involved.

<style>
input[type=checkbox] {
  appearance: none;
  width: 50px;
  height: 50px;
}
input[type=checkbox]:checked {
  background-color: green;
}
</style>
<script>
onload = () => {
  checkbox.focus();
  setTimeout(() => checkbox.click(), 0);
}
</script>
<input type=checkbox id=checkbox>

Comment 5 Ryosuke Niwa 2022-12-29 14:44:12 PST

I think something in the paint invalidation logic is failing to take slotted content into account.

Comment 6 zalan 2022-12-29 14:55:16 PST

The render tree does not seem to get notified about the style change :|

Comment 7 Istvan Tutto 2024-05-16 04:58:27 PDT

Hello, 
A kindly reminder that this bug has been reported around 18 months ago and the bug still exists in the latest versions as well.