Bug 60157 - Gradients not horizontal using 270deg with odd div width
Summary: Gradients not horizontal using 270deg with odd div width
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: All OS X 10.6
: P2 Normal
Assignee: Mihnea Ovidenie
Depends on:
Reported: 2011-05-04 04:17 PDT by Martin Wittemann
Modified: 2011-05-23 05:23 PDT (History)
3 users (show)

See Also:

Test-Case (349 bytes, text/html)
2011-05-04 11:43 PDT, Martin Wittemann
no flags Details
Patch (76.11 KB, patch)
2011-05-13 09:13 PDT, Mihnea Ovidenie
simon.fraser: review-
Details | Formatted Diff | Diff
Patch2 (74.54 KB, patch)
2011-05-16 01:24 PDT, Mihnea Ovidenie
simon.fraser: review-
Details | Formatted Diff | Diff
Patch3 (105.33 KB, patch)
2011-05-16 23:55 PDT, Mihnea Ovidenie
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Martin Wittemann 2011-05-04 04:17:34 PDT
Assigning a gradient like this

background-image: -webkit-linear-gradient(270deg, #CCCCCC 50%, #999999 50%);

leads to a strange result in cases the width of the div using that style rule is odd. Giving the same div an even width, everything looks like it should. Just check out the attached HTML file to see the difference.

I have seen it in chrome on OSX and Linux so I guess its not OS dependent.
Comment 1 Simon Fraser (smfr) 2011-05-04 11:10:05 PDT
Did you forget to attach the file?
Comment 2 Martin Wittemann 2011-05-04 11:43:03 PDT
Created attachment 92291 [details]

Seems like I forgot it. Sorry, here it is.
Comment 3 Mihnea Ovidenie 2011-05-13 09:13:18 PDT
Created attachment 93460 [details]

The code in CSSGradientValue.cpp, function endPointsFromAngle, was missing the case when the angle is 270. The patch adds the computation for this case too. The layout test creates linear gradients with angles = {0, 90, 180, 270, -90, -180, -270}.
Comment 4 Simon Fraser (smfr) 2011-05-13 09:25:12 PDT
Comment on attachment 93460 [details]

View in context: https://bugs.webkit.org/attachment.cgi?id=93460&action=review

The code change looks good but I'd like to see the test tweaked.

> LayoutTests/fast/gradients/css3-linear-right-angle-gradients.html:6
> +<title>
> +    Test that computation of right angle (90, 180, 270) linear gradients is done properly.
> +</title>

This should be a dumpAsText(true) test. Also, it would be better if the divs were squares (inline-block to make them line up), and don't use red if red is expected in the test result.
Comment 5 Mihnea Ovidenie 2011-05-16 01:24:50 PDT
Created attachment 93621 [details]

Thanks for the review.

1. I have added the dumpAsText, i missed it completely in the first place.
2. I decided to keep the divs in the original, long shape instead of making them squares. This way, the problem with the gradient is highlighted better.
3. I changed the colors from green-red to write-black, thanks for the suggestion.

Comment 6 Simon Fraser (smfr) 2011-05-16 07:59:16 PDT
Comment on attachment 93621 [details]

View in context: https://bugs.webkit.org/attachment.cgi?id=93621&action=review

> LayoutTests/fast/gradients/css3-linear-right-angle-gradients.html:6
> +<!DOCTYPE html> 
> +<html> 
> +<head> 
> +<title>
> +    Test that computation of right angle (90, 180, 270) linear gradients is done properly.
> +</title>

Please make the output look similar to that of css3-repeating-radial-gradients.html, with no text, and larger boxes.
Comment 7 Mihnea Ovidenie 2011-05-16 23:55:41 PDT
Created attachment 93742 [details]

The third version of the patch. I have reworked the layout test.
Comment 8 WebKit Commit Bot 2011-05-19 02:19:19 PDT
Comment on attachment 93742 [details]

Clearing flags on attachment: 93742

Committed r86826: <http://trac.webkit.org/changeset/86826>
Comment 9 WebKit Commit Bot 2011-05-19 02:19:25 PDT
All reviewed patches have been landed.  Closing bug.
Comment 10 Martin Wittemann 2011-05-23 05:23:04 PDT
Thanks for fixing it. Just checked it with the current webkit and it works. (Don't know if I'm allowed to set the status to verified so I better keep it the way it is)