Auto merge of #16666 - pyfisch:gradients, r=emilio

Improvements to gradients.

This is a collection of commits improving the rendering of linear and radial gradients by making them conform more closely to the spec.

All commits are are independent and should work without the others.

These commits address the following issues:
* a956e3fd529715cc0ac39b23910f19e092c7c5a9 resolves #3908 but contains also some other necessary changes to `convert_gradient_stops`. The updated function has a few more copys but should be more correct. Maybe @pcwalton wants to comment since he has originally written the code.
* b230be8aaf318fb754cf58e5cd243087df2f7e0f partially solves #16638. (Partially because `border-image-outset` is not implemented. This is an older issue for border gradients: #15894.

To quickly catch regressions and see changes to gradients I have created [a set of twelve manual testcases](https://pyfisch.org/stuff/testcases-gradients.html) and placed them in a single file. Attached are two files. One shows how the gradients were rendered before the PR the other one with the changes applied.

![testcases-old](https://cloud.githubusercontent.com/assets/2781017/25580052/b433278e-2e7d-11e7-9396-500fef12eee0.png)
![testcases-new](https://cloud.githubusercontent.com/assets/2781017/25580051/b43222c6-2e7d-11e7-99ab-c0a2709baf41.png)

r? @emilio
and maybe also @jdm?

---
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/16666)
<!-- Reviewable:end -->

1 files changed, 21 insertions, 1 deletions

diff --git a/components/layout/webrender_helpers.rs b/components/layout/webrender_helpers.rs
index eca0837d6a8..cd450bd273e 100644
--- a/components/layout/webrender_helpers.rs
+++ b/components/layout/webrender_helpers.rs
@@ -353,15 +353,35 @@ impl WebRenderDisplayItemConverter for DisplayItem {
                         }
                     }
                     BorderDetails::Gradient(ref gradient) => {
+                        let extend_mode = if gradient.gradient.repeating {
+                            ExtendMode::Repeat
+                        } else {
+                            ExtendMode::Clamp
+                        };
                         webrender_traits::BorderDetails::Gradient(webrender_traits::GradientBorder {
                             gradient: builder.create_gradient(
                                           gradient.gradient.start_point.to_pointf(),
                                           gradient.gradient.end_point.to_pointf(),
                                           gradient.gradient.stops.clone(),
-                                          ExtendMode::Clamp),
+                                          extend_mode),
                             outset: gradient.outset,
                         })
                     }
+                    BorderDetails::RadialGradient(ref gradient) => {
+                        let extend_mode = if gradient.gradient.repeating {
+                            ExtendMode::Repeat
+                        } else {
+                            ExtendMode::Clamp
+                        };
+                       webrender_traits::BorderDetails::RadialGradient(webrender_traits::RadialGradientBorder {
+                           gradient: builder.create_radial_gradient(
+                               gradient.gradient.center.to_pointf(),
+                               gradient.gradient.radius.to_sizef(),
+                               gradient.gradient.stops.clone(),
+                               extend_mode),
+                           outset: gradient.outset,
+                       })
+                    }
                 };
 
                 builder.push_border(rect, clip, widths, details);