627885 - -moz-radial-gradient doesn't support explicitly defined size

Status: RESOLVED DUPLICATE of bug 712474

(Core :: CSS Parsing and Computation, defect)

Description

[Christian Sonne [:cers]]

User-Agent:       Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0b10pre) Gecko/20110120 Firefox/4.0b10pre
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0b10pre) Gecko/20110120 Firefox/4.0b10pre

As per the current W3C draft, and the new WebKit implementation of the radial-gradient syntax, the shape and size of the gradient can be defined both using size constants (supported by both Firefox and WebKit) and explicitly "by providing two lengths or percentages. These measure the length of the horizontal and vertical axes of the ellipse, respectively." (W3C)

Reproducible: Always

Steps to Reproduce:
1. Load demo
Actual Results:  
Blank rectangle show, and in the error console:
Warning: Error in parsing value for 'background-image'.  Declaration dropped.

Expected Results:  
Radial gradient displayed.

Comment 1

[Christian Sonne [:cers]]

Forgot to mention, the specific example uses:
-moz-radial-gradient(center, 5em 40px, white, black);

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Yep, Tab added this to the draft a few weeks ago; hopefully we'll be able to do this relatively soon after Firefox 4, though I can't promise anything.

Comment 3

[j.j.]

Attachment: testcase

Comment 4

[j.j.]

Attachment: testcase

Comment 5

[Masatoshi Kimura [:emk]]

Attachment: Implement explicit size in -moz-radial-gradent

Comment 6

[Masatoshi Kimura [:emk]]

Attachment: Tests

When I pushed the patch to tryserver, debug builds failed on Mochitest4 becase the log was too large.
https://tbpl.mozilla.org/?tree=Try&rev=a76aaf7fbe4b
> Output exceeded 52428800 bytes, remaining output has been truncated
> program finished with exit code 0
How can I sort out this?

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Did this patch cause an assertion to fire frequently, filling up the log, or cause an infinite loop of output?

Comment 8

[Masatoshi Kimura [:emk]]

(In reply to David Baron [:dbaron] from comment #7)
> Did this patch cause an assertion to fire frequently, filling up the log, or
> cause an infinite loop of output?
The log file size was nearly 50MB even without the patch.
This patch just adds a few test cases to property_database.js. So I think it just happened to over the limit.

Comment 9

[Masatoshi Kimura [:emk]]

Attachment: grep 'INFO TEST-START |' <unpatched test result>

Comment 10

[Masatoshi Kimura [:emk]]

Attachment: grep 'INFO TEST-START |' <patched test result>

test_transitions_per_property is particularly large which includes property_database.js. (Test cases grow 42784 to 49714)

Comment 11

[Masatoshi Kimura [:emk]]

test_value_cloning also wastes the log size because it outputs large "data:" URIs to the log. It took approximately 20 Mbytes!

Comment 12

[Masatoshi Kimura [:emk]]

Attachment: Reduce test_value_cloning test output

Debug mochitests 4 no longer fail with this patch.

Comment 13

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Comment on attachment 570531 [details] [diff] [review]
Reduce test_value_cloning test output

r=dbaron.  Sorry for the delay getting to this.

Comment 14

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I'm a bit hesitant about implementing the current draft of explicit size -- the addition of this feature to the draft made the syntax unreadable, and as a result the draft has been revised substantially.

Comment 15

[Masatoshi Kimura [:emk]]

Comment on attachment 570480 [details] [diff] [review]
Implement explicit size in -moz-radial-gradent

Oh, I didn't notice radial-gradient syntax has been changed once again.
http://dev.w3.org/csswg/css3-images/#radial-gradients
Clearing the review request.

Comment 16

[Masatoshi Kimura [:emk]]

Attachment: Implement explicit size and new syntax in -moz-radial-gradent

Comment 17

[Masatoshi Kimura [:emk]]

Attachment: Tests

Comment 18

[Masatoshi Kimura [:emk]]

Comment on attachment 576050 [details] [diff] [review]
Implement explicit size and new syntax in -moz-radial-gradent

The explicit size is only defined in new syntax. OTOH, angle is only supported in legacy syntax. It made the patch a bit complicate.
I wish CSS WG would not play with the gradient syntax any longer...

Comment 19

[Masatoshi Kimura [:emk]]

Attachment: Implement explicit size and new syntax in -moz-radial-gradent

Preserving the syntax type. It will improve the compatibility with existing contents which will not expect that .style/getComputedStyle() will serialize properties with new syntax.

Comment 20

[Masatoshi Kimura [:emk]]

Attachment: Implement explicit size and new syntax in -moz-radial-gradent

Sorry, the previous patch didn't compile.

Comment 21

[Masatoshi Kimura [:emk]]

https://tbpl.mozilla.org/?tree=Try&rev=73827e2e8148

Comment 22

[Masatoshi Kimura [:emk]]

Attachment: Tests

Unbitrotted

Comment 23

[Phil Ringnalda (:philor)]

Comment on attachment 570531 [details] [diff] [review]
Reduce test_value_cloning test output

https://hg.mozilla.org/integration/mozilla-inbound/rev/44ed0b73a421

Comment 24

[Marco Bonardo [:mak]]

https://hg.mozilla.org/mozilla-central/rev/44ed0b73a421

Comment 25

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

So the spec has changed a good bit since you requested review.  I think it might be stable now, though it might also be worth either (a) waiting a little or (b) asking Tab if he thinks it's now ready for implementation.

Comment 26

[Masatoshi Kimura [:emk]]

(In reply to David Baron [:dbaron] from comment #25)
> So the spec has changed a good bit since you requested review.  I think it
> might be stable now, though it might also be worth either (a) waiting a
> little or (b) asking Tab if he thinks it's now ready for implementation.
I will not post a new patch until the spec actually becomes CR, at least.
The current grammar can no longer co-exist with the legacy one.

Comment 27

[Lazar Sumar [:nonsensickle]]

I opened a new bug for the new syntax at https://bugzilla.mozilla.org/show_bug.cgi?id=712474 (before finding this one)

dbaron, could you decide if it can be considered a duplicate of this bug?

Comment 28

[Jean-Yves Perrier [:teoli]]

I think this has been fixed by bug 712414. Reopen if you disagree.

Comment 29

[Antti29]

This bug is still not fixed, as demostrated at http://geeksbynature.dk/bugs/moz-radial-gradient/

Comment 30

[Masatoshi Kimura [:emk]]

-moz-radial-fradient has never supported (and would never support) explicit size. You need to use unprefixed radial-gradient to use explicit size.

Comment 31

[Antti29]

Here is the same example without the prefix: http://jsfiddle.net/CXTVh/

(for some reason I got a warning for the "center" so I replaced that)

Comment 32

[Masatoshi Kimura [:emk]]

Attachment: Using correct unprefixed radial-gradient syntax

Just replacing and copy & pasting will not produce the correct unprefixed syntax.
You must have actually missed http://dev.w3.org/csswg/css3-images/#radial-gradient-syntax even if the source mentions the URL.