Repository navigation
[cssom-view] scrollIntoView needs to iterate flat tree ancestors, not shadow-including ancestors #12722
Description
https://drafts.csswg.org/cssom-view/#scroll-a-target-into-view
- For each ancestor element or viewport that establishes a scrolling box scrolling box
It doesn't specify, but this needs to be ancestors in the flat tree. Testcase (Gecko, Blink and WebKit agree):
<!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 of container or is a viewport whose 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. Or in fact why even bother checking in this convoluted way, just don't continue looping if container: "nearest" was provided?
Testcase (only relevant in Blink 140+, others don't support container yet):
<!DOCTYPE html>
<div id="host" style="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: "nearest"});
</script>
Activity
[-][cssom-view] `scrollintoView` needs to iterate flat tree ancestors, not shadow-including ancestors[/-][+][cssom-view] `scrollIntoView` needs to iterate flat tree ancestors, not shadow-including ancestors[/+]