Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-syntax-3][css-values-3][css-cascade-4][css-fonts-4] Formalize fetching and resource timing reporting #6715

Merged
merged 14 commits into from Nov 3, 2021
87 changes: 25 additions & 62 deletions css-cascade-4/Overview.bs
Expand Up @@ -265,82 +265,45 @@ Processing Stylesheet Imports</h3>
<div algorithm>
To <dfn export>fetch an @import</dfn>, given an ''@import'' rule |rule|:

1. If |rule| has a <<supports-condition>>,
and that condition is not true,
return nothing.

1. [=Parse a URL=] given |rule|'s URL,
relative to |rule|'s [=CSSRule/parent CSS style sheet's=] [=CSSStyleSheet/location=].

Issue: Make sure this is defined correctly,
drawing from the document when it's a <{style}> element, etc.

If that fails, then return nothing. Otherwise, let |url| be the [=resulting URL record=].
1. Let |parentStylesheet| be |rule|'s <a spec=cssom for=CSSRule>parent CSS style sheet</a>.
[[CSSOM]]

2. Let |request| be a new [=/request=]
whose [=request/URL=] is |url|,
[=request/destination=] is <code>"style"</code>,
[=request/mode=] is <code>"no-cors"</code>,
[=request/credentials mode=] is <code>"include"</code>,
and whose [=request/use-URL-credentials flag=] is set.

3. Set |request|'s client to ????

Issue: The Fetch spec doesn't provide any information about what a client is
or what it does,
so I have no idea of what to provide here.

4. Run the following steps [=in parallel=]:
2. If |rule| has a <<supports-condition>>,
and that condition is not true,
return.

1. Let |response| be the result of [=/fetching=] |request|.
3. Let |parsedUrl| be the result of the [=URL parser=] steps with |rule|'s URL and
|parentStylesheet|'s <a spec=cssom>location</a>.
If the algorithm returns an error,
return. [[CSSOM]]

2. Let |success| initially be true.
4. [=Fetch a style resource=] from |parsedUrl|,
with stylesheet |parentStylesheet|,
destination "style",
CORS mode "no-cors",
and processResponse being the following steps given [=/response=] |response| and
byte stream, null or failure |byteStream|:

3. If |response| is a [=network error=]
or its [=response/status=] is not an [=ok status=],
set |success| to false.
1. If |maybeByteStream| is not a byte stream, return.

4. If |rule|'s [=CSSRule/parent style sheet=] is in [=quirks mode=]
2. If |parentStylesheet| is in [=quirks mode=]
and |response| is [=CORS-same-origin=],
let |content type| be <code>"text/css"</code>.
Otherwise, let |content type| be the Content Type metadata of |response|.

5. If |content type| is not <code>"text/css"</code>,
3. If |content type| is not <code>"text/css"</code>,
return.

6. Issue: Do we wait for sub-imports to run now?
Need to explore this.
4. Let |importedStylesheet| be the result of [=Parse a stylesheet|parsing=] |byteStram|
given |parsedUrl|.

7. Let |global| be the result of [=finding the relevant global object for a stylesheet=]
given |rule|'s [=CSSRule/parent CSS style sheet=].
5. Set |importedStylesheet|'s <a spec=cssom>origin-clean flag</a> to
|parentStylesheet|'s <a spec=cssom>origin-clean flag</a>.

8. [=Queue a global task=],
given the [=networking task source=]
and |global|,
to [=process an imported stylesheet=]
given |rule|,
|success|,
and |response|.
</div>

<div algorithm>
To <dfn export>find the relevant global object for a stylesheet</dfn> given a CSS style sheet |stylesheet|:

1. If |stylesheet| has a [=CSSStyleSheet/parent CSS style sheet=],
return the result of [=finding the relevant global object for a stylesheet=]
given the [=CSSStyleSheet/parent CSS style sheet=].

2. If |stylesheet| has an [=CSSStyleSheet/owner node=],
return the [=CSSStyleSheet/owner node's=] [=relevant global object=].
</div>

<div algorithm>
To <dfn export>process an imported stylesheet</dfn>
given a parent rule |rule|,
a success flag |success|,
and a response |response|:
6. If |response| is not [=CORS-same-origin=], unset |importedStylesheet|'s
<a spec=cssom>origin-clean flag</a>.

Issue: Create a stylesheet, assign it to the parent rule.
7. Set |rule|'s {{CSSImportRule/styleSheet}} to |importedStylesheet|.
</div>

<h3 id='content-type'>
Expand Down
11 changes: 11 additions & 0 deletions css-color-4/Overview.bs
Expand Up @@ -3992,6 +3992,17 @@ Specifying a color profile: the ''@color-profile'' at-rule</h3>
which reference this profile
are <a>invalid color</a>s.

To <dfn>fetch an external color profile</dfn>, given a
''@color-profile'' rule |rule|,
[=fetch a style resource=] given |rule|'s URL,
with stylesheet being |rule|'s <a spec=cssom for=CSSRule>parent CSS style sheet</a>,
destination "color-profile",
CORS mode "cors",
and processResponse being the following steps given [=/response=] |res| and null, failure or
a byte stream |byteStream|:
If |byteStream| is a byte stream,
apply the color profile as parsed from |byteStream.

Note: The Internet Media Type ("MIME type")
for ICC profiles is
<a href="https://www.iana.org/assignments/media-types/application/vnd.iccprofile">application/vnd.iccprofile</a>.
Expand Down
16 changes: 13 additions & 3 deletions css-fonts-4/Overview.bs
Expand Up @@ -2944,9 +2944,19 @@ downloadable fonts to avoid large page reflows where possible.
<h4 id="font-fetching-requirements" oldids="same-origin-restriction,allowing-cross-origin-font-loading">
Font fetching requirements</h4>

For font loads from @font-face rules, user agents must create a <a>request</a>
whose <var>url</var> is the URL given by the @font-face rule, whose <var>referrer</var>
is the stylesheet's URL, and whose <var>origin</var> is the URL of the containing document.
<div algorithm>
svgeesus marked this conversation as resolved.
Show resolved Hide resolved
To <dfn>fetch a font</dfn> given a selected [=/url=] |url| for ''@font-face'' |rule|,
[=fetch a style resource|fetch=] |url|,
with stylesheet being |rule|'s <a spec=cssom for=CSSRule>parent CSS style sheet</a>,
destination "font",
CORS mode "cors",
and processResponse being the following steps given [=/response=] |res| and null, failure or a
byte stream |stream|:

1. If |stream| is null, return.

2. ISSUE: Load a font from |stream| according to its type.
</div>

Note: The implications of this for authors are that fonts
will typically not be loaded cross-origin unless authors specifically
Expand Down
14 changes: 13 additions & 1 deletion css-images-4/Overview.bs
@@ -1,4 +1,4 @@
<pre class='metadata'>
uel<pre class='metadata'>
Title: CSS Images Module Level 4
Status: ED
Work Status: Exploring
Expand Down Expand Up @@ -139,6 +139,18 @@ Image References: the ''url()'' notation {#url-notation}
Note: No change from [[css3-images]].


Fetching External Images
------------------------------------------------------------------------------------------
To <dfn>fetch an external image for a stylesheet</dfn>,
given a [=/url=] |url| and {{CSSStyleSheet}} sheet,
[=fetch a style resource=] given |url|,
with stylesheet {{CSSStyleSheet}},
destination "image",
CORS mode "no-cors",
and processResponse being the following steps given [=/response=] |res| and null, failure or
a byte stream |byteStream|:
If |byteStream| is a byte stream, load the image from the byte stream.


<!--
████ ██ ██ ███ ██████ ████████ ██████ ████████ ████████ ███ ███
Expand Down
16 changes: 16 additions & 0 deletions css-shapes-2/Overview.bs
Expand Up @@ -423,6 +423,22 @@ Shapes from Image</h3>
that determines the relevant pixels to use
(both for defining a shape and for display).

<h2 id="fetching-external-shapes">
Fetching external shapes</h2>

To <dfn>fetch an external resource for a shape</dfn>, either an SVG or an image, given a
{{CSSStyleRule}} |rule|,
[=fetch a style resource=] given |rule|'s URL,
with stylesheet being |rule|'s <a spec=cssom for=CSSRule>parent CSS style sheet</a>,
destination "image",
CORS mode "cors",
and processResponse being the following steps given [=/response=] |res| and null, failure or
a byte stream |byteStream|:
If |byteStream| is a byte stream,
apply the image or SVG to the appropriate shape-accepting property.

Note: shapes require CORS mode as their effect is detected by the document.


<h2 id="shapes-from-box-values">
Shapes from Box Values</h2>
Expand Down
5 changes: 3 additions & 2 deletions css-syntax-3/Overview.bs
Expand Up @@ -2121,7 +2121,8 @@ Parse A Comma-Separated List According To A CSS Grammar</h4>
Parse a stylesheet</h4>

<div algorithm>
To <dfn export>parse a stylesheet</dfn> from an |input|:
To <dfn export>parse a stylesheet</dfn> from an |input|
given an optional [=/url=] |location|:

<ol>
<li>
Expand All @@ -2134,7 +2135,7 @@ Parse a stylesheet</h4>
and set |input| to the result.

<li>
Create a new stylesheet.
Create a new stylesheet, with its <a spec=cssom>location</a> set to |location| (or null, if |location| was not passed).

<li>
<a>Consume a list of rules</a> from |input|,
Expand Down
48 changes: 48 additions & 0 deletions css-values-4/Overview.bs
Expand Up @@ -989,6 +989,54 @@ URL Modifiers</h4>
Note: A <<url>> that is either unquoted or not wrapped in ''url()'' notation
cannot accept any <<url-modifier>>s.

<h4 id='prcoessing-model'>
URL processing model</h4>

<div algorithm>
To <dfn export>fetch a style resource</dfn> from [=/url=] |url|,
given a {{CSSStyleSheet}} |sheet|,
a string |destination| matching a {{RequestDestination}},
a "no-cors" or "cors" |corsMode|,
and an algorithm |processResponse| accepting a [=/response=] and a null, failure or byte
stream:

1. Let |environmentSettings| be |sheet|'s [=relevant settings object=].

2. Let |global| be |environmentSettings|'s [=environment settings object/global object=].

3. Let |documentBase| be |environmentSettings|'s [=API base URL=].

4. Let |base| be |sheet|'s <a spec=cssom>stylesheet base URL</a>. [[CSSOM]]

5. Let |referrer| be |documentBase|.

6. Let |handleResourceFetchDone| be to do nothing.

7. If |base| is null, set |base| to |documentBase|.

8. Let |parsedUrl| be the result of the [=URL parser=] steps with |url| and |base|.
If the algorithm returns an error, return.

9. If |corsMode| is "cors", set |referrer| to |sheet|'s
<a spec=cssom>location</a>. [[CSSOM]]

10. Let |req| be a new [=/request=] whose [=request/url=] is |parsedUrl|, whose
[=request/destination=] is |destination|, [=request/mode=] is |corsMode|,
[=request/origin=] is |environmentSettings|'s [=environment settings object/origin=],
[=request/credentials mode=] is "same-origin", [=request/use-url-credentials flag=] is
set, and whose [=request/referrer=] is |referrer|.

11. [=/Fetch=] |req|, with |taskDestination| set to |global|, and |processResponseEndOfBody|
set to the following steps given [=/response=] |res| and Null, failure or byte stream
|byteStream|:
1. If |sheet|'s <a spec=cssom>origin-clean flag</a> is set,
[=finalize and report timing=] with |res|, |global|, and
<code>"css"</code>. [[CSSOM]]

2. Call |processResponse| with |res| and |byteStream|.

</div>

<h2 id="numeric-types">
Numeric Data Types</h2>

Expand Down