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][css-backgrounds-4] Added stripes() function #7029

Merged
merged 13 commits into from
Nov 5, 2022
Merged

[css-images-4][css-backgrounds-4] Added stripes() function #7029

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
99ff48a
Added stripes() function to CSS Images 4
SebastianZ Feb 9, 2022
72ff857
Replaced colors list in border-*-color by stripes() function
SebastianZ Feb 9, 2022
e9b96b7
Rephrased stripes() and added it to <image>
SebastianZ Mar 16, 2022
aa6ccce
Added information about how to compute stripes()
SebastianZ Mar 16, 2022
5423bc7
Added stripes() to outline-color and added computed value information…
SebastianZ Mar 16, 2022
6f450ab
Added stripes() function to Changes sections
SebastianZ Mar 17, 2022
f556965
Put stripes() definition behind a <1d-image> type to make it easily e…
SebastianZ Apr 20, 2022
1f982db
tweak/rearrange stripes() text; add sum<1 behavior
tabatkins Apr 20, 2022
303dc90
Removed <1d-image> from <image>
SebastianZ Apr 27, 2022
a49e0a2
Made <color> and <1d-image> exclusive alternatives
SebastianZ Apr 27, 2022
1b610f7
Incorporated fantasai's comments on stripes() and `<1d-image>
SebastianZ May 3, 2022
eb59c87
[css-ui-4] Fixed links to other specs in outline-color definition
SebastianZ Oct 9, 2022
d316d16
Removed left over paragraph describing <1d-image> in <image>
SebastianZ Oct 28, 2022
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
21 changes: 10 additions & 11 deletions css-backgrounds-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,30 +185,28 @@ Painting Area: the 'background-clip' property</h3>

<pre class=propdef>
Name: border-top-color, border-right-color, border-bottom-color, border-left-color
Value: <<color>>#
Value: <<color>> | <<1d-image>>
Initial: currentcolor
Applies to: all elements
Inherited: no
Percentages: n/a
Computed Value: the computed color
Computed Value: the computed color and/or a one-dimensional image function
Animation type: see prose
</pre>

<pre class="propdef shorthand">
Name: border-color
Value: <<color>>#{1,4}
Value: [ <<color>> | <<1d-image>> ]{1,4}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tabatkins @fantasai What do you think about my suggestion to distinguish the values for the different borders by adding slashes between them like in grid-area?

This makes the syntax more future proof, in my opinion.

Sebastian

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For reference, here's the suggested syntax again:

<<color>>{1,4} | [ <<color>>? <<1d-image>>? ]! [ / [ <<color>>? <<1d-image>>? ]! ]{0,3}

And here's an example using that syntax:

border-color: stripes(white, silver) / stripes(white, silver) / stripes(black, gray) / blue;

</pre>

These properties set the foreground color of the border specified
by the 'border-style' properties.
If a list of values is provided, the border is split into equal width bands of each color
along the direction of the side the border is applied on
(i.e. split horizontally on left and right borders and vertically on top and bottom borders),
starting outwards.

When interpolating between borders with the same number of colors,
interpolation is performed individually per color band as <a href="https://www.w3.org/TR/css3-transitions/#animtype-color">color</a>.
Interpolation between borders with different numbers of colors is discrete.
The stripes defined by <<1d-image>> follow the shape of the border
on the side to which they apply,
and are drawn in bands starting from the [=padding edge=] and progressing outwards.
With that, the corresponding 'border-*-width' property defines the total
width of the stripes.

'border-color' is a shorthand for the four 'border-*-color' properties.
The four values set the top, right, bottom and left border, respectively.
Expand All @@ -223,7 +221,7 @@ Painting Area: the 'background-clip' property</h3>
<pre class=lang-css>
.foo {
border: 30px solid;
border-color: skyblue orange yellowgreen indianred, black yellow;
border-color: stripes(skyblue, black) stripes(orange, yellow) stripes(yellowgreen, black) stripes(indianred, yellow);
}
</pre>

Expand Down Expand Up @@ -702,6 +700,7 @@ Additions Since Level 3</h3>
<li>logical 'background-position' values (''background-position/start'', ''background-position/end'')
<li>the ''extend'' keyword of 'background-repeat'
<li>'corner-shape'
<li><<1d-image>> as value for ''border-color'' and its longhands
<li>multiple border colors per border
<li>logical border properties
<li><a href="#partial-borders">Partial Borders</a> (make part of border shorthand as well!)
Expand Down
123 changes: 114 additions & 9 deletions css-images-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1116,9 +1116,6 @@ Cycle Detection</h4>
If the graph contains a cycle,
any ''element()'' functions participating in the cycle are <a>invalid images</a>.




<!--
██████ ████████ ███ ████████ ████ ████████ ██ ██ ████████ ██████
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ██
Expand Down Expand Up @@ -1897,15 +1894,90 @@ Color Stop “Fixup”</h4>
</pre>
</div>



<!--
██████ ████████ ████████ ████ ████████ ███████ ██████ ███ ███
██ ██ ██ ██ ██ ██ ██ ██ █ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ █ ██ ██ ██
██████ ██ ████████ ██ ████████ █████ ██████ ██ ██
██ ██ ██ ██ ██ ██ █ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ █ ██ ██ ██ ██
██████ ██ ██ ██ ████ ██ ███████ ██████ ███ ███
-->

1D Image Values: the ''stripes()'' notation {#stripes}
======================================================

Issue: <a href="https://github.com/w3c/csswg-drafts/issues/2532">Per WG resolution</a>,
define the ''stripes()'' function
which creates a 1D image for use in borders/outlines.
SebastianZ marked this conversation as resolved.
Show resolved Hide resolved
While most <<image>> values represent a 2-dimensional image,
and <<color>> can be thought of as a "0-dimensional" image
(unvarying in either axis),
there are some contexts where a 1-dimensional image makes sense,
specifying colors along a <dfn export>paint line</dfn>
without defining a <em>direction</em> for the line.
The <<1d-image>> type represents such images.

<pre class=prod>
<dfn>&lt;1d-image></dfn> = <<stripes()>>
<dfn>stripes()</dfn> = stripes( <<color-stripe>># )
<dfn>&lt;color-stripe></dfn> = <<color>> && [ <<length-percentage>> | <<flex>> ]?
</pre>

The ''stripes()'' function defines a 1d-image
as a number of colored stripes with different widths.

Each comma-separated entry defines a solid-color stripe,
each placed end-to-end on the [=paint line=] in the order given,
with the specified <<color>> and thickness.
If the thickness is omitted,
it defaults to ''1fr''.

In each entry, a <<percentage>> is relative to the |painting area|
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is very confusing, the "painting area" is never defined but since it's an area it seems to be 2D. How to resolve a 1D <length-percentage> relatively to a 2D area?

Should this refer to the "length of the paint line" instead?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#8160

and must be between ''0%'' and ''100%'' inclusive
or else the function is invalid.
A <<flex>> is evaluated as a fraction of the |painting area|
relative to the total sum of <<flex>> entries in the function,
after subtracting the thickness of any non-<<flex>> entries
(flooring the subtraction result at zero).
If the sum of <<flex>> values is less than 1fr,
the result of the subtraction is multiplied by the sum's value
before being distributed.

<div class=example>
For example,
''stripes(red 1fr, green 2fr, blue 100px)``
with a |painting area| of ''400px''
will result in a 100px red stripe and 200px green stripe,
giving red 1 share and green 2 shares of the 300px remaining
after subtracting blue's 100px from the 400px total.

On the other hand,
''stripes(red .1fr, green .2fr, blue 100px)``
with a |painting area| of ''400px''
will instead give a 30px red stripe and 60px green stripe,
followed by 100px of blue and then 210px of transparent.
The 300px of leftover space is multiplied by .3,
the value of the sum of the <<flex>> values,
to obtain only 90px,
which is then distributed in the 1:2 ratio
the <<flex>> values would dictate.

(This is similar to how [=flex layout=] deals with small <<flex>> sums on a line,
and ensures smoothly continuous behavior
as the <<flex>> values approach zero.)
</div>

The |painting area| is defined by the context in which the ''stripes()'' function is used.
If used generically as an <<image>>,
the |painting area| is the height of the [=concrete image size=].
Comment on lines +1969 to +1970
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does "If used generically as an <image>" mean, if <1d-image> is no longer an <image>?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That was just a left-over. I've removed the whole paragraph now as it didn't add any additional information anymore.

Thanks for the hint!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You removed another used generically as an <<image>>, but not this one.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#8161


If the sum thickness of the stripes is smaller than the |painting area|,
the [=paint line=] is [=transparent black=] for its remaining length,
as if a final ''transparent'' argument were given.
If the sum thickness is larger,
any stripes or portions thereof that would be past the end of the [=paint line=] have no effect.

The computed value of this function is the [=specified value=]
with all <<color>>s computed
and all <<length-percentage>>s absolutized and computed to the extent possible.

<!--
██████ ████ ████████ ████ ██ ██ ██████
Expand Down Expand Up @@ -2393,6 +2465,39 @@ Interpolating <<gradient>> {#interpolating-gradients}
Then, for each pair of color-stops,
interpolate the position and color independently.

Interpolating <<1d-image>> {#interpolating-1d-images}
-----------------------------------------------

Similar to <a lt="interpolating-gradients">gradient images</a>,
one-dimensional images can be interpolated directly in CSS transitions and animations,
smoothly animating from one image to another.
There are only a few restrictions on what images are allowed to be interpolated:

1. Both the starting and ending image must have the same number of <<color-stripe>>s.

2. Neither image uses a combination of <<length>>, <<percentage>>, and <<flex>> stripes.

If the two image satisfy both constraints,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the two images

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#8162

they must be interpolated as described below.
If they fail the second one only,
they must be abruptly transitioned at 50%
(unless otherwise specified by a future specification).
If they fail the first constraint,
they must be interpolated using ''cross-fade()''
as for generic images.

Note: The abrupt transition at 50% is so that content will not rely on cross-fading,
and smarter interpolation rules can be added for this case in the future.

1. Interpolate each component and stripe of the images independently.

2. To interpolate a stripe,
first match each stripe in the start image
to the corresponding stripe at the same index in the end image.
Then, for each pair of stripes,
interpolate the <a href="https://www.w3.org/TR/css3-transitions/#animtype-length">thickness</a>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How to interpolate a <length-percentage> with a <flex>?

Rather than checking that each image doesn't mix different types, should the requirement be that each pair of matched stripes have the same type?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#8163

and <a href="https://www.w3.org/TR/css3-transitions/#animtype-color">color</a> independently.

<!--
██████ ████████ ████████ ████ ███ ██ ████ ████████ ███ ████████ ████ ███████ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██
Expand Down Expand Up @@ -2471,7 +2576,7 @@ Changes {#changes}
- Switched color-stop grammar to repeat at end for readability
- Clarified that object-fit and image-resolution use discrete animation
- Fixed definition of cross-fade() image blending
- Added placeholder section for the stripes() function
- Added &lt;1d-image> data type and stripes() function and added &1d-image> to &lt;image> data type
- Moved interpolation of images from [[css3-images]]
- Clarifed that cross-fade() takes 1+ arguments. Defined sizing and painting of the new function arguments in detail.
- Moved cross-fade() from [[css3-images]]
Expand Down
12 changes: 8 additions & 4 deletions css-ui-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,13 +287,14 @@ Animation type: by computed value

<pre class="propdef">
Name: outline-color
Value: <<color>> | invert
Value: [ <<color>> | <<1d-image>> ] | invert
Initial: invert
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: The computed value for ''outline-color/invert'' is ''outline-color/invert''.
For <<color>> values, see [[!CSS-COLOR-4#resolving-color-values]] in [[!CSS-COLOR-4]].
For <<color>> values, see [[css-color-4#resolving-color-values]] in [[!CSS-COLOR-4]].
For <<1d-image>> values, see [[css-images-4#stripes]] in [[!CSS-IMAGES-4]].
Animation type: by computed value
</pre>

Expand Down Expand Up @@ -752,7 +753,7 @@ Values have the following meanings:

Note: This specification does not define
how the coordinate systems of the various types of <<image>> are established,
and defers these definitions to [[CSS4-IMAGES]].
and defers these definitions to [[CSS-IMAGES-4]].

If the values are unspecified,
then the natural hotspot defined inside the image resource itself is used.
Expand Down Expand Up @@ -2541,12 +2542,15 @@ the following normative changes have been made:

<ul>
<li>
Introduce a definition for the 'pointer-events' property.
Introduced a definition for the 'pointer-events' property.

<li>
Extend the image types required to be supported for the 'cursor' property
from just <<url>> to <<url>> and <<url-set>>.
(Support for the broader <<image>> type remains allowed but optional.)

<li>
Added <<1d-image>> as value for the 'outline-color' property.
</ul>

<h3 id=changes-24-1-2020 class=no-num>Changes from the
Expand Down