Skip to content

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

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.

Sign up for GitHub

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

Merged
merged 14 commits into from
Nov 3, 2021
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
64becb5
Formalize fetching and resource timing reporting
noamr Oct 5, 2021
6865584
Use more precise terms for same-origin
noamr Oct 5, 2021
e47f6fe
Update css-fonts-4/Overview.bs
noamr Oct 6, 2021
05e285e
Update css-cascade-4/Overview.bs
noamr Oct 6, 2021
99b8996
Update css-values-4/Overview.bs
noamr Oct 6, 2021
ab66419
Apply suggestions from code review
noamr Oct 6, 2021
34002f2
Nits
noamr Oct 6, 2021
ffc8bf7
Numbering
noamr Oct 11, 2021
69379fb
Tighten fetch integration, add shape support
noamr Oct 11, 2021
6dc96e0
Shapes, images, colors
noamr Oct 12, 2021
e053f32
Correct referrer
noamr Oct 12, 2021
cdbbf63
Switch colorprofile fetching to cors
noamr Oct 13, 2021
e610888
Remove referer thing for now
noamr Oct 28, 2021
45e648d
Revert "Remove referer thing for now"
noamr Oct 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Formalize fetching and resource timing reporting 
Add a generic method to fetch style resources, and make use of it in
fonts & imports.

[css-syntax-3]: Make sure we have a location when parsing a stylesheet.
[css-values-3]: Add a reusable method to fetch a style-originated
resource.
[css-cascade-4]: Formalize the import algorithm to use the new fetch
method.
[css=fonts-4]: Formalize font loading to use the new fetch method.
  • Loading branch information
@noamr
noamr committed Oct 11, 2021
commit 64becb59fe678760608a6f2a8d6bfb3a334500c9
82 changes: 21 additions & 61 deletions css-cascade-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,82 +265,42 @@ Processing Stylesheet Imports</h3>
<div algorithm>
To <dfn export>fetch an @import</dfn>, given an ''@import'' rule |rule|:

1. Let |parentStylesheet| be |rule|'s <a spec=cssom for=CSSRule>parent CSS style sheet</a>.
[[CSSOM]]

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=].

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=]:
return.

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

2. Let |success| initially be true.
1. [=Fetch a style resource=] |parsedUrl|, with |parentStylesheet|, "style", "no-cors",
and the following steps given [=/response=] |response|:

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

4. If |rule|'s [=CSSRule/parent style sheet=] is in [=quirks mode=]
1. 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>,
1. 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.
1. Let |importedStylesheet| be the result of [=Parse a stylesheet|parsing=] |response|'s
[=response/body=]'s [=body/stream=] 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=].
1. 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|:
1. If |response|'s [=response/url=]'s [=url/origin=] is not the [=same origin=] as
|rule|'s [=relevant settings object=]'s [=environment settings object/origin=],
unset |importedStylesheet|'s <a spec=cssom>origin-clean flag</a>.

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

<h3 id='content-type'>
Expand Down
15 changes: 12 additions & 3 deletions css-fonts-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2944,9 +2944,18 @@ 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>
To <dfn>fetch a font</dfn> given a selected [=/url=] |url| for ''@font-face'' |rule|,
[=fetch a style resource|fetch=] |url|, with |rule|'s
<a spec=cssom for=CSSRule>parent CSS style sheet</a>, "font", "cors" and the following steps
given [=/response=] |res|:

1. Let |body| be |res|'s [=response/body=].

1. If |body| is null, return.

1. ISSUE: Load a font from |body| 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
5 changes: 3 additions & 2 deletions css-syntax-3/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
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 [=/url=] or Null |location|
(default null):

<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|.

<li>
<a>Consume a list of rules</a> from |input|,
Expand Down
44 changes: 44 additions & 0 deletions css-values-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -989,6 +989,50 @@ 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> [=/url=] |url|, given a {{CSSStyleSheet}}
|sheet|, a string |destination|, a "no-cors" or "cors" |corsMode|, and an algorithm
|processResponse| accepting a [=/response=]:

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

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

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

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

1. Let |referrer| be |documentBase|.

1. Let |handleResourceFetchDone| be to do nothing.

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

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

1. If |corsMode| is not "cors", or |url| is the [=same origin=] as |environmentSettings|'s
[=environment settings object/origin=], set |referrer| to |sheet|'s
<a spec=cssom>location</a>. [[CSSOM]]

1. Let |req| be a new [=/request=] whose [=request/url=] is |parsedUrl|, whose
[=request/destination=] is |destination|, [=request/mode=] is |mode|, [=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/header list=] is a [=/header list=] containing a [=header=]
with its [=header/name=] set to "referrer" and its [=header/value=] set to |referrer|.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is somewhat wrong. You want to set the referrer field on the request. That will set the Referer (note, one r less) header. But good that it sets it explicitly though as CSS cannot take it from the global.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right, fixed.


1. If |sheet|'s <a spec=cssom>origin-clean flag</a> is set, set |handleResourceFetchDone|
given [=/response=] |res| to [=finalize and report timing=] with |res|, |global|, and
<code>"css"</code>. [[CSSOM]]

1. [=/Fetch=] |req|, with |processResponseDone| set to |handleResourceFetchDone|,
|taskDestination| set to |global|, and |processResponse| set to |processResponse|.
</div>

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

Expand Down