Bug 190807 – CSS variables with url() don't use correct base URL

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: CSS

[Craig Hockenberry]

CSS variables for a url(), when placed in a subfolder of a website, do not work correctly.

To reproduce this problem, create a "test.css" file in /mysite/tests/stylesheets:

:root {
	
	--configuration-icon: url('../images/test.png');
}

section button {
	background-image: var(--configuration-icon);
}


Create an image called "test.png" in /mysite/tests/images/

In the latest Safari Technology Preview, the Network tab in the Web Inspector will show "test.png" highlighted in red. The 404 response is caused because the browser is trying to load "/images/gear_light.png" instead of "/tests/images/gear_light.png". The CSS 3 documentation states:

"For CSS style sheets, the base URL is that of the style sheet itself, not that of the styled source document."

I'm assuming that this applies even though they're specified through CSS variables.

Additionally, if you do any CSS animation on the page, you'll see *many* of these failed requests (one for each frame of the animation.)

A live example can be found here: https://furbo.org/stuff/DarkModeCSS/ - there should be an icon next to "Click to Switch Themes". If you click on the button, you'll see many failed "gear_light.png" requests during the transition.

Tested with STP: Release 67 (Safari 12.1, WebKit 14607.1.9.0.1).
Chrome Version 69.0.3497.100 (Official Build) (64-bit) handles the url() variables correctly.

[Radar WebKit Bug Importer]

<rdar://problem/45470981>

[Chris Burgin]

I am also having this problem. It seems to be present if a `var` is present anywhere in `background`. Causing it to look at the document not the relative url as specified below.

> https://www.w3.org/TR/CSS1/ 6.4 "Partial URLs are interpreted relative to the source of the style sheet, not relative to the document".


background: url(../images/chevron-down-faded-0845b94284a0a5a42493e703d7ab4a8b.svg) no-repeat center,linear-gradient(to bottom, var(--color-white) 53%, #e2e2e2 98%)


If I replace `var(--color-white)` with `#fff` the image is loaded correctly.

[Tyler Wilcock]

This is a duplicate of https://bugs.webkit.org/show_bug.cgi?id=198512 (technically the other way around, but other bugs are linking to 198512 so I think we should use that one).

[Sam Sneddon [:gsnedders]]

*** This bug has been marked as a duplicate of bug 198512 ***