Skip to content

Commit 3d7a16e

Browse files
author
gregwhitworth
committed
Merge branch 'master' of github.com:w3c/csswg-drafts
2 parents bb33300 + 00e21f3 commit 3d7a16e

3 files changed

Lines changed: 81 additions & 39 deletions

File tree

‎css-color/conversions.js‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -83,21 +83,26 @@ function gam_2020(RGB) {
8383
});
8484
}
8585

86-
function lin_sRGB_to_XYZ(rgb) {
87-
// convert an array of linear-light sRGB values to CIE XYZ
88-
// using sRGB's own white, D65 (no chromatic adaptation)
86+
function lin_2020_to_XYZ(rgb) {
87+
// convert an array of linear-light rec.2020 values to CIE XYZ
88+
// using D65 (no chromatic adaptation)
8989
// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
9090
var M = math.matrix([
91-
[ // calculate per Libdbloom
91+
[0.6369580483012914, 0.14461690358620832, 0.1688809751641721],
92+
[0.2627002120112671, 0.6779980715188708, 0.05930171646986196],
93+
[0.000000000000000, 0.028072693049087428, 1.060985057710791]
9294
]);
95+
// 0 is actually calculated as 4.994106574466076e-17
9396

9497
return math.multiply(M, rgb).valueOf();
9598
}
9699

97-
function XYZ_to_lin_sRGB(XYZ) {
98-
// convert XYZ to linear-light sRGB
100+
function XYZ_to_lin_2020(XYZ) {
101+
// convert XYZ to linear-light rec.2020
99102
var M = math.matrix([
100-
[ // calculate per Libdbloom
103+
[1.7166511879712674, -0.35567078377639233, -0.25336628137365974],
104+
[-0.6666843518324892, 1.6164812366349395, 0.01576854581391113],
105+
[0.017639857445310783, -0.042770613257808524, 0.9421031212354738]
101106
]);
102107

103108
return math.multiply(M, XYZ).valueOf();

‎css-color/matrixmaker.html‎

Lines changed: 46 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
<html>
2+
<script src="math.js"></script>
3+
<script>
4+
15
// Make matrices for converting to and from an arbitrary RGB colorspace,
26
// given the x,y chromaticities of red, green, blue and white.
37
// To use these matrices, the RGB components are assumed be be
@@ -7,10 +11,9 @@
711
// Horribly hacky, non interactive utility. Edit the file to pick
812
// another colorspace and read the results from the console :P
913

10-
<html>
11-
<script src="math.js"></script>
12-
<script>
14+
1315
// these are for ITU Rec BT.2020
16+
1417
const xred=0.708 ;
1518
const yred=0.292 ;
1619

@@ -20,6 +23,19 @@
2023
const xblue=0.131 ;
2124
const yblue=0.046 ;
2225

26+
27+
// AdobeRGB, for testing
28+
/*
29+
const xred=0.640 ;
30+
const yred=0.330 ;
31+
32+
const xgreen=0.210 ;
33+
const ygreen=0.710 ;
34+
35+
const xblue=0.150 ;
36+
const yblue=0.060 ;
37+
*/
38+
2339
// D65
2440
const xwhite=0.3127 ;
2541
const ywhite=0.3290 ;
@@ -43,19 +59,40 @@
4359
var ZBlue=(1 - xblue - yblue)/yblue;
4460

4561
var white = math.matrix([XWhite, YWhite, ZWhite]);
46-
var primaries = [
62+
console.log(white.valueOf());
63+
var primaries = math.matrix([
4764
[XRed, XGreen, XBlue],
4865
[YRed, YGreen, YBlue],
4966
[ZRed, ZGreen, ZBlue]
50-
];
67+
]);
68+
console.log(primaries.valueOf());
69+
70+
var iprimaries = math.inv(primaries);
71+
console.log(iprimaries.valueOf());
5172

5273
// S is easier if it ends up as an array than a matrix
5374
// but we use matrix math to calculate it
54-
var S = math.multiply(math.inv(math.matrix(primaries)),white).value;
75+
var S = math.multiply(math.inv(primaries),white).valueOf();
5576

56-
var M = math.matrix([
57-
[]
58-
]);
77+
var M = [
78+
[S[0] * XRed, S[1] * XGreen, S[2] * XBlue],
79+
[S[0] * YRed, S[1] * YGreen, S[2] * YBlue],
80+
[S[0] * ZRed, S[1] * ZGreen, S[2] * ZBlue]
81+
];
82+
83+
console.log("RGB to XYZ");
84+
console.log(M);
85+
console.log("XYZ to RGB");
86+
console.log(math.inv(math.matrix(M)).valueOf());
5987

88+
// for code verification: with AdobeRGB primaries, correct result is
89+
// M =
90+
// [[0.5767309 0.1855540 0.1881852],
91+
// [0.2973769 0.6273491 0.0752741],
92+
// [0.0270343 0.0706872 0.9911085]];
93+
// Minv =
94+
// [[2.0413690 -0.5649464 -0.3446944],
95+
// [-0.9692660 1.8760108 0.0415560],
96+
// [0.0134474 -0.1183897 1.0154096]];
6097
</script>
6198
</html>

‎css-snappoints/Overview.bs‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ Motivating Examples {#examples}
113113

114114
<figcaption>
115115
The layout of the scroll container's contents in the example.
116-
The snap alignment container is represented by the red rectangle, and the snap margin is represented by the yellow rectangle. Since the scroll-snap-align is "center" in the X axis, a snap position is established at each scroll offset which aligns the X-center of the snap alignment container (represented by a red dotted line) with the X-center of a snap margin (represented by a yellow dotted line).
116+
The snap alignment container is represented by the red rectangle, and the snap area is represented by the yellow rectangle. Since the scroll-snap-align is "center" in the X axis, a snap position is established at each scroll offset which aligns the X-center of the snap alignment container (represented by a red dotted line) with the X-center of a snap area (represented by a yellow dotted line).
117117
</figcaption>
118118
</figure>
119119
</div>
@@ -135,7 +135,7 @@ Motivating Examples {#examples}
135135
width: 500px;
136136
overflow-x: hidden;
137137
overflow-y: auto;
138-
/* Specifies that each element's snap margin should
138+
/* Specifies that each element's snap area should
139139
align with a 100px offset from the top edge. */
140140
scroll-snap-padding: 100px 0 0;
141141
/* Encourages scrolling to end at a snap position when the
@@ -158,7 +158,7 @@ Motivating Examples {#examples}
158158

159159
<figcaption>
160160
The layout of the scroll container's contents in the example.
161-
The snap alignment container is represented by the red rectangle (inset from the top by 100px due to the scroll-snap-padding), and the snap margin is represented by the yellow rectangle. Since the scroll-snap-align is "start" in the Y axis, a snap position is established at each scroll offset which aligns the Y-start of the snap alignment container (represented by a red dotted line) with the Y-start of a snap margin (represented by a yellow dotted line).
161+
The snap alignment container is represented by the red rectangle (inset from the top by 100px due to the scroll-snap-padding), and the snap area is represented by the yellow rectangle. Since the scroll-snap-align is "start" in the Y axis, a snap position is established at each scroll offset which aligns the Y-start of the snap alignment container (represented by a red dotted line) with the Y-start of a snap area (represented by a yellow dotted line).
162162
</figcaption>
163163
</figure>
164164
</div>
@@ -186,7 +186,7 @@ Overview {#overview}
186186

187187
<a>Snap positions</a> can be specified
188188
as a particular alignment ('scroll-snap-align')
189-
of an element's <a>scroll snap margin</a> ('scroll-snap-margin', defaulting to its border box)
189+
of an element's <a>scroll snap area</a> ('scroll-snap-margin', defaulting to its border box)
190190
within the <a>scroll container</a>’s <a>snap alignment container</a>
191191
(its visual viewport, as reduced by its 'scroll-snap-padding').
192192
This is conceptually equivalent to specifying the alignment of
@@ -222,9 +222,9 @@ Definitions {#definitions}
222222

223223
Issue: Better name for this concept?
224224

225-
<dt><dfn lt="scroll snap margin" local-lt="snap margin" export>snap margin</dfn>
225+
<dt><dfn lt="scroll snap area" local-lt="snap area" export>snap area</dfn>
226226
<dd>
227-
An element's snap margin is the rectangle obtained by expanding its border box by its 'scroll-snap-margin'.
227+
An element's snap area is the rectangle obtained by expanding its border box by its 'scroll-snap-margin'.
228228

229229
<dt><dfn lt="scroll snap position" local-lt="snap position" export>snap position</dfn>
230230
<dd>
@@ -355,16 +355,16 @@ Properties on the elements {#properties-on-the-elements}
355355
========================================================
356356

357357
<!--
358-
██ ██ ███ ████████ ██████ ████ ██ ██
359-
███ ███ ██ ██ ██ ██ ██ ██ ██ ███ ██
360-
████ ████ ██ ██ ██ ██ ██ ██ ████ ██
361-
██ ███ ██ ██ ██ ████████ ██ ████ ██ ██ ██ ██
362-
██ ██ █████████ ██ ██ ██ ██ ██ ██ ████
363-
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███
364-
██ ██ ██ ██ ██ ██ ██████ ████ ██ ██
358+
███ ████████ ████████ ███
359+
██ ██ ██ ██ ██ ██ ██
360+
██ ██ ██ ██ ██ ██ ██
361+
██ ██ ████████ ██████ ██ ██
362+
█████████ ██ ██ ██ █████████
363+
██ ██ ██ ██ ██ ██ ██
364+
██ ██ ██ ██ ████████ ██ ██
365365
-->
366366

367-
Scroll Snap Margin: the 'scroll-snap-margin' property {#scroll-snap-margin}
367+
Scroll Snap Area: the 'scroll-snap-margin' property {#scroll-snap-margin}
368368
---------------------------------------------------------------------------
369369

370370
<pre class="propdef">
@@ -379,7 +379,7 @@ Scroll Snap Margin: the 'scroll-snap-margin' property {#scroll-snap-margin}
379379
Animatable: as length
380380
</pre>
381381

382-
The 'scroll-snap-margin' property defines the <a>scroll snap margin</a> on elements within a <a>scroll container</a>, used in calculating <a>snap positions</a> for that scroll container.
382+
The 'scroll-snap-margin' property defines the <a>scroll snap area</a> on elements within a <a>scroll container</a>, used in calculating <a>snap positions</a> for that scroll container.
383383

384384
The 'scroll-snap-margin' property defines
385385
the <dfn lt="scroll snap area" local-lt="snap area">scroll snap area</dfn>
@@ -390,7 +390,7 @@ Scroll Snap Margin: the 'scroll-snap-margin' property {#scroll-snap-margin}
390390
plus the specified outsets,
391391
axis-aligned in the <a>scroll container’s</a> coordinate space.
392392

393-
Note: This ensures that the <a>scroll snap margin</a> is always rectangular and axis-aligned to the <a>scroll container's</a> coordinate space.
393+
Note: This ensures that the <a>scroll snap area</a> is always rectangular and axis-aligned to the <a>scroll container's</a> coordinate space.
394394

395395
This property is a <a>shorthand property</a> that sets all of the <a href="#longhands"><css>scroll-snap-margin-*</css> longhands</a> in one declaration.
396396

@@ -419,7 +419,7 @@ Scroll Snap Alignment: the 'scroll-snap-align' property {#scroll-snap-align}
419419
Animatable: no
420420
</pre>
421421

422-
The 'scroll-snap-align' property specifies how an element's scroll snap margin should align with its ancestor scroll container's snap alignment container. The two values specify the snapping behavior in the x and y axes, respectively. If only one value is specified, the second value defaults to the same value.
422+
The 'scroll-snap-align' property specifies how an element's scroll snap area should align with its ancestor scroll container's snap alignment container. The two values specify the snapping behavior in the x and y axes, respectively. If only one value is specified, the second value defaults to the same value.
423423

424424
Issue: Should this be x/y axes, or inline/block? Starting with x/y axes for consistency with padding/area, otherwise a writing mode change would result in a axis mismatch (since padding is physical by default).
425425

@@ -430,15 +430,15 @@ Scroll Snap Alignment: the 'scroll-snap-align' property {#scroll-snap-align}
430430

431431
<dt><dfn>start</dfn>
432432
<dd>
433-
The scroll offset which aligns the start edge of this box's scroll snap margin with the start edge of its ancestor scroll container's region defined by 'scroll-snap-padding' in the specified axis is a <a>snap position</a> in that axis.
433+
The scroll offset which aligns the start edge of this box's scroll snap area with the start edge of its ancestor scroll container's region defined by 'scroll-snap-padding' in the specified axis is a <a>snap position</a> in that axis.
434434

435435
<dt><dfn>end</dfn>
436436
<dd>
437-
The scroll offset which aligns the end edge of this box's scroll snap margin with the end edge of its ancestor scroll container's region defined by 'scroll-snap-padding' in the specified axis is a <a>snap position</a> in that axis.
437+
The scroll offset which aligns the end edge of this box's scroll snap area with the end edge of its ancestor scroll container's region defined by 'scroll-snap-padding' in the specified axis is a <a>snap position</a> in that axis.
438438

439439
<dt><dfn>center</dfn>
440440
<dd>
441-
The scroll offset which aligns the center of this box's scroll snap margin with the center of its ancestor scroll container's region defined by 'scroll-snap-padding' in the specified axis is a <a>snap position</a> in that axis.
441+
The scroll offset which aligns the center of this box's scroll snap area with the center of its ancestor scroll container's region defined by 'scroll-snap-padding' in the specified axis is a <a>snap position</a> in that axis.
442442
</dl>
443443

444444
<!--
@@ -519,7 +519,7 @@ Physical Longhands for 'scroll-snap-margin' {#margin-longhands-physical}
519519
Animatable: as length
520520
</pre>
521521

522-
These <a>longhands</a> of 'scroll-snap-margin' specify the top, right, bottom, and left edges of the <a>scroll snap margin</a>, respectively.
522+
These <a>longhands</a> of 'scroll-snap-margin' specify the top, right, bottom, and left edges of the <a>scroll snap area</a>, respectively.
523523

524524
Flow-relative Longhands for 'scroll-snap-margin' {#margin-longhands-logical}
525525
---------------------------------------------------------------------------
@@ -536,7 +536,7 @@ Flow-relative Longhands for 'scroll-snap-margin' {#margin-longhands-logical}
536536
Animatable: as length
537537
</pre>
538538

539-
These <a>longhands</a> of 'scroll-snap-margin' specify the block-start, inline-start, block-end, and inline-end edges of the <a>scroll snap margin</a>, respectively.
539+
These <a>longhands</a> of 'scroll-snap-margin' specify the block-start, inline-start, block-end, and inline-end edges of the <a>scroll snap area</a>, respectively.
540540

541541
<pre class="propdef">
542542
Name: scroll-snap-margin-block, scroll-snap-margin-inline
@@ -550,7 +550,7 @@ Flow-relative Longhands for 'scroll-snap-margin' {#margin-longhands-logical}
550550
Animatable: as length
551551
</pre>
552552

553-
These <a>shorthands</a> of 'scroll-snap-margin-block-start' + 'scroll-snap-margin-block-end' and 'scroll-snap-margin-inline-start' + 'scroll-snap-margin-inline-end' are <a>longhands</a> of 'scroll-snap-margin', and specify the block-axis and inline-axis edges of the <a>scroll snap margin</a>, respectively.
553+
These <a>shorthands</a> of 'scroll-snap-margin-block-start' + 'scroll-snap-margin-block-end' and 'scroll-snap-margin-inline-start' + 'scroll-snap-margin-inline-end' are <a>longhands</a> of 'scroll-snap-margin', and specify the block-axis and inline-axis edges of the <a>scroll snap area</a>, respectively.
554554

555555
If two values are specified, the first gives the start value and the second gives the end value.
556556

0 commit comments

Comments
 (0)