| - name: 2d.shadow.attributes.shadowBlur.initial |
| testing: |
| - 2d.shadow.blur.get |
| - 2d.shadow.blur.initial |
| code: | |
| @assert ctx.shadowBlur === 0; |
| |
| - name: 2d.shadow.attributes.shadowBlur.valid |
| testing: |
| - 2d.shadow.blur.get |
| - 2d.shadow.blur.set |
| code: | |
| ctx.shadowBlur = 1; |
| @assert ctx.shadowBlur === 1; |
| |
| ctx.shadowBlur = 0.5; |
| @assert ctx.shadowBlur === 0.5; |
| |
| ctx.shadowBlur = 1e6; |
| @assert ctx.shadowBlur === 1e6; |
| |
| ctx.shadowBlur = 0; |
| @assert ctx.shadowBlur === 0; |
| |
| - name: 2d.shadow.attributes.shadowBlur.invalid |
| testing: |
| - 2d.shadow.blur.invalid |
| code: | |
| ctx.shadowBlur = 1; |
| ctx.shadowBlur = -2; |
| @assert ctx.shadowBlur === 1; |
| |
| ctx.shadowBlur = 1; |
| ctx.shadowBlur = Infinity; |
| @assert ctx.shadowBlur === 1; |
| |
| ctx.shadowBlur = 1; |
| ctx.shadowBlur = -Infinity; |
| @assert ctx.shadowBlur === 1; |
| |
| ctx.shadowBlur = 1; |
| ctx.shadowBlur = NaN; |
| @assert ctx.shadowBlur === 1; |
| |
| ctx.shadowBlur = 1; |
| ctx.shadowBlur = 'string'; |
| @assert ctx.shadowBlur === 1; |
| |
| ctx.shadowBlur = 1; |
| ctx.shadowBlur = true; |
| @assert ctx.shadowBlur === 1; |
| |
| ctx.shadowBlur = 1; |
| ctx.shadowBlur = false; |
| @assert ctx.shadowBlur === 0; |
| |
| - name: 2d.shadow.attributes.shadowOffset.initial |
| testing: |
| - 2d.shadow.offset.initial |
| code: | |
| @assert ctx.shadowOffsetX === 0; |
| @assert ctx.shadowOffsetY === 0; |
| |
| - name: 2d.shadow.attributes.shadowOffset.valid |
| testing: |
| - 2d.shadow.offset.get |
| - 2d.shadow.offset.set |
| code: | |
| ctx.shadowOffsetX = 1; |
| ctx.shadowOffsetY = 2; |
| @assert ctx.shadowOffsetX === 1; |
| @assert ctx.shadowOffsetY === 2; |
| |
| ctx.shadowOffsetX = 0.5; |
| ctx.shadowOffsetY = 0.25; |
| @assert ctx.shadowOffsetX === 0.5; |
| @assert ctx.shadowOffsetY === 0.25; |
| |
| ctx.shadowOffsetX = -0.5; |
| ctx.shadowOffsetY = -0.25; |
| @assert ctx.shadowOffsetX === -0.5; |
| @assert ctx.shadowOffsetY === -0.25; |
| |
| ctx.shadowOffsetX = 0; |
| ctx.shadowOffsetY = 0; |
| @assert ctx.shadowOffsetX === 0; |
| @assert ctx.shadowOffsetY === 0; |
| |
| ctx.shadowOffsetX = 1e6; |
| ctx.shadowOffsetY = 1e6; |
| @assert ctx.shadowOffsetX === 1e6; |
| @assert ctx.shadowOffsetY === 1e6; |
| |
| - name: 2d.shadow.attributes.shadowOffset.invalid |
| testing: |
| - 2d.shadow.offset.invalid |
| code: | |
| ctx.shadowOffsetX = 1; |
| ctx.shadowOffsetY = 2; |
| ctx.shadowOffsetX = Infinity; |
| ctx.shadowOffsetY = Infinity; |
| @assert ctx.shadowOffsetX === 1; |
| @assert ctx.shadowOffsetY === 2; |
| |
| ctx.shadowOffsetX = 1; |
| ctx.shadowOffsetY = 2; |
| ctx.shadowOffsetX = -Infinity; |
| ctx.shadowOffsetY = -Infinity; |
| @assert ctx.shadowOffsetX === 1; |
| @assert ctx.shadowOffsetY === 2; |
| |
| ctx.shadowOffsetX = 1; |
| ctx.shadowOffsetY = 2; |
| ctx.shadowOffsetX = NaN; |
| ctx.shadowOffsetY = NaN; |
| @assert ctx.shadowOffsetX === 1; |
| @assert ctx.shadowOffsetY === 2; |
| |
| ctx.shadowOffsetX = 1; |
| ctx.shadowOffsetY = 2; |
| ctx.shadowOffsetX = 'string'; |
| ctx.shadowOffsetY = 'string'; |
| @assert ctx.shadowOffsetX === 1; |
| @assert ctx.shadowOffsetY === 2; |
| |
| ctx.shadowOffsetX = 1; |
| ctx.shadowOffsetY = 2; |
| ctx.shadowOffsetX = true; |
| ctx.shadowOffsetY = true; |
| @assert ctx.shadowOffsetX === 1; |
| @assert ctx.shadowOffsetY === 1; |
| |
| ctx.shadowOffsetX = 1; |
| ctx.shadowOffsetY = 2; |
| ctx.shadowOffsetX = false; |
| ctx.shadowOffsetY = false; |
| @assert ctx.shadowOffsetX === 0; |
| @assert ctx.shadowOffsetY === 0; |
| |
| - name: 2d.shadow.attributes.shadowColor.initial |
| testing: |
| - 2d.shadow.color.initial |
| code: | |
| @assert ctx.shadowColor === 'rgba(0, 0, 0, 0)'; |
| |
| - name: 2d.shadow.attributes.shadowColor.valid |
| testing: |
| - 2d.shadow.color.get |
| - 2d.shadow.color.set |
| code: | |
| ctx.shadowColor = 'lime'; |
| @assert ctx.shadowColor === '#00ff00'; |
| |
| ctx.shadowColor = 'RGBA(0,255, 0,0)'; |
| @assert ctx.shadowColor === 'rgba(0, 255, 0, 0)'; |
| |
| - name: 2d.shadow.attributes.shadowColor.invalid |
| testing: |
| - 2d.shadow.color.invalid |
| code: | |
| ctx.shadowColor = '#00ff00'; |
| ctx.shadowColor = 'bogus'; |
| @assert ctx.shadowColor === '#00ff00'; |
| |
| ctx.shadowColor = '#00ff00'; |
| ctx.shadowColor = 'red bogus'; |
| @assert ctx.shadowColor === '#00ff00'; |
| |
| ctx.shadowColor = '#00ff00'; |
| ctx.shadowColor = ctx; |
| @assert ctx.shadowColor === '#00ff00'; |
| |
| ctx.shadowColor = '#00ff00'; |
| ctx.shadowColor = undefined; |
| @assert ctx.shadowColor === '#00ff00'; |
| |
| - name: 2d.shadow.enable.off.1 |
| desc: Shadows are not drawn when only shadowColor is set |
| testing: |
| - 2d.shadow.enable |
| - 2d.shadow.render |
| code: | |
| ctx.shadowColor = '#f00'; |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(0, 0, 100, 50); |
| @assert pixel 50,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.enable.off.2 |
| desc: Shadows are not drawn when only shadowColor is set |
| testing: |
| - 2d.shadow.enable |
| - 2d.shadow.render |
| code: | |
| ctx.globalCompositeOperation = 'destination-atop'; |
| ctx.shadowColor = '#f00'; |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(0, 0, 100, 50); |
| @assert pixel 50,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.enable.blur |
| desc: Shadows are drawn if shadowBlur is set |
| testing: |
| - 2d.shadow.enable |
| - 2d.shadow.render |
| code: | |
| ctx.globalCompositeOperation = 'destination-atop'; |
| ctx.shadowColor = '#0f0'; |
| ctx.shadowBlur = 0.1; |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| @assert pixel 50,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.enable.x |
| desc: Shadows are drawn if shadowOffsetX is set |
| testing: |
| - 2d.shadow.enable |
| - 2d.shadow.render |
| code: | |
| ctx.globalCompositeOperation = 'destination-atop'; |
| ctx.shadowColor = '#0f0'; |
| ctx.shadowOffsetX = 0.1; |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| @assert pixel 50,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.enable.y |
| desc: Shadows are drawn if shadowOffsetY is set |
| testing: |
| - 2d.shadow.enable |
| - 2d.shadow.render |
| code: | |
| ctx.globalCompositeOperation = 'destination-atop'; |
| ctx.shadowColor = '#0f0'; |
| ctx.shadowOffsetY = 0.1; |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| @assert pixel 50,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.offset.positiveX |
| desc: Shadows can be offset with positive x |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.fillStyle = '#0f0'; |
| ctx.shadowColor = '#0f0'; |
| ctx.shadowOffsetX = 50; |
| ctx.fillRect(0, 0, 50, 50); |
| @assert pixel 25,25 == 0,255,0,255; |
| @assert pixel 75,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.offset.negativeX |
| desc: Shadows can be offset with negative x |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.fillStyle = '#0f0'; |
| ctx.shadowColor = '#0f0'; |
| ctx.shadowOffsetX = -50; |
| ctx.fillRect(50, 0, 50, 50); |
| @assert pixel 25,25 == 0,255,0,255; |
| @assert pixel 75,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.offset.positiveY |
| desc: Shadows can be offset with positive y |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.fillStyle = '#0f0'; |
| ctx.shadowColor = '#0f0'; |
| ctx.shadowOffsetY = 25; |
| ctx.fillRect(0, 0, 100, 25); |
| @assert pixel 50,12 == 0,255,0,255; |
| @assert pixel 50,37 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.offset.negativeY |
| desc: Shadows can be offset with negative y |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.fillStyle = '#0f0'; |
| ctx.shadowColor = '#0f0'; |
| ctx.shadowOffsetY = -25; |
| ctx.fillRect(0, 25, 100, 25); |
| @assert pixel 50,12 == 0,255,0,255; |
| @assert pixel 50,37 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.outside |
| desc: Shadows of shapes outside the visible area can be offset onto the visible |
| area |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowColor = '#0f0'; |
| ctx.shadowOffsetX = 100; |
| ctx.fillRect(-100, 0, 25, 50); |
| ctx.shadowOffsetX = -100; |
| ctx.fillRect(175, 0, 25, 50); |
| ctx.shadowOffsetX = 0; |
| ctx.shadowOffsetY = 100; |
| ctx.fillRect(25, -100, 50, 25); |
| ctx.shadowOffsetY = -100; |
| ctx.fillRect(25, 125, 50, 25); |
| @assert pixel 12,25 == 0,255,0,255; |
| @assert pixel 87,25 == 0,255,0,255; |
| @assert pixel 50,12 == 0,255,0,255; |
| @assert pixel 50,37 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.clip.1 |
| desc: Shadows of clipped shapes are still drawn within the clipping region |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(0, 0, 50, 50); |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(50, 0, 50, 50); |
| |
| ctx.save(); |
| ctx.beginPath(); |
| ctx.rect(50, 0, 50, 50); |
| ctx.clip(); |
| ctx.shadowColor = '#0f0'; |
| ctx.shadowOffsetX = 50; |
| ctx.fillRect(0, 0, 50, 50); |
| ctx.restore(); |
| |
| @assert pixel 25,25 == 0,255,0,255; |
| @assert pixel 75,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.clip.2 |
| desc: Shadows are not drawn outside the clipping region |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 50, 50); |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(50, 0, 50, 50); |
| |
| ctx.save(); |
| ctx.beginPath(); |
| ctx.rect(0, 0, 50, 50); |
| ctx.clip(); |
| ctx.shadowColor = '#f00'; |
| ctx.shadowOffsetX = 50; |
| ctx.fillRect(0, 0, 50, 50); |
| ctx.restore(); |
| |
| @assert pixel 25,25 == 0,255,0,255; |
| @assert pixel 75,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.clip.3 |
| desc: Shadows of clipped shapes are still drawn within the clipping region |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 50, 50); |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(50, 0, 50, 50); |
| |
| ctx.save(); |
| ctx.beginPath(); |
| ctx.rect(0, 0, 50, 50); |
| ctx.clip(); |
| ctx.fillStyle = '#f00'; |
| ctx.shadowColor = '#0f0'; |
| ctx.shadowOffsetX = 50; |
| ctx.fillRect(-50, 0, 50, 50); |
| ctx.restore(); |
| |
| @assert pixel 25,25 == 0,255,0,255; |
| @assert pixel 75,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.stroke.basic |
| desc: Shadows are drawn for strokes |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.strokeStyle = '#f00'; |
| ctx.shadowColor = '#0f0'; |
| ctx.shadowOffsetY = 50; |
| ctx.beginPath(); |
| ctx.lineWidth = 50; |
| ctx.moveTo(0, -25); |
| ctx.lineTo(100, -25); |
| ctx.stroke(); |
| |
| @assert pixel 1,25 == 0,255,0,255; |
| @assert pixel 50,25 == 0,255,0,255; |
| @assert pixel 98,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.stroke.cap.1 |
| desc: Shadows are not drawn for areas outside stroke caps |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.strokeStyle = '#f00'; |
| ctx.shadowColor = '#f00'; |
| ctx.shadowOffsetY = 50; |
| ctx.beginPath(); |
| ctx.lineWidth = 50; |
| ctx.lineCap = 'butt'; |
| ctx.moveTo(-50, -25); |
| ctx.lineTo(0, -25); |
| ctx.moveTo(100, -25); |
| ctx.lineTo(150, -25); |
| ctx.stroke(); |
| |
| @assert pixel 1,25 == 0,255,0,255; |
| @assert pixel 50,25 == 0,255,0,255; |
| @assert pixel 98,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.stroke.cap.2 |
| desc: Shadows are drawn for stroke caps |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.strokeStyle = '#f00'; |
| ctx.shadowColor = '#0f0'; |
| ctx.shadowOffsetY = 50; |
| ctx.beginPath(); |
| ctx.lineWidth = 50; |
| ctx.lineCap = 'square'; |
| ctx.moveTo(25, -25); |
| ctx.lineTo(75, -25); |
| ctx.stroke(); |
| |
| @assert pixel 1,25 == 0,255,0,255; |
| @assert pixel 50,25 == 0,255,0,255; |
| @assert pixel 98,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.stroke.join.1 |
| desc: Shadows are not drawn for areas outside stroke joins |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.strokeStyle = '#f00'; |
| ctx.shadowColor = '#f00'; |
| ctx.shadowOffsetX = 100; |
| ctx.lineWidth = 200; |
| ctx.lineJoin = 'bevel'; |
| ctx.beginPath(); |
| ctx.moveTo(-200, -50); |
| ctx.lineTo(-150, -50); |
| ctx.lineTo(-151, -100); |
| ctx.stroke(); |
| |
| @assert pixel 1,1 == 0,255,0,255; |
| @assert pixel 48,48 == 0,255,0,255; |
| @assert pixel 50,25 == 0,255,0,255; |
| @assert pixel 98,48 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.stroke.join.2 |
| desc: Shadows are drawn for stroke joins |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 50, 50); |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(50, 0, 50, 50); |
| ctx.strokeStyle = '#f00'; |
| ctx.shadowColor = '#0f0'; |
| ctx.shadowOffsetX = 100; |
| ctx.lineWidth = 200; |
| ctx.lineJoin = 'miter'; |
| ctx.beginPath(); |
| ctx.moveTo(-200, -50); |
| ctx.lineTo(-150, -50); |
| ctx.lineTo(-151, -100); |
| ctx.stroke(); |
| |
| @assert pixel 1,1 == 0,255,0,255; |
| @assert pixel 48,48 == 0,255,0,255; |
| @assert pixel 50,25 == 0,255,0,255; |
| @assert pixel 98,48 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.stroke.join.3 |
| desc: Shadows are drawn for stroke joins respecting miter limit |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.strokeStyle = '#f00'; |
| ctx.shadowColor = '#f00'; |
| ctx.shadowOffsetX = 100; |
| ctx.lineWidth = 200; |
| ctx.lineJoin = 'miter'; |
| ctx.miterLimit = 0.1; |
| ctx.beginPath(); |
| ctx.moveTo(-200, -50); |
| ctx.lineTo(-150, -50); |
| ctx.lineTo(-151, -100); // (not an exact right angle, to avoid some other bug in Firefox 3) |
| ctx.stroke(); |
| |
| @assert pixel 1,1 == 0,255,0,255; |
| @assert pixel 48,48 == 0,255,0,255; |
| @assert pixel 50,25 == 0,255,0,255; |
| @assert pixel 98,48 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.image.basic |
| desc: Shadows are drawn for images |
| testing: |
| - 2d.shadow.render |
| images: |
| - red.png |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowColor = '#0f0'; |
| ctx.shadowOffsetY = 50; |
| ctx.drawImage(document.getElementById('red.png'), 0, -50); |
| |
| @assert pixel 50,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.image.transparent.1 |
| desc: Shadows are not drawn for transparent images |
| testing: |
| - 2d.shadow.render |
| images: |
| - transparent.png |
| code: | |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowColor = '#f00'; |
| ctx.shadowOffsetY = 50; |
| ctx.drawImage(document.getElementById('transparent.png'), 0, -50); |
| |
| @assert pixel 50,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.image.transparent.2 |
| desc: Shadows are not drawn for transparent parts of images |
| testing: |
| - 2d.shadow.render |
| images: |
| - redtransparent.png |
| code: | |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(0, 0, 50, 50); |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(50, 0, 50, 50); |
| ctx.shadowOffsetY = 50; |
| ctx.shadowColor = '#0f0'; |
| ctx.drawImage(document.getElementById('redtransparent.png'), 50, -50); |
| ctx.shadowColor = '#f00'; |
| ctx.drawImage(document.getElementById('redtransparent.png'), -50, -50); |
| |
| @assert pixel 25,25 == 0,255,0,255; |
| @assert pixel 50,25 == 0,255,0,255; |
| @assert pixel 75,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.image.alpha |
| desc: Shadows are drawn correctly for partially-transparent images |
| testing: |
| - 2d.shadow.render |
| images: |
| - transparent50.png |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowOffsetY = 50; |
| ctx.shadowColor = '#00f'; |
| ctx.drawImage(document.getElementById('transparent50.png'), 0, -50); |
| |
| @assert pixel 50,25 ==~ 127,0,127,255; |
| expected: | |
| size 100 50 |
| cr.set_source_rgb(0.5, 0, 0.5) |
| cr.rectangle(0, 0, 100, 50) |
| cr.fill() |
| |
| - name: 2d.shadow.image.section |
| desc: Shadows are not drawn for areas outside image source rectangles |
| testing: |
| - 2d.shadow.render |
| images: |
| - redtransparent.png |
| code: | |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowOffsetY = 50; |
| ctx.shadowColor = '#f00'; |
| ctx.drawImage(document.getElementById('redtransparent.png'), 50, 0, 50, 50, 0, -50, 50, 50); |
| |
| @assert pixel 25,25 ==~ 0,255,0,255; |
| @assert pixel 50,25 ==~ 0,255,0,255; |
| @assert pixel 75,25 ==~ 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.image.scale |
| desc: Shadows are drawn correctly for scaled images |
| testing: |
| - 2d.shadow.render |
| images: |
| - redtransparent.png |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowOffsetY = 50; |
| ctx.shadowColor = '#0f0'; |
| ctx.drawImage(document.getElementById('redtransparent.png'), 0, 0, 100, 50, -10, -50, 240, 50); |
| |
| @assert pixel 25,25 ==~ 0,255,0,255; |
| @assert pixel 50,25 ==~ 0,255,0,255; |
| @assert pixel 75,25 ==~ 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.canvas.basic |
| desc: Shadows are drawn for canvases |
| testing: |
| - 2d.shadow.render |
| code: | |
| var canvas2 = document.createElement('canvas'); |
| canvas2.width = 100; |
| canvas2.height = 50; |
| var ctx2 = canvas2.getContext('2d'); |
| ctx2.fillStyle = '#f00'; |
| ctx2.fillRect(0, 0, 100, 50); |
| |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowColor = '#0f0'; |
| ctx.shadowOffsetY = 50; |
| ctx.drawImage(canvas2, 0, -50); |
| |
| @assert pixel 50,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.canvas.transparent.1 |
| desc: Shadows are not drawn for transparent canvases |
| testing: |
| - 2d.shadow.render |
| code: | |
| var canvas2 = document.createElement('canvas'); |
| canvas2.width = 100; |
| canvas2.height = 50; |
| var ctx2 = canvas2.getContext('2d'); |
| |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowColor = '#f00'; |
| ctx.shadowOffsetY = 50; |
| ctx.drawImage(canvas2, 0, -50); |
| |
| @assert pixel 50,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.canvas.transparent.2 |
| desc: Shadows are not drawn for transparent parts of canvases |
| testing: |
| - 2d.shadow.render |
| code: | |
| var canvas2 = document.createElement('canvas'); |
| canvas2.width = 100; |
| canvas2.height = 50; |
| var ctx2 = canvas2.getContext('2d'); |
| ctx2.fillStyle = '#f00'; |
| ctx2.fillRect(0, 0, 50, 50); |
| |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(0, 0, 50, 50); |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(50, 0, 50, 50); |
| ctx.shadowOffsetY = 50; |
| ctx.shadowColor = '#0f0'; |
| ctx.drawImage(canvas2, 50, -50); |
| ctx.shadowColor = '#f00'; |
| ctx.drawImage(canvas2, -50, -50); |
| |
| @assert pixel 25,25 == 0,255,0,255; |
| @assert pixel 50,25 == 0,255,0,255; |
| @assert pixel 75,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.canvas.alpha |
| desc: Shadows are drawn correctly for partially-transparent canvases |
| testing: |
| - 2d.shadow.render |
| images: |
| - transparent50.png |
| code: | |
| var canvas2 = document.createElement('canvas'); |
| canvas2.width = 100; |
| canvas2.height = 50; |
| var ctx2 = canvas2.getContext('2d'); |
| ctx2.fillStyle = 'rgba(255, 0, 0, 0.5)'; |
| ctx2.fillRect(0, 0, 100, 50); |
| |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowOffsetY = 50; |
| ctx.shadowColor = '#00f'; |
| ctx.drawImage(canvas2, 0, -50); |
| |
| @assert pixel 50,25 ==~ 127,0,127,255; |
| expected: | |
| size 100 50 |
| cr.set_source_rgb(0.5, 0, 0.5) |
| cr.rectangle(0, 0, 100, 50) |
| cr.fill() |
| |
| - name: 2d.shadow.pattern.basic |
| desc: Shadows are drawn for fill patterns |
| testing: |
| - 2d.shadow.render |
| # http://bugs.webkit.org/show_bug.cgi?id=15266 |
| images: |
| - red.png |
| code: | |
| var pattern = ctx.createPattern(document.getElementById('red.png'), 'repeat'); |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowColor = '#0f0'; |
| ctx.shadowOffsetY = 50; |
| ctx.fillStyle = pattern; |
| ctx.fillRect(0, -50, 100, 50); |
| |
| @assert pixel 50,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.pattern.transparent.1 |
| desc: Shadows are not drawn for transparent fill patterns |
| testing: |
| - 2d.shadow.render |
| # http://bugs.webkit.org/show_bug.cgi?id=15266 |
| images: |
| - transparent.png |
| code: | |
| var pattern = ctx.createPattern(document.getElementById('transparent.png'), 'repeat'); |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowColor = '#f00'; |
| ctx.shadowOffsetY = 50; |
| ctx.fillStyle = pattern; |
| ctx.fillRect(0, -50, 100, 50); |
| |
| @assert pixel 50,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.pattern.transparent.2 |
| desc: Shadows are not drawn for transparent parts of fill patterns |
| testing: |
| - 2d.shadow.render |
| # http://bugs.webkit.org/show_bug.cgi?id=15266 |
| images: |
| - redtransparent.png |
| code: | |
| var pattern = ctx.createPattern(document.getElementById('redtransparent.png'), 'repeat'); |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 50, 50); |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(50, 0, 50, 50); |
| ctx.shadowOffsetY = 50; |
| ctx.shadowColor = '#0f0'; |
| ctx.fillStyle = pattern; |
| ctx.fillRect(0, -50, 100, 50); |
| |
| @assert pixel 25,25 == 0,255,0,255; |
| @assert pixel 50,25 == 0,255,0,255; |
| @assert pixel 75,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.pattern.alpha |
| desc: Shadows are drawn correctly for partially-transparent fill patterns |
| testing: |
| - 2d.shadow.render |
| # http://bugs.webkit.org/show_bug.cgi?id=15266 |
| images: |
| - transparent50.png |
| code: | |
| var pattern = ctx.createPattern(document.getElementById('transparent50.png'), 'repeat'); |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowOffsetY = 50; |
| ctx.shadowColor = '#00f'; |
| ctx.fillStyle = pattern; |
| ctx.fillRect(0, -50, 100, 50); |
| |
| @assert pixel 50,25 ==~ 127,0,127,255; |
| expected: | |
| size 100 50 |
| cr.set_source_rgb(0.5, 0, 0.5) |
| cr.rectangle(0, 0, 100, 50) |
| cr.fill() |
| |
| - name: 2d.shadow.gradient.basic |
| desc: Shadows are drawn for gradient fills |
| testing: |
| - 2d.shadow.render |
| # http://bugs.webkit.org/show_bug.cgi?id=15266 |
| code: | |
| var gradient = ctx.createLinearGradient(0, 0, 100, 0); |
| gradient.addColorStop(0, '#f00'); |
| gradient.addColorStop(1, '#f00'); |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowColor = '#0f0'; |
| ctx.shadowOffsetY = 50; |
| ctx.fillStyle = gradient; |
| ctx.fillRect(0, -50, 100, 50); |
| |
| @assert pixel 50,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.gradient.transparent.1 |
| desc: Shadows are not drawn for transparent gradient fills |
| testing: |
| - 2d.shadow.render |
| # http://bugs.webkit.org/show_bug.cgi?id=15266 |
| code: | |
| var gradient = ctx.createLinearGradient(0, 0, 100, 0); |
| gradient.addColorStop(0, 'rgba(0,0,0,0)'); |
| gradient.addColorStop(1, 'rgba(0,0,0,0)'); |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowColor = '#f00'; |
| ctx.shadowOffsetY = 50; |
| ctx.fillStyle = gradient; |
| ctx.fillRect(0, -50, 100, 50); |
| |
| @assert pixel 50,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.gradient.transparent.2 |
| desc: Shadows are not drawn for transparent parts of gradient fills |
| testing: |
| - 2d.shadow.render |
| # http://bugs.webkit.org/show_bug.cgi?id=15266 |
| code: | |
| var gradient = ctx.createLinearGradient(0, 0, 100, 0); |
| gradient.addColorStop(0, '#f00'); |
| gradient.addColorStop(0.499, '#f00'); |
| gradient.addColorStop(0.5, 'rgba(0,0,0,0)'); |
| gradient.addColorStop(1, 'rgba(0,0,0,0)'); |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 50, 50); |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(50, 0, 50, 50); |
| ctx.shadowOffsetY = 50; |
| ctx.shadowColor = '#0f0'; |
| ctx.fillStyle = gradient; |
| ctx.fillRect(0, -50, 100, 50); |
| |
| @assert pixel 25,25 == 0,255,0,255; |
| @assert pixel 50,25 == 0,255,0,255; |
| @assert pixel 75,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.gradient.alpha |
| desc: Shadows are drawn correctly for partially-transparent gradient fills |
| testing: |
| - 2d.shadow.render |
| # http://bugs.webkit.org/show_bug.cgi?id=15266 |
| code: | |
| var gradient = ctx.createLinearGradient(0, 0, 100, 0); |
| gradient.addColorStop(0, 'rgba(255,0,0,0.5)'); |
| gradient.addColorStop(1, 'rgba(255,0,0,0.5)'); |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowOffsetY = 50; |
| ctx.shadowColor = '#00f'; |
| ctx.fillStyle = gradient; |
| ctx.fillRect(0, -50, 100, 50); |
| |
| @assert pixel 50,25 ==~ 127,0,127,255; |
| expected: | |
| size 100 50 |
| cr.set_source_rgb(0.5, 0, 0.5) |
| cr.rectangle(0, 0, 100, 50) |
| cr.fill() |
| |
| - name: 2d.shadow.transform.1 |
| desc: Shadows take account of transformations |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowOffsetY = 50; |
| ctx.shadowColor = '#0f0'; |
| ctx.translate(100, 100); |
| ctx.fillRect(-100, -150, 100, 50); |
| |
| @assert pixel 50,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.transform.2 |
| desc: Shadow offsets are not affected by transformations |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowOffsetY = 50; |
| ctx.shadowColor = '#0f0'; |
| ctx.rotate(Math.PI) |
| ctx.fillRect(-100, 0, 100, 50); |
| |
| @assert pixel 50,25 == 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.blur.low |
| desc: Shadows look correct for small blurs |
| manual: |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#ff0'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowColor = '#00f'; |
| ctx.shadowOffsetY = 25; |
| for (var x = 0; x < 100; ++x) { |
| ctx.save(); |
| ctx.beginPath(); |
| ctx.rect(x, 0, 1, 50); |
| ctx.clip(); |
| ctx.shadowBlur = x; |
| ctx.fillRect(-200, -200, 500, 200); |
| ctx.restore(); |
| } |
| expected: | |
| size 100 50 |
| import math |
| cr.set_source_rgb(0, 0, 1) |
| cr.rectangle(0, 0, 1, 25) |
| cr.fill() |
| cr.set_source_rgb(1, 1, 0) |
| cr.rectangle(0, 25, 1, 25) |
| cr.fill() |
| for x in range(1, 100): |
| sigma = x/2.0 |
| filter = [] |
| for i in range(-24, 26): |
| filter.append(math.exp(-i*i / (2*sigma*sigma)) / (math.sqrt(2*math.pi)*sigma)) |
| accum = [0] |
| for f in filter: |
| accum.append(accum[-1] + f) |
| for y in range(0, 50): |
| cr.set_source_rgb(accum[y], accum[y], 1-accum[y]) |
| cr.rectangle(x, y, 1, 1) |
| cr.fill() |
| |
| - name: 2d.shadow.blur.high |
| desc: Shadows look correct for large blurs |
| manual: |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#ff0'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowColor = '#00f'; |
| ctx.shadowOffsetY = 0; |
| ctx.shadowBlur = 100; |
| ctx.fillRect(-200, -200, 200, 400); |
| expected: | |
| size 100 50 |
| import math |
| sigma = 100.0/2 |
| filter = [] |
| for i in range(-200, 100): |
| filter.append(math.exp(-i*i / (2*sigma*sigma)) / (math.sqrt(2*math.pi)*sigma)) |
| accum = [0] |
| for f in filter: |
| accum.append(accum[-1] + f) |
| for x in range(0, 100): |
| cr.set_source_rgb(accum[x+200], accum[x+200], 1-accum[x+200]) |
| cr.rectangle(x, 0, 1, 50) |
| cr.fill() |
| |
| - name: 2d.shadow.alpha.1 |
| desc: Shadow colour alpha components are used |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowColor = 'rgba(255, 0, 0, 0.01)'; |
| ctx.shadowOffsetY = 50; |
| ctx.fillRect(0, -50, 100, 50); |
| |
| @assert pixel 50,25 ==~ 0,255,0,255 +/- 4; |
| expected: green |
| |
| - name: 2d.shadow.alpha.2 |
| desc: Shadow colour alpha components are used |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.shadowColor = 'rgba(0, 0, 255, 0.5)'; |
| ctx.shadowOffsetY = 50; |
| ctx.fillRect(0, -50, 100, 50); |
| |
| @assert pixel 50,25 ==~ 127,0,127,255; |
| expected: | |
| size 100 50 |
| cr.set_source_rgb(0.5, 0, 0.5) |
| cr.rectangle(0, 0, 100, 50) |
| cr.fill() |
| |
| - name: 2d.shadow.alpha.3 |
| desc: Shadows are affected by globalAlpha |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching) |
| ctx.shadowColor = '#00f'; |
| ctx.shadowOffsetY = 50; |
| ctx.globalAlpha = 0.5; |
| ctx.fillRect(0, -50, 100, 50); |
| |
| @assert pixel 50,25 ==~ 127,0,127,255; |
| expected: | |
| size 100 50 |
| cr.set_source_rgb(0.5, 0, 0.5) |
| cr.rectangle(0, 0, 100, 50) |
| cr.fill() |
| |
| - name: 2d.shadow.alpha.4 |
| desc: Shadows with alpha components are correctly affected by globalAlpha |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching) |
| ctx.shadowColor = 'rgba(0, 0, 255, 0.707)'; |
| ctx.shadowOffsetY = 50; |
| ctx.globalAlpha = 0.707; |
| ctx.fillRect(0, -50, 100, 50); |
| |
| @assert pixel 50,25 ==~ 127,0,127,255; |
| expected: | |
| size 100 50 |
| cr.set_source_rgb(0.5, 0, 0.5) |
| cr.rectangle(0, 0, 100, 50) |
| cr.fill() |
| |
| - name: 2d.shadow.alpha.5 |
| desc: Shadows of shapes with alpha components are drawn correctly |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.fillStyle = 'rgba(64, 0, 0, 0.5)'; |
| ctx.shadowColor = '#00f'; |
| ctx.shadowOffsetY = 50; |
| ctx.fillRect(0, -50, 100, 50); |
| |
| @assert pixel 50,25 ==~ 127,0,127,255; |
| expected: | |
| size 100 50 |
| cr.set_source_rgb(0.5, 0, 0.5) |
| cr.rectangle(0, 0, 100, 50) |
| cr.fill() |
| |
| - name: 2d.shadow.composite.1 |
| desc: Shadows are drawn using globalCompositeOperation |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.globalCompositeOperation = 'xor'; |
| ctx.shadowColor = '#f00'; |
| ctx.shadowOffsetX = 100; |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(-100, 0, 200, 50); |
| |
| @assert pixel 50,25 ==~ 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.composite.2 |
| desc: Shadows are drawn using globalCompositeOperation |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.globalCompositeOperation = 'xor'; |
| ctx.shadowColor = '#f00'; |
| ctx.shadowBlur = 1; |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(-10, -10, 120, 70); |
| |
| @assert pixel 50,25 ==~ 0,255,0,255; |
| expected: green |
| |
| - name: 2d.shadow.composite.3 |
| desc: Areas outside shadows are drawn correctly with destination-out |
| testing: |
| - 2d.shadow.render |
| code: | |
| ctx.fillStyle = '#0f0'; |
| ctx.fillRect(0, 0, 100, 50); |
| ctx.globalCompositeOperation = 'destination-out'; |
| ctx.shadowColor = '#f00'; |
| ctx.shadowBlur = 10; |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(200, 0, 100, 50); |
| |
| @assert pixel 5,5 ==~ 0,255,0,255; |
| @assert pixel 50,25 ==~ 0,255,0,255; |
| expected: green |
| |
| |
| |
| |
| |
| |
| - name: 2d.shadow.filter.value |
| desc: test if ctx.filter works correctly |
| testing: |
| - 2d.filter.value |
| code: | |
| @assert ctx.filter == 'none'; |
| ctx.filter = 'blur(5px)'; |
| @assert ctx.filter == 'blur(5px)'; |
| ctx.save(); |
| ctx.filter = 'none'; |
| @assert ctx.filter == 'none'; |
| ctx.restore(); |
| @assert ctx.filter == 'blur(5px)'; |
| |
| ctx.filter = 'blur(10)'; |
| @assert ctx.filter == 'blur(5px)'; |
| ctx.filter = 'blur 10px'; |
| @assert ctx.filter == 'blur(5px)'; |
| |
| ctx.filter = 'inherit'; |
| @assert ctx.filter == 'blur(5px)'; |
| ctx.filter = 'initial'; |
| @assert ctx.filter == 'blur(5px)'; |
| ctx.filter = 'unset'; |
| @assert ctx.filter == 'blur(5px)'; |
| |
| ctx.filter = ''; |
| @assert ctx.filter == 'blur(5px)'; |
| ctx.filter = null; |
| @assert ctx.filter == 'blur(5px)'; |
| ctx.filter = undefined; |
| @assert ctx.filter == 'blur(5px)'; |
| |
| ctx.filter = 'blur( 5px)'; |
| assert_equals(ctx.filter, 'blur( 5px)'); |
| |