Skip to content

Commit 7d30833

Browse files
committed
[css-images-4] Make radial-gradient() and <<basic-shape>> consistent. #824
1 parent f3c32dc commit 7d30833

File tree

1 file changed

+34
-1
lines changed

1 file changed

+34
-1
lines changed

css-images-4/Overview.bs

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1337,6 +1337,10 @@ to bring them back into gamut.
13371337
Radial Gradients: the ''radial-gradient()'' notation {#radial-gradients}
13381338
------------------------------------------------------------------------
13391339

1340+
1341+
<h4 id="radial-color-interpolation">
1342+
Adding <<color-interpolation-method>></h4>
1343+
13401344
This level adds a <<color-interpolation-method>> argument
13411345
to ''radial-gradient()'' and ''repeating-radial-gradient()'',
13421346
indicating the color space and path to use
@@ -1345,7 +1349,7 @@ Radial Gradients: the ''radial-gradient()'' notation {#radial-gradients}
13451349

13461350
<pre class=prod>
13471351
<dfn>&lt;radial-gradient-syntax></dfn> =
1348-
[ [ [ <<rg-ending-shape>> || <<rg-size>> ]? [ at <<position>> ]? ] || <<color-interpolation-method>>]? ,
1352+
[ [ [ <<radial-shape>> || <<radial-size>> ]? [ at <<position>> ]? ] || <<color-interpolation-method>>]? ,
13491353
<<color-stop-list>>
13501354
</pre>
13511355

@@ -1372,6 +1376,26 @@ Radial Gradients: the ''radial-gradient()'' notation {#radial-gradients}
13721376
alt="red to green gradient in three colorspaces" >
13731377
</div>
13741378

1379+
<h4 id="radial-size">
1380+
Expanding <<radial-size>></h4>
1381+
1382+
This level extends the <<radial-size>> options
1383+
to include the additions from the ''circle()'' and ''ellipse()'' <<basic-shape>> values:
1384+
1385+
<pre class=prod>
1386+
<<radial-size>> = <<radial-extent>>{1,2} | <<length-percentage [0,∞]>>{1,2}
1387+
</pre>
1388+
1389+
Two-component values remain invalid when specifying
1390+
''radial-gradient()/circle'' as the <<radial-shape>>,
1391+
and otherwise indicate the horizontal (first) and vertical (second) radii
1392+
of the ellipse.
1393+
1394+
For ''radial-gradient()/circle'',
1395+
a <<percentage>> value is resolved against
1396+
the “scaled diagonal” of the [=gradient box=]'s width and height:
1397+
<code>sqrt(width² + height²)/sqrt(2)</code>.
1398+
13751399
<!--
13761400
██████ ███████ ██ ██ ████ ██████
13771401
██ ██ ██ ██ ███ ██ ██ ██ ██
@@ -2528,6 +2552,15 @@ Note: No change from [[css-images-3]].
25282552
Changes {#changes}
25292553
==================
25302554

2555+
<h3 class="no-num" id="changes-20230217">
2556+
Changes Since the <a href="https://www.w3.org/TR/2023/WD-css-images-4-20230217/">17 February 2023</a> Working Draft</h3>
2557+
2558+
* Added <<percentage>> values to ''radial-gradient(circle)'',
2559+
and dual <<radial-extent>> values to ''radial-gradient(ellipse)''
2560+
to make ''radial-gradient()'' consistent with
2561+
the ''circle()'' and ''ellipse()'' <<basic-shape>>s.
2562+
(<a href="https://github.com/w3c/csswg-drafts/issues/824">Issue 824</a>)
2563+
25312564
<h3 class="no-num" id="changes-20170413">
25322565
Changes Since the <a href="https://www.w3.org/TR/2017/WD-css-images-4-20170413/">13 April 2017</a> Working Draft</h3>
25332566

0 commit comments

Comments
 (0)