Skip to content

[css-regions-1] Tidy up values & fix build errors. #12445

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

Merged
merged 4 commits into from
Jul 3, 2025
Merged

[css-regions-1] Tidy up values & fix build errors. #12445

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c7568d8
remove close slashes on img tags
keithamus Jul 3, 2025
94ad3a5
tidy up references to CSS21 alias
keithamus Jul 3, 2025
62096a2
use <custom-ident> not <ident>
keithamus Jul 3, 2025
27b5f61
use <dfn> for defining none keyword behaviour
keithamus Jul 3, 2025
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
77 changes: 35 additions & 42 deletions css-regions-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,15 +112,15 @@ Introduction</h2>

<figure style="float:left; margin:1em;">
<img alt="Article and aside rendering without CSS Regions"
src="images/linked-boxes-before.png"/>
src="images/linked-boxes-before.png">
<figcaption>
Rendering without CSS Regions
</figcaption>
</figure>

<figure style="float:left; margin:1em;">
<img alt="Article and aside rendering with CSS Regions"
src="images/linked-boxes-after.png"/>
src="images/linked-boxes-after.png">
<figcaption>
Rendering with CSS Regions
</figcaption>
Expand Down Expand Up @@ -164,15 +164,15 @@ Introduction</h2>

<figure>
<img alt="Wide nav bar showing all of the links"
src="images/menu-wide.png"/>
src="images/menu-wide.png">
<figcaption>
Wide rendering with menu shown
</figcaption>
</figure>

<figure>
<img alt="Narrow nav bar with some of the links in the menu"
src="images/menu-narrow.png"/>
src="images/menu-narrow.png">
<figcaption>
Narrow rendering with menu shown
</figcaption>
Expand Down Expand Up @@ -381,32 +381,32 @@ The 'flow-into' property</h3>

<pre class='propdef'>
Name: flow-into
Value: none | <<ident>> [element | content]?
Value: none | <<custom-ident>> [element | content]?
Initial: none
Applies To: All elements, but not <a href="https://www.w3.org/TR/selectors/#pseudo-elements">pseudo-elements</a> such as <code>::first-line</code>, <code>::first-letter</code>, <code>::before</code> or <code>::after</code>.
Inherited: no
Computed Value: as specified
Animation type: not animatable
</pre>

<dl>
<dt>none</dt>
<dl dfn-type=value dfn-for=flow-into>
<dt><dfn>none</dfn></dt>

<dd>
The element is not moved
to a <a>named flow</a>
and normal CSS processing takes place.
</dd>

<dt><a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a></dt>
<dt><code><<custom-ident>> [ element | content ]?</code></dt>

<dd>
If the keyword <dfn>element</dfn> is present
or neither keyword is present,
then the element is taken out
of its parent's flow
and placed into the flow
with the name '<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>'.
with the name '<<custom-ident>>'.
If the keyword <dfn>content</dfn> is present,
then only the element's contents
are placed into the named flow.
Expand Down Expand Up @@ -468,7 +468,7 @@ The 'flow-into' property</h3>

Each <a>CSS Region</a> in a <a>region chain</a>
establishes a containing block for absolutely positioned
elements in the <a>named flow</a> (see [[!CSS21]]).
elements in the <a>named flow</a> (see [[!CSS2]]).
That first <a>CSS Region</a> in a <a>region chain</a>
establishes the initial containing block for such absolutely
positioned elements.
Expand Down Expand Up @@ -569,38 +569,37 @@ The 'flow-from' property</h3>

<pre class='propdef'>
Name: flow-from
Value: <<ident>> | none
Value: <<custom-ident>> | none
Initial: none
Applies To: Non-replaced <a href="https://www.w3.org/TR/CSS21/visuren.html#block-boxes">block containers</a>. <br/> This might be expanded in future versions of the specification to allow other types of containers to receive flow content.
Inherited: no
Computed Value: as specified
Animation type: not animatable
</pre>

<dl>
<dt><strong>none</strong></dt>
<dl dfn-type=value dfn-for=flow-from>
<dt><dfn>none</dfn></dt>

<dd>
The block container is not a <a>CSS Region</a>.
</dd>

<dt><strong><a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a></strong></dt>
<dt><<custom-ident>></dt>

<dd>
The block container becomes a <a>CSS Region</a>
(except as detailed in the text below),
and is ordered in a <a>region chain</a>
according to its document order.
The content from the flow
with the <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
The content from the flow with the
<<custom-ident>>
name will be <a href="#region-flow-break">broken
into fragments</a> and visually formatted in the
<a href="https://www.w3.org/TR/CSS21/visuren.html#principal-box">principal boxes</a>
of the <span>regions</span>
in the <a>region chain</a>.
<br/>
If there is no flow with name
<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>,

If there is no flow with name <<custom-ident>>,
then the block container does not
format any content visually.
</dd>
Expand All @@ -626,11 +625,11 @@ The 'flow-from' property</h3>

Block container pseudo-elements where
the value of 'flow-from' computes to an
<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
<<custom-ident>>
and the value of 'content' computes to ''content/none''
are generated as <a>CSS Regions</a>,
which is an update to the behavior
described in [[!CSS21]].
described in [[!CSS2]].

If an element has <a>style containment</a> (See [[!CSS-CONTAIN-1]]),
then the 'flow-from' property must be <a for=property>scoped</a> to that element.
Expand All @@ -639,7 +638,7 @@ The 'flow-from' property</h3>

A block container becomes a <a>CSS Region</a>
when its 'flow-from' property is set
to a valid <a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a> value,
to a valid <<custom-ident>> value,
even if there is no content contributing
to the referenced flow.
For example:
Expand Down Expand Up @@ -739,8 +738,7 @@ The 'flow-from' property</h3>
Cycle Detection</h4>

<a>named flows</a> containing elements
where the value of 'flow-from' computes to an
<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
where the value of 'flow-from' computes to a <<custom-ident>>
can produce nonsensical circular relationships,
such as a <a>named flow</a>
containing <a>CSS Regions</a>
Expand All @@ -755,25 +753,20 @@ Cycle Detection</h4>
<ul>
<li>
Every <a>named flow</a> depends on its elements
where the value of 'flow-from' computes to an
<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>.
where the value of 'flow-from' computes to a <<custom-ident>>.
</li>
<li>
Every element in a <a>named flow</a>
where the value of 'flow-from' computes to an
<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
where the value of 'flow-from' computes to a <<custom-ident>>
depends on the <a>named flow</a> with the
<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
name.
<<custom-ident>> name.
</li>
</ul>

If the graph contains a cycle,
any elements where the value of 'flow-from'
computes to an
<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-identifier">&lt;ident&gt;</a>
participating in the cycle
do not become <a>CSS Regions</a>.
computes to a <<custom-ident>> participating
in the cycle do not become <a>CSS Regions</a>.

<div class="note"><span class="note-prefix">Note </span>

Expand Down Expand Up @@ -979,7 +972,7 @@ The region-fragment property</h3>
on the last line,
the 'overflow' property controls
the visibility of the overflowing content.
See the 'overflow' property definition ([[CSS21]]).
See the 'overflow' property definition ([[CSS2]]).
</div>

<h2 id="cssom_view_and_css_regions">
Expand Down Expand Up @@ -1610,7 +1603,7 @@ The Region Flow Content Box (RFCB)</h3>
</ul>

<figure>
<img src="images/RFCB.svg" width=600 alt="The ::before, RFCB and ::after boxes contained in the Region Box"/>
<img src="images/RFCB.svg" width=600 alt="The ::before, RFCB and ::after boxes contained in the Region Box">
<figcaption>
The Region Flow Content Box (RFCB)
</figcaption>
Expand All @@ -1631,7 +1624,7 @@ RFCB 'width' resolution</h4>
At various points in the visual formatting of documents containing regions,
the used 'width' of RFCBs and regions need to be resolved.
In all cases, the resolution is done following the rules for
<a href="https://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins">calculating widths and margins</a> (see [[!CSS21]]).
<a href="https://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins">calculating widths and margins</a> (see [[!CSS2]]).
Sometimes, resolving the used 'width' value requires
measuring the content's <code>min-content</code>
and <code>max-content</code> values
Expand Down Expand Up @@ -1674,7 +1667,7 @@ Regions visual formatting steps</h3>
</ul>

<figure>
<img src="images/regions-layout-three-steps.svg" width=600 alt="visual representation of the three-step process"/>
<img src="images/regions-layout-three-steps.svg" width=600 alt="visual representation of the three-step process">
<figcaption>
Regions visual formatting steps
</figcaption>
Expand Down Expand Up @@ -1904,7 +1897,7 @@ Step 1 - Phase 1: Laying out RFCBs with used height of zero</h4>
Conceptually, this produces the layout illustrated below.

<figure>
<img src="images/flow-fragment-height-phase-1.png" width=500 alt="Step 1 - Phase 1: Layout RFCBs with used heights of 0"/>
<img src="images/flow-fragment-height-phase-1.png" width=500 alt="Step 1 - Phase 1: Layout RFCBs with used heights of 0">
<figcaption>
Step 1 - Phase 1: Layout RFCBs with used heights of 0
</figcaption>
Expand Down Expand Up @@ -1941,7 +1934,7 @@ Step 1 - Phase 2: Layout flow to compute the RFCBs' flow fragments heights</h4>
This results in a resolved flow fragment height: FH-C.

<figure>
<img src="images/flow-fragment-height-phase-2.png" width=370 alt="Step 1 - Phase 2: Measure flow fragments heights"/>
<img src="images/flow-fragment-height-phase-2.png" width=370 alt="Step 1 - Phase 2: Measure flow fragments heights">
<figcaption>
Step 1 - Phase 2: Measure flow fragments heights
</figcaption>
Expand Down Expand Up @@ -1973,7 +1966,7 @@ Step 2: Layout document and regions without named flows</h4>
FH-C becomes rC's used 'height'.

<figure>
<img src="images/regions-visual-formatting-step-2.png" width=370 alt="Step 2: Layout document and regions without named flows"/>
<img src="images/regions-visual-formatting-step-2.png" width=370 alt="Step 2: Layout document and regions without named flows">
<figcaption>
Step 2: Layout document and regions without <a>named flows</a>
</figcaption>
Expand Down Expand Up @@ -2004,7 +1997,7 @@ Step 3: named flows layout</h4>
computed in Step 1 Phase 2.

<figure>
<img src="images/regions-visual-formatting-step-3.png" width=370 alt="Step 3: Final result after laying out named flows in regions"/>
<img src="images/regions-visual-formatting-step-3.png" width=370 alt="Step 3: Final result after laying out named flows in regions">
<figcaption>
Step 3: Final result after laying out <a>named flows</a> in regions
</figcaption>
Expand Down