Merge branch 'master' of github.com:w3c/csswg-drafts

Author: gregwhitworth

css-color/Overview.bs

@@ -1769,18 +1769,15 @@ Implementations may choose to implement these steps in some other way (for examp
 using an ICC profile with relative colorimetric rendering intent) provided the results 
 are the same for colors inside the source and destination gamuts.
 
-<h3 id="at-profile">Specifying a color profile: the ''profile'' at-rule</h3>
-<!-- we agreed to call it profile rather than color-profile or icc-profile, for brevity -->
+<h3 id="at-profile">Specifying a color profile: the ''color-profile'' at-rule</h3>
 
 The <dfn data-dfn-type='at-rule' id="at-ruledef-profile">@color-profile</dfn> 
 rule is a  group rule.  It consists of the at-keyword
-'@color-profile' followed by an identifier, followed by a group rule body.
+'@color-profile' followed by a name, followed by a group rule body.
 
 In a very similar way to the ''<@font-face.'' at-rule, the ''<@color-profile>'' 
-at-rule has a descriptor 
-to give the profile a name which will be used inside the stylesheet, 
-<!-- is this actualy a descriptor, or a parameter to the at-rule?-->
-and another descriptor to point to the actual 
+at-rule has a name (which will be used inside the stylesheet), 
+and a descriptor to point to the actual 
 data (<dfn for="@color-profile/src">src</dfn>, just like 
 <dfn for="@font-face/src">src</dfn> in font-face.) 
 <!-- not clear how I link to the two different descriptors therte, in bikeshed syntax -->

css-color/conversions.js

@@ -50,6 +50,53 @@ function XYZ_to_lin_sRGB(XYZ) {
 	return math.multiply(M, XYZ).valueOf();
 }
 
+// DCI P3-related functions
+
+
+function lin_P3(RGB) {
+	// convert an array of DCI P3 RGB values in the range 0.0 - 1.0 
+	// to linear light (un-companded) form.
+
+	return RGB.map(function (val) {
+		return Math.pow(val, 2.6);
+	});
+}
+
+function gam_P3(RGB) {
+	// convert an array of linear-light P3 RGB  in the range 0.0-1.0
+	// to gamma corrected form
+	
+	return RGB.map(function (val) {
+			return Math.pow(val, 1/2.6);
+		}
+	});
+}
+ 
+function lin_P3_to_XYZ(rgb) {
+	// convert an array of linear-light P3 values to CIE XYZ
+	// using  D65 (no chromatic adaptation)
+	// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
+	var M = math.matrix([
+		[0.4865709486482162, 0.26566769316909306, 0.1982172852343625],
+		[0.2289745640697488, 0.6917385218365064,  0.079286914093745], 
+		[0.0000000000000000, 0.04511338185890264, 1.043944368900976]
+	]);
+	// 0 was computed as -3.972075516933488e-17
+	
+	return math.multiply(M, rgb).valueOf();
+}
+
+function XYZ_to_lin_P3(XYZ) {
+	// convert XYZ to linear-light P3
+	var M = math.matrix([
+		[ 2.493496911941425,   -0.9313836179191239, -0.40271078445071684],
+		[-0.8294889695615747,   1.7626640603183463,  0.023624685841943577],
+		[ 0.03584583024378447, -0.07617238926804182, 0.9568845240076872]
+	]);
+	
+	return math.multiply(M, XYZ).valueOf();
+}
+
 //Rec.2020-related functions
 
 function lin_2020(RGB) {

css-color/matrixmaker.html

@@ -13,7 +13,7 @@
 
 
 		// these are for ITU Rec BT.2020
-		
+		/*		
 		const xred=0.708 ;
 		const yred=0.292 ;
 		
@@ -22,7 +22,17 @@
 		
 		const xblue=0.131 ;
 		const yblue=0.046 ;
+		*/
+		
+		// these are for DCI P3
+		const xred=0.680 ;
+		const yred=0.320 ;
 
+		const xgreen=0.265 ;
+		const ygreen=0.690 ;
+		
+		const xblue=0.150 ;
+		const yblue=0.060 ;
 
 		// AdobeRGB, for testing
 		/*

css-snappoints/Overview.bs

@@ -38,7 +38,7 @@ Introduction {#intro}
     which leaves a page partially on-screen when panning.
 
     To this end, we introduce scroll snap positions
-    which enforce the scroll offsets that a <a>scroll container's</a> visual viewport may end at
+    which enforce the scroll offsets that a <a>scroll container's</a> scrollport may end at
     after a scrolling operation has completed.
 
 Module interactions {#placement}
@@ -77,7 +77,7 @@ Motivating Examples {#examples}
         are used to build a photo gallery.  In this example the <a>scroll container</a>
         is larger than the photos contained within (such that multiple images may be seen simultaneously), and the image
         sizes vary.  Using mandatory element-based snap
-        positions, scrolling will always complete with an image centered in the <a>scroll container's</a> visual viewport.
+        positions, scrolling will always complete with an image centered in the <a>scroll container's</a> scrollport.
 
         <pre class="lang-css">
             img {
@@ -113,7 +113,7 @@ Motivating Examples {#examples}
 
             <figcaption>
                 The layout of the scroll container's contents in the example.
-                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).
+                The snapport 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 snapport (represented by a red dotted line) with the X-center of a snap area (represented by a yellow dotted line).
             </figcaption>
         </figure>
     </div>
@@ -158,7 +158,7 @@ Motivating Examples {#examples}
 
             <figcaption>
                 The layout of the scroll container's contents in the example.
-                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).
+                The snapport 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 snapport (represented by a red dotted line) with the Y-start of a snap area (represented by a yellow dotted line).
             </figcaption>
         </figure>
     </div>
@@ -187,8 +187,8 @@ Overview {#overview}
     <a>Snap positions</a> can be specified
     as a particular alignment ('scroll-snap-align')
     of an element's <a>scroll snap area</a> ('scroll-snap-margin', defaulting to its border box)
-    within the <a>scroll container</a>’s <a>snap alignment container</a>
-    (its visual viewport, as reduced by its 'scroll-snap-padding').
+    within the <a>scroll container</a>’s <a>snapport</a>
+    (its scrollport, as reduced by its 'scroll-snap-padding').
     This is conceptually equivalent to specifying the alignment of
     an <a>alignment subject</a> within an <a>alignment container</a>.
     A scroll position that satisfies the specified alignment
@@ -216,9 +216,9 @@ Definitions {#definitions}
         <dd>
             An element which provides a scrolling user interface as described in [[!CSS21]], particularly in the section on overflow.
 
-        <dt><dfn export>snap alignment container</dfn>
+        <dt><dfn export>snapport</dfn>
         <dd>
-            A scroll container's snap alignment container is the rectangle obtained by reducing its visual viewport by its 'scroll-snap-padding'.
+            A scroll container's snapport is the rectangle obtained by reducing its scrollport by its 'scroll-snap-padding'.
 
             Issue: Better name for this concept?
 
@@ -228,19 +228,19 @@ Definitions {#definitions}
 
         <dt><dfn lt="scroll snap position" local-lt="snap position" export>snap position</dfn>
         <dd>
-            For a scroll container, a particular value for its scroll offset is a snap position if when scrolled to that offset the visual viewport of the scroll container would align with a descendent element in the manner specified by the scroll snap properties.
+            For a scroll container, a particular value for its scroll offset is a snap position if when scrolled to that offset the scrollport of the scroll container would align with a descendent element in the manner specified by the scroll snap properties.
 
         <dt><dfn lt="scroll snapped" local-lt="snapped" export>snapped</dfn>
         <dd>
-            A scroll container is said to be snapped to a snap position if its visual viewport's scroll offset is that snap position and there is no active scrolling operation.
+            A scroll container is said to be snapped to a snap position if its scrollport's scroll offset is that snap position and there is no active scrolling operation.
 
         <dt><dfn lt="scroll snap" local-lt="snap|snapping" export>snap</dfn>
         <dd>
-            The act of adjusting the scroll offset of a scroll container's visual viewport such that it is snapped to a snap position is called snapping.
+            The act of adjusting the scroll offset of a scroll container's scrollport such that it is snapped to a snap position is called snapping.
     </dl>
 
-Properties on the scroll container {#properties-on-the-scroll-container}
-========================================================================
+Capturing Scroll Snap Areas:  Properties on the scroll container {#properties-on-the-scroll-container}
+======================================================================================================
 
 <!--
 ████████ ██    ██ ████████  ████████
@@ -252,8 +252,8 @@ Properties on the scroll container {#properties-on-the-scroll-container}
    ██       ██    ██        ████████
 -->
 
-Scroll Snap Types: the 'scroll-snap-type' property {#scroll-snap-type}
-----------------------------------------------------------------------
+Snapping Rules: the 'scroll-snap-type' property {#scroll-snap-type}
+-------------------------------------------------------------------
 
     <pre class="propdef">
     Name: scroll-snap-type
@@ -310,22 +310,22 @@ Scroll Snap Types: the 'scroll-snap-type' property {#scroll-snap-type}
 ██        ██     ██ ████████  ████████  ████ ██    ██  ██████
 -->
 
-Scroll Snap Padding: the 'scroll-snap-padding' property {#scroll-snap-padding}
-------------------------------------------------------------------------------
+Scroll Snapport: the 'scroll-snap-padding' property {#scroll-snap-padding}
+-------------------------------------------------------------------
 
     <pre class="propdef">
     Name: scroll-snap-padding
     Value: [ <<length>> | <<percentage>> ]{1,4}
     Initial: 0
     Applies to: <a>scroll containers</a>
     Inherited: no
-    Percentages: relative to the corresponding dimension of the scroll container's visual viewport
+    Percentages: relative to the corresponding dimension of the scroll container's scrollport
     Media: interactive
     Computed value: as specified, with lengths made absolute
     Animatable: as length, percentage, or calc
     </pre>
 
-    The 'scroll-snap-padding' property defines the <a>snap alignment container</a>, a region inset from the visual viewport of a <a>scroll container</a> used in calculating its <a>snap positions</a>.  The snap alignment container is used as the alignment container when calculating <a>snap positions</a>.  Values are interpreted as for 'padding', and specify inward offsets from each edge of the visual viewport.
+    The 'scroll-snap-padding' property defines the <dfn local-lt="snapport">scroll snapport</dfn>, a region inset from the scrollport of a <a>scroll container</a> used in calculating its <a>snap positions</a>.  The snapport is used as the alignment container when calculating <a>snap positions</a>.  Values are interpreted as for 'padding', and specify inward offsets from each edge of the scrollport.
 
     <div class="example">
         In this example, scroll-snap-padding is used to center slideshow images within the portion of the viewport that is not obscured by a fixed-position toolbar.
@@ -351,8 +351,8 @@ Scroll Snap Padding: the 'scroll-snap-padding' property {#scroll-snap-padding}
 
     This property is a <a>shorthand property</a> that sets all of the <a href="#longhands"><css>scroll-snap-padding-*</css> longhands</a> in one declaration.
 
-Properties on the elements {#properties-on-the-elements}
-========================================================
+Aligning Scroll Snap Areas:  Properties on the elements {#properties-on-the-elements}
+=====================================================================================
 
 <!--
    ███    ████████  ████████    ███   
@@ -364,8 +364,8 @@ Properties on the elements {#properties-on-the-elements}
 ██     ██ ██     ██ ████████ ██     ██
 -->
 
-Scroll Snap Area: the 'scroll-snap-margin' property {#scroll-snap-margin}
----------------------------------------------------------------------------
+Scroll Snapping Area: the 'scroll-snap-margin' property {#scroll-snap-margin}
+-----------------------------------------------------------------------------
 
     <pre class="propdef">
     Name: scroll-snap-margin
@@ -404,8 +404,8 @@ Scroll Snap Area: the 'scroll-snap-margin' property {#scroll-snap-margin}
 ██     ██ ████████ ████  ██████   ██    ██
 -->
 
-Scroll Snap Alignment: the 'scroll-snap-align' property {#scroll-snap-align}
-----------------------------------------------------------------------------
+Scroll Snapping Alignment: the 'scroll-snap-align' property {#scroll-snap-align}
+--------------------------------------------------------------------------------
 
     <pre class="propdef">
     Name: scroll-snap-align
@@ -419,7 +419,10 @@ Scroll Snap Alignment: the 'scroll-snap-align' property {#scroll-snap-align}
     Animatable: no
     </pre>
 
-    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.
+    The 'scroll-snap-align' property specifies
+    the box's <a>snap position</a> as an alignment of
+    its <a>snap area</a> (as the <a>alignment subject</a>)
+    within its <a>snap container's</a> <a>snapport</a> (as the <a>alignment container</a>).  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.
 
     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).
 
@@ -463,13 +466,13 @@ Physical Longhands for 'scroll-snap-padding' {#padding-longhands-physical}
     Initial: 0
     Applies to: <a>scroll containers</a>
     Inherited: no
-    Percentages: relative to the scroll container's visual viewport
+    Percentages: relative to the scroll container's scrollport
     Media: interactive
     Computed value: as specified, with lengths made absolute
     Animatable: as length, percentage, or calc
     </pre>
 
-    These <a>longhands</a> of 'scroll-snap-padding' specify the top, right, bottom, and left edges of the <a>snap alignment container</a>, respectively.
+    These <a>longhands</a> of 'scroll-snap-padding' specify the top, right, bottom, and left edges of the <a>snapport</a>, respectively.
 
 Flow-relative Longhands for 'scroll-snap-padding'  {#padding-longhands-logical}
 -------------------------------------------------------------------------------
@@ -480,27 +483,27 @@ Flow-relative Longhands for 'scroll-snap-padding'  {#padding-longhands-logical}
     Initial: 0
     Applies to: <a>scroll containers</a>
     Inherited: no
-    Percentages: relative to the scroll container's visual viewport
+    Percentages: relative to the scroll container's scrollport
     Media: interactive
     Computed value: as specified, with lengths made absolute
     Animatable: as length, percentage, or calc
     </pre>
 
-    These <a>longhands</a> of 'scroll-snap-padding' specify the block-start, inline-start, block-end, and inline-end edges of the <a>snap alignment container</a>, respectively.
+    These <a>longhands</a> of 'scroll-snap-padding' specify the block-start, inline-start, block-end, and inline-end edges of the <a>snapport</a>, respectively.
 
     <pre class="propdef">
     Name: scroll-snap-padding-block, scroll-snap-padding-inline
     Value: [ <<length>> | <<percentage>> ]{1,2}
     Initial: 0
     Applies to: all elements
     Inherited: no
-    Percentages: relative to the scroll container's visual viewport
+    Percentages: relative to the scroll container's scrollport
     Media: interactive
     Computed value: as specified, with lengths made absolute
     Animatable: as length, percentage, or calc
     </pre>
 
-    These <a>shorthands</a> of 'scroll-snap-padding-block-start' + 'scroll-snap-padding-block-end' and 'scroll-snap-padding-inline-start' + 'scroll-snap-padding-inline-end' are <a>longhands</a> of 'scroll-snap-padding', and specify the block-axis and inline-axis edges of the <a>snap alignment container</a>, respectively.
+    These <a>shorthands</a> of 'scroll-snap-padding-block-start' + 'scroll-snap-padding-block-end' and 'scroll-snap-padding-inline-start' + 'scroll-snap-padding-inline-end' are <a>longhands</a> of 'scroll-snap-padding', and specify the block-axis and inline-axis edges of the <a>snapport</a>, respectively.
 
     If two values are specified, the first gives the start value and the second gives the end value.