Skip to content

Commit 02b1b4f

Browse files
author
Simon Pieters
committed
[cssom-view] Make scrollIntoView do the right thing when element and box have different writing modes. https://www.w3.org/Bugs/Public/show_bug.cgi?id=22396 
1 parent 1c8d943 commit 02b1b4f

2 files changed

Lines changed: 52 additions & 60 deletions

File tree

‎cssom-view/Overview.html‎

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1056,45 +1056,41 @@ <h3 id="element-scrolling-members"><span class="secno">7.2 </span><code title=""
10561056
<a href="#viewport">viewport</a> associated with <var>box</var>, terminate these
10571057
steps.</li>
10581058

1059+
<li><p>Let <var>box edge A</var> be the <a href="#beginning-edges" title="beginning edges">beginning edge</a> in the <a href="#block-flow-direction">block flow direction</a> of <var>box</var>, and let
1060+
<var>element edge A</var> be <var>element</var>'s border box edge on the same physical side as that of <var>box edge A</var>.
1061+
1062+
<li><p>Let <var>box edge B</var> be the <a href="#ending-edges" title="ending edges">ending edge</a> in the <a href="#block-flow-direction">block flow direction</a> of <var>box</var>, and let
1063+
<var>element edge B</var> be <var>element</var>'s border box edge on the same physical side as that of <var>box edge B</var>.
1064+
1065+
<li><p>Let <var>box edge C</var> be the <a href="#beginning-edges" title="beginning edges">beginning edge</a> in the <a href="#inline-base-direction">inline base direction</a> of <var>box</var>, and
1066+
let <var>element edge C</var> be <var>element</var>'s border box edge on the same physical side as that of <var>box edge C</var>.
1067+
1068+
<li><p>Let <var>box edge D</var> be the <a href="#ending-edges" title="ending edges">ending edge</a> in the <a href="#inline-base-direction">inline base direction</a> of <var>box</var>, and let
1069+
<var>element edge D</var> be <var>element</var>'s border box edge on the same physical side as that of <var>box edge D</var>.
1070+
1071+
<li><p>Let <var>element width</var> be the distance between <var>element edge C</var> and <var>element edge D</var>.
1072+
1073+
<li><p>Let <var>box width</var> be the distance between <var>box edge C</var> and <var>box edge D</var>.
1074+
10591075
<li><p>Let <var>position</var> be the scroll position <var>box</var> would have by following these steps:
10601076

10611077
<ol>
1062-
<li><p>If the <i>align to top flag</i> is set align <var>element</var>'s border box <a href="#beginning-edges" title="beginning edges">beginning edge</a> in the <a href="#block-flow-direction">block
1063-
flow direction</a> with the <a href="#beginning-edges" title="beginning edges">beginning edge</a> in the <a href="#block-flow-direction">block flow direction</a> of <var>box</var>.</li>
1078+
<li><p>If the <i>align to top flag</i> is set align <var>element edge A</var> with <var>box edge A</var>.</li>
10641079

1065-
<li><p>Otherwise, the <i>align to top flag</i> is not set; align <var>element</var>'s border box <a href="#ending-edges" title="ending edges">ending edge</a> in the
1066-
<a href="#block-flow-direction">block flow direction</a> with the <a href="#ending-edges" title="ending edges">ending edge</a> in the <a href="#block-flow-direction">block flow direction</a> of <var>box</var>.</li>
1067-
1068-
<li><p>Let <var>element width</var> be the distance between <var>element</var>'s border box <a href="#beginning-edges" title="beginning edges">beginning edge</a> and
1069-
<a href="#ending-edges" title="ending edges">ending edge</a> in the <a href="#inline-base-direction">inline base direction</a>.
1080+
<li><p>Otherwise, the <i>align to top flag</i> is not set; align <var>element edge B</var> with <var>box edge B</var>.</li>
10701081

1071-
<li><p>Let <var>box width</var> be the distance between <var>box</var>'s <a href="#beginning-edges" title="beginning edges">beginning edge</a> and
1072-
<a href="#ending-edges" title="ending edges">ending edge</a> in the <a href="#inline-base-direction">inline base direction</a>.
1073-
10741082
<li>
10751083
<dl class="switch">
1076-
<dt>If <var>element</var>'s border box <a href="#beginning-edges" title="beginning edges">beginning edge</a> and <a href="#ending-edges" title="ending edges">ending edge</a> in the
1077-
<a href="#inline-base-direction">inline base direction</a> are both outside <var>box</var>'s <a href="#beginning-edges" title="beginning edges">beginning edge</a> and
1078-
<a href="#ending-edges" title="ending edges">ending edge</a> in the <a href="#inline-base-direction">inline base direction</a>
1084+
<dt>If <var>element edge C</var> and <var>element edge D</var> are both outside <var>box edge C</var> and <var>box edge D</var>
10791085
<dd><p>Do nothing.
10801086

1081-
<dt>If <var>element</var>'s border box <a href="#beginning-edges" title="beginning edges">beginning edge</a> in the <a href="#inline-base-direction">inline base direction</a> is outside
1082-
<var>box</var>'s <a href="#beginning-edges" title="beginning edges">beginning edge</a> in the <a href="#inline-base-direction">inline base direction</a> and <var>element width</var> is less than
1083-
<var>box width</var>
1084-
<dt>If <var>element</var>'s border box <a href="#ending-edges" title="ending edges">ending edge</a> in the <a href="#inline-base-direction">inline base direction</a> is outside
1085-
<var>box</var>'s <a href="#ending-edges" title="ending edges">ending edge</a> in the <a href="#inline-base-direction">inline base direction</a> and <var>element width</var> is greater than
1086-
<var>box width</var>
1087-
<dd><p>Align <var>element</var>'s border box <a href="#beginning-edges" title="beginning edges">beginning edge</a> in the <a href="#inline-base-direction">inline base direction</a> with the
1088-
<a href="#beginning-edges" title="beginning edges">beginning edge</a> in the <a href="#inline-base-direction">inline base direction</a> of <var>box</var>.
1089-
1090-
<dt>If <var>element</var>'s border box <a href="#beginning-edges" title="beginning edges">beginning edge</a> in the <a href="#inline-base-direction">inline base direction</a> is outside
1091-
<var>box</var>'s <a href="#beginning-edges" title="beginning edges">beginning edge</a> in the <a href="#inline-base-direction">inline base direction</a> and <var>element width</var> is greater than
1092-
<var>box width</var>
1093-
<dt>If <var>element</var>'s border box <a href="#ending-edges" title="ending edges">ending edge</a> in the <a href="#inline-base-direction">inline base direction</a> is outside
1094-
<var>box</var>'s <a href="#ending-edges" title="ending edges">ending edge</a> in the <a href="#inline-base-direction">inline base direction</a> and <var>element width</var> is less than
1095-
<var>box width</var>
1096-
<dd><p>Align <var>element</var>'s border box <a href="#ending-edges" title="ending edges">ending edge</a> in the <a href="#inline-base-direction">inline base direction</a> with the
1097-
<a href="#ending-edges" title="ending edges">ending edge</a> in the <a href="#inline-base-direction">inline base direction</a> of <var>box</var>.
1087+
<dt>If <var>element edge C</var> is outside <var>box edge C</var> and <var>element width</var> is less than <var>box width</var>
1088+
<dt>If <var>element edge D</var> is outside <var>box edge D</var> and <var>element width</var> is greater than <var>box width</var>
1089+
<dd><p>Align <var>element edge C</var> with <var>box edge C</var>.
1090+
1091+
<dt>If <var>element edge C</var> is outside <var>box edge C</var> and <var>element width</var> is greater than <var>box width</var>
1092+
<dt>If <var>element edge D</var> is outside <var>box edge D</var> and <var>element width</var> is less than <var>box width</var>
1093+
<dd><p>Align <var>element edge D</var> with <var>box edge D</var>.
10981094
</dl>
10991095
</ol>
11001096

‎cssom-view/Overview.src.html‎

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1018,45 +1018,41 @@ <h3><code title>Element</code> Scrolling Members</h3>
10181018
<span>viewport</span> associated with <var>box</var>, terminate these
10191019
steps.</p></li>
10201020

1021+
<li><p>Let <var>box edge A</var> be the <span title="beginning edges">beginning edge</span> in the <span>block flow direction</span> of <var>box</var>, and let
1022+
<var>element edge A</var> be <var>element</var>'s border box edge on the same physical side as that of <var>box edge A</var>.
1023+
1024+
<li><p>Let <var>box edge B</var> be the <span title="ending edges">ending edge</span> in the <span>block flow direction</span> of <var>box</var>, and let
1025+
<var>element edge B</var> be <var>element</var>'s border box edge on the same physical side as that of <var>box edge B</var>.
1026+
1027+
<li><p>Let <var>box edge C</var> be the <span title="beginning edges">beginning edge</span> in the <span>inline base direction</span> of <var>box</var>, and
1028+
let <var>element edge C</var> be <var>element</var>'s border box edge on the same physical side as that of <var>box edge C</var>.
1029+
1030+
<li><p>Let <var>box edge D</var> be the <span title="ending edges">ending edge</span> in the <span>inline base direction</span> of <var>box</var>, and let
1031+
<var>element edge D</var> be <var>element</var>'s border box edge on the same physical side as that of <var>box edge D</var>.
1032+
1033+
<li><p>Let <var>element width</var> be the distance between <var>element edge C</var> and <var>element edge D</var>.
1034+
1035+
<li><p>Let <var>box width</var> be the distance between <var>box edge C</var> and <var>box edge D</var>.
1036+
10211037
<li><p>Let <var>position</var> be the scroll position <var>box</var> would have by following these steps:
10221038

10231039
<ol>
1024-
<li><p>If the <i>align to top flag</i> is set align <var>element</var>'s border box <span title="beginning edges">beginning edge</span> in the <span>block
1025-
flow direction</span> with the <span title="beginning edges">beginning edge</span> in the <span>block flow direction</span> of <var>box</var>.</p></li>
1040+
<li><p>If the <i>align to top flag</i> is set align <var>element edge A</var> with <var>box edge A</var>.</p></li>
10261041

1027-
<li><p>Otherwise, the <i>align to top flag</i> is not set; align <var>element</var>'s border box <span title="ending edges">ending edge</span> in the
1028-
<span>block flow direction</span> with the <span title="ending edges">ending edge</span> in the <span>block flow direction</span> of <var>box</var>.</p></li>
1029-
1030-
<li><p>Let <var>element width</var> be the distance between <var>element</var>'s border box <span title="beginning edges">beginning edge</span> and
1031-
<span title="ending edges">ending edge</span> in the <span>inline base direction</span>.
1042+
<li><p>Otherwise, the <i>align to top flag</i> is not set; align <var>element edge B</var> with <var>box edge B</var>.</p></li>
10321043

1033-
<li><p>Let <var>box width</var> be the distance between <var>box</var>'s <span title="beginning edges">beginning edge</span> and
1034-
<span title="ending edges">ending edge</span> in the <span>inline base direction</span>.
1035-
10361044
<li>
10371045
<dl class=switch>
1038-
<dt>If <var>element</var>'s border box <span title="beginning edges">beginning edge</span> and <span title="ending edges">ending edge</span> in the
1039-
<span>inline base direction</span> are both outside <var>box</var>'s <span title="beginning edges">beginning edge</span> and
1040-
<span title="ending edges">ending edge</span> in the <span>inline base direction</span>
1046+
<dt>If <var>element edge C</var> and <var>element edge D</var> are both outside <var>box edge C</var> and <var>box edge D</var>
10411047
<dd><p>Do nothing.
10421048

1043-
<dt>If <var>element</var>'s border box <span title="beginning edges">beginning edge</span> in the <span>inline base direction</span> is outside
1044-
<var>box</var>'s <span title="beginning edges">beginning edge</span> in the <span>inline base direction</span> and <var>element width</var> is less than
1045-
<var>box width</var>
1046-
<dt>If <var>element</var>'s border box <span title="ending edges">ending edge</span> in the <span>inline base direction</span> is outside
1047-
<var>box</var>'s <span title="ending edges">ending edge</span> in the <span>inline base direction</span> and <var>element width</var> is greater than
1048-
<var>box width</var>
1049-
<dd><p>Align <var>element</var>'s border box <span title="beginning edges">beginning edge</span> in the <span>inline base direction</span> with the
1050-
<span title="beginning edges">beginning edge</span> in the <span>inline base direction</span> of <var>box</var>.
1051-
1052-
<dt>If <var>element</var>'s border box <span title="beginning edges">beginning edge</span> in the <span>inline base direction</span> is outside
1053-
<var>box</var>'s <span title="beginning edges">beginning edge</span> in the <span>inline base direction</span> and <var>element width</var> is greater than
1054-
<var>box width</var>
1055-
<dt>If <var>element</var>'s border box <span title="ending edges">ending edge</span> in the <span>inline base direction</span> is outside
1056-
<var>box</var>'s <span title="ending edges">ending edge</span> in the <span>inline base direction</span> and <var>element width</var> is less than
1057-
<var>box width</var>
1058-
<dd><p>Align <var>element</var>'s border box <span title="ending edges">ending edge</span> in the <span>inline base direction</span> with the
1059-
<span title="ending edges">ending edge</span> in the <span>inline base direction</span> of <var>box</var>.
1049+
<dt>If <var>element edge C</var> is outside <var>box edge C</var> and <var>element width</var> is less than <var>box width</var>
1050+
<dt>If <var>element edge D</var> is outside <var>box edge D</var> and <var>element width</var> is greater than <var>box width</var>
1051+
<dd><p>Align <var>element edge C</var> with <var>box edge C</var>.
1052+
1053+
<dt>If <var>element edge C</var> is outside <var>box edge C</var> and <var>element width</var> is greater than <var>box width</var>
1054+
<dt>If <var>element edge D</var> is outside <var>box edge D</var> and <var>element width</var> is less than <var>box width</var>
1055+
<dd><p>Align <var>element edge D</var> with <var>box edge D</var>.
10601056
</dl>
10611057
</ol>
10621058

0 commit comments

Comments
 (0)