Skip to content

Commit 214bdf4

Browse files
tabatkinstabatkins
committed
[various][editorial] Fix references to 'intrinsic sizes' of images/etc to be 'natural', per w3c/csswg-drafts/issues/4961 
1 parent 2ee2d5d commit 214bdf4

File tree

2 files changed

+343
-7
lines changed

2 files changed

+343
-7
lines changed

‎css-paint-api/Overview.bs

+4-4
Original file line numberDiff line numberDiff line change
@@ -441,12 +441,12 @@ boundaries. If it does, the user agent should adjust the |snappedConcreteObjectS
441441
proportional change from its original size such that the <<paint()>> function can adjust the drawing
442442
accordingly.
443443

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

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

452452
The {{PaintSize}} object represents the size of the image that the author should draw. This is

‎css-typed-om/Overview.bs

+339-3
Original file line numberDiff line numberDiff line change
@@ -987,7 +987,9 @@ typedef (double or CSSNumericValue) CSSNumberish;
987987
</pre>
988988

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

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

10021004

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

28602862

2863+
<!--
2864+
██████ ███████ ██ ███████ ████████
2865+
██ ██ ██ ██ ██ ██ ██ ██ ██
2866+
██ ██ ██ ██ ██ ██ ██ ██
2867+
██ ██ ██ ██ ██ ██ ████████
2868+
██ ██ ██ ██ ██ ██ ██ ██
2869+
██ ██ ██ ██ ██ ██ ██ ██ ██
2870+
██████ ███████ ████████ ███████ ██ ██
2871+
-->
2872+
2873+
{{CSSColorValue}} objects {#colorvalue-objects}
2874+
-----------------------------------------------
2875+
2876+
{{CSSColorValue}} objects represent <<color>> values.
2877+
2878+
<xmp class='idl'>
2879+
[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
2880+
interface CSSColorValue : CSSStyleValue {
2881+
CSSRGB toRGB();
2882+
CSSHSL toHSL();
2883+
CSSHWB toHWB();
2884+
CSSGray toGray();
2885+
CSSLCH toLCH();
2886+
CSSLab toLab();
2887+
CSSColor toColor(CSSKeywordish colorspace);
2888+
2889+
[Exposed=Window] static CSSColorValue parse(USVString cssText);
2890+
};
2891+
</xmp>
2892+
2893+
<div algorithm="CSSColorValue.to*()">
2894+
The <dfn method for=CSSColorValue>toRGB()</dfn> method
2895+
of {{CSSColorValue}} objects must,
2896+
when called on |this|,
2897+
convert |this| into an sRGB color,
2898+
and return a new {{CSSRGB}} object
2899+
with its {{CSSRGB/r}}, {{CSSRGB/g}}, {{CSSRGB/b}}, and {{CSSRGB/alpha}} internal slots
2900+
set appropriately to represent that color.
2901+
2902+
The <dfn method for=CSSColorValue>toHSL()</dfn>
2903+
and <dfn method for=CSSColorValue>toHWB()</dfn> methods
2904+
of {{CSSColorValue}} objects
2905+
must do the same as {{toRGB()}},
2906+
but return a {{CSSHSL}} or {{CSSHWB}} object, respectively,
2907+
with their corresponding internal slots set appropriately.
2908+
2909+
The <dfn method for=CSSColorValue>toGray()</dfn>,
2910+
<dfn method for=CSSColorValue>toLCH()</dfn>,
2911+
and <dfn method for=CSSColorValue>toLab()</dfn> methods
2912+
of {{CSSColorValue}} objects must,
2913+
when called on |this|,
2914+
convert |this| into a CIE L*a*b* color [[CIELAB]],
2915+
and return a new {{CSSGray}}, {{CSSLCH}}, or {{CSSLab}} object, respectively,
2916+
with their corresponding internal slots set appropriately.
2917+
</div>
2918+
2919+
<div algorithm="CSSColorValue.toColor()">
2920+
The <dfn method for=CSSColorValue>toColor(|colorspace|)</dfn> method
2921+
of {{CSSColorValue}} objects must,
2922+
when called on |this|,
2923+
perform the following steps:
2924+
2925+
1. Replace |colorspace| with the result of [=rectifying a keywordish value=].
2926+
2927+
2. If |colorspace|'s value is not one of the [[css-color-4#predefined|predefined colorspaces]],
2928+
[=throw=] a {{SyntaxError}}.
2929+
2930+
3. Convert |this| into a color in the colorspace specified by |colorspace|,
2931+
and return a new {{CSSColor}} object
2932+
with TODO.
2933+
</div>
2934+
2935+
<div algorithm="CSSColorValue.parse()">
2936+
The <dfn method for=CSSColorValue>parse(|cssText|)</dfn> method,
2937+
when called,
2938+
must perform the following steps:
2939+
2940+
1. [=CSS/Parse=] |cssText| as a <<color>>
2941+
and let |result| be the result.
2942+
If |result| is a syntax error,
2943+
[=throw=] a {{SyntaxError}}
2944+
and abort this algorithm.
2945+
2946+
2. [=Reify a color value=] from |result|,
2947+
and return the result.
2948+
</div>
2949+
2950+
2951+
2952+
<xmp class=idl>
2953+
[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
2954+
interface CSSRGB : CSSColorValue {
2955+
constructor(CSSNumberish r, CSSNumberish g, CSSNumberish b, optional CSSNumberish alpha = 1);
2956+
attribute CSSNumberish r;
2957+
attribute CSSNumberish g;
2958+
attribute CSSNumberish b;
2959+
attribute CSSNumberish alpha;
2960+
};
2961+
2962+
[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
2963+
interface CSSHSL : CSSColorValue {
2964+
constructor(CSSNumericValue h, CSSNumberish s, CSSNumberish l, optional CSSNumberish alpha = 1);
2965+
attribute CSSNumericValue h;
2966+
attribute CSSNumberish s;
2967+
attribute CSSNumberish l;
2968+
attribute CSSNumberish alpha;
2969+
};
2970+
2971+
[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
2972+
interface CSSHWB : CSSColorValue {
2973+
constructor(CSSNumericValue h, CSSNumberish w, CSSNumberish b, optional CSSNumberish alpha = 1);
2974+
attribute CSSNumericValue h;
2975+
attribute CSSNumberish w;
2976+
attribute CSSNumberish b;
2977+
attribute CSSNumberish alpha;
2978+
};
2979+
2980+
[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
2981+
interface CSSGray : CSSColorValue {
2982+
constructor(CSSNumberish gray, optional CSSNumberish alpha = 1);
2983+
attribute CSSNumberish gray;
2984+
attribute CSSNumberish alpha;
2985+
};
2986+
2987+
[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
2988+
interface CSSLCH : CSSColorValue {
2989+
constructor(CSSNumberish l, CSSNumberish c, CSSNumericValue h, optional CSSNumberish alpha = 1);
2990+
attribute CSSNumberish l;
2991+
attribute CSSNumberish c;
2992+
attribute CSSNumericValue h;
2993+
attribute CSSNumberish alpha;
2994+
};
2995+
2996+
[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
2997+
interface CSSLab : CSSColorValue {
2998+
constructor(CSSNumberish l, CSSNumberish a, CSSNumberish b, optional CSSNumberish alpha = 1);
2999+
attribute CSSNumberish l;
3000+
attribute CSSNumberish a;
3001+
attribute CSSNumberish b;
3002+
attribute CSSNumberish alpha;
3003+
};
3004+
3005+
[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
3006+
interface CSSColor : CSSColorValue {
3007+
constructor(sequence<DOMString or CSSNumberish> variant)
3008+
/* CSSColor(["foo", 0, 1, .5], ["bar", "yellow"], 1, fallbackColor) */
3009+
/* or just make the alpha and fallback successive optional args? */
3010+
};
3011+
3012+
</xmp>
3013+
3014+
Issue: TODO add stringifiers
3015+
3016+
<div algorithm="CSSRGB()">
3017+
The <dfn constructor for=CSSRGB>CSSRGB(|r|, |g|, |b|, optional |alpha|)</dfn> constructor
3018+
must, when invoked,
3019+
perform the following steps:
3020+
3021+
1. Let |r|, |g|, |b|, and |alpha|
3022+
be replaced by the result of [=rectifying a percentish value=].
3023+
3024+
2. If |r|, |g|, and |b| don't all [=CSSNumericValue/match=] "number" or "percent",
3025+
[=throw=] a {{TypeError}}.
3026+
If |alpha| doesn't [=CSSNumericValue/match=] "percent",
3027+
[=throw=] a {{TypeError}}.
3028+
3029+
3. Return a new {{CSSRGB}}
3030+
with its {{CSSRGB/r}}, {{CSSRGB/g}}, {{CSSRGB/b}}, and {{CSSRGB/alpha}} internal slots
3031+
set to |r|, |g|, |b|, and |alpha|.
3032+
</div>
3033+
3034+
<div algorithm="CSSRGB.r">
3035+
The <dfn attribute for=CSSRGB>r</dfn>,
3036+
<dfn attribute for=CSSRGB>g</dfn>,
3037+
<dfn attribute for=CSSRGB>b</dfn>,
3038+
and <dfn attribute for=CSSRGB>alpha</dfn> attributes of a {{CSSRGB}} value
3039+
must, on setting to a new value |val|,
3040+
[=rectify a percentish value=] from |val|
3041+
and set the corresponding internal slot to the result of that.
3042+
</div>
3043+
3044+
<div algorithm="CSSHSL()">
3045+
The <dfn constructor for=CSSHSL>CSSHSL(|h|, |s|, |l|, optional |alpha|)</dfn> constructor
3046+
must, when invoked,
3047+
perform the following steps:
3048+
3049+
1. Let |s|, |l|, and |alpha|
3050+
be replaced by the result of [=rectifying a percentish value=].
3051+
3052+
2. If |h| doesn't [=CSSNumericValue/match=] "angle",
3053+
[=throw=] a {{TypeError}}.
3054+
If |s|, |l|, and |alpha| don't all [=CSSNumericValue/match=] "percent",
3055+
[=throw=] a {{TypeError}}.
3056+
3057+
3. Return a new {{CSSHSL}}
3058+
with its {{CSSHSL/h}}, {{CSSHSL/s}}, {{CSSHSL/l}}, and {{CSSHSL/alpha}} internal slots
3059+
set to |h|, |s|, |l|, and |alpha|.
3060+
</div>
3061+
3062+
<div algorithm="CSSHSL.s">
3063+
The <dfn attribute for=CSSHSL>s</dfn>,
3064+
<dfn attribute for=CSSHSL>l</dfn>,
3065+
and <dfn attribute for=CSSHSL>alpha</dfn> attributes of a {{CSSHSL}} value
3066+
must, on setting to a new value |val|,
3067+
[=rectify a percentish value=] from |val|
3068+
and set the corresponding internal slot to the result of that.
3069+
</div>
3070+
3071+
<div algorithm="CSSHWB()">
3072+
The <dfn constructor for=CSSHWB>CSSHWB(|h|, |w|, |b|, optional |alpha|)</dfn> constructor
3073+
must, when invoked,
3074+
perform the following steps:
3075+
3076+
1. Let |w|, |b|, and |alpha|
3077+
be replaced by the result of [=rectifying a percentish value=].
3078+
3079+
2. If |h| doesn't [=CSSNumericValue/match=] "angle",
3080+
[=throw=] a {{TypeError}}.
3081+
If |w|, |b|, and |alpha| don't all [=CSSNumericValue/match=] "percent",
3082+
[=throw=] a {{TypeError}}.
3083+
3084+
3. Return a new {{CSSHWB}}
3085+
with its {{CSSHWB/h}}, {{CSSHWB/w}}, {{CSSHWB/b}}, and {{CSSHWB/alpha}} internal slots
3086+
set to |h|, |w|, |b|, and |alpha|.
3087+
</div>
3088+
3089+
<div algorithm="CSSHWB.w">
3090+
The <dfn attribute for=CSSHWB>w</dfn>,
3091+
<dfn attribute for=CSSHWB>b</dfn>,
3092+
and <dfn attribute for=CSSHWB>alpha</dfn> attributes of a {{CSSHWB}} value
3093+
must, on setting to a new value |val|,
3094+
[=rectify a percentish value=] from |val|
3095+
and set the corresponding internal slot to the result of that.
3096+
</div>
3097+
3098+
<div algorithm="CSSLCH()">
3099+
The <dfn constructor for=CSSLCH>CSSLCH(|l|, |c|, |h|, optional |alpha|)</dfn> constructor
3100+
must, when invoked,
3101+
perform the following steps:
3102+
3103+
1. Let |l|, |c|, and |alpha|
3104+
be replaced by the result of [=rectifying a percentish value=].
3105+
3106+
2. If |h| doesn't [=CSSNumericValue/match=] "angle",
3107+
[=throw=] a {{TypeError}}.
3108+
If |l|, |c|, and |alpha| don't all [=CSSNumericValue/match=] "percent",
3109+
[=throw=] a {{TypeError}}.
3110+
3111+
3. Return a new {{CSSLCH}}
3112+
with its {{CSSLCH/l}}, {{CSSLCH/c}}, {{CSSLCH/h}}, and {{CSSLCH/alpha}} internal slots
3113+
set to |l|, |c|, |h|, and |alpha|.
3114+
</div>
3115+
3116+
<div algorithm="CSSLCH.l">
3117+
The <dfn attribute for=CSSLCH>l</dfn>,
3118+
<dfn attribute for=CSSLCH>c</dfn>,
3119+
and <dfn attribute for=CSSLCH>alpha</dfn> attributes of a {{CSSLCH}} value
3120+
must, on setting to a new value |val|,
3121+
[=rectify a percentish value=] from |val|
3122+
and set the corresponding internal slot to the result of that.
3123+
</div>
3124+
3125+
<div algorithm="CSSLab()">
3126+
The <dfn constructor for=CSSLab>CSSLab(|l|, |a|, |b|, optional |alpha|)</dfn> constructor
3127+
must, when invoked,
3128+
perform the following steps:
3129+
3130+
1. Let |l|, |a|, |b|, and |alpha|
3131+
be replaced by the result of [=rectifying a percentish value=].
3132+
3133+
2. If |l|, |a|, |b|, and |alpha| don't all [=CSSNumericValue/match=] "percent",
3134+
[=throw=] a {{TypeError}}.
3135+
3136+
3. Return a new {{CSSLab}}
3137+
with its {{CSSLab/l}}, {{CSSLab/a}}, {{CSSLab/b}}, and {{CSSLab/alpha}} internal slots
3138+
set to |l|, |a|, |b|, and |alpha|.
3139+
</div>
3140+
3141+
<div algorithm="CSSLab.l">
3142+
The <dfn attribute for=CSSLab>l</dfn>,
3143+
<dfn attribute for=CSSLab>a</dfn>,
3144+
<dfn attribute for=CSSLab>b</dfn>,
3145+
and <dfn attribute for=CSSLab>alpha</dfn> attributes of a {{CSSLab}} value
3146+
must, on setting to a new value |val|,
3147+
[=rectify a percentish value=] from |val|
3148+
and set the corresponding internal slot to the result of that.
3149+
</div>
3150+
3151+
<div algorithm="CSSColor()">
3152+
The <dfn constructor for=CSSColor>CSSColor(|colorspace|, |channels|, optional |alpha|)</dfn> constructor
3153+
must, when invoked,
3154+
perform the following steps:
3155+
3156+
1. Let |colorspace| be replaced by the result of [=rectifying a keywordish value=].
3157+
Let |channels| be replaced by the result of [=rectifying a percentish value=] for each item in the list.
3158+
Let |alpha| be replaced by the result of [=rectifying a percentish value=].
3159+
3160+
2. If |alpha| and the items of |channels| don't all [=CSSNumericValue/match=] "percent",
3161+
[=throw=] a {{TypeError}}.
3162+
3163+
3. Return a new {{CSSColor}}
3164+
with its {{CSSColor/colorspace}}, {{CSSColor/channels}}, and {{CSSColor/alpha}} internal slots
3165+
set to |colorspace|, |channels|, and |alpha|.
3166+
</div>
3167+
3168+
<div algorithm="CSSColor.colorspace">
3169+
The <dfn attribute for=CSSColor>colorspace</dfn> attribute of a {{CSSColor}} value
3170+
must, on setting to a new value |val|,
3171+
[=rectify a keywordish value=] from |val|
3172+
and set the corresponding internal slot to the result of that.
3173+
3174+
Issue: Phrase the per-item channels setting.
3175+
3176+
The <dfn attribute for=CSSColor>alpha</dfn> attribute of a {{CSSColor}} value
3177+
must, on setting to a new value |val|,
3178+
[=rectify a percentish value=] from |val|
3179+
and set the corresponding internal slot to the result of that.
3180+
</div>
3181+
3182+
<div algorithm>
3183+
To <dfn export>rectify a percentish value</dfn> |num|,
3184+
perform the following steps:
3185+
3186+
1. If |num| is a {{CSSNumericValue}},
3187+
return |num|.
3188+
3189+
2. If |num| is a {{double}},
3190+
return a [=new unit value=] from (|num|*100, "percent").
3191+
</div>
3192+
3193+
3194+
3195+
3196+
28613197
<!--
28623198
██████ ██████ ██████ ██ ███████ ██ ██
28633199
██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ███
@@ -5013,7 +5349,7 @@ same rules referenced above.
50135349
Reification can not fail for {{CSSResourceValue}} objects.
50145350

50155351
<div class='example'>
5016-
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.
5352+
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''.
50175353
</div>
50185354

50195355

0 commit comments

Comments
 (0)