Skip to content

Commit

Permalink
[various][editorial] Fix references to 'intrinsic sizes' of images/et…
Browse files Browse the repository at this point in the history 
…c to be 'natural', per w3c/csswg-drafts/issues/4961
  • Loading branch information
@tabatkins
tabatkins committed Dec 15, 2020
1 parent 2ee2d5d commit 214bdf4
Show file tree
Hide file tree
Showing 2 changed files with 343 additions and 7 deletions.
8 changes: 4 additions & 4 deletions css-paint-api/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -441,12 +441,12 @@ boundaries. If it does, the user agent should adjust the |snappedConcreteObjectS
proportional change from its original size such that the <<paint()>> function can adjust the drawing
accordingly.

For the purposes of the [=object size negotiation=] algorithm, the paint image has no
[=intrinsic dimensions=].
For the purposes of the [=object size negotiation=] algorithm,
the paint image has no [=natural dimensions=].

Note: In a future version of the spec, the author could have the ability to specify the [=intrinsic
Note: In a future version of the spec, the author could have the ability to specify the [=natural
dimensions=] of the paint image. This will probably be exposed as a callback allowing the
author to define static [=intrinsic dimensions=] or dynamically updating the [=intrinsic
author to define static [=natural dimensions=] or dynamically updating the [=natural
dimensions=] based on computed style and size changes.

The {{PaintSize}} object represents the size of the image that the author should draw. This is
Expand Down
342 changes: 339 additions & 3 deletions css-typed-om/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -987,7 +987,9 @@ typedef (double or CSSNumericValue) CSSNumberish;
</pre>

<div algorithm>
To <dfn export lt="rectify a numberish value | rectifying a numberish value">rectify a numberish value</dfn> |num|,
To <dfn export>rectify a numberish value</dfn> |num|,
optionally to a given unit |unit|
(defaulting to "number"),
perform the following steps:

1. If |num| is a {{CSSNumericValue}},
Expand All @@ -996,7 +998,7 @@ typedef (double or CSSNumericValue) CSSNumberish;
2. If |num| is a {{double}},
return a new {{CSSUnitValue}}
with its {{CSSUnitValue/value}} internal slot set to |num|
and its {{CSSUnitValue/unit}} internal slot set to "number".
and its {{CSSUnitValue/unit}} internal slot set to |unit|.
</div>


Expand Down Expand Up @@ -2858,6 +2860,340 @@ has the same behavior as in normal CSS.
</div>


<!--
██████ ███████ ██ ███████ ████████
██ ██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ████████
██ ██ ██ ██ ██ ██ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██
██████ ███████ ████████ ███████ ██ ██
-->

{{CSSColorValue}} objects {#colorvalue-objects}
-----------------------------------------------

{{CSSColorValue}} objects represent <<color>> values.

<xmp class='idl'>
[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSColorValue : CSSStyleValue {
CSSRGB toRGB();
CSSHSL toHSL();
CSSHWB toHWB();
CSSGray toGray();
CSSLCH toLCH();
CSSLab toLab();
CSSColor toColor(CSSKeywordish colorspace);

[Exposed=Window] static CSSColorValue parse(USVString cssText);
};
</xmp>

<div algorithm="CSSColorValue.to*()">
The <dfn method for=CSSColorValue>toRGB()</dfn> method
of {{CSSColorValue}} objects must,
when called on |this|,
convert |this| into an sRGB color,
and return a new {{CSSRGB}} object
with its {{CSSRGB/r}}, {{CSSRGB/g}}, {{CSSRGB/b}}, and {{CSSRGB/alpha}} internal slots
set appropriately to represent that color.

The <dfn method for=CSSColorValue>toHSL()</dfn>
and <dfn method for=CSSColorValue>toHWB()</dfn> methods
of {{CSSColorValue}} objects
must do the same as {{toRGB()}},
but return a {{CSSHSL}} or {{CSSHWB}} object, respectively,
with their corresponding internal slots set appropriately.

The <dfn method for=CSSColorValue>toGray()</dfn>,
<dfn method for=CSSColorValue>toLCH()</dfn>,
and <dfn method for=CSSColorValue>toLab()</dfn> methods
of {{CSSColorValue}} objects must,
when called on |this|,
convert |this| into a CIE L*a*b* color [[CIELAB]],
and return a new {{CSSGray}}, {{CSSLCH}}, or {{CSSLab}} object, respectively,
with their corresponding internal slots set appropriately.
</div>

<div algorithm="CSSColorValue.toColor()">
The <dfn method for=CSSColorValue>toColor(|colorspace|)</dfn> method
of {{CSSColorValue}} objects must,
when called on |this|,
perform the following steps:

1. Replace |colorspace| with the result of [=rectifying a keywordish value=].

2. If |colorspace|'s value is not one of the [[css-color-4#predefined|predefined colorspaces]],
[=throw=] a {{SyntaxError}}.

3. Convert |this| into a color in the colorspace specified by |colorspace|,
and return a new {{CSSColor}} object
with TODO.
</div>

<div algorithm="CSSColorValue.parse()">
The <dfn method for=CSSColorValue>parse(|cssText|)</dfn> method,
when called,
must perform the following steps:

1. [=CSS/Parse=] |cssText| as a <<color>>
and let |result| be the result.
If |result| is a syntax error,
[=throw=] a {{SyntaxError}}
and abort this algorithm.

2. [=Reify a color value=] from |result|,
and return the result.
</div>



<xmp class=idl>
[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSRGB : CSSColorValue {
constructor(CSSNumberish r, CSSNumberish g, CSSNumberish b, optional CSSNumberish alpha = 1);
attribute CSSNumberish r;
attribute CSSNumberish g;
attribute CSSNumberish b;
attribute CSSNumberish alpha;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSHSL : CSSColorValue {
constructor(CSSNumericValue h, CSSNumberish s, CSSNumberish l, optional CSSNumberish alpha = 1);
attribute CSSNumericValue h;
attribute CSSNumberish s;
attribute CSSNumberish l;
attribute CSSNumberish alpha;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSHWB : CSSColorValue {
constructor(CSSNumericValue h, CSSNumberish w, CSSNumberish b, optional CSSNumberish alpha = 1);
attribute CSSNumericValue h;
attribute CSSNumberish w;
attribute CSSNumberish b;
attribute CSSNumberish alpha;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSGray : CSSColorValue {
constructor(CSSNumberish gray, optional CSSNumberish alpha = 1);
attribute CSSNumberish gray;
attribute CSSNumberish alpha;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSLCH : CSSColorValue {
constructor(CSSNumberish l, CSSNumberish c, CSSNumericValue h, optional CSSNumberish alpha = 1);
attribute CSSNumberish l;
attribute CSSNumberish c;
attribute CSSNumericValue h;
attribute CSSNumberish alpha;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSLab : CSSColorValue {
constructor(CSSNumberish l, CSSNumberish a, CSSNumberish b, optional CSSNumberish alpha = 1);
attribute CSSNumberish l;
attribute CSSNumberish a;
attribute CSSNumberish b;
attribute CSSNumberish alpha;
};

[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
interface CSSColor : CSSColorValue {
constructor(sequence<DOMString or CSSNumberish> variant)
/* CSSColor(["foo", 0, 1, .5], ["bar", "yellow"], 1, fallbackColor) */
/* or just make the alpha and fallback successive optional args? */
};

</xmp>

Issue: TODO add stringifiers

<div algorithm="CSSRGB()">
The <dfn constructor for=CSSRGB>CSSRGB(|r|, |g|, |b|, optional |alpha|)</dfn> constructor
must, when invoked,
perform the following steps:

1. Let |r|, |g|, |b|, and |alpha|
be replaced by the result of [=rectifying a percentish value=].

2. If |r|, |g|, and |b| don't all [=CSSNumericValue/match=] "number" or "percent",
[=throw=] a {{TypeError}}.
If |alpha| doesn't [=CSSNumericValue/match=] "percent",
[=throw=] a {{TypeError}}.

3. Return a new {{CSSRGB}}
with its {{CSSRGB/r}}, {{CSSRGB/g}}, {{CSSRGB/b}}, and {{CSSRGB/alpha}} internal slots
set to |r|, |g|, |b|, and |alpha|.
</div>

<div algorithm="CSSRGB.r">
The <dfn attribute for=CSSRGB>r</dfn>,
<dfn attribute for=CSSRGB>g</dfn>,
<dfn attribute for=CSSRGB>b</dfn>,
and <dfn attribute for=CSSRGB>alpha</dfn> attributes of a {{CSSRGB}} value
must, on setting to a new value |val|,
[=rectify a percentish value=] from |val|
and set the corresponding internal slot to the result of that.
</div>

<div algorithm="CSSHSL()">
The <dfn constructor for=CSSHSL>CSSHSL(|h|, |s|, |l|, optional |alpha|)</dfn> constructor
must, when invoked,
perform the following steps:

1. Let |s|, |l|, and |alpha|
be replaced by the result of [=rectifying a percentish value=].

2. If |h| doesn't [=CSSNumericValue/match=] "angle",
[=throw=] a {{TypeError}}.
If |s|, |l|, and |alpha| don't all [=CSSNumericValue/match=] "percent",
[=throw=] a {{TypeError}}.

3. Return a new {{CSSHSL}}
with its {{CSSHSL/h}}, {{CSSHSL/s}}, {{CSSHSL/l}}, and {{CSSHSL/alpha}} internal slots
set to |h|, |s|, |l|, and |alpha|.
</div>

<div algorithm="CSSHSL.s">
The <dfn attribute for=CSSHSL>s</dfn>,
<dfn attribute for=CSSHSL>l</dfn>,
and <dfn attribute for=CSSHSL>alpha</dfn> attributes of a {{CSSHSL}} value
must, on setting to a new value |val|,
[=rectify a percentish value=] from |val|
and set the corresponding internal slot to the result of that.
</div>

<div algorithm="CSSHWB()">
The <dfn constructor for=CSSHWB>CSSHWB(|h|, |w|, |b|, optional |alpha|)</dfn> constructor
must, when invoked,
perform the following steps:

1. Let |w|, |b|, and |alpha|
be replaced by the result of [=rectifying a percentish value=].

2. If |h| doesn't [=CSSNumericValue/match=] "angle",
[=throw=] a {{TypeError}}.
If |w|, |b|, and |alpha| don't all [=CSSNumericValue/match=] "percent",
[=throw=] a {{TypeError}}.

3. Return a new {{CSSHWB}}
with its {{CSSHWB/h}}, {{CSSHWB/w}}, {{CSSHWB/b}}, and {{CSSHWB/alpha}} internal slots
set to |h|, |w|, |b|, and |alpha|.
</div>

<div algorithm="CSSHWB.w">
The <dfn attribute for=CSSHWB>w</dfn>,
<dfn attribute for=CSSHWB>b</dfn>,
and <dfn attribute for=CSSHWB>alpha</dfn> attributes of a {{CSSHWB}} value
must, on setting to a new value |val|,
[=rectify a percentish value=] from |val|
and set the corresponding internal slot to the result of that.
</div>

<div algorithm="CSSLCH()">
The <dfn constructor for=CSSLCH>CSSLCH(|l|, |c|, |h|, optional |alpha|)</dfn> constructor
must, when invoked,
perform the following steps:

1. Let |l|, |c|, and |alpha|
be replaced by the result of [=rectifying a percentish value=].

2. If |h| doesn't [=CSSNumericValue/match=] "angle",
[=throw=] a {{TypeError}}.
If |l|, |c|, and |alpha| don't all [=CSSNumericValue/match=] "percent",
[=throw=] a {{TypeError}}.

3. Return a new {{CSSLCH}}
with its {{CSSLCH/l}}, {{CSSLCH/c}}, {{CSSLCH/h}}, and {{CSSLCH/alpha}} internal slots
set to |l|, |c|, |h|, and |alpha|.
</div>

<div algorithm="CSSLCH.l">
The <dfn attribute for=CSSLCH>l</dfn>,
<dfn attribute for=CSSLCH>c</dfn>,
and <dfn attribute for=CSSLCH>alpha</dfn> attributes of a {{CSSLCH}} value
must, on setting to a new value |val|,
[=rectify a percentish value=] from |val|
and set the corresponding internal slot to the result of that.
</div>

<div algorithm="CSSLab()">
The <dfn constructor for=CSSLab>CSSLab(|l|, |a|, |b|, optional |alpha|)</dfn> constructor
must, when invoked,
perform the following steps:

1. Let |l|, |a|, |b|, and |alpha|
be replaced by the result of [=rectifying a percentish value=].

2. If |l|, |a|, |b|, and |alpha| don't all [=CSSNumericValue/match=] "percent",
[=throw=] a {{TypeError}}.

3. Return a new {{CSSLab}}
with its {{CSSLab/l}}, {{CSSLab/a}}, {{CSSLab/b}}, and {{CSSLab/alpha}} internal slots
set to |l|, |a|, |b|, and |alpha|.
</div>

<div algorithm="CSSLab.l">
The <dfn attribute for=CSSLab>l</dfn>,
<dfn attribute for=CSSLab>a</dfn>,
<dfn attribute for=CSSLab>b</dfn>,
and <dfn attribute for=CSSLab>alpha</dfn> attributes of a {{CSSLab}} value
must, on setting to a new value |val|,
[=rectify a percentish value=] from |val|
and set the corresponding internal slot to the result of that.
</div>

<div algorithm="CSSColor()">
The <dfn constructor for=CSSColor>CSSColor(|colorspace|, |channels|, optional |alpha|)</dfn> constructor
must, when invoked,
perform the following steps:

1. Let |colorspace| be replaced by the result of [=rectifying a keywordish value=].
Let |channels| be replaced by the result of [=rectifying a percentish value=] for each item in the list.
Let |alpha| be replaced by the result of [=rectifying a percentish value=].

2. If |alpha| and the items of |channels| don't all [=CSSNumericValue/match=] "percent",
[=throw=] a {{TypeError}}.

3. Return a new {{CSSColor}}
with its {{CSSColor/colorspace}}, {{CSSColor/channels}}, and {{CSSColor/alpha}} internal slots
set to |colorspace|, |channels|, and |alpha|.
</div>

<div algorithm="CSSColor.colorspace">
The <dfn attribute for=CSSColor>colorspace</dfn> attribute of a {{CSSColor}} value
must, on setting to a new value |val|,
[=rectify a keywordish value=] from |val|
and set the corresponding internal slot to the result of that.

Issue: Phrase the per-item channels setting.

The <dfn attribute for=CSSColor>alpha</dfn> attribute of a {{CSSColor}} value
must, on setting to a new value |val|,
[=rectify a percentish value=] from |val|
and set the corresponding internal slot to the result of that.
</div>

<div algorithm>
To <dfn export>rectify a percentish value</dfn> |num|,
perform the following steps:

1. If |num| is a {{CSSNumericValue}},
return |num|.

2. If |num| is a {{double}},
return a [=new unit value=] from (|num|*100, "percent").
</div>





<!--
██████ ██████ ██████ ██ ███████ ██ ██
██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ███
Expand Down Expand Up @@ -5013,7 +5349,7 @@ same rules referenced above.
Reification can not fail for {{CSSResourceValue}} objects.

<div class='example'>
The string 'url(''bike.png'')' is converted into a {{CSSURLImageValue}} with {{CSSResourceValue/state}} set to ''unloaded'' and the {{CSSURLImageValue/url}} set to ''https://drafts.css-houdini.org/css-typed-om/bike.png''. The {{CSSImageValue/intrinsicWidth}}, {{CSSImageValue/intrinsicHeight}} and {{CSSImageValue/intrinsicRatio}} are all set to null.
The string 'url(''bike.png'')' is converted into a {{CSSURLImageValue}} with {{CSSResourceValue/state}} set to ''unloaded'' and the {{CSSURLImageValue/url}} set to ''https://drafts.css-houdini.org/css-typed-om/bike.png''.
</div>


Expand Down

0 comments on commit 214bdf4

Please sign in to comment.