diff options
Diffstat (limited to 'gfx/wr/wrench/reftests/clip')
40 files changed, 997 insertions, 0 deletions
diff --git a/gfx/wr/wrench/reftests/clip/blank.yaml b/gfx/wr/wrench/reftests/clip/blank.yaml new file mode 100644 index 0000000000..c4eb3ab673 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/blank.yaml @@ -0,0 +1,2 @@ +--- +root: diff --git a/gfx/wr/wrench/reftests/clip/border-with-rounded-clip.png b/gfx/wr/wrench/reftests/clip/border-with-rounded-clip.png Binary files differnew file mode 100644 index 0000000000..f340005714 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/border-with-rounded-clip.png diff --git a/gfx/wr/wrench/reftests/clip/border-with-rounded-clip.yaml b/gfx/wr/wrench/reftests/clip/border-with-rounded-clip.yaml new file mode 100644 index 0000000000..12785ef444 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/border-with-rounded-clip.yaml @@ -0,0 +1,21 @@ +--- +root: + items: + - + bounds: [10, 10, 938, 200] + clip-rect: [10, 10, 938, 200] + type: clip + id: 2 + complex: + - + rect: [10, 10, 938, 200] + radius: [97, 97] + "clip-mode": clip + - + bounds: [10, 10, 100, 200] + clip-and-scroll: 2 + type: border + width: [100, 50, 100, 50] + border-type: normal + color: green + style: solid diff --git a/gfx/wr/wrench/reftests/clip/clip-3d-transform-ref.yaml b/gfx/wr/wrench/reftests/clip/clip-3d-transform-ref.yaml new file mode 100644 index 0000000000..58d66bec5a --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clip-3d-transform-ref.yaml @@ -0,0 +1,8 @@ +--- +root: + items: + - + bounds: [0, 0, 200, 200] + "clip-rect": [0, 0, 200, 200] + type: rect + color: green diff --git a/gfx/wr/wrench/reftests/clip/clip-3d-transform.yaml b/gfx/wr/wrench/reftests/clip/clip-3d-transform.yaml new file mode 100644 index 0000000000..f844b382ad --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clip-3d-transform.yaml @@ -0,0 +1,30 @@ +# This tests that clipping works well inside of a transformation with a 3d component that +# is still axis-aligned and lacking a perspective component. These two spaces should exist +# within a compatible coordinate system for local clipping (no masking). +--- +root: + items: + - + bounds: [0, 0, 0, 0] + "clip-rect": [0, 0, 0, 0] + "backface-visible": true + type: "stacking-context" + "scroll-policy": scrollable + transform: [0.5, 0, -0.8660254, 0, 0, 1, 0, 0, 0.8660254, 0, 0.5, 0, 0, 0, 0, 1] + "transform-style": flat + filters: [] + items: + - + bounds: [0, 0, 800, 400] + "clip-rect": [0, 0, 800, 400] + "backface-visible": true + type: clip + id: 2 + "content-size": [800, 400] + - + bounds: [0, 0, 400, 200] + "clip-rect": [0, 0, 400, 200] + "backface-visible": true + type: rect + clip-and-scroll: 2 + color: green diff --git a/gfx/wr/wrench/reftests/clip/clip-45-degree-rotation-ref.png b/gfx/wr/wrench/reftests/clip/clip-45-degree-rotation-ref.png Binary files differnew file mode 100644 index 0000000000..0d3bad68cf --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clip-45-degree-rotation-ref.png diff --git a/gfx/wr/wrench/reftests/clip/clip-45-degree-rotation.yaml b/gfx/wr/wrench/reftests/clip/clip-45-degree-rotation.yaml new file mode 100644 index 0000000000..316f249a3e --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clip-45-degree-rotation.yaml @@ -0,0 +1,32 @@ +# Test that transformed content is clipped properly by clips with a different transform. +--- +root: + items: + - + bounds: [0, 0, 0, 0] + "clip-rect": [0, 0, 0, 0] + type: "stacking-context" + transform: rotate(-45) translate(200, 0) + items: + - + bounds: [0, 0, 300, 300] + "clip-rect": [0, 0, 300, 300] + type: rect + color: red + - + bounds: [0, 0, 300, 300] + "clip-rect": [0, 0, 300, 300] + type: clip + id: 5 + - + bounds: [0, 0, 0, 0] + "clip-rect": [0, 0, 0, 0] + clip-and-scroll: 5 + type: "stacking-context" + transform: rotate(45) translate(-300, 0) + items: + - + bounds: [0, 0, 1598, 1200] + "clip-rect": [0, 0, 1598, 1200] + type: rect + color: green diff --git a/gfx/wr/wrench/reftests/clip/clip-and-filter-with-rotation-ref.yaml b/gfx/wr/wrench/reftests/clip/clip-and-filter-with-rotation-ref.yaml new file mode 100644 index 0000000000..c092030714 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clip-and-filter-with-rotation-ref.yaml @@ -0,0 +1,18 @@ +# Test that filtered content is clipped properly in a rotated context +--- +root: + items: + - + bounds: [16, 16, 0, 0] + type: "reference-frame" + transform: rotate(10) + id: 7 + items: + - + bounds: [0, 0, 0, 0] + type: "stacking-context" + items: + - + bounds: [0, 0, 324, 295] + type: rect + color: red diff --git a/gfx/wr/wrench/reftests/clip/clip-and-filter-with-rotation.yaml b/gfx/wr/wrench/reftests/clip/clip-and-filter-with-rotation.yaml new file mode 100644 index 0000000000..3c71e0148f --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clip-and-filter-with-rotation.yaml @@ -0,0 +1,35 @@ +# Test that filtered content is clipped properly in a rotated context +--- +root: + items: + - + bounds: [16, 16, 0, 0] + type: "reference-frame" + transform: rotate(10) + id: 7 + items: + - + bounds: [0, 0, 0, 0] + type: "stacking-context" + items: + - + bounds: [0, 0, 324, 295] + type: clip + id: 2 + # note it's important that we use clip-node here; clip-and-scroll in yaml + # defaults to push/pop, but we want to specifically attach this clip-chain + # to the stacking context and not the children (as gecko does in the bug) + - + bounds: [0, 0, 0, 0] + clip-node: 2 + type: "stacking-context" + filters: ["contrast(1.1)"] # any blend-style filter will do + items: + - + bounds: [-150, -150, 624, 624] + type: rect + color: blue + - + bounds: [0, 0, 324, 295] + type: rect + color: red diff --git a/gfx/wr/wrench/reftests/clip/clip-corner-overlap-ref.yaml b/gfx/wr/wrench/reftests/clip/clip-corner-overlap-ref.yaml new file mode 100644 index 0000000000..e9592b5831 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clip-corner-overlap-ref.yaml @@ -0,0 +1,113 @@ +--- +root: + items: + - type: stacking-context + bounds: [0, 0, 1000, 1000] + items: + - type: clip + bounds: [ 50, 50, 200, 100 ] + complex: + - rect: [ 50, 50, 200, 100 ] + radius: + top-left: [200, 100] + top-right: [0, 0] + bottom-left: [0, 0] + bottom-right: [0, 0] + items: + - type: rect + bounds: [ 50, 50, 200, 100 ] + color: blue + - type: clip + bounds: [ 50, 150, 200, 100 ] + complex: + - rect: [ 50, 150, 200, 100 ] + radius: + top-left: [0, 0] + top-right: [0, 0] + bottom-left: [200, 100] + bottom-right: [0, 0] + items: + - type: rect + bounds: [ 50, 150, 200, 100 ] + color: blue + + - type: clip + bounds: [ 300, 50, 100, 200 ] + complex: + - rect: [ 300, 50, 100, 200 ] + radius: + top-left: [100, 200] + top-right: [0, 0] + bottom-left: [0, 0] + bottom-right: [0, 0] + items: + - type: rect + bounds: [ 300, 50, 100, 200 ] + color: green + - type: clip + bounds: [ 400, 50, 100, 200 ] + complex: + - rect: [ 400, 50, 100, 200 ] + radius: + top-left: [0, 0] + top-right: [100, 200] + bottom-left: [0, 0] + bottom-right: [0, 0] + items: + - type: rect + bounds: [ 400, 50, 100, 200 ] + color: green + + - type: clip + bounds: [ 50, 300, 200, 100 ] + complex: + - rect: [ 50, 300, 200, 100 ] + radius: + top-left: [0, 0] + top-right: [200, 100] + bottom-left: [0, 0] + bottom-right: [0, 0] + items: + - type: rect + bounds: [ 50, 300, 200, 100 ] + color: red + - type: clip + bounds: [ 50, 400, 200, 100 ] + complex: + - rect: [ 50, 400, 200, 100 ] + radius: + top-left: [0, 0] + top-right: [0, 0] + bottom-left: [0, 0] + bottom-right: [200, 100] + items: + - type: rect + bounds: [ 50, 400, 200, 100 ] + color: red + + - type: clip + bounds: [ 300, 300, 100, 200 ] + complex: + - rect: [ 300, 300, 100, 200 ] + radius: + top-left: [0, 0] + top-right: [0, 0] + bottom-left: [100, 200] + bottom-right: [0, 0] + items: + - type: rect + bounds: [ 300, 300, 100, 200 ] + color: yellow + - type: clip + bounds: [ 400, 300, 100, 200 ] + complex: + - rect: [ 400, 300, 100, 200 ] + radius: + top-left: [0, 0] + top-right: [0, 0] + bottom-left: [0, 0] + bottom-right: [100, 200] + items: + - type: rect + bounds: [ 400, 300, 100, 200 ] + color: yellow diff --git a/gfx/wr/wrench/reftests/clip/clip-corner-overlap.yaml b/gfx/wr/wrench/reftests/clip/clip-corner-overlap.yaml new file mode 100644 index 0000000000..2fa2225652 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clip-corner-overlap.yaml @@ -0,0 +1,61 @@ +--- +root: + items: + - type: stacking-context + bounds: [0, 0, 1000, 1000] + items: + - type: clip + bounds: [ 50, 50, 200, 200 ] + complex: + - rect: [ 50, 50, 200, 200 ] + radius: + top-left: [200, 100] + top-right: [0, 0] + bottom-left: [200, 100] + bottom-right: [0, 0] + items: + - type: rect + bounds: [ 50, 50, 200, 200 ] + color: blue + + - type: clip + bounds: [ 300, 50, 200, 200 ] + complex: + - rect: [ 300, 50, 200, 200 ] + radius: + top-left: [100, 200] + top-right: [100, 200] + bottom-left: [0, 0] + bottom-right: [0, 0] + items: + - type: rect + bounds: [ 300, 50, 200, 200 ] + color: green + + - type: clip + bounds: [ 50, 300, 200, 200 ] + complex: + - rect: [ 50, 300, 200, 200 ] + radius: + top-left: [0, 0] + top-right: [200, 100] + bottom-left: [0, 0] + bottom-right: [200, 100] + items: + - type: rect + bounds: [ 50, 300, 200, 200 ] + color: red + + - type: clip + bounds: [ 300, 300, 200, 200 ] + complex: + - rect: [ 300, 300, 200, 200 ] + radius: + top-left: [0, 0] + top-right: [0, 0] + bottom-left: [100, 200] + bottom-right: [100, 200] + items: + - type: rect + bounds: [ 300, 300, 200, 200 ] + color: yellow diff --git a/gfx/wr/wrench/reftests/clip/clip-ellipse.png b/gfx/wr/wrench/reftests/clip/clip-ellipse.png Binary files differnew file mode 100644 index 0000000000..4962482557 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clip-ellipse.png diff --git a/gfx/wr/wrench/reftests/clip/clip-ellipse.yaml b/gfx/wr/wrench/reftests/clip/clip-ellipse.yaml new file mode 100644 index 0000000000..e0c93c7985 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clip-ellipse.yaml @@ -0,0 +1,63 @@ +--- +root: + items: + - type: rect + bounds: [20, 20, 100, 100] + color: red + complex-clip: + rect: [20, 20, 100, 100] + radius: [32, 16] + + - type: rect + bounds: [130, 20, 100, 100] + color: green + complex-clip: + rect: [130, 20, 100, 100] + radius: [32, 16] + clip-mode: clip-out + + - type: rect + bounds: [20, 130, 100, 100] + color: red + complex-clip: + rect: [20, 130, 100, 100] + radius: [16, 32] + + - type: rect + bounds: [130, 130, 100, 100] + color: green + complex-clip: + rect: [130, 130, 100, 100] + radius: [16, 32] + clip-mode: clip-out + + - type: rect + bounds: [20, 240, 100, 100] + color: red + complex-clip: + rect: [20, 240, 100, 100] + radius: [128, 32] + + - type: rect + bounds: [130, 240, 100, 100] + color: green + complex-clip: + rect: [130, 240, 100, 100] + radius: [128, 32] + clip-mode: clip-out + + - type: rect + bounds: [20, 350, 100, 100] + color: red + complex-clip: + rect: [20, 350, 100, 100] + radius: [32, 128] + + - type: rect + bounds: [130, 350, 100, 100] + color: green + complex-clip: + rect: [130, 350, 100, 100] + radius: [32, 128] + clip-mode: clip-out + diff --git a/gfx/wr/wrench/reftests/clip/clip-empty-inner-rect-ref.yaml b/gfx/wr/wrench/reftests/clip/clip-empty-inner-rect-ref.yaml new file mode 100644 index 0000000000..0dea07f57d --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clip-empty-inner-rect-ref.yaml @@ -0,0 +1,20 @@ +# In this case, the inner rectangle of the clip is empty, because +# the size is 200 and each corner radius is 100. +# The blue rect should be fully invisible +--- +root: + items: + - + type: "stacking-context" + bounds: [0, 0, 0, 0] + items: + - + type: clip + bounds: [0, 0, 200, 200] + complex: + - rect: [ 0, 0, 200, 200 ] + radius: 100 + items: + - type: rect + bounds: [ 0, 0, 200, 200 ] + color: red diff --git a/gfx/wr/wrench/reftests/clip/clip-empty-inner-rect.yaml b/gfx/wr/wrench/reftests/clip/clip-empty-inner-rect.yaml new file mode 100644 index 0000000000..f8165f90d3 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clip-empty-inner-rect.yaml @@ -0,0 +1,28 @@ +# In this case, the inner rectangle of the clip is empty, because +# the size is 200 and each corner radius is 100. +# The blue rect should be fully invisible +--- +root: + items: + - + type: "stacking-context" + bounds: [0, 0, 0, 0] + items: + - + type: clip + bounds: [0, 0, 200, 200] + complex: + - rect: [ 0, 0, 200, 200 ] + radius: 100 + items: + - type: rect + bounds: [ 0, 0, 200, 200 ] + color: red + - type: "stacking-context" + bounds: [0, 0, 0, 0] + transform: translate(0, 0, 1) + items: + - + type: rect + bounds: [0, 0, 25, 25] + color: blue diff --git a/gfx/wr/wrench/reftests/clip/clip-mode.png b/gfx/wr/wrench/reftests/clip/clip-mode.png Binary files differnew file mode 100644 index 0000000000..69f2b8b4ae --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clip-mode.png diff --git a/gfx/wr/wrench/reftests/clip/clip-mode.yaml b/gfx/wr/wrench/reftests/clip/clip-mode.yaml new file mode 100644 index 0000000000..9c10cfdb3d --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clip-mode.yaml @@ -0,0 +1,17 @@ +--- +root: + items: + - type: rect + bounds: [20, 20, 100, 100] + color: red + complex-clip: + rect: [20, 20, 100, 100] + radius: 32 + + - type: rect + bounds: [130, 20, 100, 100] + color: green + complex-clip: + rect: [130, 20, 100, 100] + radius: 32 + clip-mode: clip-out diff --git a/gfx/wr/wrench/reftests/clip/clip-out-rotation.yaml b/gfx/wr/wrench/reftests/clip/clip-out-rotation.yaml new file mode 100644 index 0000000000..43d4aa3697 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clip-out-rotation.yaml @@ -0,0 +1,41 @@ +# Test that transformed content is clipped out properly by clips with a different transform. +# Also verifies that we aren't trying to render the clip mask at all for this clip-out case. +# +# The clip is a 500x500 rounded cornered rectangle rotated by 15 degrees. It fully contains the +# bounds of the red rect and has a clip-out mode (within the conservative logic of our +# `project_inner_rect` transformation), so nothing is visible, and no mask is rendered. +--- +root: + items: + - + bounds: [0, 0, 0, 0] + type: "reference-frame" + id: 2 + - + bounds: [0, 0, 0, 0] + type: "stacking-context" + transform: rotate(-15) translate(200, 0) + items: + - + bounds: [0, 0, 1000, 1000] + type: clip + id: 5 + complex: + - + rect: [0, 0, 500, 500] + radius: [5, 5] + clip-mode: clip-out + # uncomment this to see the clip area + #- + # bounds: [0, 0, 500, 500] + # type: rect + # color: green + - + bounds: [0, 0, 0, 0] + type: "stacking-context" + clip-and-scroll: [2, 5] + items: + - + bounds: [225, 150, 300, 300] + type: rect + color: red diff --git a/gfx/wr/wrench/reftests/clip/clip-thin-rotated-ref.yaml b/gfx/wr/wrench/reftests/clip/clip-thin-rotated-ref.yaml new file mode 100644 index 0000000000..e09079424d --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clip-thin-rotated-ref.yaml @@ -0,0 +1,13 @@ +# Test checks if a rotated clip with a long and thin rectangle would still +# correctly affect the primitive with regards to the inner bounds. +--- +root: + items: + - + bounds: [0, 0, 0, 0] + type: "stacking-context" + items: + - + bounds: [100, 100, 14, 14] + type: rect + color: blue diff --git a/gfx/wr/wrench/reftests/clip/clip-thin-rotated.yaml b/gfx/wr/wrench/reftests/clip/clip-thin-rotated.yaml new file mode 100644 index 0000000000..d0e626af91 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clip-thin-rotated.yaml @@ -0,0 +1,41 @@ +# Test checks if a rotated clip with a long and thin rectangle would still +# correctly affect the primitive with regards to the inner bounds. +--- +root: + items: + - + bounds: [0, 0, 0, 0] + type: "reference-frame" + id: 2 + - + bounds: [0, 0, 0, 0] + type: "stacking-context" + transform: rotate(45) translate(200, 0) + items: + - + bounds: [0, 0, 20, 1000] + type: clip + id: 5 + # uncomment this to see the clip area + #- + # bounds: [0, 0, 20, 1000] + # type: rect + # color: green + - # we aren't supposed to see this one + bounds: [0, 0, 0, 0] + type: "stacking-context" + clip-and-scroll: [2, 5] + items: + - + bounds: [120, 120, 10, 10] + type: rect + color: red + - + bounds: [0, 0, 0, 0] + type: "stacking-context" + clip-and-scroll: [2, 5] + items: + - + bounds: [100, 100, 14, 14] + type: rect + color: blue diff --git a/gfx/wr/wrench/reftests/clip/clipped-occlusion-ref.yaml b/gfx/wr/wrench/reftests/clip/clipped-occlusion-ref.yaml new file mode 100644 index 0000000000..69a5fb0624 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clipped-occlusion-ref.yaml @@ -0,0 +1,7 @@ +--- +root: + items: + - + type: rect + bounds: [0, 0, 500, 500] + color: red diff --git a/gfx/wr/wrench/reftests/clip/clipped-occlusion.yaml b/gfx/wr/wrench/reftests/clip/clipped-occlusion.yaml new file mode 100644 index 0000000000..05a055a5a3 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/clipped-occlusion.yaml @@ -0,0 +1,23 @@ +# This is a regression test for https://bugzilla.mozilla.org/show_bug.cgi?id=1594567 +# The single clip node from the primitive inside the scroll frame will be promoted +# to a 'shared clip' in the picture cache for the scroll frame. Ensure that this clip +# (zero sized in this test) is included in the tile occlusion culling. +--- +root: + items: + - + type: rect + bounds: [0, 0, 500, 500] + color: red + - + type: scroll-frame + content-size: [1000, 10000] + bounds: [0, -5000, 1000, 10000] + items: + - type: clip + bounds: [0, 0, 0, 0] + items: + - + bounds: [0, -5000, 1000, 10000] + type: rect + color: green diff --git a/gfx/wr/wrench/reftests/clip/custom-clip-chain-node-ancestors-ref.yaml b/gfx/wr/wrench/reftests/clip/custom-clip-chain-node-ancestors-ref.yaml new file mode 100644 index 0000000000..c84fe7a612 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/custom-clip-chain-node-ancestors-ref.yaml @@ -0,0 +1,9 @@ +--- +root: + items: + - + bounds: [10, 10, 100, 100] + "clip-rect": [10, 10, 100, 100] + "backface-visible": true + type: rect + color: 0 255 0 1 diff --git a/gfx/wr/wrench/reftests/clip/custom-clip-chain-node-ancestors.yaml b/gfx/wr/wrench/reftests/clip/custom-clip-chain-node-ancestors.yaml new file mode 100644 index 0000000000..9824da4f9c --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/custom-clip-chain-node-ancestors.yaml @@ -0,0 +1,32 @@ +# This test ensures that custom clip chains are not affected by the ancestors +# of their clipping nodes. In this case the node, 3, will probably be optimized +# away since its ancestor 2 has a tighter bounding rect. On the other hand, a +# clip chain which includes 3 should only get the rectangle specified by that +# node and not be affected by 2 at all. +--- +root: + items: + - + bounds: [25, 25, 50, 50] + "clip-rect": [25, 25, 50, 50] + type: clip + id: 2 + - + bounds: [10, 10, 100, 100] + clip-rect: [10, 10, 100, 100] + clip-and-scroll: 2 + type: clip + id: 3 + "content-size": [800, 1000] + - + bounds: [0, 0, 0, 0] + clip-rect: [0, 0, 0, 0] + type: "clip-chain" + id: 10 + clips: [3] + - + bounds: [0, 0, 200, 200] + clip-rect: [0, 0, 200, 200] + clip-and-scroll: [root-scroll-node, 10] + type: rect + color: 0 255 0 1 diff --git a/gfx/wr/wrench/reftests/clip/custom-clip-chains-ref.yaml b/gfx/wr/wrench/reftests/clip/custom-clip-chains-ref.yaml new file mode 100644 index 0000000000..e30bcfd2a4 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/custom-clip-chains-ref.yaml @@ -0,0 +1,17 @@ +root: + items: + - type: clip + id: 2 + bounds: [0, 0, 200, 200] + complex: + - rect: [0, 0, 200, 200] + radius: { + top-left: 20, + top-right: 20, + bottom-left: 20, + bottom-right: 20, + } + items: + - type: rect + bounds: [0, 0, 200, 200] + color: green diff --git a/gfx/wr/wrench/reftests/clip/custom-clip-chains.yaml b/gfx/wr/wrench/reftests/clip/custom-clip-chains.yaml new file mode 100644 index 0000000000..62e2fde8c5 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/custom-clip-chains.yaml @@ -0,0 +1,62 @@ +# This tests a clip chain (clipid=6) that is composed of two clips (clipid=3 +# and clipid=4) with a parent clip chain (composed of two more clips (clipid=1 +# and clipid=2). This effectively tests a "complex" clip chain that includes +# and is applied to multiple non-hierarchical reference frames as well as +# having a similarly complicated parent. Each clip is a rounded corner which, +# when rotated, clips a box with all corners rounded. +root: + items: + - + bounds: [0, 0, 200, 200] + type: stacking-context + transform: rotate(180) + items: + - type: clip + id: 10 + bounds: [0, 0, 200, 200] + complex: + - rect: [0, 0, 200, 200] + radius: { + top-left: 20, + } + - type: clip + id: 2 + bounds: [0, 0, 200, 200] + complex: + - rect: [0, 0, 200, 200] + radius: { + top-right: 20, + } + - + bounds: [0, 0, 200, 200] + type: stacking-context + transform: rotate(-90) + items: + - type: clip + id: 3 + bounds: [0, 0, 200, 200] + complex: + - rect: [0, 0, 200, 200] + radius: { + bottom-left: 20, + } + - type: clip + id: 4 + bounds: [0, 0, 200, 200] + complex: + - rect: [0, 0, 200, 200] + radius: { + top-left: 20, + } + + - type: clip-chain + id: 5 + clips: [10, 2] + - type: clip-chain + id: 6 + parent: 5 + clips: [3, 4] + - type: rect + bounds: [0, 0, 200, 200] + color: green + clip-and-scroll: [root-scroll-node, 6] diff --git a/gfx/wr/wrench/reftests/clip/fixed-position-clipping-ref.yaml b/gfx/wr/wrench/reftests/clip/fixed-position-clipping-ref.yaml new file mode 100644 index 0000000000..abbc91f897 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/fixed-position-clipping-ref.yaml @@ -0,0 +1,15 @@ +--- +root: + items: + - + bounds: [10, 10, 100, 100] + clip-rect: [10, 10, 100, 100] + type: rect + color: 0 255 0 1.0 + - + bounds: [110, 10, 100, 100] + clip-rect: [110, 10, 100, 100] + type: rect + color: 0 255 0 1.0 + id: [0, 1] +pipelines: [] diff --git a/gfx/wr/wrench/reftests/clip/fixed-position-clipping.yaml b/gfx/wr/wrench/reftests/clip/fixed-position-clipping.yaml new file mode 100644 index 0000000000..8eaa388710 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/fixed-position-clipping.yaml @@ -0,0 +1,49 @@ +# This test ensures that children of fixed position stacking contexts are not +# clipped by parent clipping nodes. The contents of the fixed position stacking +# contexts below should not be clipped by their parent clipping nodes, but +# instead should be promoted to be children of the top-level reference frame. +--- +root: + items: + - + clip-rect: [15, 15, 30, 30] + type: scroll-frame + content-size: [60, 60] + bounds: [15, 15, 30, 30] + items: + - + bounds: [10, 10, 100, 100] + clip-rect: [10, 10, 100, 100] + clip-and-scroll: root-reference-frame + type: stacking-context + items: + - + bounds: [0, 0, 100, 100] + clip-rect: [0, 0, 100, 100] + clip-and-scroll: root-reference-frame + type: rect + color: 0 255 0 1.0 + # The same test as above, except this time the stacking context also starts its + # own reference frame. + - + clip-rect: [115, 15, 30, 30] + type: scroll-frame + content-size: [60, 60] + bounds: [115, 15, 30, 30] + items: + - + bounds: [110, 10, 100, 100] + clip-rect: [110, 10, 100, 100] + clip-and-scroll: root-reference-frame + id: 4 + type: stacking-context + transform: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1] + items: + - + bounds: [0, 0, 100, 100] + clip-rect: [0, 0, 100, 100] + clip-and-scroll: 4 + type: rect + color: 0 255 0 1.0 + id: [0, 1] +pipelines: [] diff --git a/gfx/wr/wrench/reftests/clip/iframe-nested-in-stacking-context-ref.yaml b/gfx/wr/wrench/reftests/clip/iframe-nested-in-stacking-context-ref.yaml new file mode 100644 index 0000000000..c8f3148ea5 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/iframe-nested-in-stacking-context-ref.yaml @@ -0,0 +1,6 @@ +--- +root: + items: + - type: rect + bounds: [50, 50, 50, 100] + color: red diff --git a/gfx/wr/wrench/reftests/clip/iframe-nested-in-stacking-context.yaml b/gfx/wr/wrench/reftests/clip/iframe-nested-in-stacking-context.yaml new file mode 100644 index 0000000000..5976ccd511 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/iframe-nested-in-stacking-context.yaml @@ -0,0 +1,23 @@ +# Ensure that a stacking context with a simple clip that encloses +# an iframe correctly propagates the stacking context clip to the +# clip on the iframe. +--- +root: + items: + - type: clip + id: 2 + bounds: [50, 50, 50, 100] + - type: stacking-context + bounds: [50, 50, 100, 100] + clip-node: 2 + items: + - type: iframe + id: [1, 3] + bounds: [0, 0, 100, 100] +pipelines: + - + id: [1, 3] + items: + - type: rect + color: red + bounds: [0, 0, 100, 100] diff --git a/gfx/wr/wrench/reftests/clip/reftest.list b/gfx/wr/wrench/reftests/clip/reftest.list new file mode 100644 index 0000000000..7f6cb1025b --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/reftest.list @@ -0,0 +1,18 @@ + platform(linux,mac) == border-with-rounded-clip.yaml border-with-rounded-clip.png +== clip-mode.yaml clip-mode.png +== clip-ellipse.yaml clip-ellipse.png +platform(linux,mac) == clip-45-degree-rotation.yaml clip-45-degree-rotation-ref.png +== clip-3d-transform.yaml clip-3d-transform-ref.yaml +fuzzy(1,4) == clip-corner-overlap.yaml clip-corner-overlap-ref.yaml +fuzzy(9,60) == custom-clip-chains.yaml custom-clip-chains-ref.yaml +== custom-clip-chain-node-ancestors.yaml custom-clip-chain-node-ancestors-ref.yaml +== fixed-position-clipping.yaml fixed-position-clipping-ref.yaml +platform(linux,mac) == segmentation-with-other-coordinate-system-clip.yaml segmentation-with-other-coordinate-system-clip.png +== segmentation-across-rotation.yaml segmentation-across-rotation-ref.yaml +skip_on(android,device) == color_targets(3) alpha_targets(1) stacking-context-clip.yaml stacking-context-clip-ref.yaml +== snapping.yaml snapping-ref.yaml +fuzzy(70,2400) == clip-and-filter-with-rotation.yaml clip-and-filter-with-rotation-ref.yaml +color_targets(1) alpha_targets(0) == clip-out-rotation.yaml blank.yaml # Unexpected color targets, see bug 1580795 +== clipped-occlusion.yaml clipped-occlusion-ref.yaml +== clip-empty-inner-rect.yaml clip-empty-inner-rect-ref.yaml +== iframe-nested-in-stacking-context.yaml iframe-nested-in-stacking-context-ref.yaml diff --git a/gfx/wr/wrench/reftests/clip/segmentation-across-rotation-ref.yaml b/gfx/wr/wrench/reftests/clip/segmentation-across-rotation-ref.yaml new file mode 100644 index 0000000000..6d14bab91c --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/segmentation-across-rotation-ref.yaml @@ -0,0 +1,6 @@ +--- +root: + items: + - type: rect + color: [0, 255, 0, 1] + bounds: [100, 100, 100, 100] diff --git a/gfx/wr/wrench/reftests/clip/segmentation-across-rotation.yaml b/gfx/wr/wrench/reftests/clip/segmentation-across-rotation.yaml new file mode 100644 index 0000000000..c90cf79e4e --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/segmentation-across-rotation.yaml @@ -0,0 +1,30 @@ +# This test ensures that a clip that is segmented, with segments +# that have no intersection with the world-space outer bounds of +# the clip rectangle render correctly. In this case the first clip +# defines the outer bounds of the clip rectangle and the rotation +# ensures that the inner clip isn't optimized away completely. The +# segments of the rounded corner clip don't have any intersection at +# all with the clip in area from the outer clip, so they shouldn't +# affect the rendering of the green square. +--- +root: + items: + - type: clip + bounds: [100, 100, 100, 100] + id: 2 + - + type: stacking-context + clip-and-scroll: 2 + transform: rotate(0.25) + items: + - type: clip + bounds: [0, 0, 2400, 900] + id: 3 + complex: + - rect: [ 0, 0, 2400, 900 ] + radius: 50 + - type: rect + color: [0, 255, 0, 1] + bounds: [0, 0, 2400, 900] + clip-and-scroll: 3 + diff --git a/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip-ref.yaml b/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip-ref.yaml new file mode 100644 index 0000000000..8627d2ed74 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip-ref.yaml @@ -0,0 +1,8 @@ +--- +root: + items: + - + type: rect + color: green + bounds: [0, 0, 100, 100] + "clip-rect": [0, 0, 100, 100] diff --git a/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip.png b/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip.png Binary files differnew file mode 100644 index 0000000000..67507a2573 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip.png diff --git a/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip.yaml b/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip.yaml new file mode 100644 index 0000000000..db98da3a3e --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/segmentation-with-other-coordinate-system-clip.yaml @@ -0,0 +1,47 @@ +# This is testing whether a clip properly clips a primitive in another +# coordinate system that is segmented. +# See https://github.com/servo/webrender/issues/2294 +--- +root: + items: + - + type: "stacking-context" + items: + - + bounds: [0, 0, 100, 100] + "clip-rect": [0, 0, 100, 100] + type: clip + items: + - + type: "stacking-context" + transform: [0.98883086, 0.14904226, 0, 0, -0.14904226, 0.98883086, 0, 0, 0, 0, 1, 0, 1533.3134, 109.21605, 0, 1] + items: + - + type: "stacking-context" + transform: [0.7818315, 0.6234898, 0, 0, -0.6234898, 0.7818315, 0, 0, 0, 0, 1, 0, 132.98201, -64.04077, 0, 1] + items: + - + type: "stacking-context" + transform: [0.93087375, 0.36534107, 0, 0, -0.36534107, 0.93087375, 0, 0, 0, 0, 1, 0, 68.64584, -46.80194, 0, 1] + items: + - + type: "stacking-context" + transform: [0.8262389, 0.56332004, 0, 0, -0.56332004, 0.8262389, 0, 0, 0, 0, 1, 0, 116.458824, -61.550323, 0, 1] + items: + - + type: "stacking-context" + transform: [0.90096885, 0.43388373, 0, 0, -0.43388373, 0.90096885, 0, 0, 0, 0, 1, 0, 84.200554, -52.906708, 0, 1] + items: + - + type: "stacking-context" + transform: [0.98883086, 0.14904226, 0, 0, -0.14904226, 0.98883086, 0, 0, 0, 0, 1, 0, 25.3134, -21.78395, 0, 1] + items: + - + type: "stacking-context" + transform: [0.73305184, 0.68017274, 0, 0, -0.68017274, 0.73305184, 0, 0, 0, 0, 1, 0, 149.64511, -65.28949, 0, 1] + items: + - + bounds: [1000, 0, 1000, 1000] + "clip-rect": [1000, 0, 1000, 1000] + type: rect + color: green diff --git a/gfx/wr/wrench/reftests/clip/snapping-ref.yaml b/gfx/wr/wrench/reftests/clip/snapping-ref.yaml new file mode 100644 index 0000000000..7be527df93 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/snapping-ref.yaml @@ -0,0 +1,17 @@ +--- +root: + items: + - type: clip + bounds: [0, 0, 1000, 1000] + complex: + - rect: [50, 50, 100, 100] + radius: 16 + items: + - type: rect + bounds: 50 50 100 100 + color: red + + - type: rect + bounds: 200 50 100 100 + color: green + diff --git a/gfx/wr/wrench/reftests/clip/snapping.yaml b/gfx/wr/wrench/reftests/clip/snapping.yaml new file mode 100644 index 0000000000..d2ad449ea9 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/snapping.yaml @@ -0,0 +1,17 @@ +--- +root: + items: + - type: clip + bounds: [0, 0, 1000, 1000] + complex: + - rect: [50.3, 50.3, 100, 100] + radius: 16 + items: + - type: rect + bounds: 50.3 50.3 100 100 + color: red + + - type: rect + bounds: 200.3 50.3 100 100 + color: green + diff --git a/gfx/wr/wrench/reftests/clip/stacking-context-clip-ref.yaml b/gfx/wr/wrench/reftests/clip/stacking-context-clip-ref.yaml new file mode 100644 index 0000000000..50fb8facd4 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/stacking-context-clip-ref.yaml @@ -0,0 +1,32 @@ +--- +root: + items: + - type: clip + id: 2 + bounds: [0, 0, 100, 100] + complex: + - rect: [0, 0, 100, 100] + radius: { + top-left: 50, + top-right: 50, + bottom-left: 50, + bottom-right: 50, + } + - type: stacking-context + bounds: [0, 0, 100, 100] + items: + - type: rect + bounds: [ 0, 0, 100, 100 ] + color: [0, 255, 0] + clip-and-scroll: 2 + - type: clip + id: 3 + bounds: [120, 0, 50, 50] + - type: stacking-context + bounds: [100, 0, 100, 100] + filters: hue-rotate(90) + items: + - type: rect + bounds: [ 0, 0, 100, 100 ] + color: [0, 255, 0] + clip-and-scroll: 3 diff --git a/gfx/wr/wrench/reftests/clip/stacking-context-clip.yaml b/gfx/wr/wrench/reftests/clip/stacking-context-clip.yaml new file mode 100644 index 0000000000..5516b65539 --- /dev/null +++ b/gfx/wr/wrench/reftests/clip/stacking-context-clip.yaml @@ -0,0 +1,36 @@ +--- +root: + items: + - type: clip + id: 2 + bounds: [0, 0, 100, 100] + complex: + - rect: [0, 0, 100, 100] + radius: { + top-left: 50, + top-right: 50, + bottom-left: 50, + bottom-right: 50, + } + - type: stacking-context + bounds: [0, 0, 100, 100] + clip-node: 2 + items: + - type: rect + bounds: [ 0, 0, 100, 100 ] + color: [0, 255, 0] + # The same test, but this time with hue rotation, which means that the stacking + # context is rendered to an intermediate surface first. Unfortunately, we cannot + # use a rounded clip here because we want to avoid subpixel differences and avoid + # relying on a PNG reference image. + - type: clip + id: 3 + bounds: [120, 0, 50, 50] + - type: stacking-context + bounds: [100, 0, 100, 100] + filters: hue-rotate(90) + clip-node: 3 + items: + - type: rect + bounds: [ 0, 0, 100, 100 ] + color: [0, 255, 0] |
