Auto merge of #1771 - glennw:angle-grad-radius, r=kvark

Add clip mask sampling to the angle gradient shader.

Fixes #1770.

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

Author: bors-servo

webrender/res/ps_angle_gradient.glsl

@@ -43,6 +43,8 @@ void main(void) {
 
     // Whether to repeat the gradient instead of clamping.
     vGradientRepeat = float(int(gradient.extend_mode.x) != EXTEND_MODE_CLAMP);
+
+    write_clip(vi.screen_pos, prim.clip_area);
 }
 #endif
 
@@ -57,8 +59,21 @@ void main(void) {
 
     float offset = dot(pos - vStartPoint, vScaledDir);
 
-    oFragColor = sample_gradient(vGradientAddress,
+    vec4 color = sample_gradient(vGradientAddress,
                                  offset,
                                  vGradientRepeat);
+
+    // Un-premultiply the color from sampling the gradient.
+    if (color.a > 0.0) {
+        color.rgb /= color.a;
+
+        // Apply the clip mask
+        color.a = min(color.a, do_clip());
+
+        // Pre-multiply the result.
+        color.rgb *= color.a;
+    }
+
+    oFragColor = color;
 }
 #endif

wrench/reftests/gradient/reftest.list

@@ -58,3 +58,5 @@ fuzzy(1,17) == tiling-radial-4.yaml tiling-radial-4-ref.yaml
 == radial-zero-size-3.yaml radial-zero-size-ref.yaml
 
 == linear-aligned-border-radius.yaml linear-aligned-border-radius.png
+== repeat-border-radius.yaml repeat-border-radius.png
+

wrench/reftests/gradient/repeat-border-radius.png

@@ -0,0 +1,47 @@
+---
+root:
+  items:
+    - type: clip
+      bounds: [20, 20, 100, 100]
+      complex:
+        - rect: [20, 20, 100, 100]
+          radius: 32
+      items:
+      - type: gradient
+        bounds: 20 20 100 100
+        start: 50 0
+        end: 50 100
+        stops: [0.0, red, 1.0, yellow]
+        repeat: true
+
+    - type: rect
+      bounds: [130, 10, 120, 120]
+      color: blue
+
+    - type: clip
+      bounds: [140, 20, 100, 100]
+      complex:
+        - rect: [140, 20, 100, 100]
+          radius: 32
+      items:
+      - type: gradient
+        bounds: 140 20 100 100
+        start: 50 0
+        end: 50 100
+        stops: [0.2, red, 1.0, yellow]
+
+    - type: rect
+      bounds: [260, 10, 120, 120]
+      color: black
+
+    - type: clip
+      bounds: [270, 20, 100, 100]
+      complex:
+        - rect: [270, 20, 100, 100]
+          radius: 32
+      items:
+      - type: gradient
+        bounds: 270 20 100 100
+        start: 50 0
+        end: 51 100
+        stops: [0.0, red, 1.0, yellow]