Adding upstream version 115.7.0esr.upstream/115.7.0esr

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

48 files changed, 753 insertions, 0 deletions

diff --git a/gfx/wr/wrench/reftests/blend/backdrop-filter-blend-container-ref.yaml b/gfx/wr/wrench/reftests/blend/backdrop-filter-blend-container-ref.yaml
new file mode 100644
index 0000000000..108bdec453
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/backdrop-filter-blend-container-ref.yaml
@@ -0,0 +1,8 @@
+# verify that the results of a root-level mix-blend are available as
+# input to a backdrop-filter following that follows the blend container
+---
+root:
+  items:
+    - type: rect
+      bounds: 0 0 100 100
+      color: cyan
diff --git a/gfx/wr/wrench/reftests/blend/backdrop-filter-blend-container.yaml b/gfx/wr/wrench/reftests/blend/backdrop-filter-blend-container.yaml
new file mode 100644
index 0000000000..899e39ab2e
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/backdrop-filter-blend-container.yaml
@@ -0,0 +1,21 @@
+# verify that the results of a root-level mix-blend are available as
+# input to a backdrop-filter following that follows the blend container
+---
+root:
+  items:
+    - type: stacking-context
+      blend-container: true
+      items:
+        - type: rect
+          bounds: 0 0 100 100
+          color: red
+        - type: stacking-context
+          bounds: 0 0 100 100
+          mix-blend-mode: multiply
+          items:
+            - type: rect
+              bounds: 0 0 100 100
+              color: red
+    - type: backdrop-filter
+      bounds: 0 0 100 100
+      filters: invert(1)
diff --git a/gfx/wr/wrench/reftests/blend/backdrop-filter-preceding-ref.yaml b/gfx/wr/wrench/reftests/blend/backdrop-filter-preceding-ref.yaml
new file mode 100644
index 0000000000..25069e8bb0
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/backdrop-filter-preceding-ref.yaml
@@ -0,0 +1,9 @@
+---
+root:
+  items:
+    - type: rect
+      bounds: 0 0 100 100
+      color: cyan
+    - type: rect
+      bounds: 100 0 100 100
+      color: magenta
diff --git a/gfx/wr/wrench/reftests/blend/backdrop-filter-preceding.yaml b/gfx/wr/wrench/reftests/blend/backdrop-filter-preceding.yaml
new file mode 100644
index 0000000000..74753c2f2d
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/backdrop-filter-preceding.yaml
@@ -0,0 +1,24 @@
+# verify that content preceding a root level mix-blend container is still
+# available as part of the backdrop root for subsequent backdrop-filters
+---
+root:
+  items:
+    - type: rect
+      bounds: 0 0 100 100
+      color: red
+    - type: stacking-context
+      blend-container: true
+      items:
+        - type: rect
+          bounds: 100 0 100 100
+          color: green
+        - type: stacking-context
+          bounds: 100 0 100 100
+          mix-blend-mode: multiply
+          items:
+            - type: rect
+              bounds: 0 0 100 100
+              color: green
+    - type: backdrop-filter
+      bounds: 0 0 200 100
+      filters: invert(1)
diff --git a/gfx/wr/wrench/reftests/blend/blank.yaml b/gfx/wr/wrench/reftests/blend/blank.yaml
new file mode 100644
index 0000000000..c4eb3ab673
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/blank.yaml
@@ -0,0 +1,2 @@
+---
+root:
diff --git a/gfx/wr/wrench/reftests/blend/blend-overflow-ref.yaml b/gfx/wr/wrench/reftests/blend/blend-overflow-ref.yaml
new file mode 100644
index 0000000000..6c0c71f53f
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/blend-overflow-ref.yaml
@@ -0,0 +1,14 @@
+# Ensure that we correctly calculate the UV sampling rect for the backdrop
+# Similar to the mix-blend-mode-overflowing-child.html test in Gecko
+---
+root:
+  items:
+    - type: rect
+      bounds: [0, 0, 100, 100]
+      color: green
+    - type: rect
+      bounds: [50, 50, 100, 100]
+      color: green
+    - type: rect
+      bounds: [50, 50, 50, 50]
+      color: black
diff --git a/gfx/wr/wrench/reftests/blend/blend-overflow.yaml b/gfx/wr/wrench/reftests/blend/blend-overflow.yaml
new file mode 100644
index 0000000000..a0a0aa53b1
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/blend-overflow.yaml
@@ -0,0 +1,18 @@
+# Ensure that we correctly calculate the UV sampling rect for the backdrop
+# Similar to the mix-blend-mode-overflowing-child.html test in Gecko
+---
+root:
+  items:
+    - type: stacking-context
+      blend-container: true
+      items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: green
+        - type: stacking-context
+          bounds: [50, 50, 100, 100]
+          mix-blend-mode: difference
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: green
diff --git a/gfx/wr/wrench/reftests/blend/child-surface-ref.yaml b/gfx/wr/wrench/reftests/blend/child-surface-ref.yaml
new file mode 100644
index 0000000000..28e8c042d9
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/child-surface-ref.yaml
@@ -0,0 +1,17 @@
+---
+root:
+  items:
+  - type: stacking-context
+    blend-container: true
+    bounds: [0, 0, 100, 100]
+    items:
+      - type: rect
+        bounds: [0, 0, 100, 100]
+        color: [255, 0, 0]
+      - type: stacking-context
+        bounds: [0, 0, 100, 100]
+        mix-blend-mode: hue
+        items:
+          - type: rect
+            bounds: [0, 0, 100, 100]
+            color: [255, 255, 0]
diff --git a/gfx/wr/wrench/reftests/blend/child-surface.yaml b/gfx/wr/wrench/reftests/blend/child-surface.yaml
new file mode 100644
index 0000000000..983ecc17c1
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/child-surface.yaml
@@ -0,0 +1,22 @@
+# verify that the clipping_rect of a child surface (caused by the identity filter)
+# is corrected used to select the backdrop for a mix-blend child surface
+---
+root:
+  items:
+    - type: stacking-context
+      filters: [identity]
+      items:
+      - type: stacking-context
+        blend-container: true
+        bounds: [0, 0, 100, 100]
+        items:
+          - type: rect
+            bounds: [0, 0, 100, 100]
+            color: [255, 0, 0]
+          - type: stacking-context
+            bounds: [0, 0, 100, 100]
+            mix-blend-mode: hue
+            items:
+              - type: rect
+                bounds: [0, 0, 100, 100]
+                color: [255, 255, 0]
diff --git a/gfx/wr/wrench/reftests/blend/darken-ref.yaml b/gfx/wr/wrench/reftests/blend/darken-ref.yaml
new file mode 100644
index 0000000000..a83cf68244
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/darken-ref.yaml
@@ -0,0 +1,6 @@
+---
+root:
+  items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: [10, 20, 10]
diff --git a/gfx/wr/wrench/reftests/blend/darken.yaml b/gfx/wr/wrench/reftests/blend/darken.yaml
new file mode 100644
index 0000000000..2de68d8724
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/darken.yaml
@@ -0,0 +1,16 @@
+---
+root:
+  items:
+    - type: stacking-context
+      blend-container: true
+      items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: [10, 20, 30]
+        - type: stacking-context
+          bounds: [0, 0, 100, 100]
+          mix-blend-mode: darken
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [30, 20, 10]
diff --git a/gfx/wr/wrench/reftests/blend/difference-ref.yaml b/gfx/wr/wrench/reftests/blend/difference-ref.yaml
new file mode 100644
index 0000000000..b913384f24
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/difference-ref.yaml
@@ -0,0 +1,6 @@
+---
+root:
+  items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: [0, 0, 0]
diff --git a/gfx/wr/wrench/reftests/blend/difference-transparent-ref.yaml b/gfx/wr/wrench/reftests/blend/difference-transparent-ref.yaml
new file mode 100644
index 0000000000..8ed801fb15
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/difference-transparent-ref.yaml
@@ -0,0 +1,23 @@
+---
+root:
+  items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+
+          # First blend black rect with green in place
+          #  Cs = (1 - αb) x Cs + αb x B(Cb, Cs)
+          #  B(Cb, Cs) = | Cb - Cs | = (0, 0, 0)
+          #  0.5 * (0, 255, 0) + 0.5 * (0, 0, 0) = (0, 127.5, 0)
+          #
+          #  Now, composite the resulting color with src-over; the alpha is the original alpha for the top layer
+          #  while the color is the blending result
+          #  co = αs x Fa x Cs + αb x Fb x Cb  - this is premultiplied 
+          #  αo = αs + αb x (1 – αs) 
+          #  Source over:     Fa = 1; Fb = 1 – αs 
+          # co = 0.5 * 1 * (0, 127.5, 0) + 0.5 * 0.5 * (0, 255, 0) = (0, 63.5, 0) + 0.25 * (0, 255, 0) = (0, 127.5, 0)
+          # ao = 0.5 + 0.5 * 0.5 = 0.75
+          #  Co = co/ao = (0, 127.5, 0) / 0.75
+          #
+          #  Now alpha composite on white background
+          # co = 0.75 * 1 * (0, 127.5, 0) / 0.75 + 1 * 0.25 * (255, 255, 255) = (0, 127.5, 0) + (63.75, 63.75, 63.75) = (63.75, 159, 63.75) = (64, 191, 64) 
+          color: [64, 191, 64]
diff --git a/gfx/wr/wrench/reftests/blend/difference-transparent.yaml b/gfx/wr/wrench/reftests/blend/difference-transparent.yaml
new file mode 100644
index 0000000000..bd828d454a
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/difference-transparent.yaml
@@ -0,0 +1,22 @@
+---
+root:
+  items:
+    - type: rect
+      bounds: [0, 0, 100, 100]
+      color: white
+    # this stacking context should create an isolated group for its children
+    # causing the yellow rect to not blend with the green backdrop
+    - type: stacking-context
+      blend-container: true
+      bounds: [0, 0, 100, 100]
+      items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: [0, 255, 0, 0.5]
+        - type: stacking-context
+          bounds: [0, 0, 100, 100]
+          mix-blend-mode: difference
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [0, 255, 0, 0.5]
diff --git a/gfx/wr/wrench/reftests/blend/difference.yaml b/gfx/wr/wrench/reftests/blend/difference.yaml
new file mode 100644
index 0000000000..0c8d0fcd02
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/difference.yaml
@@ -0,0 +1,16 @@
+---
+root:
+  items:
+    - type: stacking-context
+      blend-container: true
+      items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: green
+        - type: stacking-context
+          bounds: [0, 0, 100, 100]
+          mix-blend-mode: difference
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: green
diff --git a/gfx/wr/wrench/reftests/blend/isolated-2-ref.yaml b/gfx/wr/wrench/reftests/blend/isolated-2-ref.yaml
new file mode 100644
index 0000000000..3226b6edda
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/isolated-2-ref.yaml
@@ -0,0 +1,21 @@
+---
+root:
+  items:
+    - type: rect
+      bounds: [10, 10, 130, 130]
+      color: [255, 255, 0]
+    - type: stacking-context
+      bounds: [10, 10, 130, 130]
+      items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: [0, 255, 0]
+        - type: stacking-context
+          bounds: [20, 20, 100, 100]
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [255, 0, 0]
+            - type: rect
+              bounds: [0, 0, 80, 80]
+              color: [0, 0, 0]
diff --git a/gfx/wr/wrench/reftests/blend/isolated-2.yaml b/gfx/wr/wrench/reftests/blend/isolated-2.yaml
new file mode 100644
index 0000000000..87bbac3caa
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/isolated-2.yaml
@@ -0,0 +1,25 @@
+# translation of wpt/css-tests/compositing-1_dev/html/mix-blend-mode-stacking-context-creates-isolation.htm
+---
+root:
+  items:
+    - type: rect
+      bounds: [10, 10, 130, 130]
+      color: [255, 255, 0]
+      # this stacking context should create an isolated group for its children
+      # inside there should be overlapping red and green rects
+      # where they intersect should be a black rect
+      # the rects should not blend with the yellow backdrop
+    - type: stacking-context
+      blend-container: true
+      bounds: [10, 10, 130, 130]
+      items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: [0, 255, 0]
+        - type: stacking-context
+          bounds: [20, 20, 100, 100]
+          mix-blend-mode: multiply
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [255, 0, 0]
diff --git a/gfx/wr/wrench/reftests/blend/isolated-premultiplied-2-ref.yaml b/gfx/wr/wrench/reftests/blend/isolated-premultiplied-2-ref.yaml
new file mode 100644
index 0000000000..f5de6dc33d
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/isolated-premultiplied-2-ref.yaml
@@ -0,0 +1,6 @@
+---
+root:
+  items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: [229, 239, 229]
diff --git a/gfx/wr/wrench/reftests/blend/isolated-premultiplied-2.yaml b/gfx/wr/wrench/reftests/blend/isolated-premultiplied-2.yaml
new file mode 100644
index 0000000000..6836fedd84
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/isolated-premultiplied-2.yaml
@@ -0,0 +1,14 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 100, 100]
+      blend-container: true
+      items:
+        - type: stacking-context
+          bounds: [0, 0, 100, 100]
+          mix-blend-mode: lighten
+          items:
+          - type: rect
+            bounds: [0, 0, 100, 100]
+            color: [0, 100, 0, 0.1]
diff --git a/gfx/wr/wrench/reftests/blend/isolated-premultiplied.yaml b/gfx/wr/wrench/reftests/blend/isolated-premultiplied.yaml
new file mode 100644
index 0000000000..a8d738a389
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/isolated-premultiplied.yaml
@@ -0,0 +1,24 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 100, 100]
+      items:
+          # this stacking context should force its parent to be an isolated group
+          # we don't want it to actually draw anything so just make it draw a white rect
+        - type: stacking-context
+          bounds: [0, 0, 100, 100]
+          mix-blend-mode: lighten
+          items:
+          - type: rect
+            bounds: [500, 500, 100, 100]
+            color: [255, 255, 255]
+
+          # transparent white, should be invisible
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: [255, 255, 255, 0.5]
+          # transparent white, should be invisible
+        - type: image
+          bounds: [200, 0, 100, 100]
+          src: "transparent-white.png"
diff --git a/gfx/wr/wrench/reftests/blend/isolated-ref.yaml b/gfx/wr/wrench/reftests/blend/isolated-ref.yaml
new file mode 100644
index 0000000000..0f9061997a
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/isolated-ref.yaml
@@ -0,0 +1,6 @@
+---
+root:
+  items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: [255, 255, 0]
diff --git a/gfx/wr/wrench/reftests/blend/isolated-with-filter.yaml b/gfx/wr/wrench/reftests/blend/isolated-with-filter.yaml
new file mode 100644
index 0000000000..0635b15c5e
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/isolated-with-filter.yaml
@@ -0,0 +1,19 @@
+---
+root:
+  items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: [255, 0, 0]
+          # the presence of this filter shouldn't break isolated groups
+        - type: stacking-context
+          bounds: [0, 0, 100, 100]
+          filters: opacity(1.0)
+          blend-container: true
+          items:
+            - type: stacking-context
+              bounds: [0, 0, 100, 100]
+              mix-blend-mode: difference
+              items:
+                - type: rect
+                  bounds: [0, 0, 100, 100]
+                  color: [255, 255, 0]
diff --git a/gfx/wr/wrench/reftests/blend/isolated.yaml b/gfx/wr/wrench/reftests/blend/isolated.yaml
new file mode 100644
index 0000000000..fcfd0676d7
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/isolated.yaml
@@ -0,0 +1,19 @@
+---
+root:
+  items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: [255, 0, 0]
+        # this stacking context should create an isolated group for its children
+        # causing the yellow rect to not blend with the green backdrop
+        - type: stacking-context
+          bounds: [0, 0, 100, 100]
+          blend-container: true
+          items:
+            - type: stacking-context
+              bounds: [0, 0, 100, 100]
+              mix-blend-mode: difference
+              items:
+                - type: rect
+                  bounds: [0, 0, 100, 100]
+                  color: [255, 255, 0]
diff --git a/gfx/wr/wrench/reftests/blend/large-ref.yaml b/gfx/wr/wrench/reftests/blend/large-ref.yaml
new file mode 100644
index 0000000000..c7e8433414
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/large-ref.yaml
@@ -0,0 +1,9 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: 0 0 2000 2000
+      items:
+        - type: rect
+          bounds: 0 0 2000 2000
+          color: [0, 128, 0, 1]
diff --git a/gfx/wr/wrench/reftests/blend/large.yaml b/gfx/wr/wrench/reftests/blend/large.yaml
new file mode 100644
index 0000000000..5f15cfe332
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/large.yaml
@@ -0,0 +1,14 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: 0 0 2000 2000
+      blend-container: true
+      items:
+        - type: stacking-context
+          bounds: 0 0 2000 2000
+          mix-blend-mode: screen
+          items:
+            - type: rect
+              bounds: 0 0 2000 2000
+              color: [0, 128, 0, 1]
diff --git a/gfx/wr/wrench/reftests/blend/lighten-ref.yaml b/gfx/wr/wrench/reftests/blend/lighten-ref.yaml
new file mode 100644
index 0000000000..5720f140a6
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/lighten-ref.yaml
@@ -0,0 +1,6 @@
+---
+root:
+  items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: [30, 20, 30]
diff --git a/gfx/wr/wrench/reftests/blend/lighten.yaml b/gfx/wr/wrench/reftests/blend/lighten.yaml
new file mode 100644
index 0000000000..426e2323b9
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/lighten.yaml
@@ -0,0 +1,16 @@
+---
+root:
+  items:
+    - type: stacking-context
+      blend-container: true
+      items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: [10, 20, 30]
+        - type: stacking-context
+          bounds: [0, 0, 100, 100]
+          mix-blend-mode: lighten
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [30, 20, 10]
diff --git a/gfx/wr/wrench/reftests/blend/mix-blend-complex-transform.png b/gfx/wr/wrench/reftests/blend/mix-blend-complex-transform.png
new file mode 100644
index 0000000000..7929f27892
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/mix-blend-complex-transform.png
diff --git a/gfx/wr/wrench/reftests/blend/mix-blend-complex-transform.yaml b/gfx/wr/wrench/reftests/blend/mix-blend-complex-transform.yaml
new file mode 100644
index 0000000000..b713e96c75
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/mix-blend-complex-transform.yaml
@@ -0,0 +1,56 @@
+---
+root:
+  items:
+    - type: stacking-context
+      transform: [
+        1, 0, 0, 0,
+        0.3443276, 1, 0, 0,
+        0, 0, 1, 0,
+        -1822.09131, 0, 0, 1
+      ]
+      bounds: 12 12 0 0
+      items:
+        - type: clip
+          bounds: 0 0 1884 1290
+          id: 2
+        -
+          type: "clip-chain"
+          id: 3
+          clips: [2]
+        - type: stacking-context
+          transform: [
+            1, 0, 0, 0,
+            -0.3443276, 1, 0, 0,
+            0, 0, 1, 0,
+            444.18262, 0, 0, 1
+          ]
+          items:
+            - type: stacking-context
+              clip-chain: 3
+              transform: [
+                1, 0, 0, 0,
+                0.3443276, 1, 0, 0,
+                0, 0, 1, 0,
+                -444.18262, 0, 0, 1
+              ]
+              items:
+                - type: stacking-context
+                  items:
+                    - type: stacking-context
+                      blend-container: true
+                      items:
+                        - type: stacking-context
+                          mix-blend-mode: multiply
+                          items:
+                            - type: stacking-context
+                              bounds: 1436 0 0 0
+                              transform: [
+                                1, 0, 0, 0,
+                                -0.3443276, 1, 0, 0,
+                                0, 0, 1, 0,
+                                444.18262, 0, 0, 1
+                              ]
+                              items:
+                                - type: rect
+                                  color: red
+                                  bounds: 0 0 113.025 1290
diff --git a/gfx/wr/wrench/reftests/blend/mix-blend-invalid-backdrop-ref.yaml b/gfx/wr/wrench/reftests/blend/mix-blend-invalid-backdrop-ref.yaml
new file mode 100644
index 0000000000..1e204cb338
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/mix-blend-invalid-backdrop-ref.yaml
@@ -0,0 +1,6 @@
+---
+root:
+  items:
+    - type: rect
+      bounds: [0, 0, 100, 100]
+      color: red
diff --git a/gfx/wr/wrench/reftests/blend/mix-blend-invalid-backdrop.yaml b/gfx/wr/wrench/reftests/blend/mix-blend-invalid-backdrop.yaml
new file mode 100644
index 0000000000..4a5f97f381
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/mix-blend-invalid-backdrop.yaml
@@ -0,0 +1,33 @@
+# Test that if the parent surface is clipped such that there
+# is no backdrop rect available, no crash occurs and output
+# is as expected (a no-op mix-blend)
+---
+root:
+  items:
+    # Ensure a filter is placed here to force this mix-blend to isolate from
+    # the tile cache backdrop - otherwise the surface won't get clipped, which
+    # is what we're trying to test.
+    - type: stacking-context
+      filters: [identity]
+      items:
+      - type: clip
+        id: 2
+        bounds: [0, 0, 100, 100]
+      -
+        type: "clip-chain"
+        id: 3
+        clips: [2]
+      - type: stacking-context
+        blend-container: true
+        clip-chain: 3
+        items:
+          - type: rect
+            bounds: [0, 0, 100, 100]
+            color: red
+          - type: stacking-context
+            bounds: [100, 0, 100, 100]
+            mix-blend-mode: multiply
+            items:
+              - type: rect
+                bounds: [0, 0, 100, 100]
+                color: green
diff --git a/gfx/wr/wrench/reftests/blend/multi-mix-blend-mode-ref.yaml b/gfx/wr/wrench/reftests/blend/multi-mix-blend-mode-ref.yaml
new file mode 100644
index 0000000000..ae366a09e0
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/multi-mix-blend-mode-ref.yaml
@@ -0,0 +1,14 @@
+---
+root:
+  items:
+    - type: rect
+      bounds: 0 0 800 200
+      color: [255, 0, 0, 1]
+
+    - type: rect
+      bounds: 50 50 100 100
+      color: [255, 255, 0, 1]
+
+    - type: rect
+      bounds: 300 50 400 100
+      color: [255, 0, 255, 1]
diff --git a/gfx/wr/wrench/reftests/blend/multi-mix-blend-mode.yaml b/gfx/wr/wrench/reftests/blend/multi-mix-blend-mode.yaml
new file mode 100644
index 0000000000..d3ba8fcaf0
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/multi-mix-blend-mode.yaml
@@ -0,0 +1,25 @@
+---
+root:
+  items:
+    - type: stacking-context
+      blend-container: true
+      items:
+      - type: rect
+        bounds: 0 0 800 200
+        color: [255, 0, 0, 1]
+
+      - type: stacking-context
+        bounds: 50 50 100 100
+        mix-blend-mode: difference
+        items:
+          - type: rect
+            bounds: 0 0 100 100
+            color: [0, 255, 0, 1]
+
+      - type: stacking-context
+        bounds: 300 50 100 100
+        mix-blend-mode: difference
+        items:
+          - type: rect
+            bounds: 0 0 400 100
+            color: [0, 0, 255, 1]
diff --git a/gfx/wr/wrench/reftests/blend/multiply-2-ref.yaml b/gfx/wr/wrench/reftests/blend/multiply-2-ref.yaml
new file mode 100644
index 0000000000..6d4679a79d
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/multiply-2-ref.yaml
@@ -0,0 +1,6 @@
+---
+root:
+  items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: [0, 128, 0]
diff --git a/gfx/wr/wrench/reftests/blend/multiply-2.yaml b/gfx/wr/wrench/reftests/blend/multiply-2.yaml
new file mode 100644
index 0000000000..0ad1ef35d6
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/multiply-2.yaml
@@ -0,0 +1,16 @@
+---
+root:
+  items:
+    - type: stacking-context
+      blend-container: true
+      items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: [0, 255, 0]
+        - type: stacking-context
+          bounds: [0, 0, 100, 100]
+          mix-blend-mode: multiply
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [255, 128, 0]
diff --git a/gfx/wr/wrench/reftests/blend/multiply-3.yaml b/gfx/wr/wrench/reftests/blend/multiply-3.yaml
new file mode 100644
index 0000000000..05e1aa20f6
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/multiply-3.yaml
@@ -0,0 +1,20 @@
+---
+root:
+  items:
+    - type: stacking-context
+      blend-container: true
+      items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: [0, 255, 0]
+        - type: stacking-context
+          bounds: [0, 0, 100, 100]
+          mix-blend-mode: multiply
+          items:
+            - type: stacking-context
+              bounds: [0, 0, 100, 100]
+              mix-blend-mode: multiply
+              items:
+                - type: rect
+                  bounds: [0, 0, 100, 100]
+                  color: [255, 128, 0]
diff --git a/gfx/wr/wrench/reftests/blend/multiply-ref.yaml b/gfx/wr/wrench/reftests/blend/multiply-ref.yaml
new file mode 100644
index 0000000000..0b9aeed906
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/multiply-ref.yaml
@@ -0,0 +1,6 @@
+---
+root:
+  items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: green
diff --git a/gfx/wr/wrench/reftests/blend/multiply.yaml b/gfx/wr/wrench/reftests/blend/multiply.yaml
new file mode 100644
index 0000000000..f9fa6cbb75
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/multiply.yaml
@@ -0,0 +1,16 @@
+---
+root:
+  items:
+    - type: stacking-context
+      blend-container: true
+      items:
+        - type: rect
+          bounds: [0, 0, 100, 100]
+          color: green
+        - type: stacking-context
+          bounds: [25, 25, 50, 50]
+          mix-blend-mode: multiply
+          items:
+            - type: rect
+              bounds: [0, 0, 50, 50]
+              color: green
diff --git a/gfx/wr/wrench/reftests/blend/raster-roots-1-ref.yaml b/gfx/wr/wrench/reftests/blend/raster-roots-1-ref.yaml
new file mode 100644
index 0000000000..1b0727ccee
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/raster-roots-1-ref.yaml
@@ -0,0 +1,6 @@
+---
+root:
+  items:
+    - type: rect
+      color: black
+      bounds: [0, 100, 100, 100]
diff --git a/gfx/wr/wrench/reftests/blend/raster-roots-1.yaml b/gfx/wr/wrench/reftests/blend/raster-roots-1.yaml
new file mode 100644
index 0000000000..fabb7c5471
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/raster-roots-1.yaml
@@ -0,0 +1,32 @@
+# Verify that when a picture cache is both a raster root and also a blend container,
+# the readback correctly maps to local raster-space, not final device-space.
+---
+root:
+  items:
+    - type: iframe
+      id: [1, 2]
+      bounds: [0, 100, 1000, 1000]
+
+pipelines:
+  - id: [1, 2]
+    items:
+      - type: stacking-context
+        blend-container: true
+        items:
+          - type: scroll-frame
+            bounds: [0, 0, 1000, 1000]
+            content-size: [1000, 10000]
+            items:
+              - type: gradient
+                bounds: [0, 0, 100, 100]
+                start: [0, 0]
+                end: [100, 0]
+                stops: [0.0, [255, 0, 0, 1], 1.0, [0, 255, 0, 1]]
+              - type: stacking-context
+                mix-blend-mode: difference
+                items:
+                  - type: gradient
+                    bounds: [0, 0, 100, 100]
+                    start: [0, 0]
+                    end: [100, 0]
+                    stops: [0.0, [255, 0, 0, 1], 1.0, [0, 255, 0, 1]]
diff --git a/gfx/wr/wrench/reftests/blend/reftest.list b/gfx/wr/wrench/reftests/blend/reftest.list
new file mode 100644
index 0000000000..eee8cc3a01
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/reftest.list
@@ -0,0 +1,32 @@
+== multiply.yaml multiply-ref.yaml
+fuzzy(1,32) == multiply-2.yaml multiply-2-ref.yaml
+fuzzy(1,32) == color_targets(3) alpha_targets(0) multiply-3.yaml multiply-2-ref.yaml
+== difference.yaml difference-ref.yaml
+fuzzy(1,30000) == difference-transparent.yaml difference-transparent-ref.yaml
+fuzzy-if(platform(swgl),1,10000) == darken.yaml darken-ref.yaml
+fuzzy-if(platform(swgl),1,10000) == lighten.yaml lighten-ref.yaml
+
+fuzzy(1,32) == repeated-difference.yaml repeated-difference-ref.yaml
+
+== isolated.yaml isolated-ref.yaml
+fuzzy(3,397) == isolated-2.yaml isolated-2-ref.yaml
+== isolated-with-filter.yaml isolated-ref.yaml
+== isolated-premultiplied.yaml blank.yaml
+== isolated-premultiplied-2.yaml isolated-premultiplied-2-ref.yaml
+
+== large.yaml large-ref.yaml
+
+# fuzzy because dithering is different for gradients
+# drawn in different render targets
+fuzzy(1,2502) == transparent-composite-1.yaml transparent-composite-1-ref.yaml
+fuzzy(1,2502) == transparent-composite-2.yaml transparent-composite-2-ref.yaml
+
+fuzzy(2,420) == multi-mix-blend-mode.yaml multi-mix-blend-mode-ref.yaml
+== mix-blend-invalid-backdrop.yaml mix-blend-invalid-backdrop-ref.yaml
+platform(linux) == mix-blend-complex-transform.yaml mix-blend-complex-transform.png
+== raster-roots-1.yaml raster-roots-1-ref.yaml
+== child-surface.yaml child-surface-ref.yaml
+== blend-overflow.yaml blend-overflow-ref.yaml
+
+== backdrop-filter-blend-container.yaml backdrop-filter-blend-container-ref.yaml
+== backdrop-filter-preceding.yaml backdrop-filter-preceding-ref.yaml
diff --git a/gfx/wr/wrench/reftests/blend/repeated-difference-ref.yaml b/gfx/wr/wrench/reftests/blend/repeated-difference-ref.yaml
new file mode 100644
index 0000000000..30d53325ba
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/repeated-difference-ref.yaml
@@ -0,0 +1,7 @@
+---
+root:
+  items:
+        -
+          bounds: [0, 0, 100, 100]
+          type: rect
+          color: [0, 255, 0]
diff --git a/gfx/wr/wrench/reftests/blend/repeated-difference.yaml b/gfx/wr/wrench/reftests/blend/repeated-difference.yaml
new file mode 100644
index 0000000000..a04e6cb274
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/repeated-difference.yaml
@@ -0,0 +1,31 @@
+---
+root:
+  items:
+    -
+      bounds: [0, 0, 100, 100]
+      type: rect
+      color: [255, 255, 255]
+    - type: stacking-context
+      blend-container: true
+      items:
+      -
+        bounds: [0, 0, 100, 100]
+        type: stacking-context
+        mix-blend-mode: difference
+        items:
+          -
+            bounds: [0, 0, 100, 100]
+            type: rect
+            color: [255, 255, 255]
+          - type: stacking-context
+            blend-container: true
+            items:
+              -
+                bounds: [0, 0, 100, 100]
+                type: stacking-context
+                mix-blend-mode: difference
+                items:
+                  -
+                    bounds: [0, 0, 100, 100]
+                    type: rect
+                    color: [0, 255, 0]
diff --git a/gfx/wr/wrench/reftests/blend/transparent-composite-1-ref.yaml b/gfx/wr/wrench/reftests/blend/transparent-composite-1-ref.yaml
new file mode 100644
index 0000000000..235801c5e1
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/transparent-composite-1-ref.yaml
@@ -0,0 +1,8 @@
+---
+root:
+  items:
+    - type: gradient
+      bounds: [0, 0, 100, 100]
+      start: [0, 0]
+      end: [0, 100]
+      stops: [0.0, [0,0,0,0], 1.0, green]
diff --git a/gfx/wr/wrench/reftests/blend/transparent-composite-1.yaml b/gfx/wr/wrench/reftests/blend/transparent-composite-1.yaml
new file mode 100644
index 0000000000..319b636843
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/transparent-composite-1.yaml
@@ -0,0 +1,12 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 100, 100]
+      mix-blend-mode: darken
+      items:
+        - type: gradient
+          bounds: [0, 0, 100, 100]
+          start: [0, 0]
+          end: [0, 100]
+          stops: [0.0, [0,0,0,0], 1.0, green]
diff --git a/gfx/wr/wrench/reftests/blend/transparent-composite-2-ref.yaml b/gfx/wr/wrench/reftests/blend/transparent-composite-2-ref.yaml
new file mode 100644
index 0000000000..235801c5e1
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/transparent-composite-2-ref.yaml
@@ -0,0 +1,8 @@
+---
+root:
+  items:
+    - type: gradient
+      bounds: [0, 0, 100, 100]
+      start: [0, 0]
+      end: [0, 100]
+      stops: [0.0, [0,0,0,0], 1.0, green]
diff --git a/gfx/wr/wrench/reftests/blend/transparent-composite-2.yaml b/gfx/wr/wrench/reftests/blend/transparent-composite-2.yaml
new file mode 100644
index 0000000000..e064f68f95
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/transparent-composite-2.yaml
@@ -0,0 +1,16 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 100, 100]
+      mix-blend-mode: darken
+      items:
+        - type: stacking-context
+          bounds: [0, 0, 100, 100]
+          mix-blend-mode: darken
+          items:
+            - type: gradient
+              bounds: [0, 0, 100, 100]
+              start: [0, 0]
+              end: [0, 100]
+              stops: [0.0, [0,0,0,0], 1.0, green]
diff --git a/gfx/wr/wrench/reftests/blend/transparent-white.png b/gfx/wr/wrench/reftests/blend/transparent-white.png
new file mode 100644
index 0000000000..6019b2b817
--- /dev/null
+++ b/gfx/wr/wrench/reftests/blend/transparent-white.png