[Webkit-unassigned] [Bug 190807] New: CSS variables with url() don't use correct base URL

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=190807

            Bug ID: 190807
           Summary: CSS variables with url() don't use correct base URL
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Macintosh
                OS: macOS 10.14
            Status: NEW
          Severity: Major
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: craig.hockenberry at gmail.com

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20181022/0e1f6eee/attachment.html>