[Webkit-unassigned] [Bug 129682] New: url()'s for background-image, mask-image, border-image, mask-box-image should support SVG resources

[bugzilla-daemon at webkit.org]

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

           Summary: url()'s for background-image, mask-image,
                    border-image, mask-box-image should support SVG
                    resources
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Unspecified
        OS/Version: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: krit at webkit.org
                CC: hyatt at apple.com, koivisto at iki.fi,
                    simon.fraser at apple.com, dino at apple.com,
                    akling at apple.com, graouts at apple.com
            Blocks: 95389


Starting with mask-image, CSS properties that take and CSS Image value might support SVG resources as well.

mask-image needs to be able to reference <mask> elements and CSS Images. Referencing happens by fragment identifier.

mask-image: url(image.png) - should be a CSSImage
mask-image: url(image.svg) - should be a CSSImage
mask-image: url(#resource) - should be an SVGResource

Sadly we can not identify the type during parsing:

mask-image: url(image.png#frag) - should PROBABLY be an CSSImage (depends if the resource is really an PNG)
mask-image: url(image.svg#frag) -
    * might be a reference to a <mask> element within image.svg
    * might also be a so called SVG Stack where just the active element gets rendered.
    * might reference another SVGResource like a <clipPath> in which case the fragment should be ignored.
    * might reference an SVG paint server like <linearGradient> in which case we want to use it to fill the mask area. (This is the interesting case for background-image, border-image and mask-box image but even more interesting for fill and stroke.)

It might also be a media query: #xywh() or #t() which are reserved and can be identified at parse time. These should be transformed to an CSSImage. SVG has some more reserved fragment identifiers. I don't think we support them from SVG.


mask-image can have the CSSValues: CSSImageValue, CSSImageGeneratedValue and CSSImageSetValue (See diagram https://docs.google.com/a/chromium.org/drawings/d/1FqPsPNvj-mX2HXQHU6lp3Kv8Y2UcEvfhv5D_kOjeDXw/edit)

It might be an idea to have a new CSSValue for all URLs with fragment identifiers. Thankfully this should be very rare on the web for normal images. We probably won't break content if the CSSValue should not be reliable at the beginning, but of course we still need to be caution.

This new CSSValues would be able to fallback to CSSImage values but can handle the different SVGResource types. I did not think about the details yet. I am very open for feedback and discussions.

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.