diff options
Diffstat (limited to 'testing/web-platform/tests/html/canvas/tools/yaml-new/layers.yaml')
-rw-r--r-- | testing/web-platform/tests/html/canvas/tools/yaml-new/layers.yaml | 204 |
1 files changed, 199 insertions, 5 deletions
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/layers.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/layers.yaml index a44cb2ea2c..437a70c3f7 100644 --- a/testing/web-platform/tests/html/canvas/tools/yaml-new/layers.yaml +++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/layers.yaml @@ -44,7 +44,7 @@ variants: &global-state-variants no-global-states: render_states: // No global states. - alpha: + alpha: &global-state-alpha render_states: ctx.globalAlpha = 0.6; blending: render_states: ctx.globalCompositeOperation = 'multiply'; @@ -56,15 +56,15 @@ ctx.shadowOffsetY = 10; ctx.shadowColor = 'rgba(255, 165, 0, 0.5)'; ctx.shadowBlur = 3; - alpha.blending: + alpha.blending: &global-state-alpha-blending render_states: |- ctx.globalAlpha = 0.6; ctx.globalCompositeOperation = 'multiply'; - alpha.composite: + alpha.composite: &global-state-alpha-composite render_states: |- ctx.globalAlpha = 0.6; ctx.globalCompositeOperation = 'source-in'; - alpha.shadow: + alpha.shadow: &global-state-alpha-shadow render_states: |- ctx.globalAlpha = 0.5; ctx.shadowOffsetX = -10; @@ -167,7 +167,20 @@ ctx.drawImage(img, 0, 0); }; img.src = 'data:image/svg+xml;base64,' + btoa(svg); - variants: *global-state-variants + variants: + <<: *global-state-variants + alpha: + <<: *global-state-alpha + fuzzy: maxDifference=0-2; totalPixels=0-6766 + alpha.blending: + <<: *global-state-alpha-blending + fuzzy: maxDifference=0-1; totalPixels=0-2453 + alpha.composite: + <<: *global-state-alpha-composite + fuzzy: maxDifference=0-1; totalPixels=0-5204 + alpha.shadow: + <<: *global-state-alpha-shadow + fuzzy: maxDifference=0-2; totalPixels=0-6311 - name: 2d.layer.global-filter desc: Tests that layers ignore the global context filter. @@ -334,6 +347,144 @@ ctx.drawImage(canvas2, 0, 0); +- name: 2d.layer.ctm.filter + desc: Checks that parent transforms affect layer filters. + size: [200, 200] + code: | + // Transforms inside the layer should not apply to the layer's filter. + ctx.beginLayer({filter: 'drop-shadow(5px 5px 0px grey)'}); + ctx.translate(30, 90); + ctx.scale(2, 2); + ctx.rotate(Math.PI / 2); + ctx.fillRect(-30, -5, 60, 10); + ctx.endLayer(); + + // Transforms in the layer's parent should apply to the layer's filter. + ctx.translate(80, 90); + ctx.scale(2, 2); + ctx.rotate(Math.PI / 2); + ctx.beginLayer({filter: 'drop-shadow(5px 5px 0px grey)'}); + ctx.fillRect(-30, -5, 60, 10); + ctx.endLayer(); + html_reference: | + <svg xmlns="http://www.w3.org/2000/svg" + width="{{ size[0] }}" height="{{ size[1] }}" + color-interpolation-filters="sRGB"> + <filter id="filter" x="-100%" y="-100%" width="300%" height="300%"> + <feDropShadow dx="5" dy="5" stdDeviation="0" flood-color="grey" /> + </filter> + + <g filter="url(#filter)"> + <g transform="translate(30, 90) scale(2) rotate(90)"> + <rect x="-30" y="-5" width=60 height=10></rect> + </g> + </g> + + <g transform="translate(80, 90) scale(2) rotate(90)"> + <g filter="url(#filter)"> + <rect x="-30" y="-5" width=60 height=10></rect> + </g> + </g> + </svg> + +- name: 2d.layer.ctm.shadow-in-transformed-layer + desc: Check shadows inside of a transformed layer. + size: [200, 200] + code: | + ctx.translate(80, 90); + ctx.scale(2, 2); + ctx.rotate(Math.PI / 2); + + ctx.beginLayer(); + ctx.shadowOffsetX = 10; + ctx.shadowOffsetY = 10; + ctx.shadowColor = 'grey'; + ctx.fillRect(-30, -5, 60, 10); + + const canvas2 = new OffscreenCanvas(100, 100); + const ctx2 = canvas2.getContext('2d'); + ctx2.fillStyle = 'blue'; + ctx2.fillRect(0, 0, 40, 10); + ctx.drawImage(canvas2, -30, -30); + + ctx.endLayer(); + reference: | + ctx.translate(80, 90); + ctx.scale(2, 2); + ctx.rotate(Math.PI / 2); + + ctx.shadowOffsetX = 10; + ctx.shadowOffsetY = 10; + ctx.shadowColor = 'grey'; + ctx.fillRect(-30, -5, 60, 10); + + const canvas2 = new OffscreenCanvas(100, 100); + const ctx2 = canvas2.getContext('2d'); + ctx2.fillStyle = 'blue'; + ctx2.fillRect(0, 0, 40, 10); + ctx.drawImage(canvas2, -30, -30); + +- name: 2d.layer.ctm.getTransform + desc: Tests getTransform inside layers. + code: | + ctx.translate(10, 20); + ctx.beginLayer(); + ctx.scale(2, 3); + const m = ctx.getTransform(); + assert_array_equals([m.a, m.b, m.c, m.d, m.e, m.f], [2, 0, 0, 3, 10, 20]); + ctx.endLayer(); + +- name: 2d.layer.ctm.setTransform + desc: Tests setTransform inside layers. + code: | + ctx.translate(80, 0); + + ctx.beginLayer(); + ctx.rotate(2); + ctx.beginLayer(); + ctx.scale(5, 6); + ctx.setTransform(4, 0, 0, 2, 20, 10); + ctx.fillStyle = 'blue'; + ctx.fillRect(0, 0, 10, 10); + ctx.endLayer(); + ctx.endLayer(); + + ctx.fillStyle = 'green'; + ctx.fillRect(0, 0, 20, 20); + reference: | + ctx.translate(80, 0); + ctx.fillStyle = 'green'; + ctx.fillRect(0, 0, 20, 20); + + ctx.setTransform(4, 0, 0, 2, 20, 10); + ctx.fillStyle = 'blue'; + ctx.fillRect(0, 0, 10, 10); + +- name: 2d.layer.ctm.resetTransform + desc: Tests resetTransform inside layers. + code: | + ctx.translate(40, 0); + + ctx.beginLayer(); + ctx.rotate(2); + ctx.beginLayer(); + ctx.scale(5, 6); + ctx.resetTransform(); + ctx.fillStyle = 'blue'; + ctx.fillRect(0, 0, 20, 20); + ctx.endLayer(); + ctx.endLayer(); + + ctx.fillStyle = 'green'; + ctx.fillRect(0, 0, 20, 20); + reference: | + ctx.fillStyle = 'blue'; + ctx.fillRect(0, 0, 20, 20); + + ctx.translate(40, 0); + ctx.fillStyle = 'green'; + ctx.fillRect(0, 0, 20, 20); + - name: 2d.layer.clip-inside desc: Check clipping set inside the layer size: [100, 100] @@ -627,6 +778,49 @@ ctx.fillStyle = 'blue'; ctx.fillRect(10, 10, 80, 50); +- name: 2d.layer.drawImage + size: [200, 200] + desc: >- + Checks that drawImage writes the image to the layer and not the parent + directly. + code: | + ctx.fillStyle = 'skyblue'; + ctx.fillRect(0, 0, 100, 100); + + ctx.beginLayer({filter: {name: 'dropShadow', dx: -10, dy: -10, + stdDeviation: 0, floodColor: 'navy'}}); + + ctx.fillStyle = 'maroon'; + ctx.fillRect(20, 20, 50, 50); + + ctx.globalCompositeOperation = 'xor'; + + // The image should xor only with the layer content, not the parents'. + const canvas_image = new OffscreenCanvas(200,200); + const ctx_image = canvas_image.getContext("2d"); + ctx_image.fillStyle = 'pink'; + ctx_image.fillRect(40, 40, 50, 50); + ctx.drawImage(canvas_image, 0, 0); + + ctx.endLayer(); + reference: | + ctx.fillStyle = 'skyblue'; + ctx.fillRect(0, 0, 100, 100); + + ctx.beginLayer({filter: {name: 'dropShadow', dx: -10, dy: -10, + stdDeviation: 0, floodColor: 'navy'}}); + + ctx.fillStyle = 'maroon'; + ctx.fillRect(20, 20, 50, 50); + + ctx.globalCompositeOperation = 'xor'; + + // Should xor only with the layer content, not the parents'. + ctx.fillStyle = 'pink'; + ctx.fillRect(40, 40, 50, 50); + + ctx.endLayer(); + - name: 2d.layer.valid-calls desc: No exception raised on {{ variant_desc }}. variants: |