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

Jump to bottom

[css-images-4] Clarified that total width is length of paint line #10777

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[css-images-4] Clarified that total width is length of paint line #10777

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
17 changes: 9 additions & 8 deletions css-images-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -592,7 +592,7 @@ Combining images: the ''cross-fade()'' notation {#cross-fade-function}

<pre class=prod>
<dfn caniuse="css-cross-fade">cross-fade()</dfn> = cross-fade( <<cf-image>># )
<dfn>&lt;cf-image></dfn> = [ <<image>> | <<color>> ] && <<percentage [0,100]>>?
<dfn>&lt;cf-image></dfn> = [ <<image>> | <<color>> ] && <<percentage [0,100]>>?
</pre>

The function represents an image generated by
Expand Down Expand Up @@ -1961,10 +1961,10 @@ Coloring the Gradient Line</h4>
gives a missing hue component:
<span class="lang-css">oklch(0.6268 0 none)</span>

and thus, in the first gradient segment,
the hue is taken from red,
and thus, in the first gradient segment,
the hue is taken from red,
which is <span class="lang-css">oklch(0.628 0.2577 29.234)</span>;
while in the second segment
while in the second segment
it is taken from green,
which is <span class="lang-css">oklch(0.5198 0.1769 142.5)</span>
</div>
Expand Down Expand Up @@ -2156,11 +2156,11 @@ Color Stop “Fixup”</h4>
<<stripes()>> = stripes( <<color-stripe>># )
<<color-stripe>> = <<color>> && [ <<length-percentage>> | <<flex>> ]?
</pre>

The <dfn>stripes()</dfn> function defines a [=1D image=]
as a comma-separated list of colored stripes,
each placed end-to-end on the [=paint line=] in the order given.

Each <dfn><<color-stripe>></dfn> entry defines a solid-color stripe
with the specified <<color>> and thickness.
If the thickness is omitted,
Expand Down Expand Up @@ -2189,15 +2189,16 @@ Color Stop “Fixup”</h4>
before being distributed.
</dl>

The |total width| is defined by the context in which the ''stripes()'' function is used.
The |total width| refers to the length of the [=paint line=].
It is defined by the context in which the ''stripes()'' function is used.
If the sum of the stripes is smaller than the |total width|,
the [=paint line=] is [=transparent black=] for its remaining length,
as if a final ''transparent'' argument were given.
If the sum is larger,
any stripes or portions beyond the |total width| are truncated.

<div class='example' id='ex-stripes-total-width'>
For example,
For example,
''stripes(red 1fr, green 2fr, blue 100px)''
with a |total width| of ''400px''
will result in a 100px red stripe and 200px green stripe,
Expand Down