[csswg-drafts] [cssom-view] `scrollintoView` needs to iterate flat tree ancestors, not shadow-including ancestors (#12722)

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [cssom-view] `scrollintoView` needs to iterate flat tree ancestors, not shadow-including ancestors ==
https://drafts.csswg.org/cssom-view/#scroll-a-target-into-view

> 1. For each ancestor element or [viewport](https://drafts.csswg.org/css2/#viewport%E2%91%A0) that establishes a [scrolling box](https://drafts.csswg.org/cssom-view/#scrolling-box) scrolling box

It doesn't specify, but this needs to be ancestors in the flat tree. Testcase (Gecko, Blink and WebKit agree):

```html
<!DOCTYPE html>
<div id="host">
  <div style="height: 200px"></div>
  <div id="target" style="height: 100px; width: 100px; background: green"></div>
</div>
<script>
var shadow = host.attachShadow({mode: "open"});
var slot = document.createElement("slot");
slot.style="display: block; overflow: hidden; width: 100px; height: 100px; background: red";
shadow.appendChild(slot);
target.scrollIntoView();
</script>
```

> 1.4. If container is not null and either scrolling box is a [shadow-including inclusive ancestor](https://dom.spec.whatwg.org/#concept-shadow-including-inclusive-ancestor) of container or is a [viewport](https://drafts.csswg.org/css2/#viewport%E2%91%A0) whose [document](https://dom.spec.whatwg.org/#concept-document) is a shadow-including inclusive ancestor of container, abort the rest of these steps.

This needs to be ancestor in the flat tree, not shadow-including inclusive ancestor.

Testcase (only relevant in Blink 140+, others don't support `container` yet):

```html
<!DOCTYPE html>
<div id="host" style="display: block; overflow: hidden; width: 100px; height: 100px; background: green">
  <div style="height: 200px"></div>
  <div id="target" style="height: 100px; width: 100px; background: red"></div>
</div>
<script>
var shadow = host.attachShadow({mode: "open"});
var slot = document.createElement("slot");
slot.style = "display: block; overflow: hidden";
shadow.appendChild(slot);
target.scrollIntoView({container: slot});
</script>
```




Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12722 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 3 September 2025 13:18:47 UTC