Bug 113278 - Gradient Fill does not render properly in svg, when definition is in independent svg
Summary: Gradient Fill does not render properly in svg, when definition is in independ...
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2013-03-26 00:06 PDT by Gaurav
Modified: 2022-05-31 10:19 PDT (History)
3 users (show)

See Also:

Attachments
Sample HTML (1.03 KB, text/html)
2013-03-26 00:07 PDT, Gaurav 		no flags Details
Safari 15.5 renders similar to other browsers (1.02 MB, image/png)
2022-05-29 15:56 PDT, Ahmad Saleem 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Gaurav 2013-03-26 00:06:45 PDT 
Gradient Fill does not render properly in svg, when definition is in independent svg.

1.) Create SVG gradient definition independently in a SVG.
<svg version="1.1">
  <defs>
    <radialGradient id="svg_backgroundDiv301_fill-outside" gradientUnits="userSpaceOnUse" cx="50%" cy="0%" r="70%"
                          fx="50%" fy="0%">
            <stop offset="0.00%" style="stop-color: #ffffff; stop-opacity: 1;"></stop>
            <stop offset="40.00%" style="stop-color: #fdfdfd; stop-opacity: 1;"></stop>
            <stop offset="100.00%" style="stop-color: #7b7b7b; stop-opacity: 1;"></stop>
          </radialGradient>
  </defs>
</svg>

2.) create a div, create sub svg element and apply the fill using the created defination.

<div id="s-backgroundDiv30" style="position: absolute; left: 0px; top: 0px; z-index: 0; height: 540px; width:960px">
  <svg id="s-backgroundDiv301_svg" version="1.1" x="0" y="0" style="left: 0px; top: 0px; position: absolute;">
    <defs>
    </defs>
    <rect id="s-backgroundDiv301_rect_svg" width="100%" height="100%" fill="url(#svg_backgroundDiv301_fill-outside)"></rect>
  </svg>
</div>


Actual Results: Radial gradient with center at top, right is rendering.

Expected Results: Radial gradient with center at top, center should render.
Comment 1 Gaurav 2013-03-26 00:07:18 PDT 
Created attachment 195018 [details]
Sample HTML
Comment 2 Ahmad Saleem 2022-05-29 15:56:34 PDT 
Created attachment 459845 [details]
Safari 15.5 renders similar to other browsers

I am unable to reproduce following bug using Safari 15.5 and Safari TP 146. Based on screenshot, the rendering is inline with other browsers (Chrome Canary 104 and Firefox Nightly 102). I would go for WON'TFIX for this bug or RESOLVED. Thanks!
Comment 3 Alexey Proskuryakov 2022-05-31 10:19:11 PDT 
Thank you for checking!