Bug 1637440 - Fix non-repeated border-image fill area. r=gw

The fill area is a bit special because its repetition parameters depend on the top-left corner dimensions, but the stretch size in the shader must only be modified to account for this if the image is repeated.

Differential Revision: https://phabricator.services.mozilla.com/D75117

gfx/wr/webrender/res/brush_image.glsl

@@ -103,8 +103,12 @@ void image_brush_vs(
             // the repetitions. In most case it is the current segment, but for the
             // middle area we look at the border size instead.
             vec2 segment_uv_size = uv1 - uv0;
-
             #ifdef WR_FEATURE_REPETITION
+            // Value of the stretch size with repetition. We have to compute it for
+            // both axis even if we only repeat on one axis because the value for
+            // each axis depends on what the repeated value would have been for the
+            // other axis.
+            vec2 repeated_stretch_size = stretch_size;
             // The repetition parameters for the middle area of a nine-patch are based
             // on the size of the border segments rather than the middle segment itself,
             // taking top and left by default, falling back to bottom and right when a
@@ -113,14 +117,15 @@ void image_brush_vs(
             // branchiness in this shader.
             if ((brush_flags & BRUSH_FLAG_SEGMENT_NINEPATCH_MIDDLE) != 0) {
                 segment_uv_size = uv0 - res.uv_rect.p0;
-                stretch_size.x = segment_rect.p0.x - prim_rect.p0.x;
-                stretch_size.y = segment_rect.p0.y - prim_rect.p0.y;
+                repeated_stretch_size = segment_rect.p0 - prim_rect.p0;
                 float epsilon = 0.001;
+
                 if (segment_uv_size.x < epsilon || stretch_size.x < epsilon) {
                     segment_uv_size.x = res.uv_rect.p1.x - uv1.x;
                     stretch_size.x = prim_rect.p0.x + prim_rect.size.x
                         - segment_rect.p0.x - segment_rect.size.x;
                 }
+
                 if (segment_uv_size.y < epsilon || stretch_size.y < epsilon) {
                     segment_uv_size.y = res.uv_rect.p1.y - uv1.y;
                     stretch_size.y = prim_rect.p0.y + prim_rect.size.y
@@ -128,12 +133,11 @@ void image_brush_vs(
                 }
             }
 
-            vec2 original_stretch_size = stretch_size;
             if ((brush_flags & BRUSH_FLAG_SEGMENT_REPEAT_X) != 0) {
-              stretch_size.x = original_stretch_size.y / segment_uv_size.y * segment_uv_size.x;
+              stretch_size.x = repeated_stretch_size.y / segment_uv_size.y * segment_uv_size.x;
             }
             if ((brush_flags & BRUSH_FLAG_SEGMENT_REPEAT_Y) != 0) {
-              stretch_size.y = original_stretch_size.x / segment_uv_size.x * segment_uv_size.y;
+              stretch_size.y = repeated_stretch_size.x / segment_uv_size.x * segment_uv_size.y;
             }
             #endif
 

gfx/wr/wrench/reftests/border/border-image-fill.yaml

@@ -16,3 +16,39 @@ root:
           repeat-vertical: repeat
           repeat-horizontal: repeat
           fill: true
+        - type: border
+          bounds: [ 300, 100, 192, 192 ]
+          width: 32
+          border-type: image
+          image-source: "border-image-src.png"
+          image-width: 96
+          image-height: 96
+          slice: [ 32 ]
+          outset: 0
+          repeat-vertical: stretch
+          repeat-horizontal: repeat
+          fill: true
+        - type: border
+          bounds: [ 100, 300, 192, 192 ]
+          width: 32
+          border-type: image
+          image-source: "border-image-src.png"
+          image-width: 96
+          image-height: 96
+          slice: [ 32 ]
+          outset: 0
+          repeat-vertical: repeat
+          repeat-horizontal: stretch
+          fill: true
+        - type: border
+          bounds: [ 300, 300, 192, 192 ]
+          width: 32
+          border-type: image
+          image-source: "border-image-src.png"
+          image-width: 96
+          image-height: 96
+          slice: [ 32 ]
+          outset: 0
+          repeat-vertical: stretch
+          repeat-horizontal: stretch
+          fill: true