[css-values-4] [css-cascade-4] [css-color-5] [css-fonts-4] [css-images-4] [css-shapes-2] Clean up fetching (#12261)

* [css-vlaues-4] [css-cascade-4] [css-color-5] [css-fonts-4] [css-images-4] [css-shapes-2] Clean up fetching

This fixes a few cases around fetching external URLs for style resources:
- The base URL is the sheet's base URL if exists, otherwise the sheet's location, otherwise the document
  base URL.
- The algorithm can take either a rule or declaration block, and derive the correct stylesheet and base
  URL from that.
  Updated the calling sites to take that onto account.

- Removed redundant URL parsing in "@import".

Closes #12065
Closes #12068
Closes #12086
Closes #12147

* Extract the computed absolute URL to a separate algo

* A few fixes

* nit

Author: noamr

css-cascade-4/Overview.bs

@@ -279,13 +279,8 @@ Processing Stylesheet Imports</h3>
 			and that condition is not true,
 			return.
 
-		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]]
-
-		4. [=Fetch a style resource=] from |parsedUrl|,
-			with stylesheet |parentStylesheet|,
+		4. [=Fetch a style resource=] from |rule|'s URL,
+			with ruleOrDeclaration |rule|,
 			destination "style",
 			CORS mode "no-cors",
 			and processResponse being the following steps given [=/response=] |response| and

css-color-5/Overview.bs

@@ -1994,7 +1994,7 @@ or any other color or monochrome output device which has been characterized.
 		To <dfn export>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>,
+			with ruleOrDeclaration being |rule|,
 			destination "color-profile",
 			CORS mode "cors",
 			and processResponse being the following steps given [=/response=] |/res| and null, failure or

css-fonts-4/Overview.bs

@@ -3698,7 +3698,7 @@ Font fetching requirements</h4>
 <div algorithm>
 	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>,
+	with ruleOrDeclaration being |rule|,
 	destination "font",
 	CORS mode "cors",
 	and processResponse being the following steps given [=/response=] |res| and null, failure or a

css-images-4/Overview.bs

@@ -145,9 +145,9 @@ Fetching External Images {#fetching-images}
 -------------------------------------------
 
 	To <dfn export>fetch an external image for a stylesheet</dfn>,
-	given a <<url>> |url| and {{CSSStyleSheet}} sheet,
+	given a <<url>> |url| and a [=CSS style declaration=] |declaration|,
 	[=fetch a style resource=] given |url|,
-	with stylesheet {{CSSStyleSheet}},
+	with ruleOrDeclaration being |declaration|,
 	destination "image",
 	CORS mode "no-cors",
 	and processResponse being the following steps

css-shapes-2/Overview.bs

@@ -610,9 +610,9 @@ Shapes from Image</h3>
 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>,
+		[=CSS style declaration=] |declaration|,
+		[=fetch a style resource=] given a <<url>> value,
+		with ruleOrDeclaration being |declaration|,
 		destination "image",
 		CORS mode "cors",
 		and processResponse being the following steps given [=/response=] |res| and null, failure or

css-values-4/Overview.bs

@@ -1021,8 +1021,7 @@ Relative URLs</h4>
 	the <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#dynamic-changes-to-base-urls">base URL is mutable</a>.
 
 	When a <<url>> appears in the computed value of a property,
-	it is resolved to an absolute URL,
-	as described in the preceding paragraph.
+	it is [=resolve a style resource URL|resolved to an absolute URL=].
 	The computed value of a URL that the [=UA=] cannot resolve to an absolute URL is the specified value.
 
 	<div class="example">
@@ -1147,32 +1146,53 @@ URL Modifiers</h4>
 <h4 id='url-processing'>
 URL Processing Model</h4>
 
+	<div algorithm="style resource base URL">
+		To compute the <dfn>style resource base URL</dfn> for a [=CSS rule=] or a [=CSS declaration=] |cssRuleOrDeclaration|:
+			1. Let |sheet| be null.
+
+			1. If |cssRuleOrDeclaration| is a {{CSSStyleDeclaration}} whose {{CSSStyleDeclaration/parentRule}} is not null,
+				set |cssRuleOrDeclaration| to |cssRuleOrDeclaration|'s {{CSSStyleDeclaration/parentRule}}.
+
+			1. If |cssRuleOrDeclaration| is a {{CSSRule}}, set |sheet| to |cssRuleOrDeclaration|'s {{CSSRule/parentStyleSheet}}.
+
+			1. If |sheet| is not null:
+				1. If |sheet|'s <a spec=cssom>stylesheet base URL</a> is not null,
+					return |sheet|'s <a spec=cssom>stylesheet base URL</a>.
+
+				1. If |sheet|'s <a spec=cssom>location</a> is not null, return |sheet|'s <a spec=cssom>location</a>.
+
+			1. Return |cssRuleOrDeclaration|'s [=relevant settings object=]'s [=environment settings object/API base URL=].
+
+	</div>
+
+	<div algorithm="resolve a style resource URL">
+		To <dfn>resolve a style resource URL</dfn> from a [=/url=] or <<url>> |urlValue|,
+		and a a [=CSS rule=] or a [=CSS declaration=] |cssRuleOrDeclaration|:
+			1. Let |base| be the [=style resource base URL=] given |cssRuleOrDeclaration|.
+			1. Return the result of the [=URL parser=] steps with |urlValue|'s [=/url=] and |base|.
+	</div>
+
 	<div algorithm="fetch a style resource">
 		To <dfn export>fetch a style resource</dfn> from a [=/url=] or <<url>> |urlValue|,
-		given a {{CSSStyleSheet}} |sheet|,
+		given an [=CSS rule=] or a [=css declaration=] |cssRuleOrDeclaration|,
 		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 |base| be |sheet|'s <a spec=cssom>stylesheet base URL</a> if it is not null,
-			otherwise |environmentSettings|'s [=API base URL=].
-			[[CSSOM]]
+		1. Let |parsedUrl| be the result of [=resolve a style resource URL|resolving=] |urlValue| given |cssRuleOrDeclaration|.
+			If that failed, return.
 
-		3. Let |parsedUrl| be the result of the [=URL parser=] steps
-			with |urlValue|'s [=/url=] and |base|.
-			If the algorithm returns an error, return.
+		1. Let |settingsObject| be |cssRuleOrDeclaration|'s [=relevant settings object=].
 
 		4. 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/origin=] is |settingsObject|'s [=environment settings object/origin=],
 			[=request/credentials mode=] is "same-origin",
 			[=request/use-url-credentials flag=] is set,
-			[=request/client=] is |environmentSettings|,
-			and whose [=request/referrer=] is |environmentSettings|'s [=API base URL=].
+			[=request/client=] is |settingsObject|,
+			and whose [=request/referrer=] is "client".
 
 		5. If |corsMode| is "no-cors", set |req|'s [=request/credentials mode=] to "include".
 
@@ -1181,14 +1201,14 @@ URL Processing Model</h4>
 			Note: This specification does not define any URL request modification steps,
 			but other specs may do so.
 
-		7. If |req|'s [=request/mode=] is "cors",
-			set |req|'s [=request/referrer=] to |sheet|'s <a spec=cssom>location</a>. [[CSSOM]]
+		7. If |req|'s [=request/mode=] is "cors", and |sheet| is not null, then
+			set |req|'s [=request/referrer=] to the [=style resource base URL=] given |cssRuleOrDeclaration|. [[CSSOM]]
 
 		8. If |sheet|'s <a spec=cssom>origin-clean flag</a> is set,
 			set |req|'s [=request/initiator type=] to "css". [[CSSOM]]
 
 		9. [=/Fetch=] |req|,
-			with [=fetch/processresponseconsumebody=] set to |processResponse|.
+			with [=fetch/processresponseconsumebody|processResponseConsumeBody=] set to |processResponse|.
 	</div>
 
 	When interpreting [=URLs=] expressed in CSS,