diff options
Diffstat (limited to '')
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 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..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 |
