Skip to content

Commit f004402

Browse files
author
Jihye Hong
committed
Merge remote-tracking branch 'upstream/master' into improve-processing-model
2 parents eb42345 + c1f2f42 commit f004402

22 files changed

+403
-180
lines changed

‎css-color-4/Overview.bs

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
<pre class=metadata>
22
Title: CSS Color Module Level 4
3-
Status: WD
4-
Prepare for TR: true
3+
Status: ED
54
Work Status: Exploring
65
ED: https://drafts.csswg.org/css-color/
76
TR: https://www.w3.org/TR/css-color-4/
8-
Previous Version: https://www.w3.org/TR/2019/WD-css-color-4-20190305/
7+
Previous Version: https://www.w3.org/TR/2019/WD-css-color-4-20191105/
98
Shortname: css-color
109
Group: csswg
1110
Level: 4
@@ -79,8 +78,8 @@ For example, to specify lime green:
7978

8079
<div class="example">
8180
<pre class="lang-css">
82-
em { color: lime; } /* color keyword */
83-
em { color: rgb(0 255 0); } /* RGB range 0-255 */
81+
em { color: lime; } /* color keyword */
82+
em { color: rgb(0 255 0); } /* RGB range 0-255 */
8483
em { color: rgb(0% 100% 0%); } /* RGB range 0%-100% */
8584
</pre>
8685
</div>

‎css-color-4/contrast.html

+61-53
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,62 @@
1-
<html>
2-
<script src="math.js"></script>
3-
<script src="conversions.js"></script>
4-
<script src="utilities.js"></script>
5-
<script>
6-
// make 9 steps in sRGB, compare to 9 steps in D65-adapted lab
7-
// odd number of steps so we have an exact 50%
8-
9-
for (var i =0; i <9; i++) {
10-
console.log(100 * i / 8);
11-
}
12-
for (var i =0; i <9; i++) {
13-
var lab = [100 * i / 8, 0, 0];
14-
// console.log(lab);
15-
console.log(i);
16-
var xyz = Lab_to_XYZ(lab);
17-
// okay, bradford
18-
var xyz2 = D50_to_D65(xyz);
19-
var linrgb = XYZ_to_lin_sRGB(xyz2);
20-
// console.log(linrgb);
21-
var rgb = gam_sRGB(linrgb);
22-
console.log(rgb);
23-
}
24-
</script>
25-
<style>
26-
body {background-color: rgb(46.6346021727084%, 46.6346021727084%, 46.6346021727084%); padding: 20px;}
27-
#rgb div, #lab div {width:60px; height: 60px; display: inline-block; padding:10px; margin: 10px; }
28-
h2 {color: rgb(243, 235, 166);}
29-
</style>
30-
<h2>Equal steps in sRGB</h2>
31-
<div id="rgb">
32-
<div style="background-color:rgb(0,0,0)"> </div>
33-
<div style="background-color:rgb(12.5%, 12.5%, 12.5%)"> </div>
34-
<div style="background-color:rgb(25%, 25%, 25%)"> </div>
35-
<div style="background-color:rgb(37.5%, 37.5%, 37.5%)"> </div>
36-
<div style="background-color:rgb(50%, 50%, 50%)"> </div>
37-
<div style="background-color:rgb(62.5%, 62.5%, 62.5%)"> </div>
38-
<div style="background-color:rgb(75%, 75%, 75%)"> </div>
39-
<div style="background-color:rgb(87.5%, 87.5%, 87.5%)"> </div>
40-
<div style="background-color:rgb(100%, 100%, 100%)"> </div>
41-
</div>
42-
<h2>Equal steps in Lab</h2>
43-
<div id="lab">
44-
<div style="background-color:rgb(0,0,0)"> </div>
45-
<div style="background-color:rgb(12.749552497781125%, 12.749552497781125%, 12.749552497781125%)"> </div>
46-
<div style="background-color:rgb(23.252523386167795%, 23.252523386167795%, 23.252523386167795%)"> </div>
47-
<div style="background-color:rgb(34.59944594333101%, 34.59944594333101%, 34.59944594333101%)"> </div>
48-
<div style="background-color:rgb(46.6346021727084%, 46.6346021727084%, 46.6346021727084%)"> </div>
49-
<div style="background-color:rgb(59.2564772904724%, 59.2564772904724%, 59.2564772904724%)"> </div>
50-
<div style="background-color:rgb(72.39290209364759%, 72.39290209364759%, 72.39290209364759%)"> </div>
51-
<div style="background-color:rgb(85.98956900584421%, 85.98956900584421%, 85.98956900584421%)"> </div>
52-
<div style="background-color:rgb(100%, 100%, 100%)"> </div>
53-
</div>
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
5+
<script src="math.js"></script>
6+
<script src="conversions.js"></script>
7+
<script src="utilities.js"></script>
8+
9+
<style>
10+
body {background-color: rgb(46.6346021727084%, 46.6346021727084%, 46.6346021727084%); padding: 20px;}
11+
h2 {color: rgb(243, 235, 166);}
12+
</style>
13+
14+
</head>
15+
<body>
16+
17+
<h2>Contrast ratio of two colors</h2>
18+
<p>Pick a foreground and background color</p>
19+
20+
<input type="color" id="fg" value="#B7C9A3">
21+
<label for="fg">Foreground</label>
22+
<input type="color" id="bg" value="#104425">
23+
<label for="bg">Background</label>
24+
25+
<div id="result">
26+
Contrast ratio <output id="contrastResult"></output>.
27+
</div>
28+
29+
30+
<script>
31+
// read the foreground and background colors
32+
// then use the contrast() utility function
33+
// to compute WCAG contrast.
34+
35+
var fgInput = document.querySelector("#fg");
36+
var bgInput = document.querySelector("#bg");
37+
var contrastOutput = document.querySelector("#contrastResult");
38+
var bgColor, fgColor;
39+
40+
// if any picker changes, update the color
41+
// and output the contrast ratio
42+
(fgInput.oninput = bgInput.oninput = function (event) {
43+
bgColor = hexToArray(bgInput.value);
44+
fgColor = hexToArray(fgInput.value);
45+
console.log("watch", bgColor, fgColor);
46+
contrastOutput.value = contrast(bgColor, fgColor);
47+
// convert from string to array of number
48+
// compute contrast
49+
// update span
50+
})();
51+
52+
53+
54+
function hexToArray(hex) {
55+
return hex.match(/[\dA-F]{2}/ig).map(x => parseInt(x, 16) / 255);
56+
}
57+
58+
</script>
59+
60+
</body>
61+
5462
</html>

‎css-color-4/utilities.js

+17-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// utility functions for color conversions
2-
import "conversions.js";
2+
// needs conversions.js and math.js (not Math)
33

44
function sRGB_to_luminance(RGB) {
55
// convert an array of gamma-corrected sRGB values
@@ -20,7 +20,7 @@ function contrast(RGB1, RGB2) {
2020
var L1 = sRGB_to_luminance(RGB1);
2121
var L2 = sRGB_to_luminance(RGB2);
2222

23-
if L1 > L2 return (L1 + 0.05) / (L2 + 0.05);
23+
if (L1 > L2) return (L1 + 0.05) / (L2 + 0.05);
2424
return (L2 + 0.05) / (L1 + 0.05);
2525
}
2626

@@ -32,5 +32,19 @@ function sRGB_to_LCH(RGB) {
3232
// then convert XYZ to CIE Lab
3333
// and finally, convert to CIE LCH
3434

35-
return lin_sRGB_to_XYZ(lin_sRGB(RGB));
35+
return Lab_to_LCH(XYZ_to_Lab(D65_to_D50(lin_sRGB_to_XYZ(lin_sRGB(RGB)))));
36+
}
37+
38+
function LCH_to_sRGB(LCH) {
39+
// convert an array of CIE LCH values
40+
// to CIE Lab, and then to XYZ,
41+
// adapt from D50 to D65,
42+
// then convert XYZ to linear-light sRGB
43+
// and finally to gamma corrected sRGB
44+
// for in-gamut colors, components are in the 0.0 to 1.0 range
45+
// out of gamut colors may have negative components
46+
// or components greater than 1.0
47+
// so check for that :)
48+
49+
return gam_sRGB(XYZ_to_lin_sRGB(Lab_to_XYZ(D50_to_D65(LCH_to_Lab(LCH)))));
3650
}

‎css-color-5/Overview.bs

+22-8
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ TR: https://www.w3.org/TR/css-color-5/
88
ED: https://drafts.csswg.org/css-color-5/
99
Work Status: exploring
1010
Editor: Chris Lilley, W3C, chris@w3.org, w3cid 1438
11-
Editor: Una Kravets, Google, w3cid 115525
11+
Editor: Una Kravets, Google, https://una.im, w3cid 115525
1212
Editor: Lea Verou, Invited Expert, http://lea.verou.me/about, w3cid 52258
13+
Editor: Adam Argyle, Google, https://nerdy.dev, w3cid 112669
1314
Abstract: This module extends CSS Color [[css-color-4]] to add color modification functions.
1415
Repository: w3c/csswg-drafts
1516
</pre>
@@ -19,7 +20,7 @@ Introduction {#intro}
1920

2021
<em>This section is not normative.</em>
2122

22-
Web developers and design systems developers
23+
Web developers, design tools and design systems developers
2324
often use functions to design components.
2425
With the increasing usage of design systems that support multiple platforms,
2526
and increased capability of Dark Mode in UI,
@@ -29,14 +30,25 @@ Introduction {#intro}
2930
Currently Sass, calc() on HSL values, or PostCSS is used to do this.
3031
Preprocessors are unable to work on dynamically adjusted colors,
3132
and all current solutions are restricted to the sRGB gamut
32-
and to the perceptual limitations of HSL.
33+
and to the perceptual limitations of HSL
34+
(colors are bunched up in the color wheel,
35+
and two colors with visually different lightness,
36+
like yellow and blue,
37+
can have the same HSL lightness).
3338

3439
This module adds three functions:
3540
''color-mix'',
36-
''color-contrast''
37-
and a way to modify existing colors.
41+
''color-contrast'' and
42+
''color-adjust''.
3843

39-
Issue(3187): there are two proposals for color modification.
44+
The perceptually uniform ``lch()`` colorspace
45+
is used for mixing by default,
46+
as this has no gamut restrictions
47+
and colors are evenly distributed.
48+
However, other colorspaces can be specified,
49+
including ``hsl()`` or ``srgb`` if desired.
50+
51+
Issue(3187): there are two proposals for color modification (<a href="https://github.com/w3c/csswg-drafts/issues/3187#issuecomment-499126198">proposal 1</a>, <a href="https://gist.github.com/una/edcfa0d3600e0b89b2ebf266bf549721">proposal 2</a>).
4052
The CSS WG expects that the best aspects of each
4153
will be chosen to produce a single eventual solution.
4254

@@ -60,9 +72,9 @@ Mixing colors: the ''color-mix'' function {#colormix}
6072

6173
<div class="example">
6274
This example produces the mixture of red and yellow,
63-
in ''lch'' colorspace (the default),
75+
in ''lch()'' colorspace (the default),
6476
with the lightness being 30% of the lightness of red
65-
and 70% of the lightness of yellow.
77+
(and thus, 70% of the lightness of yellow).
6678
The chroma and hue of red are left unchanged.
6779

6880
<pre class="lang-css">mix-color(red, yellow, lightness(30%));</pre>
@@ -73,6 +85,8 @@ Mixing colors: the ''color-mix'' function {#colormix}
7385
* mix lightness is 54.2917 * 0.3 + 97.6071 * 0.7 = 84.6125
7486
* mixed result is lch(84.6125 106.8390 40.8526)
7587
* which is a very light red (and outside the gamut of sRGB: rgb(140.4967% 51.2654% 32.6891%))
88+
89+
<!-- Maybe the first example should reslve to an in-gamut color; show out of gamut colors later? -->
7690
</div>
7791

7892
Instead of a list of color functions,

‎css-contain-1/Overview.bs

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ Work Status: completed
77
Group: csswg
88
ED: https://drafts.csswg.org/css-contain-1/
99
TR: https://www.w3.org/TR/css-contain-1/
10+
Previous Version: https://www.w3.org/TR/2019/PR-css-contain-1-20191015/
1011
Previous Version: https://www.w3.org/TR/2019/CR-css-contain-1-20190430/
1112
Previous Version: https://www.w3.org/TR/2018/CR-css-contain-1-20181108/
1213
Previous Version: https://www.w3.org/TR/2018/CR-css-contain-1-20180524/
@@ -48,7 +49,8 @@ Introduction</h2>
4849

4950
There are various heuristics that can be used to guess when a given sub-tree is independent of the rest of the page in some manner,
5051
but they're fragile,
51-
so innocuous changes to a page may inadvertently make it flunk the heuristics and fall into a slow mode.
52+
so innocuous changes to a page may inadvertently make it fail such heuristic tests,
53+
causing rendering to fall into a slow code path.
5254
There are also many things that would be good to isolate which are difficult or impossible to detect in a heuristic manner.
5355

5456
To alleviate these problems

‎css-contain-1/issues-2019-10-pr.html

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Contain Level 1 Disposition of Comments for 2019-10-15 PR</title>
4+
<style>
5+
.a { background: lightgreen }
6+
.d { background: lightblue }
7+
.r { background: orange }
8+
.fo { background: red }
9+
.open { border: solid red; padding: 0.2em; }
10+
:target { box-shadow: 0.25em 0.25em 0.25em; }
11+
</style>
12+
13+
<h1>CSS Contain Level 1 Disposition of Comments for 2019-10-15 PR</h1>
14+
15+
<p>Review document: <a href="https://www.w3.org/TR/2019/PR-css-contain-1-20191015/">https://www.w3.org/TR/2019/PR-css-contain-1-20191015/</a>
16+
17+
<p>Editor's draft: <a href="http://dev.w3.org/csswg/css-contain-1/">http://dev.w3.org/csswg/css-contain-1/</a>
18+
19+
<p>The following color coding convention is used for comments:</p>
20+
21+
<ul>
22+
<li class="a">Accepted or Rejected and positive response
23+
<li class="r">Rejected and no response
24+
<li class="fo">Rejected and negative response
25+
<li class="d">Deferred
26+
<li class="oi">Out-of-Scope or Invalid and not verified
27+
</ul>
28+
29+
<p class=open>Open issues are marked like this</p>
30+
31+
<p>An issue can be closed as <code>Accepted</code>, <code>OutOfScope</code>,
32+
<code>Invalid</code>, <code>Rejected</code>, or <code>Retracted</code>.
33+
<code>Verified</code> indicates commentor's acceptance of the response.</p>
34+
<pre class='a' id='issue-1'>
35+
Issue 1. <a href='#issue-1'>#</a>
36+
Summary: Suggest Rephrasing in Introduction
37+
From: Chris Needham
38+
Comment: <a href='https://github.com/w3c/csswg-drafts/issues/4466'>https://github.com/w3c/csswg-drafts/issues/4466</a>
39+
Response: <a href='https://github.com/w3c/csswg-drafts/pull/3898'>https://github.com/w3c/csswg-drafts/pull/3898</a>
40+
Closed: Accepted
41+
Resolved: Editorial</pre>
42+
<script>
43+
(function () {
44+
var sheet = document.styleSheets[0];
45+
function addCheckbox(className) {
46+
var element = document.querySelector('*.' + className);
47+
var label = document.createElement('label');
48+
label.innerHTML = element.innerHTML;
49+
element.innerHTML = null;
50+
var check = document.createElement('input');
51+
check.type = 'checkbox';
52+
if (className == 'open') {
53+
check.checked = false;
54+
sheet.insertRule('pre:not(.open)' + '{}', sheet.cssRules.length);
55+
check.onchange = function (e) {
56+
rule.style.display = this.checked ? 'none' : 'block';
57+
}
58+
}
59+
else {
60+
check.checked = true;
61+
sheet.insertRule('pre.' + className + '{}', sheet.cssRules.length);
62+
check.onchange = function (e) {
63+
rule.style.display = this.checked ? 'block' : 'none';
64+
}
65+
}
66+
var rule = sheet.cssRules[sheet.cssRules.length - 1];
67+
element.appendChild(label);
68+
label.insertBefore(check, label.firstChild);
69+
}
70+
['a', 'd', 'fo', 'oi', 'r', 'open'].forEach(addCheckbox);
71+
}());
72+
</script>

‎css-contain-1/issues-2019-10-pr.txt

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Draft: https://www.w3.org/TR/2019/PR-css-contain-1-20191015/
2+
Title: CSS Contain Level 1
3+
4+
----
5+
Issue 1.
6+
Summary: Suggest Rephrasing in Introduction
7+
From: Chris Needham
8+
Comment: https://github.com/w3c/csswg-drafts/issues/4466
9+
Closed: Accepted
10+
Resolved: Editorial

‎css-contain-2/Overview.bs

+3-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ Status: ED
66
Work Status: stable
77
Group: csswg
88
ED: https://drafts.csswg.org/css-contain-2/
9+
Previous Version: https://www.w3.org/TR/2019/WD-css-contain-2-20191015/
910
TR: https://www.w3.org/TR/css-contain-2/
1011
Editor: Tab Atkins, Google, http://xanthir.com/contact/, w3cid 42199
1112
Editor: Florian Rivoal, On behalf of Bloomberg, https://florian.rivoal.net/, w3cid 43241
@@ -50,7 +51,8 @@ Introduction</h2>
5051

5152
There are various heuristics that can be used to guess when a given sub-tree is independent of the rest of the page in some manner,
5253
but they're fragile,
53-
so innocuous changes to a page may inadvertently make it flunk the heuristics and fall into a slow mode.
54+
so innocuous changes to a page may inadvertently make it fail such heuristic tests,
55+
causing rendering to fall into a slow code path.
5456
There are also many things that would be good to isolate which are difficult or impossible to detect in a heuristic manner.
5557

5658
To alleviate these problems

0 commit comments

Comments
 (0)