CSS fetch integration

1. Introduction

1.1. Request URL fetch integration

This specification changes the behaviour type <url> so that it uses the fetch API terminology.

Note: Older specifications may reference the <uri> type, these should be considered to be using the <url> type.

Note: This extends from the following places: https://drafts.csswg.org/css-values/#urls, https://drafts.csswg.org/css-values-3/#urls and https://drafts.csswg.org/css-shapes/#propdef-shape-outside wich define a relationship with Fetch

2. Requesting context

3. 'Embedding context'

The embedding context is the stylesheet or the containing document if the styles are loaded within a document.

4. Default url request setup

1. Perform steps in any specified URL modifiers.
2. Create a potential-CORS request given:
   • The url is the resulting absolute value of <url>
   • destination is the value of destination-type
   • corsAttributeState is the value of request-cors-setting
3. Let host be the domain of the containing document.
4. Optionally the UA can choose to let origin be the origin of the containing document.
5. Let referrer be the URL of the 'embedding context'.
6. Let 'referrer policy' be the policy of the 'embedding context'.
7. If present set integrity metadata of the request to request-integrity-metadata.

4.1. Color profile context

4.1.1. When the Color profile context applies

Note: this adds a new row to the table in: https://fetch.spec.whatwg.org/#concept-request-initiator

4.1.2. Request setup

• Let destination-type be colorprofile
• Get the result of default url request setup

4.2. Font context

4.2.1. When the Font context applies

4.2.2. Request setup

• Let destination-type be font
• Get the result of default url request setup

4.3. Image context

4.3.1. When the Image context applies

• background-image property
• backdrop-filter property
• border-image property
• clip-path property
• content property
• cursor property
• filter property
• list-style property
• mask-image property
• shape-outside property
• The 'image()' function
• The 'image-set()' function

urls with a fragment suffer from the following issue: https://github.com/w3c/csswg-drafts/issues/383

4.3.2. Request setup

• Let destination-type be image
• Get the result of default url request setup

4.3.3. Response

• If the response is of an error type the property should consider the value of <url> to be an invalid image
• If the image isn’t able to be displayed by the UA then it should be considered a invalid image
• If the <url> specifies an image fragment the response body will be clipped per the algorithm specified in image fragments.

4.4. Import context

4.4.1. When the Import context applies

4.4.2. Request setup

• Let destination-type be style
• Get the result of default url request setup

5. URL Modifiers

URL modifiers are taken into acount after the 'requesting context' steps have taken place.

5.1. integrity() function

integrity( <integrity-metadata> )

If present set request-integrity-metadata to <integrity-metadata>.

Fix bikeshed to: https://www.w3.org/TR/SRI/#dfn-integrity-metadata

5.2. crossorigin() function

<crossorigin> = crossorigin( <cors-setting> )

Where:

<cors-setting> = [ anonymous | use-credentials ]

If present set 'HTML/infrastructure#request-cors-setting' to the State column matching <cors-setting> in the CORS settings attribute table.

Fix bikeshed to: https://html.spec.whatwg.org/multipage/infrastructure.html#cors-settings-attribute

border-image: url('example.png'
    integrity(sha384-dOTZf16X8p34q2/kYyEFm0jh89uTjikhnzjeLeF0FHsEaYKb1A1cv+Lyv4Hk8vHd
      sha512-Q2bFTOhEALkN8hOms2FKTDLy7eugP2zFZ1T8LCvX42Fp3WoNr3bjZSAHeOsHrbV1Fu9/A0EzCinRE7Af1ofPrw==)
    crossorigin(anonymous)
  ) 30 round;

.selector {
  --image-sha384: sha384-dOTZf16X8p34q2/kYyEFm0jh89uTjikhnzjeLeF0FHsEaYKb1A1cv+Lyv4Hk8vHd;
  --image-sha512: sha512-Q2bFTOhEALkN8hOms2FKTDLy7eugP2zFZ1T8LCvX42Fp3WoNr3bjZSAHeOsHrbV1Fu9/A0EzCinRE7Af1ofPrw==;
  border-image: url('example.png' integrity(var(--image-sha384) var(--image-sha512)) crossorigin(anonymous)) 30 round;
}