@@ -1337,6 +1337,10 @@ to bring them back into gamut.
1337
1337
Radial Gradients: the ''radial-gradient()'' notation {#radial-gradients}
1338
1338
------------------------------------------------------------------------
1339
1339
1340
+
1341
+ <h4 id="radial-color-interpolation">
1342
+ Adding <<color-interpolation-method>></h4>
1343
+
1340
1344
This level adds a <<color-interpolation-method>> argument
1341
1345
to ''radial-gradient()'' and ''repeating-radial-gradient()'' ,
1342
1346
indicating the color space and path to use
@@ -1345,7 +1349,7 @@ Radial Gradients: the ''radial-gradient()'' notation {#radial-gradients}
1345
1349
1346
1350
<pre class=prod>
1347
1351
<dfn><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>> ]? ,
1349
1353
<<color-stop-list>>
1350
1354
</pre>
1351
1355
@@ -1372,6 +1376,26 @@ Radial Gradients: the ''radial-gradient()'' notation {#radial-gradients}
1372
1376
alt="red to green gradient in three colorspaces" >
1373
1377
</div>
1374
1378
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
+
1375
1399
<!--
1376
1400
██████ ███████ ██ ██ ████ ██████
1377
1401
██ ██ ██ ██ ███ ██ ██ ██ ██
@@ -2528,6 +2552,15 @@ Note: No change from [[css-images-3]].
2528
2552
Changes {#changes}
2529
2553
==================
2530
2554
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
+
2531
2564
<h3 class="no-num" id="changes-20170413">
2532
2565
Changes Since the <a href="https://www.w3.org/TR/2017/WD-css-images-4-20170413/">13 April 2017</a> Working Draft</h3>
2533
2566
0 commit comments