diff options
Diffstat (limited to 'gfx/wr/wrench/reftests/scrolling')
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 Binary files differnew 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] |
