Skip to content

Commit

Permalink
Add support for reading-flow
Browse files Browse the repository at this point in the history
  • Loading branch information
@dizhang168
dizhang168 committed Sep 10, 2024
1 parent c0ee804 commit cf0cc07
Showing 1 changed file with 164 additions and 6 deletions.
170 changes: 164 additions & 6 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3789,6 +3789,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#inline-formatting-context">inline formatting context</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#replaced-element">replaced element</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#css-box">CSS box</dfn></li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-display-4/#reading-flow">'reading-flow'</dfn> property</li>
<li><dfn data-x-href="https://drafts.csswg.org/css-display-4/#order-modified-document-order">order-modified document order</dfn></li>
</ul>

<p>The following features are defined in <cite>CSS Flexible Box Layout</cite>:
Expand Down Expand Up @@ -3935,7 +3937,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#direction">'direction'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#unicode-bidi">'unicode-bidi'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#propdef-writing-mode">'writing-mode'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-flow-direction">block flow direction</dfn>,
<li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#writing-mode">writing
mode</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-flow-direction">block flow direction</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-axis">block axis</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#inline-axis">inline axis</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-size">block size</dfn>,
Expand Down Expand Up @@ -79385,9 +79389,9 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
<hr>

<p>A node is a <dfn>focus navigation scope owner</dfn> if it is a <code>Document</code>, a
<span>shadow host</span>, a <span>slot</span>, or an element in the <span
<span>shadow host</span>, a <span>slot</span>, an element in the <span
data-x="popover-showing-state">popover showing state</span> which also has a <span>popover
invoker</span> set.</p>
invoker</span> set, or a <span>reading flow scope owner</span>.</p>

<p>Each <span>focus navigation scope owner</span> has a <dfn>focus navigation scope</dfn>, which
is a list of elements. Its contents are determined as follows:</p>
Expand All @@ -79399,6 +79403,9 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
<ol>
<li><p>If <var>element</var>'s parent is null, then return null.</p></li>

<li><p>If <var>element</var> is a <span>reading flow scope owner</span>, then return
<var>element</var>.</p></li>

<li><p>If <var>element</var>'s parent is a <span>shadow host</span>, then return
<var>element</var>'s <span>assigned slot</span>.</p></li>

Expand All @@ -79420,8 +79427,9 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {

<p class="note">The order of elements within a <span>focus navigation scope</span> does not impact
any of the algorithms in this specification. Ordering only becomes important for the
<span>tabindex-ordered focus navigation scope</span> and <span>flattened tabindex-ordered focus
navigation scope</span> concepts defined below.</p>
<span>tabindex-ordered focus navigation scope</span>, <span>flattened tabindex-ordered focus
navigation scope</span> and <span>reading-flow focus navigation scope</span> concepts defined
below.</p>

<p>A <dfn>tabindex-ordered focus navigation scope</dfn> is a list of <span data-x="focusable
area">focusable areas</span> and <span data-x="focus navigation scope owner">focus navigation
Expand All @@ -79441,7 +79449,9 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
</ul>

<p>The order within a <span>tabindex-ordered focus navigation scope</span> is determined by each
element's <span>tabindex value</span>, as described in the section below.</p>
element's <span>tabindex value</span> and, for <span>reading-flow focus navigation scope</span>,
by the special rules provided by the <span>sequential navigation search algorithm</span>. The
<span>tabindex value</span> should takes precedence over <span>reading flow</span>.</p>

<p class="note">The rules there do not give a precise ordering, as they are composed mostly of
"<!--non-normative-->should" statements and relative orderings.</p>
Expand Down Expand Up @@ -79671,6 +79681,78 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
</div>


<div w-nodev>

<h4> The reading flow </h4>

<p>A <dfn>reading flow container</dfn> is either:</p>

<ul>
<li><p>a <dfn data-x-href="https://drafts.csswg.org/css-flexbox-1/#flex-container">flex
container</dfn> that has the <span>'reading-flow'</span> CSS property set to 'flex-visual' or
'flex-flow'.</p></li>
<li><p>a <dfn data-x-href="https://drafts.csswg.org/css-grid-2/#grid-container">grid
container</dfn> that has the <span>'reading-flow'</span> CSS property set to 'grid-rows',
'grid-columns' or 'grid-order'.</p></li>
</ul>

<p>A <dfn>reading flow scope owner</dfn> is either:</p>

<ul>
<li><p>a <span>reading flow container</span>.</p></li>
<li><p>an element <span>delegating its rendering to its children</span> whose <span>parent
element</span> is a <span>reading flow container</span>.</p></li>
</ul>

<p>A <dfn data-x="reading-flow-item">reading flow item</dfn> is an element whose <span>parent
element</span> is a <span>reading flow scope owner</span>.</p>

<p>A <dfn data-x="non-participating-reading-flow-item">non participating reading flow item</dfn> is
a <span data-x="reading-flow-item">reading flow item</span> whose computed value of the
<span>'display'</span> property is 'contents' or whose computed value of the
<span>'position'</span> property is 'fixed' or 'absolute'.</p>

<p>A <dfn data-x="participating-reading-flow-item">participating reading flow item</dfn> is a <span
data-x="reading-flow-item">reading flow item</span> that is not a <span
data-x="non-participating-reading-flow-item">non participating reading flow item</span>.</p>

<p>A <dfn>reading-flow focus navigation scope</dfn> is a <span>tabindex-ordered focus navigation
scope</span> where the <span>focus navigation scope owner</span> is a <span>reading flow scope
owner</span>.</p>

The <dfn>reading flow</dfn> order for a <span>reading-flow focus navigation scope</span> is
determined by the scope owner's computed value of the <span>'reading-flow'</span> property:

<ul>
<li><p>For 'flex-visual': the reading flow should be defined by sorting the <span
data-x="participating-reading-flow-item">participating reading flow items</span> in the visual
reading flow order and taking the <span>writing mode</span> into account, followed by <span
data-x="non-participating-reading-flow-item">non participating reading flow
items</span>.</p></li>
<li><p>For 'flex-flow': the reading flow should be defined by sorting the <span
data-x="participating-reading-flow-item">participating reading flow items</span> using the <dfn
data-x-href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-flow">'flex-flow'</dfn>
direction, followed by <span data-x="non-participating-reading-flow-item">non participating
reading flow items</span>.</p></li>
<li><p>For 'grid-rows': the reading flow should be defined by sorting the <span
data-x="participating-reading-flow-item">participating reading flow items</span> first by their
displayed row order, and then by their column order, taking the <span>writing mode</span> into
account, followed by <span data-x="non-participating-reading-flow-item">non participating
reading flow items</span>.</p></li>
<li><p>For 'grid-columns': the reading flow should be defined by sorting the <span
data-x="participating-reading-flow-item">participating reading flow items</span> first by their
displayed column order, and then by their row order, taking the <span>writing mode</span> into
account, followed by <span data-x="non-participating-reading-flow-item">non participating
reading flow items</span>.</p></li>
<li><p>For 'grid-order': the reading flow should be defined by sorting the <span
data-x="participating-reading-flow-item">participating reading flow items</span> in
<span>order-modified document order</span>, followed by <span
data-x="non-participating-reading-flow-item">non participating reading flow
items</span>.</p></li>
</ul>

</div>

<div w-nodev>

<h4 id="focus-processing-model"><span id="processing-model-5"></span>Processing model</h4>
Expand Down Expand Up @@ -80275,14 +80357,32 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
(when it's not, <var>selection mechanism</var> will be <i>DOM</i>).</p>
</li>

<li>
<p>If <var>candidate</var> is a <span data-x="reading-flow-item">reading flow item</span> or
null, <var>direction</var> is <i>forward</i>, and <var>starting point</var> is in a
<span>reading-flow focus navigation scope</span> <var>scope</var>, then let <var>new
candidate</var> be the result of running the <span>reading flow sequential navigation search
algorithm</span> with <var>candidate</var> as the first argument, <var>direction</var> as the
second, and <var>starting point</var>'s focus navigation <var>scope</var> as the third.</p>

<p>If <var>starting point</var> is a <span data-x="reading-flow-item">reading flow item</span>,
<var>direction</var> is <i>backward</i>, and <var>starting point</var> is in a
<span>reading-flow focus navigation scope</span> <var>scope</var>, then let <var>new
candidate</var> be the result of running the <span>reading flow sequential navigation search
algorithm</span> with <var>starting point</var> as the first argument, <var>direction</var> as
the second, and <var>starting point</var>'s focus navigation <var>scope</var> as the third.</p>
</li>

<li>
<p>If <var>candidate</var> is a <span>navigable container</span> with a non-null <span>content
navigable</span>, then let <var>new candidate</var> be the result of running the
<span>sequential navigation search algorithm</span> with <var>candidate</var>'s <span>content
navigable</span> as the first argument, <var>direction</var> as the second, and
<i>sequential</i> <!-- shift-tab from the end in
https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=2855 --> as the third.</p>
</li>

<li>
<p>If <var>new candidate</var> is null, then let <var>starting point</var>
be <var>candidate</var>, and return to the top of this algorithm. Otherwise, let
<var>candidate</var> be <var>new candidate</var>.</p>
Expand All @@ -80291,6 +80391,64 @@ dictionary <dfn dictionary>ToggleEventInit</dfn> : <span>EventInit</span> {
<li><p>Return <var>candidate</var>.</p></li>
</ol>

<p>The <dfn>reading flow sequential navigation search algorithm</dfn> consists of the following
steps. This algorithm takes three arguments: a reading flow item <var>current</var>, a direction
<var>direction</var> and a reading-flow focus navigation scope <var>scope</var>.</p>

<ol>
<li>
Let <var>reading flow items</var> be the list of <span data-x="reading-flow-item">reading flow
items</span> owned by <var>scope</var>, sorted in <span>reading flow</span>.
</li>
<li>
If <var>reading flow items</var> is empty, return null.
</li>
<li>If <var>direction</var> is <i>forward</i>, then:
<ol>
<li>
If <var>current</var> is the <span data-x="reading-flow-item">reading flow item</span> from
<var>reading flow items</var> that comes first in <span>tree order</span>, return first
item in <var>reading flow items</var>.
</li>
<li>
If <var>current</var> is null, let <var>previous</var> be the <span
data-x="reading-flow-item">reading flow item</span> from <var>reading flow items</var> that
comes last in <span>tree order</span>.
</li>
<li>
Otherwise, let <var>previous</var> be the <span data-x="reading-flow-item">reading flow
item</span> that comes before <var>current</var> in <span>tree order</span>.
</li>
<li>
If <var>previous</var> is the last item in <var>reading flow items</var>, return null.
</li>
<li>
Otherwise, return the <span data-x="reading-flow-item">reading flow item</span> that comes
after <var>previous</var> in <var>reading flow items</var>.
</li>
</ol>
</li>
<li>Otherwise:
<ol>
<li>
Let <var>previous</var> be the item that comes before <var>current</var> in <var>reading
flow items</var>.
</li>
<li>
If <var>previous</var> is null, return null.
</li>
<li>
Otherwise, if <var>previous</var> does not have any <span>descendant</span>, return
<var>previous</var>.
</li>
<li>
Otherwise, return the last <span>descendant</span> of <var>previous</var>.
</li>
</ol>

</li>
</ol>

</div>


Expand Down

0 comments on commit cf0cc07

Please sign in to comment.