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

[cssom-view-1] Extend 'scroll into view' steps to Ranges #8254

Merged
merged 1 commit into from
Dec 22, 2022
Merged

[cssom-view-1] Extend 'scroll into view' steps to Ranges #8254

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions cssom-view-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1161,7 +1161,7 @@ The <dfn method for=Element caniuse=scrollintoview>scrollIntoView(<var>arg</var>
1. If the element does not have any associated [=CSS/box=],
or is not available to user-agent features,
then return.
1. <a lt='scroll an element into view'>Scroll the element into view</a>
1. <a lt='scroll a target into view'>Scroll the element into view</a>
with <var>behavior</var>, <var>block</var>, and <var>inline</var>.
1. Optionally perform some other action that brings the element to the user's attention.

Expand Down Expand Up @@ -1313,19 +1313,19 @@ The <dfn attribute for=Element>clientHeight</dfn> attribute must run these steps

<h3 id=element-scrolling-members>{{Element}} Scrolling Members</h3>

To <dfn>scroll an element into view</dfn> <var>element</var>,
To <dfn export>scroll a target into view</dfn> <var>target</var>, which is an <a for="/">Element</a> or <a>Range</a>,
with a scroll behavior <var>behavior</var>,
a block flow direction position <var>block</var>,
and an inline base direction position <var>inline</var>,
means to run these steps for each ancestor element or <a>viewport</a> that establishes
a <a>scrolling box</a> <var>scrolling box</var>, in order of innermost to outermost <a>scrolling box</a>:

1. If the {{Document}} associated with <var>element</var> is not <a>same origin</a> with the {{Document}} associated with the element or <a>viewport</a> associated with <var>box</var>, terminate these steps.
1. Let <var>element bounding border box</var> be the box that the return value of invoking {{Element/getBoundingClientRect()}} on <var>element</var> represents.
1. Let <var>scrolling box edge A</var> be the <a>beginning edge</a> in the <a>block flow direction</a> of <var>scrolling box</var>, and let <var>element edge A</var> be <var>element bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge A</var>.
1. Let <var>scrolling box edge B</var> be the <a>ending edge</a> in the <a>block flow direction</a> of <var>scrolling box</var>, and let <var>element edge B</var> be <var>element bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge B</var>.
1. Let <var>scrolling box edge C</var> be the <a>beginning edge</a> in the <a>inline base direction</a> of <var>scrolling box</var>, and let <var>element edge C</var> be <var>element bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge C</var>.
1. Let <var>scrolling box edge D</var> be the <a>ending edge</a> in the <a>inline base direction</a> of <var>scrolling box</var>, and let <var>element edge D</var> be <var>element bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge D</var>.
1. If the {{Document}} associated with <var>target</var> is not <a>same origin</a> with the {{Document}} associated with the element or <a>viewport</a> associated with <var>scrolling box</var>, terminate these steps.
1. Let <var>target bounding border box</var> be the box represented by the return value of invoking Element's {{Element/getBoundingClientRect()}}, if <var>target</var> is an <a for="/">Element</a>, or Range's {{Range/getBoundingClientRect()}}, if <var>target</var> is a <a>Range</a>.
1. Let <var>scrolling box edge A</var> be the <a>beginning edge</a> in the <a>block flow direction</a> of <var>scrolling box</var>, and let <var>element edge A</var> be <var>target bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge A</var>.
1. Let <var>scrolling box edge B</var> be the <a>ending edge</a> in the <a>block flow direction</a> of <var>scrolling box</var>, and let <var>element edge B</var> be <var>target bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge B</var>.
1. Let <var>scrolling box edge C</var> be the <a>beginning edge</a> in the <a>inline base direction</a> of <var>scrolling box</var>, and let <var>element edge C</var> be <var>target bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge C</var>.
1. Let <var>scrolling box edge D</var> be the <a>ending edge</a> in the <a>inline base direction</a> of <var>scrolling box</var>, and let <var>element edge D</var> be <var>target bounding border box</var>'s edge on the same physical side as that of <var>scrolling box edge D</var>.
1. Let <var>element height</var> be the distance between <var>element edge A</var> and <var>element edge B</var>.
1. Let <var>scrolling box height</var> be the distance between <var>scrolling box edge A</var> and <var>scrolling box edge B</var>.
1. Let <var>element width</var> be the distance between <var>element edge C</var> and <var>element edge D</var>.
Expand All @@ -1334,7 +1334,7 @@ a <a>scrolling box</a> <var>scrolling box</var>, in order of innermost to outerm

1. If <var>block</var> is "<code>start</code>", then align <var>element edge A</var> with <var>scrolling box edge A</var>.
1. Otherwise, if <var>block</var> is "<code>end</code>", then align <var>element edge B</var> with <var>scrolling box edge B</var>.
1. Otherwise, if <var>block</var> is "<code>center</code>", then align the center of <var>element bounding border box</var> with the center of <var>scrolling box</var> in <var>scrolling box</var>'s <a>block flow direction</a>.
1. Otherwise, if <var>block</var> is "<code>center</code>", then align the center of <var>target bounding border box</var> with the center of <var>scrolling box</var> in <var>scrolling box</var>'s <a>block flow direction</a>.
1. Otherwise, <var>block</var> is "<code>nearest</code>":
<dl class=switch>
<dt>If <var>element edge A</var> and <var>element edge B</var> are both outside <var>scrolling box edge A</var> and <var>scrolling box edge B</var>
Expand All @@ -1350,7 +1350,7 @@ a <a>scrolling box</a> <var>scrolling box</var>, in order of innermost to outerm
</dl>
1. If <var>inline</var> is "<code>start</code>", then align <var>element edge C</var> with <var>scrolling box edge C</var>.
1. Otherwise, if <var>inline</var> is "<code>end</code>", then align <var>element edge D</var> with <var>scrolling box edge D</var>.
1. Otherwise, if <var>inline</var> is "<code>center</code>", then align the center of <var>element bounding border box</var> with the center of <var>scrolling box</var> in <var>scrolling box</var>'s <a>inline base direction</a>.
1. Otherwise, if <var>inline</var> is "<code>center</code>", then align the center of <var>target bounding border box</var> with the center of <var>scrolling box</var> in <var>scrolling box</var>'s <a>inline base direction</a>.
1. Otherwise, <var>inline</var> is "<code>nearest</code>":
<dl class=switch>
<dt>If <var>element edge C</var> and <var>element edge D</var> are both outside <var>scrolling box edge C</var> and <var>scrolling box edge D</var>
Expand Down