Adding upstream version 86.0.1.upstream/86.0.1upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

40 files changed, 997 insertions, 0 deletions

diff --git a/gfx/wr/wrench/reftests/clip/blank.yaml b/gfx/wr/wrench/reftests/clip/blank.yaml
new file mode 100644
index 0000000000..c4eb3ab673
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/blank.yaml
@@ -0,0 +1,2 @@
+---
+root:
diff --git a/gfx/wr/wrench/reftests/clip/border-with-rounded-clip.png b/gfx/wr/wrench/reftests/clip/border-with-rounded-clip.png
new file mode 100644
index 0000000000..f340005714
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/border-with-rounded-clip.png
diff --git a/gfx/wr/wrench/reftests/clip/border-with-rounded-clip.yaml b/gfx/wr/wrench/reftests/clip/border-with-rounded-clip.yaml
new file mode 100644
index 0000000000..12785ef444
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/border-with-rounded-clip.yaml
@@ -0,0 +1,21 @@
+---
+root:
+  items:
+    -
+      bounds: [10, 10, 938, 200]
+      clip-rect: [10, 10, 938, 200]
+      type: clip
+      id: 2
+      complex:
+        -
+          rect: [10, 10, 938, 200]
+          radius: [97, 97]
+          "clip-mode": clip
+    -
+      bounds: [10, 10, 100, 200]
+      clip-and-scroll: 2
+      type: border
+      width: [100, 50, 100, 50]
+      border-type: normal
+      color: green
+      style: solid
diff --git a/gfx/wr/wrench/reftests/clip/clip-3d-transform-ref.yaml b/gfx/wr/wrench/reftests/clip/clip-3d-transform-ref.yaml
new file mode 100644
index 0000000000..58d66bec5a
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clip-3d-transform-ref.yaml
@@ -0,0 +1,8 @@
+---
+root:
+  items:
+  -
+    bounds: [0, 0, 200, 200]
+    "clip-rect": [0, 0, 200, 200]
+    type: rect
+    color: green
diff --git a/gfx/wr/wrench/reftests/clip/clip-3d-transform.yaml b/gfx/wr/wrench/reftests/clip/clip-3d-transform.yaml
new file mode 100644
index 0000000000..f844b382ad
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clip-3d-transform.yaml
@@ -0,0 +1,30 @@
+# This tests that clipping works well inside of a transformation with a 3d component that
+# is still axis-aligned and lacking a perspective component. These two spaces should exist
+# within a compatible coordinate system for local clipping (no masking).
+---
+root:
+  items:
+    -
+      bounds: [0, 0, 0, 0]
+      "clip-rect": [0, 0, 0, 0]
+      "backface-visible": true
+      type: "stacking-context"
+      "scroll-policy": scrollable
+      transform: [0.5, 0, -0.8660254, 0, 0, 1, 0, 0, 0.8660254, 0, 0.5, 0, 0, 0, 0, 1]
+      "transform-style": flat
+      filters: []
+      items:
+        -
+          bounds: [0, 0, 800, 400]
+          "clip-rect": [0, 0, 800, 400]
+          "backface-visible": true
+          type: clip
+          id: 2
+          "content-size": [800, 400]
+        -
+          bounds: [0, 0, 400, 200]
+          "clip-rect": [0, 0, 400, 200]
+          "backface-visible": true
+          type: rect
+          clip-and-scroll: 2
+          color: green
diff --git a/gfx/wr/wrench/reftests/clip/clip-45-degree-rotation-ref.png b/gfx/wr/wrench/reftests/clip/clip-45-degree-rotation-ref.png
new file mode 100644
index 0000000000..0d3bad68cf
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clip-45-degree-rotation-ref.png
diff --git a/gfx/wr/wrench/reftests/clip/clip-45-degree-rotation.yaml b/gfx/wr/wrench/reftests/clip/clip-45-degree-rotation.yaml
new file mode 100644
index 0000000000..316f249a3e
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clip-45-degree-rotation.yaml
@@ -0,0 +1,32 @@
+# Test that transformed content is clipped properly by clips with a different transform.
+---
+root:
+  items:
+    -
+      bounds: [0, 0, 0, 0]
+      "clip-rect": [0, 0, 0, 0]
+      type: "stacking-context"
+      transform: rotate(-45) translate(200, 0)
+      items:
+        -
+          bounds: [0, 0, 300, 300]
+          "clip-rect": [0, 0, 300, 300]
+          type: rect
+          color: red
+        -
+          bounds: [0, 0, 300, 300]
+          "clip-rect": [0, 0, 300, 300]
+          type: clip
+          id: 5
+        -
+          bounds: [0, 0, 0, 0]
+          "clip-rect": [0, 0, 0, 0]
+          clip-and-scroll: 5
+          type: "stacking-context"
+          transform: rotate(45) translate(-300, 0)
+          items:
+            -
+              bounds: [0, 0, 1598, 1200]
+              "clip-rect": [0, 0, 1598, 1200]
+              type: rect
+              color: green
diff --git a/gfx/wr/wrench/reftests/clip/clip-and-filter-with-rotation-ref.yaml b/gfx/wr/wrench/reftests/clip/clip-and-filter-with-rotation-ref.yaml
new file mode 100644
index 0000000000..c092030714
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clip-and-filter-with-rotation-ref.yaml
@@ -0,0 +1,18 @@
+# Test that filtered content is clipped properly in a rotated context
+---
+root:
+  items:
+    -
+      bounds: [16, 16, 0, 0]
+      type: "reference-frame"
+      transform: rotate(10)
+      id: 7
+      items:
+        -
+          bounds: [0, 0, 0, 0]
+          type: "stacking-context"
+          items:
+            -
+              bounds: [0, 0, 324, 295]
+              type: rect
+              color: red
diff --git a/gfx/wr/wrench/reftests/clip/clip-and-filter-with-rotation.yaml b/gfx/wr/wrench/reftests/clip/clip-and-filter-with-rotation.yaml
new file mode 100644
index 0000000000..3c71e0148f
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clip-and-filter-with-rotation.yaml
@@ -0,0 +1,35 @@
+# Test that filtered content is clipped properly in a rotated context
+---
+root:
+  items:
+    -
+      bounds: [16, 16, 0, 0]
+      type: "reference-frame"
+      transform: rotate(10)
+      id: 7
+      items:
+        -
+          bounds: [0, 0, 0, 0]
+          type: "stacking-context"
+          items:
+          -
+            bounds: [0, 0, 324, 295]
+            type: clip
+            id: 2
+          # note it's important that we use clip-node here; clip-and-scroll in yaml
+          # defaults to push/pop, but we want to specifically attach this clip-chain
+          # to the stacking context and not the children (as gecko does in the bug)
+          -
+            bounds: [0, 0, 0, 0]
+            clip-node: 2
+            type: "stacking-context"
+            filters: ["contrast(1.1)"] # any blend-style filter will do
+            items:
+              -
+                bounds: [-150, -150, 624, 624]
+                type: rect
+                color: blue
+              -
+                bounds: [0, 0, 324, 295]
+                type: rect
+                color: red
diff --git a/gfx/wr/wrench/reftests/clip/clip-corner-overlap-ref.yaml b/gfx/wr/wrench/reftests/clip/clip-corner-overlap-ref.yaml
new file mode 100644
index 0000000000..e9592b5831
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clip-corner-overlap-ref.yaml
@@ -0,0 +1,113 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 1000, 1000]
+      items:
+        - type: clip
+          bounds: [ 50, 50, 200, 100 ]
+          complex:
+            - rect: [ 50, 50, 200, 100 ]
+              radius:
+                top-left: [200, 100]
+                top-right: [0, 0]
+                bottom-left: [0, 0]
+                bottom-right: [0, 0]
+          items:
+            - type: rect
+              bounds: [ 50, 50, 200, 100 ]
+              color: blue
+        - type: clip
+          bounds: [ 50, 150, 200, 100 ]
+          complex:
+            - rect: [ 50, 150, 200, 100 ]
+              radius:
+                top-left: [0, 0]
+                top-right: [0, 0]
+                bottom-left: [200, 100]
+                bottom-right: [0, 0]
+          items:
+            - type: rect
+              bounds: [ 50, 150, 200, 100 ]
+              color: blue
+
+        - type: clip
+          bounds: [ 300, 50, 100, 200 ]
+          complex:
+            - rect: [ 300, 50, 100, 200 ]
+              radius:
+                top-left: [100, 200]
+                top-right: [0, 0]
+                bottom-left: [0, 0]
+                bottom-right: [0, 0]
+          items:
+            - type: rect
+              bounds: [ 300, 50, 100, 200 ]
+              color: green
+        - type: clip
+          bounds: [ 400, 50, 100, 200 ]
+          complex:
+            - rect: [ 400, 50, 100, 200 ]
+              radius:
+                top-left: [0, 0]
+                top-right: [100, 200]
+                bottom-left: [0, 0]
+                bottom-right: [0, 0]
+          items:
+            - type: rect
+              bounds: [ 400, 50, 100, 200 ]
+              color: green
+
+        - type: clip
+          bounds: [ 50, 300, 200, 100 ]
+          complex:
+            - rect: [ 50, 300, 200, 100 ]
+              radius:
+                top-left: [0, 0]
+                top-right: [200, 100]
+                bottom-left: [0, 0]
+                bottom-right: [0, 0]
+          items:
+            - type: rect
+              bounds: [ 50, 300, 200, 100 ]
+              color: red
+        - type: clip
+          bounds: [ 50, 400, 200, 100 ]
+          complex:
+            - rect: [ 50, 400, 200, 100 ]
+              radius:
+                top-left: [0, 0]
+                top-right: [0, 0]
+                bottom-left: [0, 0]
+                bottom-right: [200, 100]
+          items:
+            - type: rect
+              bounds: [ 50, 400, 200, 100 ]
+              color: red
+
+        - type: clip
+          bounds: [ 300, 300, 100, 200 ]
+          complex:
+            - rect: [ 300, 300, 100, 200 ]
+              radius:
+                top-left: [0, 0]
+                top-right: [0, 0]
+                bottom-left: [100, 200]
+                bottom-right: [0, 0]
+          items:
+            - type: rect
+              bounds: [ 300, 300, 100, 200 ]
+              color: yellow
+        - type: clip
+          bounds: [ 400, 300, 100, 200 ]
+          complex:
+            - rect: [ 400, 300, 100, 200 ]
+              radius:
+                top-left: [0, 0]
+                top-right: [0, 0]
+                bottom-left: [0, 0]
+                bottom-right: [100, 200]
+          items:
+            - type: rect
+              bounds: [ 400, 300, 100, 200 ]
+              color: yellow
diff --git a/gfx/wr/wrench/reftests/clip/clip-corner-overlap.yaml b/gfx/wr/wrench/reftests/clip/clip-corner-overlap.yaml
new file mode 100644
index 0000000000..2fa2225652
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clip-corner-overlap.yaml
@@ -0,0 +1,61 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 1000, 1000]
+      items:
+        - type: clip
+          bounds: [ 50, 50, 200, 200 ]
+          complex:
+            - rect: [ 50, 50, 200, 200 ]
+              radius:
+                top-left: [200, 100]
+                top-right: [0, 0]
+                bottom-left: [200, 100]
+                bottom-right: [0, 0]
+          items:
+            - type: rect
+              bounds: [ 50, 50, 200, 200 ]
+              color: blue
+
+        - type: clip
+          bounds: [ 300, 50, 200, 200 ]
+          complex:
+            - rect: [ 300, 50, 200, 200 ]
+              radius:
+                top-left: [100, 200]
+                top-right: [100, 200]
+                bottom-left: [0, 0]
+                bottom-right: [0, 0]
+          items:
+            - type: rect
+              bounds: [ 300, 50, 200, 200 ]
+              color: green
+
+        - type: clip
+          bounds: [ 50, 300, 200, 200 ]
+          complex:
+            - rect: [ 50, 300, 200, 200 ]
+              radius:
+                top-left: [0, 0]
+                top-right: [200, 100]
+                bottom-left: [0, 0]
+                bottom-right: [200, 100]
+          items:
+            - type: rect
+              bounds: [ 50, 300, 200, 200 ]
+              color: red
+
+        - type: clip
+          bounds: [ 300, 300, 200, 200 ]
+          complex:
+            - rect: [ 300, 300, 200, 200 ]
+              radius:
+                top-left: [0, 0]
+                top-right: [0, 0]
+                bottom-left: [100, 200]
+                bottom-right: [100, 200]
+          items:
+            - type: rect
+              bounds: [ 300, 300, 200, 200 ]
+              color: yellow
diff --git a/gfx/wr/wrench/reftests/clip/clip-ellipse.png b/gfx/wr/wrench/reftests/clip/clip-ellipse.png
new file mode 100644
index 0000000000..4962482557
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clip-ellipse.png
diff --git a/gfx/wr/wrench/reftests/clip/clip-ellipse.yaml b/gfx/wr/wrench/reftests/clip/clip-ellipse.yaml
new file mode 100644
index 0000000000..e0c93c7985
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clip-ellipse.yaml
@@ -0,0 +1,63 @@
+---
+root:
+  items:
+    - type: rect
+      bounds: [20, 20, 100, 100]
+      color: red
+      complex-clip:
+        rect: [20, 20, 100, 100]
+        radius: [32, 16]
+
+    - type: rect
+      bounds: [130, 20, 100, 100]
+      color: green
+      complex-clip:
+        rect: [130, 20, 100, 100]
+        radius: [32, 16]
+        clip-mode: clip-out
+
+    - type: rect
+      bounds: [20, 130, 100, 100]
+      color: red
+      complex-clip:
+        rect: [20, 130, 100, 100]
+        radius: [16, 32]
+
+    - type: rect
+      bounds: [130, 130, 100, 100]
+      color: green
+      complex-clip:
+        rect: [130, 130, 100, 100]
+        radius: [16, 32]
+        clip-mode: clip-out
+
+    - type: rect
+      bounds: [20, 240, 100, 100]
+      color: red
+      complex-clip:
+        rect: [20, 240, 100, 100]
+        radius: [128, 32]
+
+    - type: rect
+      bounds: [130, 240, 100, 100]
+      color: green
+      complex-clip:
+        rect: [130, 240, 100, 100]
+        radius: [128, 32]
+        clip-mode: clip-out
+
+    - type: rect
+      bounds: [20, 350, 100, 100]
+      color: red
+      complex-clip:
+        rect: [20, 350, 100, 100]
+        radius: [32, 128]
+
+    - type: rect
+      bounds: [130, 350, 100, 100]
+      color: green
+      complex-clip:
+        rect: [130, 350, 100, 100]
+        radius: [32, 128]
+        clip-mode: clip-out
+
diff --git a/gfx/wr/wrench/reftests/clip/clip-empty-inner-rect-ref.yaml b/gfx/wr/wrench/reftests/clip/clip-empty-inner-rect-ref.yaml
new file mode 100644
index 0000000000..0dea07f57d
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clip-empty-inner-rect-ref.yaml
@@ -0,0 +1,20 @@
+# In this case, the inner rectangle of the clip is empty, because
+# the size is 200 and each corner radius is 100.
+# The blue rect should be fully invisible
+---
+root:
+  items:
+    -
+      type: "stacking-context"
+      bounds: [0, 0, 0, 0]
+      items:
+        -
+          type: clip
+          bounds: [0, 0, 200, 200]
+          complex:
+            - rect: [ 0, 0, 200, 200 ]
+              radius: 100
+          items:
+            - type: rect
+              bounds: [ 0, 0, 200, 200 ]
+              color: red
diff --git a/gfx/wr/wrench/reftests/clip/clip-empty-inner-rect.yaml b/gfx/wr/wrench/reftests/clip/clip-empty-inner-rect.yaml
new file mode 100644
index 0000000000..f8165f90d3
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clip-empty-inner-rect.yaml
@@ -0,0 +1,28 @@
+# In this case, the inner rectangle of the clip is empty, because
+# the size is 200 and each corner radius is 100.
+# The blue rect should be fully invisible
+---
+root:
+  items:
+    -
+      type: "stacking-context"
+      bounds: [0, 0, 0, 0]
+      items:
+        -
+          type: clip
+          bounds: [0, 0, 200, 200]
+          complex:
+            - rect: [ 0, 0, 200, 200 ]
+              radius: 100
+          items:
+            - type: rect
+              bounds: [ 0, 0, 200, 200 ]
+              color: red
+            - type: "stacking-context"
+              bounds: [0, 0, 0, 0]
+              transform: translate(0, 0, 1)
+              items:
+                -
+                  type: rect
+                  bounds: [0, 0, 25, 25]
+                  color: blue
diff --git a/gfx/wr/wrench/reftests/clip/clip-mode.png b/gfx/wr/wrench/reftests/clip/clip-mode.png
new file mode 100644
index 0000000000..69f2b8b4ae
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clip-mode.png
diff --git a/gfx/wr/wrench/reftests/clip/clip-mode.yaml b/gfx/wr/wrench/reftests/clip/clip-mode.yaml
new file mode 100644
index 0000000000..9c10cfdb3d
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clip-mode.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: rect
+      bounds: [20, 20, 100, 100]
+      color: red
+      complex-clip:
+        rect: [20, 20, 100, 100]
+        radius: 32
+
+    - type: rect
+      bounds: [130, 20, 100, 100]
+      color: green
+      complex-clip:
+        rect: [130, 20, 100, 100]
+        radius: 32
+        clip-mode: clip-out
diff --git a/gfx/wr/wrench/reftests/clip/clip-out-rotation.yaml b/gfx/wr/wrench/reftests/clip/clip-out-rotation.yaml
new file mode 100644
index 0000000000..43d4aa3697
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clip-out-rotation.yaml
@@ -0,0 +1,41 @@
+# Test that transformed content is clipped out properly by clips with a different transform.
+# Also verifies that we aren't trying to render the clip mask at all for this clip-out case.
+#
+# The clip is a 500x500 rounded cornered rectangle rotated by 15 degrees. It fully contains the
+# bounds of the red rect and has a clip-out mode (within the conservative logic of our
+# `project_inner_rect` transformation), so nothing is visible, and no mask is rendered.
+---
+root:
+  items:
+    -
+      bounds: [0, 0, 0, 0]
+      type: "reference-frame"
+      id: 2
+    -
+      bounds: [0, 0, 0, 0]
+      type: "stacking-context"
+      transform: rotate(-15) translate(200, 0)
+      items:
+        -
+          bounds: [0, 0, 1000, 1000]
+          type: clip
+          id: 5
+          complex:
+            -
+              rect: [0, 0, 500, 500]
+              radius: [5, 5]
+              clip-mode: clip-out
+        # uncomment this to see the clip area
+        #-
+        #  bounds: [0, 0, 500, 500]
+        #  type: rect
+        #  color: green
+    -
+      bounds: [0, 0, 0, 0]
+      type: "stacking-context"
+      clip-and-scroll: [2, 5]
+      items:
+        -
+          bounds: [225, 150, 300, 300]
+          type: rect
+          color: red
diff --git a/gfx/wr/wrench/reftests/clip/clip-thin-rotated-ref.yaml b/gfx/wr/wrench/reftests/clip/clip-thin-rotated-ref.yaml
new file mode 100644
index 0000000000..e09079424d
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clip-thin-rotated-ref.yaml
@@ -0,0 +1,13 @@
+# Test checks if a rotated clip with a long and thin rectangle would still
+# correctly affect the primitive with regards to the inner bounds.
+---
+root:
+  items:
+    -
+      bounds: [0, 0, 0, 0]
+      type: "stacking-context"
+      items:
+        -
+          bounds: [100, 100, 14, 14]
+          type: rect
+          color: blue
diff --git a/gfx/wr/wrench/reftests/clip/clip-thin-rotated.yaml b/gfx/wr/wrench/reftests/clip/clip-thin-rotated.yaml
new file mode 100644
index 0000000000..d0e626af91
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clip-thin-rotated.yaml
@@ -0,0 +1,41 @@
+# Test checks if a rotated clip with a long and thin rectangle would still
+# correctly affect the primitive with regards to the inner bounds.
+---
+root:
+  items:
+    -
+      bounds: [0, 0, 0, 0]
+      type: "reference-frame"
+      id: 2
+    -
+      bounds: [0, 0, 0, 0]
+      type: "stacking-context"
+      transform: rotate(45) translate(200, 0)
+      items:
+        -
+          bounds: [0, 0, 20, 1000]
+          type: clip
+          id: 5
+        # uncomment this to see the clip area
+        #-
+        #  bounds: [0, 0, 20, 1000]
+        #  type: rect
+        #  color: green
+    - # we aren't supposed to see this one
+      bounds: [0, 0, 0, 0]
+      type: "stacking-context"
+      clip-and-scroll: [2, 5]
+      items:
+        -
+          bounds: [120, 120, 10, 10]
+          type: rect
+          color: red
+    -
+      bounds: [0, 0, 0, 0]
+      type: "stacking-context"
+      clip-and-scroll: [2, 5]
+      items:
+        -
+          bounds: [100, 100, 14, 14]
+          type: rect
+          color: blue
diff --git a/gfx/wr/wrench/reftests/clip/clipped-occlusion-ref.yaml b/gfx/wr/wrench/reftests/clip/clipped-occlusion-ref.yaml
new file mode 100644
index 0000000000..69a5fb0624
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clipped-occlusion-ref.yaml
@@ -0,0 +1,7 @@
+---
+root:
+  items:
+    -
+      type: rect
+      bounds: [0, 0, 500, 500]
+      color: red
diff --git a/gfx/wr/wrench/reftests/clip/clipped-occlusion.yaml b/gfx/wr/wrench/reftests/clip/clipped-occlusion.yaml
new file mode 100644
index 0000000000..05a055a5a3
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/clipped-occlusion.yaml
@@ -0,0 +1,23 @@
+# This is a regression test for https://bugzilla.mozilla.org/show_bug.cgi?id=1594567
+# The single clip node from the primitive inside the scroll frame will be promoted
+# to a 'shared clip' in the picture cache for the scroll frame. Ensure that this clip
+# (zero sized in this test) is included in the tile occlusion culling.
+---
+root:
+  items:
+    -
+      type: rect
+      bounds: [0, 0, 500, 500]
+      color: red
+    -
+      type: scroll-frame
+      content-size: [1000, 10000]
+      bounds: [0, -5000, 1000, 10000]
+      items:
+       - type: clip
+         bounds: [0, 0, 0, 0]
+         items:
+          -
+            bounds: [0, -5000, 1000, 10000]
+            type: rect
+            color: green
diff --git a/gfx/wr/wrench/reftests/clip/custom-clip-chain-node-ancestors-ref.yaml b/gfx/wr/wrench/reftests/clip/custom-clip-chain-node-ancestors-ref.yaml
new file mode 100644
index 0000000000..c84fe7a612
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/custom-clip-chain-node-ancestors-ref.yaml
@@ -0,0 +1,9 @@
+---
+root:
+  items:
+    -
+      bounds: [10, 10, 100, 100]
+      "clip-rect": [10, 10, 100, 100]
+      "backface-visible": true
+      type: rect
+      color: 0 255 0 1
diff --git a/gfx/wr/wrench/reftests/clip/custom-clip-chain-node-ancestors.yaml b/gfx/wr/wrench/reftests/clip/custom-clip-chain-node-ancestors.yaml
new file mode 100644
index 0000000000..9824da4f9c
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/custom-clip-chain-node-ancestors.yaml
@@ -0,0 +1,32 @@
+# This test ensures that custom clip chains are not affected by the ancestors
+# of their clipping nodes. In this case the node, 3, will probably be optimized
+# away since its ancestor 2 has a tighter bounding rect. On the other hand, a
+# clip chain which includes 3 should only get the rectangle specified by that
+# node and not be affected by 2 at all.
+---
+root:
+  items:
+    -
+      bounds: [25, 25, 50, 50]
+      "clip-rect": [25, 25, 50, 50]
+      type: clip
+      id: 2
+    -
+      bounds: [10, 10, 100, 100]
+      clip-rect: [10, 10, 100, 100]
+      clip-and-scroll: 2
+      type: clip
+      id: 3
+      "content-size": [800, 1000]
+    -
+      bounds: [0, 0, 0, 0]
+      clip-rect: [0, 0, 0, 0]
+      type: "clip-chain"
+      id: 10
+      clips: [3]
+    -
+      bounds: [0, 0, 200, 200]
+      clip-rect: [0, 0, 200, 200]
+      clip-and-scroll: [root-scroll-node, 10]
+      type: rect
+      color: 0 255 0 1
diff --git a/gfx/wr/wrench/reftests/clip/custom-clip-chains-ref.yaml b/gfx/wr/wrench/reftests/clip/custom-clip-chains-ref.yaml
new file mode 100644
index 0000000000..e30bcfd2a4
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/custom-clip-chains-ref.yaml
@@ -0,0 +1,17 @@
+root:
+  items:
+       - type: clip
+         id: 2
+         bounds: [0, 0, 200, 200]
+         complex:
+           - rect: [0, 0, 200, 200]
+             radius: {
+               top-left: 20,
+               top-right: 20,
+               bottom-left: 20,
+               bottom-right: 20,
+             }
+         items:
+         - type: rect
+           bounds: [0, 0, 200, 200]
+           color: green
diff --git a/gfx/wr/wrench/reftests/clip/custom-clip-chains.yaml b/gfx/wr/wrench/reftests/clip/custom-clip-chains.yaml
new file mode 100644
index 0000000000..62e2fde8c5
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/custom-clip-chains.yaml
@@ -0,0 +1,62 @@
+# This tests a clip chain (clipid=6) that is composed of two clips (clipid=3
+# and clipid=4) with a parent clip chain (composed of two more clips (clipid=1
+# and clipid=2). This effectively  tests a "complex" clip chain that includes
+# and is applied to multiple non-hierarchical reference frames as well as
+# having a similarly complicated parent. Each clip is a rounded corner which,
+# when rotated, clips a box with all corners rounded.
+root:
+  items:
+    -
+      bounds: [0, 0, 200, 200]
+      type: stacking-context
+      transform: rotate(180)
+      items:
+       - type: clip
+         id: 10
+         bounds: [0, 0, 200, 200]
+         complex:
+           - rect: [0, 0, 200, 200]
+             radius: {
+               top-left: 20,
+             }
+       - type: clip
+         id: 2
+         bounds: [0, 0, 200, 200]
+         complex:
+           - rect: [0, 0, 200, 200]
+             radius: {
+               top-right: 20,
+             }
+    -
+      bounds: [0, 0, 200, 200]
+      type: stacking-context
+      transform: rotate(-90)
+      items:
+       - type: clip
+         id: 3
+         bounds: [0, 0, 200, 200]
+         complex:
+           - rect: [0, 0, 200, 200]
+             radius: {
+               bottom-left: 20,
+             }
+       - type: clip
+         id: 4
+         bounds: [0, 0, 200, 200]
+         complex:
+           - rect: [0, 0, 200, 200]
+             radius: {
+               top-left: 20,
+             }
+
+    - type: clip-chain
+      id: 5
+      clips: [10, 2]
+    - type: clip-chain
+      id: 6
+      parent: 5
+      clips: [3, 4]
+    - type: rect
+      bounds: [0, 0, 200, 200]
+      color: green
+      clip-and-scroll: [root-scroll-node, 6]
diff --git a/gfx/wr/wrench/reftests/clip/fixed-position-clipping-ref.yaml b/gfx/wr/wrench/reftests/clip/fixed-position-clipping-ref.yaml
new file mode 100644
index 0000000000..abbc91f897
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/fixed-position-clipping-ref.yaml
@@ -0,0 +1,15 @@
+---
+root:
+  items:
+    -
+      bounds: [10, 10, 100, 100]
+      clip-rect: [10, 10, 100, 100]
+      type: rect
+      color: 0 255 0 1.0
+    -
+      bounds: [110, 10, 100, 100]
+      clip-rect: [110, 10, 100, 100]
+      type: rect
+      color: 0 255 0 1.0
+  id: [0, 1]
+pipelines: []
diff --git a/gfx/wr/wrench/reftests/clip/fixed-position-clipping.yaml b/gfx/wr/wrench/reftests/clip/fixed-position-clipping.yaml
new file mode 100644
index 0000000000..8eaa388710
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/fixed-position-clipping.yaml
@@ -0,0 +1,49 @@
+# This test ensures that children of fixed position stacking contexts are not
+# clipped by parent clipping nodes. The contents of the fixed position stacking
+# contexts below should not be clipped by their parent clipping nodes, but
+# instead should be promoted to be children of the top-level reference frame.
+---
+root:
+  items:
+    -
+      clip-rect: [15, 15, 30, 30]
+      type: scroll-frame
+      content-size: [60, 60]
+      bounds: [15, 15, 30, 30]
+      items:
+      -
+        bounds: [10, 10, 100, 100]
+        clip-rect: [10, 10, 100, 100]
+        clip-and-scroll: root-reference-frame
+        type: stacking-context
+        items:
+          -
+            bounds: [0, 0, 100, 100]
+            clip-rect: [0, 0, 100, 100]
+            clip-and-scroll: root-reference-frame
+            type: rect
+            color: 0 255 0 1.0
+    # The same test as above, except this time the stacking context also starts its
+    # own reference frame.
+    -
+      clip-rect: [115, 15, 30, 30]
+      type: scroll-frame
+      content-size: [60, 60]
+      bounds: [115, 15, 30, 30]
+      items:
+      -
+        bounds: [110, 10, 100, 100]
+        clip-rect: [110, 10, 100, 100]
+        clip-and-scroll: root-reference-frame
+        id: 4
+        type: stacking-context
+        transform: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
+        items:
+          -
+            bounds: [0, 0, 100, 100]
+            clip-rect: [0, 0, 100, 100]
+            clip-and-scroll: 4
+            type: rect
+            color: 0 255 0 1.0
+  id: [0, 1]
+pipelines: []
diff --git a/gfx/wr/wrench/reftests/clip/iframe-nested-in-stacking-context-ref.yaml b/gfx/wr/wrench/reftests/clip/iframe-nested-in-stacking-context-ref.yaml
new file mode 100644
index 0000000000..c8f3148ea5
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/iframe-nested-in-stacking-context-ref.yaml
@@ -0,0 +1,6 @@
+---
+root:
+  items:
+  - type: rect
+    bounds: [50, 50, 50, 100]
+    color: red
diff --git a/gfx/wr/wrench/reftests/clip/iframe-nested-in-stacking-context.yaml b/gfx/wr/wrench/reftests/clip/iframe-nested-in-stacking-context.yaml
new file mode 100644
index 0000000000..5976ccd511
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/iframe-nested-in-stacking-context.yaml
@@ -0,0 +1,23 @@
+# Ensure that a stacking context with a simple clip that encloses
+# an iframe correctly propagates the stacking context clip to the
+# clip on the iframe.
+---
+root:
+  items:
+  - type: clip
+    id: 2
+    bounds: [50, 50, 50, 100]
+  - type: stacking-context
+    bounds: [50, 50, 100, 100]
+    clip-node: 2
+    items:
+      - type: iframe
+        id: [1, 3]
+        bounds: [0, 0, 100, 100]
+pipelines:
+  -
+    id: [1, 3]
+    items:
+      - type: rect
+        color: red
+        bounds: [0, 0, 100, 100]
diff --git a/gfx/wr/wrench/reftests/clip/reftest.list b/gfx/wr/wrench/reftests/clip/reftest.list
new file mode 100644
index 0000000000..7f6cb1025b
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/reftest.list
@@ -0,0 +1,18 @@
+    platform(linux,mac) == border-with-rounded-clip.yaml border-with-rounded-clip.png
+== clip-mode.yaml clip-mode.png
+== clip-ellipse.yaml clip-ellipse.png
+platform(linux,mac) == clip-45-degree-rotation.yaml clip-45-degree-rotation-ref.png
+== clip-3d-transform.yaml clip-3d-transform-ref.yaml
+fuzzy(1,4) == clip-corner-overlap.yaml clip-corner-overlap-ref.yaml
+fuzzy(9,60) == custom-clip-chains.yaml custom-clip-chains-ref.yaml
+== custom-clip-chain-node-ancestors.yaml custom-clip-chain-node-ancestors-ref.yaml
+== fixed-position-clipping.yaml fixed-position-clipping-ref.yaml
+platform(linux,mac) == segmentation-with-other-coordinate-system-clip.yaml segmentation-with-other-coordinate-system-clip.png
+== segmentation-across-rotation.yaml segmentation-across-rotation-ref.yaml
+skip_on(android,device) == color_targets(3) alpha_targets(1) stacking-context-clip.yaml stacking-context-clip-ref.yaml
+== snapping.yaml snapping-ref.yaml
+fuzzy(70,2400) == clip-and-filter-with-rotation.yaml clip-and-filter-with-rotation-ref.yaml
+color_targets(1) alpha_targets(0) == clip-out-rotation.yaml blank.yaml # Unexpected color targets, see bug 1580795
+== clipped-occlusion.yaml clipped-occlusion-ref.yaml
+== clip-empty-inner-rect.yaml clip-empty-inner-rect-ref.yaml
+== iframe-nested-in-stacking-context.yaml iframe-nested-in-stacking-context-ref.yaml
diff --git a/gfx/wr/wrench/reftests/clip/segmentation-across-rotation-ref.yaml b/gfx/wr/wrench/reftests/clip/segmentation-across-rotation-ref.yaml
new file mode 100644
index 0000000000..6d14bab91c
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/segmentation-across-rotation-ref.yaml
@@ -0,0 +1,6 @@
+---
+root:
+  items:
+    - type: rect
+      color: [0, 255, 0, 1]
+      bounds: [100, 100, 100, 100]
diff --git a/gfx/wr/wrench/reftests/clip/segmentation-across-rotation.yaml b/gfx/wr/wrench/reftests/clip/segmentation-across-rotation.yaml
new file mode 100644
index 0000000000..c90cf79e4e
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/segmentation-across-rotation.yaml
@@ -0,0 +1,30 @@
+# This test ensures that a clip that is segmented, with segments
+# that have no intersection with the world-space outer bounds of
+# the clip rectangle render correctly. In this case the first clip
+# defines the outer bounds of the clip rectangle and the rotation
+# ensures that the inner clip isn't optimized away completely. The
+# segments of the rounded corner clip don't have any intersection at
+# all with the clip in area from the outer clip, so they shouldn't
+# affect the rendering of the green square.
+---
+root:
+  items:
+    - type: clip
+      bounds: [100, 100, 100, 100]
+      id: 2
+    -
+      type: stacking-context
+      clip-and-scroll: 2
+      transform: rotate(0.25)
+      items:
+       - type: clip
+         bounds: [0, 0, 2400, 900]
+         id: 3
+         complex:
+           - rect: [ 0, 0, 2400, 900 ]
+             radius: 50
+       - type: rect
+         color: [0, 255, 0, 1]
+         bounds: [0, 0, 2400, 900]
+         clip-and-scroll: 3
+
diff --git a/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip-ref.yaml b/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip-ref.yaml
new file mode 100644
index 0000000000..8627d2ed74
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip-ref.yaml
@@ -0,0 +1,8 @@
+---
+root:
+  items:
+  -
+    type: rect
+    color: green
+    bounds: [0, 0, 100, 100]
+    "clip-rect": [0, 0, 100, 100]
diff --git a/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip.png b/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip.png
new file mode 100644
index 0000000000..67507a2573
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip.png
diff --git a/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip.yaml b/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip.yaml
new file mode 100644
index 0000000000..db98da3a3e
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip.yaml
@@ -0,0 +1,47 @@
+# This is testing whether a clip properly clips a primitive in another
+# coordinate system that is segmented.
+# See https://github.com/servo/webrender/issues/2294
+---
+root:
+  items:
+  -
+    type: "stacking-context"
+    items:
+    -
+      bounds: [0, 0, 100, 100]
+      "clip-rect": [0, 0, 100, 100]
+      type: clip
+      items:
+      -
+        type: "stacking-context"
+        transform: [0.98883086, 0.14904226, 0, 0, -0.14904226, 0.98883086, 0, 0, 0, 0, 1, 0, 1533.3134, 109.21605, 0, 1]
+        items:
+        -
+          type: "stacking-context"
+          transform: [0.7818315, 0.6234898, 0, 0, -0.6234898, 0.7818315, 0, 0, 0, 0, 1, 0, 132.98201, -64.04077, 0, 1]
+          items:
+          -
+            type: "stacking-context"
+            transform: [0.93087375, 0.36534107, 0, 0, -0.36534107, 0.93087375, 0, 0, 0, 0, 1, 0, 68.64584, -46.80194, 0, 1]
+            items:
+            -
+              type: "stacking-context"
+              transform: [0.8262389, 0.56332004, 0, 0, -0.56332004, 0.8262389, 0, 0, 0, 0, 1, 0, 116.458824, -61.550323, 0, 1]
+              items:
+              -
+                type: "stacking-context"
+                transform: [0.90096885, 0.43388373, 0, 0, -0.43388373, 0.90096885, 0, 0, 0, 0, 1, 0, 84.200554, -52.906708, 0, 1]
+                items:
+                -
+                  type: "stacking-context"
+                  transform: [0.98883086, 0.14904226, 0, 0, -0.14904226, 0.98883086, 0, 0, 0, 0, 1, 0, 25.3134, -21.78395, 0, 1]
+                  items:
+                  -
+                    type: "stacking-context"
+                    transform: [0.73305184, 0.68017274, 0, 0, -0.68017274, 0.73305184, 0, 0, 0, 0, 1, 0, 149.64511, -65.28949, 0, 1]
+                    items:
+                    -
+                      bounds: [1000, 0, 1000, 1000]
+                      "clip-rect": [1000, 0, 1000, 1000]
+                      type: rect
+                      color: green
diff --git a/gfx/wr/wrench/reftests/clip/snapping-ref.yaml b/gfx/wr/wrench/reftests/clip/snapping-ref.yaml
new file mode 100644
index 0000000000..7be527df93
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/snapping-ref.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: clip
+      bounds: [0, 0, 1000, 1000]
+      complex:
+        - rect: [50, 50, 100, 100]
+          radius: 16
+      items:
+      - type: rect
+        bounds: 50 50 100 100
+        color: red
+
+    - type: rect
+      bounds: 200 50 100 100
+      color: green
+
diff --git a/gfx/wr/wrench/reftests/clip/snapping.yaml b/gfx/wr/wrench/reftests/clip/snapping.yaml
new file mode 100644
index 0000000000..d2ad449ea9
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/snapping.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: clip
+      bounds: [0, 0, 1000, 1000]
+      complex:
+        - rect: [50.3, 50.3, 100, 100]
+          radius: 16
+      items:
+      - type: rect
+        bounds: 50.3 50.3 100 100
+        color: red
+
+    - type: rect
+      bounds: 200.3 50.3 100 100
+      color: green
+
diff --git a/gfx/wr/wrench/reftests/clip/stacking-context-clip-ref.yaml b/gfx/wr/wrench/reftests/clip/stacking-context-clip-ref.yaml
new file mode 100644
index 0000000000..50fb8facd4
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/stacking-context-clip-ref.yaml
@@ -0,0 +1,32 @@
+---
+root:
+  items:
+  - type: clip
+    id: 2
+    bounds: [0, 0, 100, 100]
+    complex:
+      - rect: [0, 0, 100, 100]
+        radius: {
+          top-left: 50,
+          top-right: 50,
+          bottom-left: 50,
+          bottom-right: 50,
+        }
+  - type: stacking-context
+    bounds: [0, 0, 100, 100]
+    items:
+      - type: rect
+        bounds: [ 0, 0, 100, 100 ]
+        color: [0, 255, 0]
+        clip-and-scroll: 2
+  - type: clip
+    id: 3
+    bounds: [120, 0, 50, 50]
+  - type: stacking-context
+    bounds: [100, 0, 100, 100]
+    filters: hue-rotate(90)
+    items:
+      - type: rect
+        bounds: [ 0, 0, 100, 100 ]
+        color: [0, 255, 0]
+        clip-and-scroll: 3
diff --git a/gfx/wr/wrench/reftests/clip/stacking-context-clip.yaml b/gfx/wr/wrench/reftests/clip/stacking-context-clip.yaml
new file mode 100644
index 0000000000..5516b65539
--- /dev/null
+++ b/gfx/wr/wrench/reftests/clip/stacking-context-clip.yaml
@@ -0,0 +1,36 @@
+---
+root:
+  items:
+  - type: clip
+    id: 2
+    bounds: [0, 0, 100, 100]
+    complex:
+      - rect: [0, 0, 100, 100]
+        radius: {
+          top-left: 50,
+          top-right: 50,
+          bottom-left: 50,
+          bottom-right: 50,
+        }
+  - type: stacking-context
+    bounds: [0, 0, 100, 100]
+    clip-node: 2
+    items:
+      - type: rect
+        bounds: [ 0, 0, 100, 100 ]
+        color: [0, 255, 0]
+  # The same test, but this time with hue rotation, which means that the stacking
+  # context is rendered to an intermediate surface first. Unfortunately, we cannot
+  # use a rounded clip here because we want to avoid subpixel differences and avoid
+  # relying on a PNG reference image.
+  - type: clip
+    id: 3
+    bounds: [120, 0, 50, 50]
+  - type: stacking-context
+    bounds: [100, 0, 100, 100]
+    filters: hue-rotate(90)
+    clip-node: 3
+    items:
+      - type: rect
+        bounds: [ 0, 0, 100, 100 ]
+        color: [0, 255, 0]