Adding upstream version 110.0.1.upstream/110.0.1upstream

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

48 files changed, 1621 insertions, 0 deletions

diff --git a/gfx/wr/wrench/reftests/scrolling/ancestor-scroll-frames.yaml b/gfx/wr/wrench/reftests/scrolling/ancestor-scroll-frames.yaml
new file mode 100644
index 0000000000..9d5c1d006e
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/ancestor-scroll-frames.yaml
@@ -0,0 +1,37 @@
+# Test that we don't select a nested scroll frame as a scroll root and include
+# primitives that are positioned by ancestors of that scroll root, when creating
+# a tile cache for a blend container. This test will cause a panic in
+# `get_relative_transform_with_face` otherwise.
+---
+root:
+  items:
+    - type: stacking-context
+      blend-container: true
+      items:
+        - type: scroll-frame
+          bounds: [0, 0, 200, 200]
+          content-size: [200, 400]
+          items:
+            - type: stacking-context
+              bounds: [0, 0, 200, 200]
+              transform: rotate(45)
+              items:
+                - type: rect
+                  bounds: [0, 0, 200, 200]
+                  color: red
+        - type: scroll-frame
+          bounds: [200, 0, 400, 200]
+          content-size: [400, 200]
+          items:
+            - type: scroll-frame
+              bounds: [200, 0, 400, 200]
+              content-size: [400, 400]
+              items:
+                - type: rect
+                  bounds: [200, 0, 100, 200]
+                  color: green
+                  backface-visible: true
+                - type: rect
+                  bounds: [300, 0, 100, 200]
+                  color: blue
+                  backface-visible: false
diff --git a/gfx/wr/wrench/reftests/scrolling/blank.yaml b/gfx/wr/wrench/reftests/scrolling/blank.yaml
new file mode 100644
index 0000000000..c4eb3ab673
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/blank.yaml
@@ -0,0 +1,2 @@
+---
+root:
diff --git a/gfx/wr/wrench/reftests/scrolling/clip-and-scroll-property-ref.yaml b/gfx/wr/wrench/reftests/scrolling/clip-and-scroll-property-ref.yaml
new file mode 100644
index 0000000000..a465f412df
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/clip-and-scroll-property-ref.yaml
@@ -0,0 +1,5 @@
+root:
+    items:
+      - type: rect
+        bounds: [0, 0, 200, 200]
+        color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/clip-and-scroll-property.yaml b/gfx/wr/wrench/reftests/scrolling/clip-and-scroll-property.yaml
new file mode 100644
index 0000000000..43352236f5
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/clip-and-scroll-property.yaml
@@ -0,0 +1,33 @@
+---
+root:
+  items:
+    -
+      bounds: [0, 0, 200, 200]
+      type: "stacking-context"
+      "scroll-policy": scrollable
+      items:
+        -
+          bounds: [0, 0, 200, 200]
+          type: clip
+          id: 2
+        - type: clip-chain
+          id: 12
+          clips: [2]
+        # Here we are testing that the clip-chain property applies to
+        # both stacking contexts and items.
+        -
+          bounds: [0, 0, 0, 0]
+          content-size: [200, 200]
+          clip-chain: 12
+          type: "stacking-context"
+          "scroll-policy": scrollable
+          transform: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -100, 0, 0, 1]
+          "transform-style": flat
+          items:
+            -
+              bounds: [100, 0, 200, 200]
+              clip: [-8947849, -8947849, 17895698, 17895698]
+              type: rect
+              color: green
+  id: [0, 0]
+pipelines: []
diff --git a/gfx/wr/wrench/reftests/scrolling/empty-mask-ref.yaml b/gfx/wr/wrench/reftests/scrolling/empty-mask-ref.yaml
new file mode 100644
index 0000000000..aca8ccd66c
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/empty-mask-ref.yaml
@@ -0,0 +1,5 @@
+root:
+  items:
+    - type: rect
+      bounds: [0, 0, 100, 100]
+      color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/empty-mask.yaml b/gfx/wr/wrench/reftests/scrolling/empty-mask.yaml
new file mode 100644
index 0000000000..2fe90d6338
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/empty-mask.yaml
@@ -0,0 +1,20 @@
+root:
+  items:
+    - type: rect
+      bounds: [0, 0, 100, 100]
+      color: green
+    - type: scroll-frame
+      bounds: [0, 0, 100, 100]
+      items:
+        - type: clip
+          id: 2
+          bounds: [0, 0, 0, 0]
+        - type: clip
+          id: 3
+          complex:
+            - rect: [0, 0, 100, 100]
+              radius: 20
+        - type: rect
+          bounds: [0, 0, 500, 500]
+          color: red
+          clip-chain: [2, 3]
diff --git a/gfx/wr/wrench/reftests/scrolling/ext-scroll-offset-1-ref.yaml b/gfx/wr/wrench/reftests/scrolling/ext-scroll-offset-1-ref.yaml
new file mode 100644
index 0000000000..3b8d47e94c
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/ext-scroll-offset-1-ref.yaml
@@ -0,0 +1,10 @@
+root:
+  items:
+    - type: scroll-frame
+      bounds: [0, 0, 100, 100]
+      content-size: [100, 1000]
+      scroll-offset: [0, -50]
+      items:
+        - type: rect
+          color: green
+          bounds: [0, 0, 100, 100]
diff --git a/gfx/wr/wrench/reftests/scrolling/ext-scroll-offset-1.yaml b/gfx/wr/wrench/reftests/scrolling/ext-scroll-offset-1.yaml
new file mode 100644
index 0000000000..7803574bed
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/ext-scroll-offset-1.yaml
@@ -0,0 +1,14 @@
+# Test that items with an external scroll offset in both the
+# scroll node and primitive match up with items that have
+# been scrolled without an external scroll offset.
+root:
+  items:
+    - type: scroll-frame
+      bounds: [0, 0, 100, 100]
+      content-size: [100, 1000]
+      scroll-offset: [0, 0]
+      external-scroll-offset: [0, 50]
+      items:
+        - type: rect
+          color: green
+          bounds: [0, 50, 100, 100]
diff --git a/gfx/wr/wrench/reftests/scrolling/fixed-position-ref.yaml b/gfx/wr/wrench/reftests/scrolling/fixed-position-ref.yaml
new file mode 100644
index 0000000000..aa26387828
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/fixed-position-ref.yaml
@@ -0,0 +1,14 @@
+root:
+  items:
+    - type: rect
+      bounds: [0, 0, 50, 50]
+      color: green
+    - type: rect
+      bounds: [60, 0, 50, 50]
+      color: green
+    - type: rect
+      bounds: [120, 0, 50, 50]
+      color: green
+    - type: rect
+      bounds: [180, 0, 50, 50]
+      color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/fixed-position-scrolling-clip-ref.yaml b/gfx/wr/wrench/reftests/scrolling/fixed-position-scrolling-clip-ref.yaml
new file mode 100644
index 0000000000..eb50353314
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/fixed-position-scrolling-clip-ref.yaml
@@ -0,0 +1,5 @@
+root:
+  items:
+    - type: rect
+      bounds: [10, 10, 50, 50]
+      color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/fixed-position-scrolling-clip.yaml b/gfx/wr/wrench/reftests/scrolling/fixed-position-scrolling-clip.yaml
new file mode 100644
index 0000000000..bdf537409e
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/fixed-position-scrolling-clip.yaml
@@ -0,0 +1,33 @@
+root:
+  items:
+    - type: scroll-frame
+      bounds: [10, 10, 100, 300]
+      content-size: [100, 700]
+      id: 41
+      scroll-offset: [0, 50]
+      items:
+      # The rectangles below should stay in place even when the parent scroll area scrolls,
+      # because they use the root reference frame as their scroll node (fixed position).
+      # On the other hand, the clip item here will scroll with its parent scroll area. Normally
+      # fixed position items  would only be clipped by their reference frame (in this case the
+      # root), but since these items specify an auxiliary clip, they will be clipped by their
+      # sibling clip (42).
+        - type: clip
+          bounds: [10, 60, 50, 50]
+          id: 42
+        - type: clip-chain
+          id: 142
+          clips: [42]
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 50]
+              color: green
+              clip-chain: 142
+              spatial-id: root-reference-frame
+            - type: rect
+              bounds: [0, 50, 100, 50]
+              color: red
+              clip-chain: 142
+              spatial-id: root-reference-frame
diff --git a/gfx/wr/wrench/reftests/scrolling/fixed-position.yaml b/gfx/wr/wrench/reftests/scrolling/fixed-position.yaml
new file mode 100644
index 0000000000..c56f1378cd
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/fixed-position.yaml
@@ -0,0 +1,52 @@
+root:
+  bounds: [0, 0, 1024, 10000]
+  scroll-offset: [0, 100]
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 50, 50]
+      items:
+        # This item should not scroll out of view because it is fixed position.
+        - type: rect
+          bounds: [0, 0, 50, 50]
+          color: green
+          spatial-id: root-reference-frame
+    - type: stacking-context
+      bounds: [0, 0, 50, 50]
+      transform: translate(60, 100)
+      id: 100
+      items:
+        - type: stacking-context
+          bounds: [0, 0, 50, 50]
+          items:
+            # Even though there is a custom clip-scroll ID, it should scroll,
+            # because it is fixed relative to its reference frame. The reference frame
+            # of this stacking context is the stacking context parent because it has
+            # a transformation.
+            - type: rect
+              bounds: [0, 0, 50, 50]
+              color: green
+    - type: stacking-context
+      bounds: [120, 0, 50, 200]
+      transform: translate(0, 0)
+      id: 101
+      items:
+        # This is similar to the previous case, but ensures that this still works
+        # even with an identity transform.
+        - type: stacking-context
+          bounds: [0, 0, 50, 200]
+          items:
+            - type: rect
+              bounds: [0, 100, 50, 50]
+              color: green
+    - type: stacking-context
+      bounds: [180, 0, 50, 200]
+      perspective: 1
+      id: 102
+      items:
+        # This is similar to the previous case, but for perspective.
+        - type: stacking-context
+          bounds: [0, 0, 50, 200]
+          items:
+            - type: rect
+              bounds: [0, 100, 50, 50]
+              color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/mask.png b/gfx/wr/wrench/reftests/scrolling/mask.png
new file mode 100644
index 0000000000..d3cbfe6a63
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/mask.png
diff --git a/gfx/wr/wrench/reftests/scrolling/nested-scroll-offset-ref.yaml b/gfx/wr/wrench/reftests/scrolling/nested-scroll-offset-ref.yaml
new file mode 100644
index 0000000000..c2f0a30710
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/nested-scroll-offset-ref.yaml
@@ -0,0 +1,5 @@
+root:
+  items:
+    - type: rect
+      bounds: [0, 0, 50, 50]
+      color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/nested-scroll-offset.yaml b/gfx/wr/wrench/reftests/scrolling/nested-scroll-offset.yaml
new file mode 100644
index 0000000000..850468f180
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/nested-scroll-offset.yaml
@@ -0,0 +1,16 @@
+root:
+  items:
+    - type: scroll-frame
+      bounds: [0, 0, 500, 500]
+      content-size: [1000, 1000]
+      scroll-offset: [0, 300]
+      items:
+      - type: scroll-frame
+        bounds: [0, 300, 50, 50]
+        items:
+        - type: scroll-frame
+          bounds: [0, 300, 50, 50]
+          items:
+            - type: rect
+              bounds: [0, 300, 50, 50]
+              color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/nested-stickys-ref.yaml b/gfx/wr/wrench/reftests/scrolling/nested-stickys-ref.yaml
new file mode 100644
index 0000000000..869ad7e9e1
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/nested-stickys-ref.yaml
@@ -0,0 +1,11 @@
+root:
+  items:
+    # This is a scroll frame with an out-of-viewport rect that should be pushed into the
+    # viewport by its "bottom" sticky constraint.
+    - type: scroll-frame
+      bounds: [10, 10, 50, 50]
+      content-size: [200, 200]
+      items:
+        - type: rect
+          bounds: [10, 20, 50, 50]
+          color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/nested-stickys.yaml b/gfx/wr/wrench/reftests/scrolling/nested-stickys.yaml
new file mode 100644
index 0000000000..2082bb2576
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/nested-stickys.yaml
@@ -0,0 +1,20 @@
+root:
+  items:
+    - type: scroll-frame
+      bounds: [10, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 30]
+      items:
+      - type: sticky-frame
+        bounds: [10, 30, 50, 50]
+        margin-top: 5
+        vertical-offset-bounds: [0, 500]
+        items:
+        - type: sticky-frame
+          bounds: [10, 30, 50, 50]
+          margin-top: 10
+          vertical-offset-bounds: [0, 500]
+          items:
+          - type: rect
+            bounds: [10, 30, 50, 50]
+            color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/out-of-bounds-scroll-ref.yaml b/gfx/wr/wrench/reftests/scrolling/out-of-bounds-scroll-ref.yaml
new file mode 100644
index 0000000000..eb50353314
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/out-of-bounds-scroll-ref.yaml
@@ -0,0 +1,5 @@
+root:
+  items:
+    - type: rect
+      bounds: [10, 10, 50, 50]
+      color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/out-of-bounds-scroll.yaml b/gfx/wr/wrench/reftests/scrolling/out-of-bounds-scroll.yaml
new file mode 100644
index 0000000000..8c87bd6f5c
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/out-of-bounds-scroll.yaml
@@ -0,0 +1,10 @@
+root:
+  items:
+    - type: scroll-frame
+      bounds: [10, 10, 50, 100]
+      content-size: [50, 200]
+      scroll-offset: [0, 50]
+      items:
+        - type: rect
+          bounds: [10, 60, 50, 50]
+          color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/reftest.list b/gfx/wr/wrench/reftests/scrolling/reftest.list
new file mode 100644
index 0000000000..4a8b074e58
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/reftest.list
@@ -0,0 +1,25 @@
+== empty-mask.yaml empty-mask-ref.yaml
+== fixed-position-scrolling-clip.yaml fixed-position-scrolling-clip-ref.yaml
+== fixed-position.yaml fixed-position-ref.yaml
+== nested-scroll-offset.yaml nested-scroll-offset-ref.yaml
+== out-of-bounds-scroll.yaml out-of-bounds-scroll-ref.yaml
+== root-scroll.yaml root-scroll-ref.yaml
+== scroll-layer.yaml scroll-layer-ref.yaml
+== simple.yaml simple-ref.yaml
+== clip-and-scroll-property.yaml clip-and-scroll-property-ref.yaml
+== translate-nested.yaml translate-nested-ref.yaml
+== sticky.yaml sticky-ref.yaml
+== sticky-nested.yaml sticky-ref.yaml
+== sticky-applied.yaml sticky-applied-ref.yaml
+== sticky-transformed.yaml sticky-transformed-ref.yaml
+== sibling-hidden-clip.yaml sibling-hidden-clip-ref.yaml
+== scale-offsets.yaml scale-offsets-ref.yaml
+== nested-stickys.yaml nested-stickys-ref.yaml
+== viewport-offset.yaml viewport-offset-ref.yaml
+== ext-scroll-offset-1.yaml ext-scroll-offset-1-ref.yaml
+== scroll-frame-order.yaml scroll-frame-order-ref.yaml
+!= ancestor-scroll-frames.yaml blank.yaml
+== scroll-generation-1.yaml scroll-generation-ref.yaml
+== scroll-generation-2.yaml scroll-generation-ref.yaml
+== scroll-generation-3.yaml scroll-generation-ref.yaml
+== scroll-generation-4.yaml scroll-generation-ref.yaml
diff --git a/gfx/wr/wrench/reftests/scrolling/root-scroll-ref.yaml b/gfx/wr/wrench/reftests/scrolling/root-scroll-ref.yaml
new file mode 100644
index 0000000000..d49f063d3a
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/root-scroll-ref.yaml
@@ -0,0 +1,6 @@
+root:
+  bounds: [0, 0, 1024, 10000]
+  items:
+    - type: rect
+      bounds: [10, 10, 50, 50]
+      color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/root-scroll.yaml b/gfx/wr/wrench/reftests/scrolling/root-scroll.yaml
new file mode 100644
index 0000000000..d95c7debe1
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/root-scroll.yaml
@@ -0,0 +1,7 @@
+root:
+  bounds: [0, 0, 1024, 10000]
+  scroll-offset: [0, 100]
+  items:
+    - type: rect
+      bounds: [10, 110, 50, 50]
+      color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/scale-offsets-ref.yaml b/gfx/wr/wrench/reftests/scrolling/scale-offsets-ref.yaml
new file mode 100644
index 0000000000..9276ded8f8
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/scale-offsets-ref.yaml
@@ -0,0 +1,5 @@
+root:
+  items:
+    - type: rect
+      color: green
+      bounds: [50, 50, 50, 50]
diff --git a/gfx/wr/wrench/reftests/scrolling/scale-offsets.yaml b/gfx/wr/wrench/reftests/scrolling/scale-offsets.yaml
new file mode 100644
index 0000000000..b4a93b8c62
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/scale-offsets.yaml
@@ -0,0 +1,18 @@
+# Test that a scroll-frame nested within a scale
+# transform correctly calculates local offsets.
+root:
+  items:
+    - type: stacking-context
+      transform: scale(0.5)
+      items:
+        - type: scroll-frame
+          id: 2
+          bounds: [100, 100, 100, 100]
+          content-size: [260, 260]
+          scroll-offset: [0, 60]
+          clip-to-frame: true
+          items:
+            - type: rect
+              color: green
+              bounds: [100, 100, 260, 260]
+              clip-chain: [2]
diff --git a/gfx/wr/wrench/reftests/scrolling/scroll-frame-order-ref.yaml b/gfx/wr/wrench/reftests/scrolling/scroll-frame-order-ref.yaml
new file mode 100644
index 0000000000..b29d3ba2b8
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/scroll-frame-order-ref.yaml
@@ -0,0 +1,34 @@
+# Tests that scroll frames can be defined and used in any order.
+
+---
+root:
+  items:
+    - type: scroll-frame
+      bounds: [0, 0, 50, 50]
+      content-size: [50, 50]
+      clip-rect: [0, 0, 50, 50]
+      id: 123
+    - type: scroll-frame
+      bounds: [50, 0, 50, 50]
+      content-size: [50, 50]
+      clip-rect: [50, 0, 50, 50]
+      scroll-offset: [0, -25]
+      id: 456
+    - type: scroll-frame
+      bounds: [100, 0, 50, 50]
+      content-size: [50, 50]
+      clip-rect: [100, 0, 50, 50]
+      scroll-offset: [0, -15]
+      id: 789
+    - type: rect
+      bounds: [0, 0, 50, 50]
+      color: red
+      spatial-id: 123
+    - type: rect
+      bounds: [50, 0, 50, 50]
+      color: green
+      spatial-id: 456
+    - type: rect
+      bounds: [100, 0, 50, 50]
+      color: blue
+      spatial-id: 789
diff --git a/gfx/wr/wrench/reftests/scrolling/scroll-frame-order.yaml b/gfx/wr/wrench/reftests/scrolling/scroll-frame-order.yaml
new file mode 100644
index 0000000000..2977c04d95
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/scroll-frame-order.yaml
@@ -0,0 +1,35 @@
+# Tests that scroll frames can be defined and used in any order.
+
+---
+root:
+  items:
+    - type: scroll-frame
+      bounds: [0, 0, 50, 50]
+      content-size: [50, 50]
+      clip-rect: [0, 0, 50, 50]
+      id: 123
+    - type: rect
+      bounds: [0, 0, 50, 50]
+      color: red
+      spatial-id: 123
+    - type: scroll-frame
+      bounds: [50, 0, 50, 50]
+      content-size: [50, 50]
+      clip-rect: [50, 0, 50, 50]
+      scroll-offset: [0, -25]
+      id: 456
+    - type: rect
+      bounds: [50, 0, 50, 50]
+      color: green
+      spatial-id: 456
+    - type: scroll-frame
+      bounds: [100, 0, 50, 50]
+      content-size: [50, 50]
+      clip-rect: [100, 0, 50, 50]
+      scroll-offset: [0, -15]
+      id: 789
+    - type: rect
+      bounds: [100, 0, 50, 50]
+      color: blue
+      spatial-id: 789
+
diff --git a/gfx/wr/wrench/reftests/scrolling/scroll-generation-1.yaml b/gfx/wr/wrench/reftests/scrolling/scroll-generation-1.yaml
new file mode 100644
index 0000000000..8caf080d09
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/scroll-generation-1.yaml
@@ -0,0 +1,18 @@
+# Test that an scroll frame having two different generations' scroll-offsets.
+root:
+  items:
+    - type: scroll-frame
+      bounds: [0, 0, 100, 100]
+      content-size: [100, 1000]
+      scroll-offsets:
+        - offset: [0, 0]
+          generation: 1
+        - offset: [0, -10]
+          generation: 2
+      external-scroll-offset: [0, 50]
+      scroll-generation: 2
+      has-scroll-linked-effect: true
+      items:
+        - type: rect
+          color: green
+          bounds: [0, 50, 100, 100]
diff --git a/gfx/wr/wrench/reftests/scrolling/scroll-generation-2.yaml b/gfx/wr/wrench/reftests/scrolling/scroll-generation-2.yaml
new file mode 100644
index 0000000000..7b48e4f491
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/scroll-generation-2.yaml
@@ -0,0 +1,19 @@
+# Test that an scroll frame having scroll-offsets which don't match the scroll
+# generation on the main-thread.
+root:
+  items:
+    - type: scroll-frame
+      bounds: [0, 0, 100, 100]
+      content-size: [100, 1000]
+      scroll-offsets:
+        - offset: [0, -10]
+          generation: 10
+        - offset: [0, -100]
+          generation: 11
+      external-scroll-offset: [0, 50]
+      scroll-generation: 2
+      has-scroll-linked-effect: true
+      items:
+        - type: rect
+          color: green
+          bounds: [0, 50, 100, 100]
diff --git a/gfx/wr/wrench/reftests/scrolling/scroll-generation-3.yaml b/gfx/wr/wrench/reftests/scrolling/scroll-generation-3.yaml
new file mode 100644
index 0000000000..a52beb8c9c
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/scroll-generation-3.yaml
@@ -0,0 +1,20 @@
+# Test that an scroll frame having an invalid scroll generation on the
+# main-thread. The least scroll generation offset should be used, in this case
+# it's 10th generation.
+root:
+  items:
+    - type: scroll-frame
+      bounds: [0, 0, 100, 100]
+      content-size: [100, 1000]
+      scroll-offsets:
+        - offset: [0, -10]
+          generation: 10
+        - offset: [0, -100]
+          generation: 11
+      external-scroll-offset: [0, 50]
+      scroll-generation: 0
+      has-scroll-linked-effect: true
+      items:
+        - type: rect
+          color: green
+          bounds: [0, 50, 100, 100]
diff --git a/gfx/wr/wrench/reftests/scrolling/scroll-generation-4.yaml b/gfx/wr/wrench/reftests/scrolling/scroll-generation-4.yaml
new file mode 100644
index 0000000000..3c6c1c627b
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/scroll-generation-4.yaml
@@ -0,0 +1,13 @@
+# Test that an scroll frame having no scroll-offsets, this is kinda crash test.
+root:
+  items:
+    - type: scroll-frame
+      bounds: [0, 0, 100, 100]
+      content-size: [100, 1000]
+      external-scroll-offset: [0, 60]
+      scroll-generation: 2
+      has-scroll-linked-effect: true
+      items:
+        - type: rect
+          color: green
+          bounds: [0, 60, 100, 100]
diff --git a/gfx/wr/wrench/reftests/scrolling/scroll-generation-ref.yaml b/gfx/wr/wrench/reftests/scrolling/scroll-generation-ref.yaml
new file mode 100644
index 0000000000..3b2302992a
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/scroll-generation-ref.yaml
@@ -0,0 +1,10 @@
+root:
+  items:
+    - type: scroll-frame
+      bounds: [0, 0, 100, 100]
+      content-size: [100, 1000]
+      external-scroll-offset: [0, 60]
+      items:
+        - type: rect
+          color: green
+          bounds: [0, 60, 100, 100]
diff --git a/gfx/wr/wrench/reftests/scrolling/scroll-layer-ref.yaml b/gfx/wr/wrench/reftests/scrolling/scroll-layer-ref.yaml
new file mode 100644
index 0000000000..c2f0a30710
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/scroll-layer-ref.yaml
@@ -0,0 +1,5 @@
+root:
+  items:
+    - type: rect
+      bounds: [0, 0, 50, 50]
+      color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/scroll-layer.yaml b/gfx/wr/wrench/reftests/scrolling/scroll-layer.yaml
new file mode 100644
index 0000000000..4956672a77
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/scroll-layer.yaml
@@ -0,0 +1,10 @@
+root:
+  items:
+    - type: scroll-frame
+      bounds: [0, 0, 100, 100]
+      content-size: [1000, 1000]
+      scroll-offset: [50, 50]
+      items:
+        - type: rect
+          bounds: [50, 50, 50, 50]
+          color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/sibling-hidden-clip-ref.yaml b/gfx/wr/wrench/reftests/scrolling/sibling-hidden-clip-ref.yaml
new file mode 100644
index 0000000000..f722f6f815
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/sibling-hidden-clip-ref.yaml
@@ -0,0 +1,8 @@
+---
+root:
+  items:
+    - type: rect
+      bounds: [10, 10, 40, 70]
+      color: red
+  id: [0, 0]
+pipelines: []
diff --git a/gfx/wr/wrench/reftests/scrolling/sibling-hidden-clip.yaml b/gfx/wr/wrench/reftests/scrolling/sibling-hidden-clip.yaml
new file mode 100644
index 0000000000..9039a4af0d
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/sibling-hidden-clip.yaml
@@ -0,0 +1,23 @@
+---
+root:
+  items:
+    -
+      bounds: [0, 0, 200, 200]
+      type: "stacking-context"
+      "scroll-policy": scrollable
+      filters: [opacity(0.0)]
+      items:
+        -
+          bounds: [0, 0, 50, 80]
+          type: clip
+          id: 2
+        - type: clip-chain
+          id: 12
+          clips: [2]
+    - type: rect
+      bounds: [10, 10, 100, 100]
+      color: red
+      clip-chain: 12
+
+  id: [0, 0]
+pipelines: []
diff --git a/gfx/wr/wrench/reftests/scrolling/simple-ref.yaml b/gfx/wr/wrench/reftests/scrolling/simple-ref.yaml
new file mode 100644
index 0000000000..cb9ddda07f
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/simple-ref.yaml
@@ -0,0 +1,8 @@
+root:
+  items:
+    - type: rect
+      bounds: [10, 10, 50, 50]
+      color: green
+    - type: rect
+      bounds: [70, 10, 50, 50]
+      color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/simple.yaml b/gfx/wr/wrench/reftests/scrolling/simple.yaml
new file mode 100644
index 0000000000..64a433d83c
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/simple.yaml
@@ -0,0 +1,22 @@
+root:
+  items:
+    - type: scroll-frame
+      id: 2
+      bounds: [10, 10, 50, 50]
+      content-size: [100, 100]
+      clip-to-frame: true
+      items:
+        - type: rect
+          bounds: [10, 10, 500, 500]
+          color: green
+          clip-chain: [2]
+    - type: scroll-frame
+      id: 3
+      bounds: [70, 10, 50, 50]
+      content-size: [100, 100]
+      clip-to-frame: true
+      items:
+        - type: rect
+          bounds: [70, 10, 100, 100]
+          color: green
+          clip-chain: [3]
diff --git a/gfx/wr/wrench/reftests/scrolling/sticky-applied-ref.yaml b/gfx/wr/wrench/reftests/scrolling/sticky-applied-ref.yaml
new file mode 100644
index 0000000000..1dd3973c31
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/sticky-applied-ref.yaml
@@ -0,0 +1,70 @@
+root:
+  items:
+    # Reference images are listed in the same order as the test images -
+    # all the "bottom-sticky" ones are first, grouped together.
+    - type: rect
+      bounds: [10, 10, 50, 50]
+      color: green
+    - type: rect
+      bounds: [10, 70, 50, 40]
+      color: green
+    - type: rect
+      bounds: [10, 130, 50, 50]
+      color: green
+    - type: rect
+      bounds: [10, 190, 50, 50]
+      color: green
+    - type: rect
+      bounds: [10, 255, 50, 45]
+      color: green
+
+    # Top sticky
+    - type: rect
+      bounds: [70, 10, 50, 50]
+      color: green
+    - type: rect
+      bounds: [70, 80, 50, 40]
+      color: green
+    - type: rect
+      bounds: [70, 130, 50, 50]
+      color: green
+    - type: rect
+      bounds: [70, 190, 50, 50]
+      color: green
+    - type: rect
+      bounds: [70, 250, 50, 45]
+      color: green
+
+    # Right sticky
+    - type: rect
+      bounds: [130, 10, 50, 50]
+      color: green
+    - type: rect
+      bounds: [130, 70, 40, 50]
+      color: green
+    - type: rect
+      bounds: [130, 130, 50, 50]
+      color: green
+    - type: rect
+      bounds: [130, 190, 50, 50]
+      color: green
+    - type: rect
+      bounds: [135, 250, 45, 50]
+      color: green
+
+    # Left sticky
+    - type: rect
+      bounds: [190, 10, 50, 50]
+      color: green
+    - type: rect
+      bounds: [200, 70, 40, 50]
+      color: green
+    - type: rect
+      bounds: [190, 130, 50, 50]
+      color: green
+    - type: rect
+      bounds: [190, 190, 50, 50]
+      color: green
+    - type: rect
+      bounds: [190, 250, 45, 50]
+      color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/sticky-applied.yaml b/gfx/wr/wrench/reftests/scrolling/sticky-applied.yaml
new file mode 100644
index 0000000000..21a9dc4743
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/sticky-applied.yaml
@@ -0,0 +1,367 @@
+root:
+  items:
+    # Tests sticky-positioned items with previously-applied-offsets.
+
+    # This item is bottom-sticky; we indicate to WR that it already has had
+    # a sticky offset of y=-50 applied, and then scroll down by 50 pixels. WR
+    # should unapply the entire 50px that was applied, and leave the rect
+    # visually in the same spot.
+    - type: scroll-frame
+      id: 2
+      bounds: [10, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 50]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [10, 10, 50, 50]
+        margin-bottom: 0
+        vertical-offset-bounds: [-500, 0]
+        previously-applied-offset: [0, -50]
+        items:
+        - type: rect
+          bounds: [10, 10, 50, 50]
+          color: green
+          clip-chain: [2]
+    # Same as above, but this time we only indicate a previous-applied-offset
+    # of 40 pixels, so that's the maximum WR will unapply
+    - type: scroll-frame
+      id: 3
+      bounds: [10, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 50]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [10, 70, 50, 50]
+        margin-bottom: 0
+        vertical-offset-bounds: [-500, 0]
+        previously-applied-offset: [0, -40]
+        items:
+        - type: rect
+          bounds: [10, 70, 50, 50]
+          color: green
+          clip-chain: [3]
+    # This time we indicate a previously-applied-offset of 50 pixels, but only
+    # scroll by 40 pixels. In this case 40 of the 50 applied-offset pixels will
+    # be unapplied
+    - type: scroll-frame
+      id: 4
+      bounds: [10, 130, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 40]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [10, 130, 50, 50]
+        margin-bottom: 0
+        vertical-offset-bounds: [-500, 0]
+        previously-applied-offset: [0, -50]
+        items:
+        - type: rect
+          bounds: [10, 130, 50, 50]
+          color: green
+          clip-chain: [4]
+    # Here we indicate a previously-applied-offset of 50 pixels, but continue
+    # scrolling in WR in the same direction by another 10 pixels. This effectively
+    # increases the applied offset to 60 pixels.
+    - type: scroll-frame
+      id: 5
+      bounds: [10, 190, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, -10]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [10, 190, 50, 50]
+        margin-bottom: 0
+        vertical-offset-bounds: [-500, 0]
+        previously-applied-offset: [0, -50]
+        items:
+        - type: rect
+          bounds: [10, 190, 50, 50]
+          color: green
+          clip-chain: [5]
+    # Same as previous case, but this time with the vertical-offset-bounds
+    # adjusted to limit the applied offset to only 55 pixels.
+    - type: scroll-frame
+      id: 6
+      bounds: [10, 250, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, -10]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [10, 250, 50, 50]
+        margin-bottom: 0
+        vertical-offset-bounds: [-55, 0]
+        previously-applied-offset: [0, -50]
+        items:
+        - type: rect
+          bounds: [10, 250, 50, 50]
+          color: green
+          clip-chain: [6]
+
+    # Repeat all the above cases, for top-sticky
+
+    - type: scroll-frame
+      id: 7
+      bounds: [70, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, -50]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [70, 10, 50, 50]
+        margin-top: 0
+        vertical-offset-bounds: [0, 500]
+        previously-applied-offset: [0, 50]
+        items:
+        - type: rect
+          bounds: [70, 10, 50, 50]
+          color: green
+          clip-chain: [7]
+    - type: scroll-frame
+      id: 8
+      bounds: [70, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, -50]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [70, 70, 50, 50]
+        margin-top: 0
+        vertical-offset-bounds: [0, 500]
+        previously-applied-offset: [0, 40]
+        items:
+        - type: rect
+          bounds: [70, 70, 50, 50]
+          color: green
+          clip-chain: [8]
+    - type: scroll-frame
+      id: 9
+      bounds: [70, 130, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, -40]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [70, 130, 50, 50]
+        margin-top: 0
+        vertical-offset-bounds: [0, 500]
+        previously-applied-offset: [0, 50]
+        items:
+        - type: rect
+          bounds: [70, 130, 50, 50]
+          color: green
+          clip-chain: [9]
+    - type: scroll-frame
+      id: 10
+      bounds: [70, 190, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 10]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [70, 190, 50, 50]
+        margin-top: 0
+        vertical-offset-bounds: [0, 500]
+        previously-applied-offset: [0, 50]
+        items:
+        - type: rect
+          bounds: [70, 190, 50, 50]
+          color: green
+          clip-chain: [10]
+    - type: scroll-frame
+      id: 11
+      bounds: [70, 250, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 10]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [70, 250, 50, 50]
+        margin-top: 0
+        vertical-offset-bounds: [0, 55]
+        previously-applied-offset: [0, 50]
+        items:
+        - type: rect
+          bounds: [70, 250, 50, 50]
+          color: green
+          clip-chain: [11]
+
+    # Repeat all the above cases, for right-sticky
+
+    - type: scroll-frame
+      id: 12
+      bounds: [130, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [50, 0]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [130, 10, 50, 50]
+        margin-right: 0
+        horizontal-offset-bounds: [-500, 0]
+        previously-applied-offset: [-50, 0]
+        items:
+        - type: rect
+          bounds: [130, 10, 50, 50]
+          color: green
+          clip-chain: [12]
+    - type: scroll-frame
+      id: 13
+      bounds: [130, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [50, 0]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [130, 70, 50, 50]
+        margin-right: 0
+        horizontal-offset-bounds: [-500, 0]
+        previously-applied-offset: [-40, 0]
+        items:
+        - type: rect
+          bounds: [130, 70, 50, 50]
+          color: green
+          clip-chain: [13]
+    - type: scroll-frame
+      id: 14
+      bounds: [130, 130, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [40, 0]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [130, 130, 50, 50]
+        margin-right: 0
+        horizontal-offset-bounds: [-500, 0]
+        previously-applied-offset: [-50, 0]
+        items:
+        - type: rect
+          bounds: [130, 130, 50, 50]
+          color: green
+          clip-chain: [14]
+    - type: scroll-frame
+      id: 15
+      bounds: [130, 190, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [-10, 0]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [130, 190, 50, 50]
+        margin-right: 0
+        horizontal-offset-bounds: [-500, 0]
+        previously-applied-offset: [-50, 0]
+        items:
+        - type: rect
+          bounds: [130, 190, 50, 50]
+          color: green
+          clip-chain: [15]
+    - type: scroll-frame
+      id: 16
+      bounds: [130, 250, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [-10, 0]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [130, 250, 50, 50]
+        margin-right: 0
+        horizontal-offset-bounds: [-55, 0]
+        previously-applied-offset: [-50, 0]
+        items:
+        - type: rect
+          bounds: [130, 250, 50, 50]
+          color: green
+          clip-chain: [16]
+
+    # Repeat all the above cases, for left-sticky
+
+    - type: scroll-frame
+      id: 17
+      bounds: [190, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [-50, 0]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [190, 10, 50, 50]
+        margin-left: 0
+        horizontal-offset-bounds: [0, 500]
+        previously-applied-offset: [50, 0]
+        items:
+        - type: rect
+          bounds: [190, 10, 50, 50]
+          color: green
+          clip-chain: [17]
+    - type: scroll-frame
+      id: 18
+      bounds: [190, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [-50, 0]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [190, 70, 50, 50]
+        margin-left: 0
+        horizontal-offset-bounds: [0, 500]
+        previously-applied-offset: [40, 0]
+        items:
+        - type: rect
+          bounds: [190, 70, 50, 50]
+          color: green
+          clip-chain: [18]
+    - type: scroll-frame
+      id: 19
+      bounds: [190, 130, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [-40, 0]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [190, 130, 50, 50]
+        margin-left: 0
+        horizontal-offset-bounds: [0, 500]
+        previously-applied-offset: [50, 0]
+        items:
+        - type: rect
+          bounds: [190, 130, 50, 50]
+          color: green
+          clip-chain: [19]
+    - type: scroll-frame
+      id: 20
+      bounds: [190, 190, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [10, 0]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [190, 190, 50, 50]
+        margin-left: 0
+        horizontal-offset-bounds: [0, 500]
+        previously-applied-offset: [50, 0]
+        items:
+        - type: rect
+          bounds: [190, 190, 50, 50]
+          color: green
+          clip-chain: [20]
+    - type: scroll-frame
+      id: 21
+      bounds: [190, 250, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [10, 0]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [190, 250, 50, 50]
+        margin-left: 0
+        horizontal-offset-bounds: [0, 55]
+        previously-applied-offset: [50, 0]
+        items:
+        - type: rect
+          bounds: [190, 250, 50, 50]
+          color: green
+          clip-chain: [21]
diff --git a/gfx/wr/wrench/reftests/scrolling/sticky-nested.yaml b/gfx/wr/wrench/reftests/scrolling/sticky-nested.yaml
new file mode 100644
index 0000000000..aa4b655e58
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/sticky-nested.yaml
@@ -0,0 +1,257 @@
+root:
+  items:
+    # This is a scroll frame with an out-of-viewport rect that should be pushed into the
+    # viewport by its "bottom" sticky constraint.
+    - type: scroll-frame
+      id: 2
+      bounds: [10, 10, 50, 50]
+      content-size: [200, 200]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [10, 60, 50, 50]
+        margin-bottom: 0
+        vertical-offset-bounds: [-500, 0]
+        items:
+        - type: clip
+          id: 22
+          bounds: [10, 60, 50, 50]
+          content-size: [100, 100]
+        - type: rect
+          bounds: [10, 60, 50, 50]
+          color: green
+          clip-chain: [2, 22]
+    # Do the same thing, but now for the "top" constraint.
+    - type: scroll-frame
+      id: 3
+      bounds: [70, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 50]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [70, 10, 50, 50]
+        margin-top: 0
+        vertical-offset-bounds: [0, 500]
+        items:
+        - type: clip
+          id: 23
+          bounds: [70, 10, 50, 50]
+          content-size: [100, 100]
+        - type: rect
+          bounds: [70, 10, 50, 50]
+          color: green
+          clip-chain: [3, 23]
+    # Do the same thing, but now for the "right" constraint.
+    - type: scroll-frame
+      id: 4
+      bounds: [10, 70, 50, 50]
+      content-size: [200, 200]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [60, 70, 50, 50]
+        margin-right: 0
+        horizontal-offset-bounds: [-500, 0]
+        items:
+        - type: clip
+          id: 24
+          bounds: [60, 70, 50, 50]
+          content-size: [100, 100]
+        - type: rect
+          bounds: [60, 70, 50, 50]
+          color: green
+          clip-chain: [4, 24]
+    # Do the same thing, but now for the "left" constraint.
+    - type: scroll-frame
+      id: 5
+      bounds: [70, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [50, 0]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [70, 70, 50, 50]
+        margin-left: 0
+        horizontal-offset-bounds: [0, 500]
+        items:
+        - type: clip
+          id: 25
+          bounds: [70, 70, 50, 50]
+          content-size: [100, 100]
+        - type: rect
+          bounds: [70, 70, 50, 50]
+          color: green
+          clip-chain: [5, 25]
+
+    # The same tests, but this time with a margin.
+    - type: scroll-frame
+      id: 6
+      bounds: [130, 10, 50, 50]
+      content-size: [200, 200]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [130, 60, 50, 50]
+        margin-bottom: 10
+        vertical-offset-bounds: [-500, 0]
+        items:
+        - type: clip
+          id: 26
+          bounds: [130, 60, 50, 50]
+          content-size: [100, 100]
+        - type: rect
+          bounds: [130, 60, 50, 50]
+          color: green
+          clip-chain: [6, 26]
+
+    # Do the same thing, but now for the "top" constraint.
+    - type: scroll-frame
+      id: 7
+      bounds: [190, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 50]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [190, 10, 50, 50]
+        margin-top: 10
+        vertical-offset-bounds: [0, 500]
+        items:
+        - type: clip
+          id: 27
+          bounds: [190, 10, 50, 50]
+          content-size: [100, 100]
+        - type: rect
+          bounds: [190, 10, 50, 50]
+          color: green
+          clip-chain: [7, 27]
+
+    # Do the same thing, but now for the "right" constraint.
+    - type: scroll-frame
+      id: 8
+      bounds: [130, 70, 50, 50]
+      content-size: [200, 200]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [180, 70, 50, 50]
+        margin-right: 10
+        horizontal-offset-bounds: [-500, 0]
+        items:
+        - type: clip
+          id: 28
+          bounds: [180, 70, 50, 50]
+          content-size: [100, 100]
+        - type: rect
+          bounds: [180, 70, 50, 50]
+          color: green
+          clip-chain: [8, 28]
+
+    # Do the same thing, but now for the "left" constraint.
+    - type: scroll-frame
+      id: 9
+      bounds: [190, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [50, 0]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [190, 70, 50, 50]
+        margin-left: 10
+        horizontal-offset-bounds: [0, 500]
+        items:
+        - type: clip
+          id: 29
+          bounds: [190, 70, 50, 50]
+          content-size: [100, 100]
+        - type: rect
+          bounds: [190, 70, 50, 50]
+          color: green
+          clip-chain: [9, 29]
+
+    # The same tests, but this time with a limit.
+    - type: scroll-frame
+      id: 10
+      bounds: [250, 10, 50, 50]
+      content-size: [200, 200]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [250, 60, 50, 50]
+        margin-bottom: 0
+        vertical-offset-bounds: [-25, 0]
+        items:
+        - type: clip
+          id: 30
+          bounds: [250, 60, 50, 50]
+          content-size: [100, 100]
+        - type: rect
+          bounds: [250, 60, 50, 50]
+          color: green
+          clip-chain: [10, 30]
+
+    # Do the same thing, but now for the "top" constraint.
+    - type: scroll-frame
+      id: 11
+      bounds: [310, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 50]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [310, 10, 50, 50]
+        margin-top: 0
+        vertical-offset-bounds: [0, 25]
+        items:
+        - type: clip
+          bounds: [310, 10, 50, 50]
+          content-size: [100, 100]
+          id: 31
+        - type: rect
+          bounds: [310, 10, 50, 50]
+          color: green
+          clip-chain: [11, 31]
+
+    # Do the same thing, but now for the "right" constraint.
+    - type: scroll-frame
+      id: 12
+      bounds: [250, 70, 50, 50]
+      content-size: [200, 200]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [300, 70, 50, 50]
+        margin-right: 0
+        horizontal-offset-bounds: [-25, 0]
+        items:
+        - type: clip
+          id: 32
+          bounds: [300, 70, 50, 50]
+          content-size: [100, 100]
+        - type: rect
+          bounds: [300, 70, 50, 50]
+          color: green
+          clip-chain: [12, 32]
+
+    # Do the same thing, but now for the "left" constraint.
+    - type: scroll-frame
+      id: 13
+      bounds: [310, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [50, 0]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [310, 70, 50, 50]
+        margin-left: 0
+        horizontal-offset-bounds: [0, 25]
+        items:
+        - type: clip
+          id: 33
+          bounds: [310, 70, 50, 50]
+          content-size: [100, 100]
+        - type: rect
+          bounds: [310, 70, 50, 50]
+          color: green
+          clip-chain: [13, 33]
diff --git a/gfx/wr/wrench/reftests/scrolling/sticky-ref.yaml b/gfx/wr/wrench/reftests/scrolling/sticky-ref.yaml
new file mode 100644
index 0000000000..0f7b7b79a6
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/sticky-ref.yaml
@@ -0,0 +1,40 @@
+root:
+  items:
+    - type: rect
+      bounds: [10, 10, 50, 50]
+      color: green
+    - type: rect
+      bounds: [10, 70, 50, 50]
+      color: green
+    - type: rect
+      bounds: [70, 10, 50, 50]
+      color: green
+    - type: rect
+      bounds: [70, 70, 50, 50]
+      color: green
+
+    - type: rect
+      bounds: [130, 10, 50, 40]
+      color: green
+    - type: rect
+      bounds: [130, 70, 40, 50]
+      color: green
+    - type: rect
+      bounds: [190, 20, 50, 40]
+      color: green
+    - type: rect
+      bounds: [200, 70, 40, 50]
+      color: green
+
+    - type: rect
+      bounds: [250, 35, 50, 25]
+      color: green
+    - type: rect
+      bounds: [275, 70, 25, 50]
+      color: green
+    - type: rect
+      bounds: [310, 10, 50, 25]
+      color: green
+    - type: rect
+      bounds: [310, 70, 25, 50]
+      color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/sticky-transformed-ref.yaml b/gfx/wr/wrench/reftests/scrolling/sticky-transformed-ref.yaml
new file mode 100644
index 0000000000..9849a3f3d8
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/sticky-transformed-ref.yaml
@@ -0,0 +1,5 @@
+root:
+  items:
+    - type: rect
+      bounds: [10, 30, 10, 10]
+      color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/sticky-transformed.yaml b/gfx/wr/wrench/reftests/scrolling/sticky-transformed.yaml
new file mode 100644
index 0000000000..0144a7c1c3
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/sticky-transformed.yaml
@@ -0,0 +1,21 @@
+root:
+  items:
+    # There is a new reference frame introduced between the scrollframe and
+    # the sticky item. This tests that the sticky item is still positioned
+    # correctly.
+    - type: scroll-frame
+      bounds: [10, 10, 50, 50]
+      content-size: [200, 200]
+      items:
+      - type: stacking-context
+        bounds: [10, 20, 10, 10]
+        transform: translate(0, 10)
+        items:
+        - type: sticky-frame
+          bounds: [0, 0, 10, 10]
+          margin-top: 10
+          vertical-offset-bounds: [0, 200]
+          items:
+          - type: rect
+            bounds: [0, 0, 10, 10]
+            color: green
diff --git a/gfx/wr/wrench/reftests/scrolling/sticky.yaml b/gfx/wr/wrench/reftests/scrolling/sticky.yaml
new file mode 100644
index 0000000000..87480e0751
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/sticky.yaml
@@ -0,0 +1,203 @@
+root:
+  items:
+    # This is a scroll frame with an out-of-viewport rect that should be pushed into the
+    # viewport by its "bottom" sticky constraint.
+    - type: scroll-frame
+      id: 2
+      bounds: [10, 10, 50, 50]
+      content-size: [200, 200]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [10, 60, 50, 50]
+        margin-bottom: 0
+        vertical-offset-bounds: [-500, 0]
+        items:
+        - type: rect
+          bounds: [10, 60, 50, 50]
+          color: green
+          clip-chain: [2]
+    # Do the same thing, but now for the "top" constraint.
+    - type: scroll-frame
+      id: 3
+      bounds: [70, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 50]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [70, 10, 50, 50]
+        margin-top: 0
+        vertical-offset-bounds: [0, 500]
+        items:
+        - type: rect
+          bounds: [70, 10, 50, 50]
+          color: green
+          clip-chain: [3]
+    # Do the same thing, but now for the "right" constraint.
+    - type: scroll-frame
+      id: 4
+      bounds: [10, 70, 50, 50]
+      content-size: [200, 200]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [60, 70, 50, 50]
+        margin-right: 0
+        horizontal-offset-bounds: [-500, 0]
+        items:
+        - type: rect
+          bounds: [60, 70, 50, 50]
+          color: green
+          clip-chain: [4]
+    # Do the same thing, but now for the "left" constraint.
+    - type: scroll-frame
+      id: 5
+      bounds: [70, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [50, 0]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [70, 70, 50, 50]
+        margin-left: 0
+        horizontal-offset-bounds: [0, 500]
+        items:
+        - type: rect
+          bounds: [70, 70, 50, 50]
+          color: green
+          clip-chain: [5]
+
+    # The same tests, but this time with a margin.
+    - type: scroll-frame
+      id: 6
+      bounds: [130, 10, 50, 50]
+      content-size: [200, 200]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [130, 60, 50, 50]
+        margin-bottom: 10
+        vertical-offset-bounds: [-500, 0]
+        items:
+        - type: rect
+          bounds: [130, 60, 50, 50]
+          color: green
+          clip-chain: [6]
+    # Do the same thing, but now for the "top" constraint.
+    - type: scroll-frame
+      id: 7
+      bounds: [190, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 50]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [190, 10, 50, 50]
+        margin-top: 10
+        vertical-offset-bounds: [0, 500]
+        items:
+        - type: rect
+          bounds: [190, 10, 50, 50]
+          color: green
+          clip-chain: [7]
+    # Do the same thing, but now for the "right" constraint.
+    - type: scroll-frame
+      id: 8
+      bounds: [130, 70, 50, 50]
+      content-size: [200, 200]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [180, 70, 50, 50]
+        margin-right: 10
+        horizontal-offset-bounds: [-500, 0]
+        items:
+        - type: rect
+          bounds: [180, 70, 50, 50]
+          color: green
+          clip-chain: [8]
+    # Do the same thing, but now for the "left" constraint.
+    - type: scroll-frame
+      id: 9
+      bounds: [190, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [50, 0]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [190, 70, 50, 50]
+        margin-left: 10
+        horizontal-offset-bounds: [0, 500]
+        items:
+        - type: rect
+          bounds: [190, 70, 50, 50]
+          color: green
+          clip-chain: [9]
+
+    # The same tests, but this time with a limit.
+    - type: scroll-frame
+      id: 10
+      bounds: [250, 10, 50, 50]
+      content-size: [200, 200]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [250, 60, 50, 50]
+        margin-bottom: 0
+        vertical-offset-bounds: [-25, 0]
+        items:
+        - type: rect
+          bounds: [250, 60, 50, 50]
+          color: green
+          clip-chain: [10]
+    # Do the same thing, but now for the "top" constraint.
+    - type: scroll-frame
+      id: 11
+      bounds: [310, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 50]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [310, 10, 50, 50]
+        margin-top: 0
+        vertical-offset-bounds: [0, 25]
+        items:
+        - type: rect
+          bounds: [310, 10, 50, 50]
+          color: green
+          clip-chain: [11]
+    # Do the same thing, but now for the "right" constraint.
+    - type: scroll-frame
+      id: 12
+      bounds: [250, 70, 50, 50]
+      content-size: [200, 200]
+      clip-to-frame: true
+      items:
+      - type: sticky-frame
+        bounds: [300, 70, 50, 50]
+        margin-right: 0
+        horizontal-offset-bounds: [-25, 0]
+        items:
+        - type: rect
+          bounds: [300, 70, 50, 50]
+          color: green
+          clip-chain: [12]
+    # Do the same thing, but now for the "left" constraint.
+    - type: scroll-frame
+      id: 13
+      bounds: [310, 70, 50, 50]
+      content-size: [200, 200]
+      clip-to-frame: true
+      scroll-offset: [50, 0]
+      items:
+      - type: sticky-frame
+        bounds: [310, 70, 50, 50]
+        margin-left: 0
+        horizontal-offset-bounds: [0, 25]
+        items:
+        - type: rect
+          bounds: [310, 70, 50, 50]
+          color: green
+          clip-chain: [13]
diff --git a/gfx/wr/wrench/reftests/scrolling/translate-nested-ref.yaml b/gfx/wr/wrench/reftests/scrolling/translate-nested-ref.yaml
new file mode 100644
index 0000000000..f9f6c68209
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/translate-nested-ref.yaml
@@ -0,0 +1,14 @@
+---
+root: 
+  items: 
+    - 
+      bounds: [8, 8, 500, 500]
+      clip: [0, 0, 0, 0]
+      type: "stacking-context"
+      items: 
+        - 
+          bounds: [0, 0, 200, 200]
+          type: rect
+          color: green
+  id: [0, 0]
+pipelines: []
diff --git a/gfx/wr/wrench/reftests/scrolling/translate-nested.yaml b/gfx/wr/wrench/reftests/scrolling/translate-nested.yaml
new file mode 100644
index 0000000000..3920dda414
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/translate-nested.yaml
@@ -0,0 +1,29 @@
+---
+root:
+  items:
+    -
+      bounds: [8, 8, 500, 500]
+      type: "stacking-context"
+      items:
+        -
+          bounds: [0, 0, 200, 200]
+          type: clip
+          id: 2
+        -
+          bounds: [0, 0, 200, 200]
+          type: rect
+          color: red
+          clip-chain: [2]
+        -
+          bounds: [0, 0, 200, 200]
+          type: "stacking-context"
+          transform: translate(100, 0)
+          items:
+            -
+              bounds: [-100, 0, 200, 200]
+              clip-rect: [-300, -300, 900, 900]
+              type: rect
+              color: green
+              clip-chain: [2]
+  id: [0, 0]
+pipelines: []
diff --git a/gfx/wr/wrench/reftests/scrolling/viewport-offset-ref.yaml b/gfx/wr/wrench/reftests/scrolling/viewport-offset-ref.yaml
new file mode 100644
index 0000000000..b7d697e4e0
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/viewport-offset-ref.yaml
@@ -0,0 +1,9 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: 0 0 0 0
+      items:
+        - type: rect
+          color: red
+          bounds: 0 100 1000 50
diff --git a/gfx/wr/wrench/reftests/scrolling/viewport-offset.yaml b/gfx/wr/wrench/reftests/scrolling/viewport-offset.yaml
new file mode 100644
index 0000000000..171e69a63d
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/viewport-offset.yaml
@@ -0,0 +1,23 @@
+# The test assures that the viewport offset is correctly getting
+# the reference_frame_relative_offset applied when flattening
+# a scroll frame.
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: 0 100 0 0
+      items:
+        - type: scroll-frame
+          id: 2
+          bounds: 0 0 1000 1000
+          clip-to-frame: true
+          items:
+            - type: sticky-frame
+              bounds: 0 -50 1000 50
+              margin-top: -50
+              vertical-offset-bounds: [0, 2000]
+              items:
+                 - type: rect
+                   bounds: 0 -50 1000 100
+                   color: red
+                   clip-chain: [2]