Adding upstream version 86.0.1.upstream/86.0.1upstream

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

41 files changed, 1337 insertions, 0 deletions

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..ed72c23fce
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/clip-and-scroll-property.yaml
@@ -0,0 +1,30 @@
+---
+root:
+  items:
+    -
+      bounds: [0, 0, 200, 200]
+      type: "stacking-context"
+      "scroll-policy": scrollable
+      items:
+        -
+          bounds: [0, 0, 200, 200]
+          type: clip
+          id: 2
+        # Here we are testing that the clip-and-scroll property applies to
+        # both stacking contexts and items.
+        -
+          bounds: [0, 0, 0, 0]
+          content-size: [200, 200]
+          clip-and-scroll: 2
+          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..69378dd5ad
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/empty-mask.yaml
@@ -0,0 +1,18 @@
+root:
+  items:
+    - type: rect
+      bounds: [0, 0, 100, 100]
+      color: green
+    - type: scroll-frame
+      bounds: [0, 0, 100, 100]
+      items:
+        - type: clip
+          bounds: [0, 0, 0, 0]
+          content-size: [100, 100]
+          complex:
+            - rect: [0, 0, 100, 100]
+              radius: 20
+          items:
+           - type: rect
+             bounds: [0, 0, 500, 500]
+             color: red
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..63573e5742
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/fixed-position-scrolling-clip.yaml
@@ -0,0 +1,28 @@
+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: stacking-context
+          bounds: [10, 10, 100, 100]
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 50]
+              color: green
+              clip-and-scroll: [root-reference-frame, 42]
+            - type: rect
+              bounds: [0, 50, 100, 50]
+              color: red
+              clip-and-scroll: [root-reference-frame, 42]
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..6fa099b5e3
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/fixed-position.yaml
@@ -0,0 +1,55 @@
+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
+          clip-and-scroll: 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
+              clip-and-scroll: 100
+    - 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
+              clip-and-scroll: 101
+    - 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
+              clip-and-scroll: 102
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..58638d277c
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/reftest.list
@@ -0,0 +1,21 @@
+== 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
+
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..fe4cf74131
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/scale-offsets.yaml
@@ -0,0 +1,15 @@
+# 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
+          bounds: [100, 100, 100, 100]
+          content-size: [260, 260]
+          scroll-offset: [0, 60]
+          items:
+            - type: rect
+              color: green
+              bounds: [100, 100, 260, 260]
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..5429d052db
--- /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
+      clip-and-scroll: 123
+    - type: rect
+      bounds: [50, 0, 50, 50]
+      color: green
+      clip-and-scroll: 456
+    - type: rect
+      bounds: [100, 0, 50, 50]
+      color: blue
+      clip-and-scroll: 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..1801dbb08a
--- /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
+      clip-and-scroll: 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
+      clip-and-scroll: 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
+      clip-and-scroll: 789
+
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..74b735d32a
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/sibling-hidden-clip.yaml
@@ -0,0 +1,20 @@
+---
+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: rect
+      bounds: [10, 10, 100, 100]
+      color: red
+      clip-and-scroll: 2
+
+  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..b8061dfca9
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/simple.yaml
@@ -0,0 +1,16 @@
+root:
+  items:
+    - type: scroll-frame
+      bounds: [10, 10, 50, 50]
+      content-size: [100, 100]
+      items:
+        - type: rect
+          bounds: [10, 10, 500, 500]
+          color: green
+    - type: scroll-frame
+      bounds: [70, 10, 50, 50]
+      content-size: [100, 100]
+      items:
+        - type: rect
+          bounds: [70, 10, 100, 100]
+          color: green
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..c5ca4ad3c7
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/sticky-applied.yaml
@@ -0,0 +1,307 @@
+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
+      bounds: [10, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 50]
+      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
+    # 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
+      bounds: [10, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 50]
+      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
+    # 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
+      bounds: [10, 130, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 40]
+      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
+    # 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
+      bounds: [10, 190, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, -10]
+      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
+    # 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
+      bounds: [10, 250, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, -10]
+      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
+
+    # Repeat all the above cases, for top-sticky
+
+    - type: scroll-frame
+      bounds: [70, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, -50]
+      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
+    - type: scroll-frame
+      bounds: [70, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, -50]
+      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
+    - type: scroll-frame
+      bounds: [70, 130, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, -40]
+      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
+    - type: scroll-frame
+      bounds: [70, 190, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 10]
+      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
+    - type: scroll-frame
+      bounds: [70, 250, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 10]
+      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
+
+    # Repeat all the above cases, for right-sticky
+
+    - type: scroll-frame
+      bounds: [130, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [50, 0]
+      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
+    - type: scroll-frame
+      bounds: [130, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [50, 0]
+      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
+    - type: scroll-frame
+      bounds: [130, 130, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [40, 0]
+      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
+    - type: scroll-frame
+      bounds: [130, 190, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [-10, 0]
+      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
+    - type: scroll-frame
+      bounds: [130, 250, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [-10, 0]
+      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
+
+    # Repeat all the above cases, for left-sticky
+
+    - type: scroll-frame
+      bounds: [190, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [-50, 0]
+      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
+    - type: scroll-frame
+      bounds: [190, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [-50, 0]
+      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
+    - type: scroll-frame
+      bounds: [190, 130, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [-40, 0]
+      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
+    - type: scroll-frame
+      bounds: [190, 190, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [10, 0]
+      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
+    - type: scroll-frame
+      bounds: [190, 250, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [10, 0]
+      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
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..d52821efeb
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/sticky-nested.yaml
@@ -0,0 +1,215 @@
+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: sticky-frame
+        bounds: [10, 60, 50, 50]
+        margin-bottom: 0
+        vertical-offset-bounds: [-500, 0]
+        items:
+        - type: clip
+          bounds: [10, 60, 50, 50]
+          content-size: [100, 100]
+          items:
+          - type: rect
+            bounds: [10, 60, 50, 50]
+            color: green
+    # Do the same thing, but now for the "top" constraint.
+    - type: scroll-frame
+      bounds: [70, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 50]
+      items:
+      - type: sticky-frame
+        bounds: [70, 10, 50, 50]
+        margin-top: 0
+        vertical-offset-bounds: [0, 500]
+        items:
+        - type: clip
+          bounds: [70, 10, 50, 50]
+          content-size: [100, 100]
+          items:
+          - type: rect
+            bounds: [70, 10, 50, 50]
+            color: green
+    # Do the same thing, but now for the "right" constraint.
+    - type: scroll-frame
+      bounds: [10, 70, 50, 50]
+      content-size: [200, 200]
+      items:
+      - type: sticky-frame
+        bounds: [60, 70, 50, 50]
+        margin-right: 0
+        horizontal-offset-bounds: [-500, 0]
+        items:
+        - type: clip
+          bounds: [60, 70, 50, 50]
+          content-size: [100, 100]
+          items:
+          - type: rect
+            bounds: [60, 70, 50, 50]
+            color: green
+    # Do the same thing, but now for the "left" constraint.
+    - type: scroll-frame
+      bounds: [70, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [50, 0]
+      items:
+      - type: sticky-frame
+        bounds: [70, 70, 50, 50]
+        margin-left: 0
+        horizontal-offset-bounds: [0, 500]
+        items:
+        - type: clip
+          bounds: [70, 70, 50, 50]
+          content-size: [100, 100]
+          items:
+          - type: rect
+            bounds: [70, 70, 50, 50]
+            color: green
+
+    # The same tests, but this time with a margin.
+    - type: scroll-frame
+      bounds: [130, 10, 50, 50]
+      content-size: [200, 200]
+      items:
+      - type: sticky-frame
+        bounds: [130, 60, 50, 50]
+        margin-bottom: 10
+        vertical-offset-bounds: [-500, 0]
+        items:
+        - type: clip
+          bounds: [130, 60, 50, 50]
+          content-size: [100, 100]
+          items:
+          - type: rect
+            bounds: [130, 60, 50, 50]
+            color: green
+    # Do the same thing, but now for the "top" constraint.
+    - type: scroll-frame
+      bounds: [190, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 50]
+      items:
+      - type: sticky-frame
+        bounds: [190, 10, 50, 50]
+        margin-top: 10
+        vertical-offset-bounds: [0, 500]
+        items:
+        - type: clip
+          bounds: [190, 10, 50, 50]
+          content-size: [100, 100]
+          items:
+          - type: rect
+            bounds: [190, 10, 50, 50]
+            color: green
+    # Do the same thing, but now for the "right" constraint.
+    - type: scroll-frame
+      bounds: [130, 70, 50, 50]
+      content-size: [200, 200]
+      items:
+      - type: sticky-frame
+        bounds: [180, 70, 50, 50]
+        margin-right: 10
+        horizontal-offset-bounds: [-500, 0]
+        items:
+        - type: clip
+          bounds: [180, 70, 50, 50]
+          content-size: [100, 100]
+          items:
+          - type: rect
+            bounds: [180, 70, 50, 50]
+            color: green
+    # Do the same thing, but now for the "left" constraint.
+    - type: scroll-frame
+      bounds: [190, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [50, 0]
+      items:
+      - type: sticky-frame
+        bounds: [190, 70, 50, 50]
+        margin-left: 10
+        horizontal-offset-bounds: [0, 500]
+        items:
+        - type: clip
+          bounds: [190, 70, 50, 50]
+          content-size: [100, 100]
+          items:
+          - type: rect
+            bounds: [190, 70, 50, 50]
+            color: green
+
+    # The same tests, but this time with a limit.
+    - type: scroll-frame
+      bounds: [250, 10, 50, 50]
+      content-size: [200, 200]
+      items:
+      - type: sticky-frame
+        bounds: [250, 60, 50, 50]
+        margin-bottom: 0
+        vertical-offset-bounds: [-25, 0]
+        items:
+        - type: clip
+          bounds: [250, 60, 50, 50]
+          content-size: [100, 100]
+          items:
+          - type: rect
+            bounds: [250, 60, 50, 50]
+            color: green
+    # Do the same thing, but now for the "top" constraint.
+    - type: scroll-frame
+      bounds: [310, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 50]
+      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]
+          items:
+          - type: rect
+            bounds: [310, 10, 50, 50]
+            color: green
+    # Do the same thing, but now for the "right" constraint.
+    - type: scroll-frame
+      bounds: [250, 70, 50, 50]
+      content-size: [200, 200]
+      items:
+      - type: sticky-frame
+        bounds: [300, 70, 50, 50]
+        margin-right: 0
+        horizontal-offset-bounds: [-25, 0]
+        items:
+        - type: clip
+          bounds: [300, 70, 50, 50]
+          content-size: [100, 100]
+          items:
+          - type: rect
+            bounds: [300, 70, 50, 50]
+            color: green
+    # Do the same thing, but now for the "left" constraint.
+    - type: scroll-frame
+      bounds: [310, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [50, 0]
+      items:
+      - type: sticky-frame
+        bounds: [310, 70, 50, 50]
+        margin-left: 0
+        horizontal-offset-bounds: [0, 25]
+        items:
+        - type: clip
+          bounds: [310, 70, 50, 50]
+          content-size: [100, 100]
+          items:
+          - type: rect
+            bounds: [310, 70, 50, 50]
+            color: green
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..cdc0a7a124
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/sticky.yaml
@@ -0,0 +1,167 @@
+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: 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
+    # Do the same thing, but now for the "top" constraint.
+    - type: scroll-frame
+      bounds: [70, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 50]
+      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
+    # Do the same thing, but now for the "right" constraint.
+    - type: scroll-frame
+      bounds: [10, 70, 50, 50]
+      content-size: [200, 200]
+      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
+    # Do the same thing, but now for the "left" constraint.
+    - type: scroll-frame
+      bounds: [70, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [50, 0]
+      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
+
+    # The same tests, but this time with a margin.
+    - type: scroll-frame
+      bounds: [130, 10, 50, 50]
+      content-size: [200, 200]
+      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
+    # Do the same thing, but now for the "top" constraint.
+    - type: scroll-frame
+      bounds: [190, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 50]
+      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
+    # Do the same thing, but now for the "right" constraint.
+    - type: scroll-frame
+      bounds: [130, 70, 50, 50]
+      content-size: [200, 200]
+      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
+    # Do the same thing, but now for the "left" constraint.
+    - type: scroll-frame
+      bounds: [190, 70, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [50, 0]
+      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
+
+    # The same tests, but this time with a limit.
+    - type: scroll-frame
+      bounds: [250, 10, 50, 50]
+      content-size: [200, 200]
+      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
+    # Do the same thing, but now for the "top" constraint.
+    - type: scroll-frame
+      bounds: [310, 10, 50, 50]
+      content-size: [200, 200]
+      scroll-offset: [0, 50]
+      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
+    # Do the same thing, but now for the "right" constraint.
+    - type: scroll-frame
+      bounds: [250, 70, 50, 50]
+      content-size: [200, 200]
+      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
+    # Do the same thing, but now for the "left" constraint.
+    - type: scroll-frame
+      bounds: [310, 70, 50, 50]
+      content-size: [200, 200]
+      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
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..74bd647aa7
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/translate-nested.yaml
@@ -0,0 +1,28 @@
+---
+root:
+  items:
+    -
+      bounds: [8, 8, 500, 500]
+      type: "stacking-context"
+      items:
+        -
+          bounds: [0, 0, 200, 200]
+          type: clip
+          id: 2
+          items:
+            -
+              bounds: [0, 0, 200, 200]
+              type: rect
+              color: red
+            -
+              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
+  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..9e807fd5f9
--- /dev/null
+++ b/gfx/wr/wrench/reftests/scrolling/viewport-offset.yaml
@@ -0,0 +1,20 @@
+# 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
+          bounds: 0 0 1000 1000
+          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