diff options
Diffstat (limited to 'dom/canvas/test/reftest/filters')
47 files changed, 864 insertions, 0 deletions
diff --git a/dom/canvas/test/reftest/filters/default-color.html b/dom/canvas/test/reftest/filters/default-color.html new file mode 100644 index 000000000..82fb5eda3 --- /dev/null +++ b/dom/canvas/test/reftest/filters/default-color.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.filter = 'drop-shadow(0 10px)'; +ctx.fillStyle = '#0f0'; +ctx.fillRect(25, 25, 50, 40); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/drop-shadow-transformed.html b/dom/canvas/test/reftest/filters/drop-shadow-transformed.html new file mode 100644 index 000000000..0cf33deea --- /dev/null +++ b/dom/canvas/test/reftest/filters/drop-shadow-transformed.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = '#0f0'; +ctx.scale(-1, -1); +ctx.filter = 'drop-shadow(0 10px black)'; +ctx.fillRect(-75, -65, 50, 40); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/drop-shadow.html b/dom/canvas/test/reftest/filters/drop-shadow.html new file mode 100644 index 000000000..6977b7d5e --- /dev/null +++ b/dom/canvas/test/reftest/filters/drop-shadow.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.filter = 'drop-shadow(0 10px black)'; +ctx.fillStyle = '#0f0'; +ctx.fillRect(25, 25, 50, 40); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/fillText-with-filter-grayscale-1-ref.html b/dom/canvas/test/reftest/filters/fillText-with-filter-grayscale-1-ref.html new file mode 100644 index 000000000..897d0565f --- /dev/null +++ b/dom/canvas/test/reftest/filters/fillText-with-filter-grayscale-1-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.fillStyle = "rgb(85,85,85)"; +ctx.font = "20px serif"; +ctx.fillText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/fillText-with-filter-grayscale-1.html b/dom/canvas/test/reftest/filters/fillText-with-filter-grayscale-1.html new file mode 100644 index 000000000..28c3d7d02 --- /dev/null +++ b/dom/canvas/test/reftest/filters/fillText-with-filter-grayscale-1.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.fillStyle = "rgb(85,85,85)"; +ctx.filter = "grayscale(100%)"; +ctx.font = "20px serif"; +ctx.fillText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/fillText-with-filter-grayscale-2-ref.html b/dom/canvas/test/reftest/filters/fillText-with-filter-grayscale-2-ref.html new file mode 100644 index 000000000..9e416dbe9 --- /dev/null +++ b/dom/canvas/test/reftest/filters/fillText-with-filter-grayscale-2-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.globalAlpha = 0.5; +ctx.fillStyle = "rgb(85,85,85)"; +ctx.font = "20px serif"; +ctx.fillText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/fillText-with-filter-grayscale-2.html b/dom/canvas/test/reftest/filters/fillText-with-filter-grayscale-2.html new file mode 100644 index 000000000..3abc4ae82 --- /dev/null +++ b/dom/canvas/test/reftest/filters/fillText-with-filter-grayscale-2.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.globalAlpha = 0.5; +ctx.fillStyle = "rgb(85,85,85)"; +ctx.filter = "grayscale(100%)"; +ctx.font = "20px serif"; +ctx.fillText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/fillText-with-filter-opacity-1-ref.html b/dom/canvas/test/reftest/filters/fillText-with-filter-opacity-1-ref.html new file mode 100644 index 000000000..f471335c8 --- /dev/null +++ b/dom/canvas/test/reftest/filters/fillText-with-filter-opacity-1-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.globalAlpha = 0.5; +ctx.fillStyle = "rgb(0,128,0)"; +ctx.font = "20px serif"; +ctx.fillText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/fillText-with-filter-opacity-1.html b/dom/canvas/test/reftest/filters/fillText-with-filter-opacity-1.html new file mode 100644 index 000000000..898a3d926 --- /dev/null +++ b/dom/canvas/test/reftest/filters/fillText-with-filter-opacity-1.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.fillStyle = "rgb(0,128,0)"; +ctx.filter = "opacity(0.5)"; +ctx.font = "20px serif"; +ctx.fillText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/fillText-with-filter-opacity-2-ref.html b/dom/canvas/test/reftest/filters/fillText-with-filter-opacity-2-ref.html new file mode 100644 index 000000000..64762a3a6 --- /dev/null +++ b/dom/canvas/test/reftest/filters/fillText-with-filter-opacity-2-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.globalAlpha = 0.25; +ctx.fillStyle = "rgb(0,255,0)"; +ctx.font = "20px serif"; +ctx.fillText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/fillText-with-filter-opacity-2.html b/dom/canvas/test/reftest/filters/fillText-with-filter-opacity-2.html new file mode 100644 index 000000000..41c9c5c64 --- /dev/null +++ b/dom/canvas/test/reftest/filters/fillText-with-filter-opacity-2.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.globalAlpha = 0.5; +ctx.fillStyle = "rgb(0,255,0)"; +ctx.filter = "opacity(0.5)"; +ctx.font = "20px serif"; +ctx.fillText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/fillText-with-shadow-1.html b/dom/canvas/test/reftest/filters/fillText-with-shadow-1.html new file mode 100644 index 000000000..a84b2fe92 --- /dev/null +++ b/dom/canvas/test/reftest/filters/fillText-with-shadow-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.shadowColor = "black"; +ctx.shadowBlur = 2; +ctx.fillStyle = "green"; +ctx.font = "20px serif"; +ctx.fillText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/fillText-with-shadow-2.html b/dom/canvas/test/reftest/filters/fillText-with-shadow-2.html new file mode 100644 index 000000000..17975bf37 --- /dev/null +++ b/dom/canvas/test/reftest/filters/fillText-with-shadow-2.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.globalAlpha = 0.5; +ctx.shadowColor = "black"; +ctx.shadowBlur = 2; +ctx.fillStyle = "green"; +ctx.font = "20px serif"; +ctx.fillText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/fillText-without-shadow-1-ref.html b/dom/canvas/test/reftest/filters/fillText-without-shadow-1-ref.html new file mode 100644 index 000000000..5d332e3f0 --- /dev/null +++ b/dom/canvas/test/reftest/filters/fillText-without-shadow-1-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.fillStyle = "green"; +ctx.font = "20px serif"; +ctx.fillText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/fillText-without-shadow-2-ref.html b/dom/canvas/test/reftest/filters/fillText-without-shadow-2-ref.html new file mode 100644 index 000000000..946917583 --- /dev/null +++ b/dom/canvas/test/reftest/filters/fillText-without-shadow-2-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.globalAlpha = 0.5; +ctx.fillStyle = "green"; +ctx.font = "20px serif"; +ctx.fillText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/global-alpha-ref.html b/dom/canvas/test/reftest/filters/global-alpha-ref.html new file mode 100644 index 000000000..257758140 --- /dev/null +++ b/dom/canvas/test/reftest/filters/global-alpha-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.globalAlpha = 0.5; +ctx.fillStyle = '#000'; +ctx.fillRect(25, 35, 50, 40); +ctx.fillStyle = '#0f0'; +ctx.fillRect(25, 25, 50, 40); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/global-alpha.html b/dom/canvas/test/reftest/filters/global-alpha.html new file mode 100644 index 000000000..8b6eb9752 --- /dev/null +++ b/dom/canvas/test/reftest/filters/global-alpha.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.filter = 'drop-shadow(0 10px #000)'; +ctx.globalAlpha = 0.5; +ctx.fillStyle = '#0f0'; +ctx.fillRect(25, 25, 50, 40); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/global-composite-operation-ref.html b/dom/canvas/test/reftest/filters/global-composite-operation-ref.html new file mode 100644 index 000000000..cad908935 --- /dev/null +++ b/dom/canvas/test/reftest/filters/global-composite-operation-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = '#000'; +ctx.arc(50, 50, 25, 0, Math.PI * 2, true); +ctx.fill(); + +var tmp_canvas = canvas.cloneNode(); +var tmp_ctx = tmp_canvas.getContext('2d'); +tmp_ctx.fillStyle = '#0f0'; +tmp_ctx.fillRect(25, 25, 50, 50); +tmp_ctx.fillStyle = '#000'; +tmp_ctx.fillRect(25, 65, 50, 10); + +ctx.globalCompositeOperation = 'source-in'; +ctx.drawImage(tmp_canvas, 0, 0); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/global-composite-operation.html b/dom/canvas/test/reftest/filters/global-composite-operation.html new file mode 100644 index 000000000..61a6f206a --- /dev/null +++ b/dom/canvas/test/reftest/filters/global-composite-operation.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = '#000'; +ctx.arc(50, 50, 25, 0, Math.PI * 2, true); +ctx.fill(); + +ctx.filter = 'drop-shadow(0 10px black)'; +ctx.globalCompositeOperation = 'source-in'; +ctx.fillStyle = '#0f0'; +ctx.fillRect(25, 25, 50, 40); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/liveness.html b/dom/canvas/test/reftest/filters/liveness.html new file mode 100644 index 000000000..1f3b75d78 --- /dev/null +++ b/dom/canvas/test/reftest/filters/liveness.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.font = '20px sans-serif'; +ctx.filter = 'drop-shadow(0 .5em black)'; +ctx.font = '10px sans-serif'; +ctx.fillStyle = '#0f0'; +ctx.fillRect(25, 25, 50, 40); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/multiple-drop-shadows.html b/dom/canvas/test/reftest/filters/multiple-drop-shadows.html new file mode 100644 index 000000000..f8d9261c6 --- /dev/null +++ b/dom/canvas/test/reftest/filters/multiple-drop-shadows.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = '#0f0'; +ctx.filter = 'drop-shadow(0 10px black) drop-shadow(10px 0 #ccc)'; +ctx.fillRect(20, 25, 50, 40); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/ref.html b/dom/canvas/test/reftest/filters/ref.html new file mode 100644 index 000000000..bb634fe66 --- /dev/null +++ b/dom/canvas/test/reftest/filters/ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = '#0f0'; +ctx.fillRect(25, 25, 50, 40); +ctx.fillStyle = '#000'; +ctx.fillRect(25, 65, 50, 10); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/reftest-stylo.list b/dom/canvas/test/reftest/filters/reftest-stylo.list new file mode 100644 index 000000000..a90746965 --- /dev/null +++ b/dom/canvas/test/reftest/filters/reftest-stylo.list @@ -0,0 +1,21 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +default-preferences pref(canvas.filters.enabled,true) + +== default-color.html default-color.html +== drop-shadow.html drop-shadow.html +== drop-shadow-transformed.html drop-shadow-transformed.html +fuzzy-if(azureSkia,1,1500) == global-alpha.html global-alpha.html +== global-composite-operation.html global-composite-operation.html +== liveness.html liveness.html +== multiple-drop-shadows.html multiple-drop-shadows.html +== shadow.html shadow.html +== subregion-fill-paint.html subregion-fill-paint.html +== subregion-stroke-paint.html subregion-stroke-paint.html +== svg-bbox.html svg-bbox.html +== svg-inline.html svg-inline.html +== svg-liveness.html svg-liveness.html +== svg-off-screen.html svg-off-screen.html +== units.html units.html +== units-em.html units-em.html +== units-ex.html units-ex.html +== units-off-screen.html units-off-screen.html diff --git a/dom/canvas/test/reftest/filters/reftest.list b/dom/canvas/test/reftest/filters/reftest.list new file mode 100644 index 000000000..983030715 --- /dev/null +++ b/dom/canvas/test/reftest/filters/reftest.list @@ -0,0 +1,30 @@ +default-preferences pref(canvas.filters.enabled,true) + +== default-color.html ref.html +== drop-shadow.html ref.html +== drop-shadow-transformed.html ref.html +fuzzy-if(azureSkia,1,1500) == global-alpha.html global-alpha-ref.html +== global-composite-operation.html global-composite-operation-ref.html +== liveness.html ref.html +== multiple-drop-shadows.html shadow-ref.html +== shadow.html shadow-ref.html +== subregion-fill-paint.html subregion-ref.html +== subregion-stroke-paint.html subregion-ref.html +== svg-bbox.html svg-bbox-ref.html +== svg-inline.html ref.html +== svg-liveness.html ref.html +== svg-off-screen.html ref.html +== units.html ref.html +== units-em.html ref.html +== units-ex.html ref.html +== units-off-screen.html ref.html +fuzzy(1,700) == fillText-with-filter-opacity-1.html fillText-with-filter-opacity-1-ref.html +fuzzy(1,302) == fillText-with-filter-opacity-2.html fillText-with-filter-opacity-2-ref.html +fuzzy(1,400) == strokeText-with-filter-grayscale-1.html strokeText-with-filter-grayscale-1-ref.html +fuzzy(1,400) == strokeText-with-filter-grayscale-2.html strokeText-with-filter-grayscale-2-ref.html +!= fillText-with-shadow-1.html fillText-without-shadow-1-ref.html +!= fillText-with-shadow-2.html fillText-without-shadow-2-ref.html +fuzzy(1,400) == fillText-with-filter-grayscale-1.html fillText-with-filter-grayscale-1-ref.html +fuzzy(1,400) == fillText-with-filter-grayscale-2.html fillText-with-filter-grayscale-2-ref.html +!= strokeText-with-shadow-1.html strokeText-without-shadow-1-ref.html +!= strokeText-with-shadow-2.html strokeText-without-shadow-2-ref.html diff --git a/dom/canvas/test/reftest/filters/shadow-ref.html b/dom/canvas/test/reftest/filters/shadow-ref.html new file mode 100644 index 000000000..736c5f94d --- /dev/null +++ b/dom/canvas/test/reftest/filters/shadow-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = '#0f0'; +ctx.shadowOffsetX = 10; +ctx.shadowColor = '#ccc'; +ctx.fillRect(20, 25, 50, 40); +ctx.fillStyle = '#000'; +ctx.fillRect(20, 65, 50, 10); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/shadow.html b/dom/canvas/test/reftest/filters/shadow.html new file mode 100644 index 000000000..61de33bdc --- /dev/null +++ b/dom/canvas/test/reftest/filters/shadow.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = '#0f0'; +ctx.filter = 'drop-shadow(0 10px black)'; +ctx.shadowOffsetX = 10; +ctx.shadowColor = '#ccc'; +ctx.fillRect(20, 25, 50, 40); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/strokeText-with-filter-grayscale-1-ref.html b/dom/canvas/test/reftest/filters/strokeText-with-filter-grayscale-1-ref.html new file mode 100644 index 000000000..e576da629 --- /dev/null +++ b/dom/canvas/test/reftest/filters/strokeText-with-filter-grayscale-1-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.strokeStyle = "rgb(85,85,85)"; +ctx.font = "20px serif"; +ctx.strokeText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/strokeText-with-filter-grayscale-1.html b/dom/canvas/test/reftest/filters/strokeText-with-filter-grayscale-1.html new file mode 100644 index 000000000..76ef3271e --- /dev/null +++ b/dom/canvas/test/reftest/filters/strokeText-with-filter-grayscale-1.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.strokeStyle = "rgb(85,85,85)"; +ctx.filter = "grayscale(100%)"; +ctx.font = "20px serif"; +ctx.strokeText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/strokeText-with-filter-grayscale-2-ref.html b/dom/canvas/test/reftest/filters/strokeText-with-filter-grayscale-2-ref.html new file mode 100644 index 000000000..e020ab205 --- /dev/null +++ b/dom/canvas/test/reftest/filters/strokeText-with-filter-grayscale-2-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.globalAlpha = 0.5; +ctx.strokeStyle = "rgb(85,85,85)"; +ctx.font = "20px serif"; +ctx.strokeText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/strokeText-with-filter-grayscale-2.html b/dom/canvas/test/reftest/filters/strokeText-with-filter-grayscale-2.html new file mode 100644 index 000000000..60e337498 --- /dev/null +++ b/dom/canvas/test/reftest/filters/strokeText-with-filter-grayscale-2.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.globalAlpha = 0.5; +ctx.strokeStyle = "rgb(85,85,85)"; +ctx.filter = "grayscale(100%)"; +ctx.font = "20px serif"; +ctx.strokeText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/strokeText-with-shadow-1.html b/dom/canvas/test/reftest/filters/strokeText-with-shadow-1.html new file mode 100644 index 000000000..6c7ecf137 --- /dev/null +++ b/dom/canvas/test/reftest/filters/strokeText-with-shadow-1.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.shadowColor = "black"; +ctx.shadowBlur = 2; +ctx.strokeStyle = "green"; +ctx.font = "20px serif"; +ctx.strokeText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/strokeText-with-shadow-2.html b/dom/canvas/test/reftest/filters/strokeText-with-shadow-2.html new file mode 100644 index 000000000..3b8b8be47 --- /dev/null +++ b/dom/canvas/test/reftest/filters/strokeText-with-shadow-2.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.globalAlpha = 0.5; +ctx.shadowColor = "black"; +ctx.shadowBlur = 2; +ctx.strokeStyle = "green"; +ctx.font = "20px serif"; +ctx.strokeText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/strokeText-without-shadow-1-ref.html b/dom/canvas/test/reftest/filters/strokeText-without-shadow-1-ref.html new file mode 100644 index 000000000..120cce9eb --- /dev/null +++ b/dom/canvas/test/reftest/filters/strokeText-without-shadow-1-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.strokeStyle = "green"; +ctx.font = "20px serif"; +ctx.strokeText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/strokeText-without-shadow-2-ref.html b/dom/canvas/test/reftest/filters/strokeText-without-shadow-2-ref.html new file mode 100644 index 000000000..0892587a5 --- /dev/null +++ b/dom/canvas/test/reftest/filters/strokeText-without-shadow-2-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<head> +<canvas id="canvas" width="100" height="100"></canvas> +<script> +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.globalAlpha = 0.5; +ctx.strokeStyle = "green"; +ctx.font = "20px serif"; +ctx.strokeText("Hello world", 0, 50); +</script> +</body></html> diff --git a/dom/canvas/test/reftest/filters/subregion-fill-paint.html b/dom/canvas/test/reftest/filters/subregion-fill-paint.html new file mode 100644 index 000000000..854190359 --- /dev/null +++ b/dom/canvas/test/reftest/filters/subregion-fill-paint.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<body> +<svg style="display: block; width: 0; height: 0"> + <defs> + <filter id="merge" primitiveUnits="objectBoundingBox"> + <feMerge x="25%" y="25%" width="50%" height="50%"> + <feMergeNode in="SourceGraphic"/> + <feMergeNode in="FillPaint"/> + </feMerge> + </filter> + </defs> +</svg> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.filter = 'url(#merge)'; +ctx.fillStyle = '#0f0'; +ctx.arc(50, 50, 25, 0, Math.PI * 2, true); +ctx.fill(); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/subregion-ref.html b/dom/canvas/test/reftest/filters/subregion-ref.html new file mode 100644 index 000000000..97b231b94 --- /dev/null +++ b/dom/canvas/test/reftest/filters/subregion-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = '#0f0'; +ctx.fillRect(25, 25, 50, 50); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/subregion-stroke-paint.html b/dom/canvas/test/reftest/filters/subregion-stroke-paint.html new file mode 100644 index 000000000..24ed92a9b --- /dev/null +++ b/dom/canvas/test/reftest/filters/subregion-stroke-paint.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<body> +<svg style="display: block; width: 0; height: 0"> + <defs> + <filter id="merge" primitiveUnits="objectBoundingBox"> + <feMerge x="25%" y="25%" width="50%" height="50%"> + <feMergeNode in="SourceGraphic"/> + <feMergeNode in="StrokePaint"/> + </feMerge> + </filter> + </defs> +</svg> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.filter = 'url(#merge)'; +ctx.strokeStyle = '#0f0'; +ctx.arc(50, 50, 25, 0, Math.PI * 2, true); +ctx.fill(); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/svg-bbox-ref.html b/dom/canvas/test/reftest/filters/svg-bbox-ref.html new file mode 100644 index 000000000..323cea948 --- /dev/null +++ b/dom/canvas/test/reftest/filters/svg-bbox-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = '#0f0'; +ctx.fillRect(0, 0, 100, 100); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/svg-bbox.html b/dom/canvas/test/reftest/filters/svg-bbox.html new file mode 100644 index 000000000..f25e26355 --- /dev/null +++ b/dom/canvas/test/reftest/filters/svg-bbox.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<body> +<svg style="display: block; width: 0; height: 0"> + <defs> + <filter id="color-matrix"> + <feColorMatrix type="matrix" in="SourceGraphic" + values="0 0 0 0 0 + 0 0 0 0 255 + 0 0 0 0 0 + 0 0 0 0 255"/> + </filter> + </defs> +</svg> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.filter = 'url(#color-matrix)'; +ctx.fillStyle = '#fff'; +ctx.fillRect(25, 25, 50, 50); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/svg-inline.html b/dom/canvas/test/reftest/filters/svg-inline.html new file mode 100644 index 000000000..f9be99800 --- /dev/null +++ b/dom/canvas/test/reftest/filters/svg-inline.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<body> +<svg style="display: block; width: 0; height: 0"> + <defs> + <filter id="drop-shadow"> + <feGaussianBlur in="SourceAlpha" stdDeviation="0"/> + <feOffset dx="0" dy="10" result="offsetblur"/> + <feFlood flood-color="rgba(0,0,0,1)"/> + <feComposite in2="offsetblur" operator="in"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + </defs> +</svg> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.filter = 'url(#drop-shadow)'; +ctx.fillStyle = '#0f0'; +ctx.fillRect(25, 25, 50, 40); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/svg-liveness.html b/dom/canvas/test/reftest/filters/svg-liveness.html new file mode 100644 index 000000000..732fe7562 --- /dev/null +++ b/dom/canvas/test/reftest/filters/svg-liveness.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html> +<body> +<script> + +var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); +svg.setAttribute('style', 'display: block; width: 0; height: 0'); + +var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs'); + +var dropShadowFilter = document.createElementNS('http://www.w3.org/2000/svg', 'filter'); +dropShadowFilter.setAttribute('id', 'drop-shadow'); + +var gaussianFilter = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur'); +gaussianFilter.setAttribute('in', 'SourceAlpha'); +gaussianFilter.setAttribute('stdDeviation', '0'); +dropShadowFilter.appendChild(gaussianFilter); + +var offset = document.createElementNS('http://www.w3.org/2000/svg', 'feOffset'); +offset.setAttribute('dx', '0'); +offset.setAttribute('dy', '0'); +offset.setAttribute('result', 'offsetblur'); +dropShadowFilter.appendChild(offset); + +var flood = document.createElementNS('http://www.w3.org/2000/svg', 'feFlood'); +flood.setAttribute('flood-color', 'rgba(0,0,0,1)'); +dropShadowFilter.appendChild(flood); + +var composite = document.createElementNS('http://www.w3.org/2000/svg', 'feComposite'); +composite.setAttribute('in2', 'offsetblur'); +composite.setAttribute('operator', 'in'); +dropShadowFilter.appendChild(composite); + +var merge = document.createElementNS('http://www.w3.org/2000/svg', 'feMerge'); +var mergeNode = document.createElementNS('http://www.w3.org/2000/svg', 'feMergeNode'); +merge.appendChild(mergeNode); + +var mergeNode = document.createElementNS('http://www.w3.org/2000/svg', 'feMergeNode'); +mergeNode.setAttribute('in', 'SourceGraphic'); +merge.appendChild(mergeNode); +dropShadowFilter.appendChild(merge); + +defs.appendChild(dropShadowFilter); +svg.appendChild(defs); + +document.body.appendChild(svg); + +</script> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.filter = 'url(#drop-shadow)'; + +offset.setAttribute('dy', '10'); + +ctx.fillStyle = '#0f0'; +ctx.fillRect(25, 25, 50, 40); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/svg-off-screen.html b/dom/canvas/test/reftest/filters/svg-off-screen.html new file mode 100644 index 000000000..1aa22cd99 --- /dev/null +++ b/dom/canvas/test/reftest/filters/svg-off-screen.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<body> +<svg style="display: block; width: 0; height: 0"> + <defs> + <filter id="drop-shadow"> + <feGaussianBlur in="SourceAlpha" stdDeviation="0"/> + <feOffset dx="0" dy="10" result="offsetblur"/> + <feFlood flood-color="rgba(0,0,0,1)"/> + <feComposite in2="offsetblur" operator="in"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + </defs> +</svg> +<script> + +var canvas = document.createElement('canvas'); +canvas.width = 100; +canvas.height = 100; +var ctx = canvas.getContext('2d'); + +ctx.filter = 'url(#drop-shadow)'; +ctx.fillStyle = '#0f0'; +ctx.fillRect(25, 25, 50, 40); + +document.body.appendChild(canvas); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/units-em.html b/dom/canvas/test/reftest/filters/units-em.html new file mode 100644 index 000000000..44f76dc4b --- /dev/null +++ b/dom/canvas/test/reftest/filters/units-em.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.font = '20px sans-serif'; +ctx.filter = 'drop-shadow(0 .5em black)'; +ctx.fillStyle = '#0f0'; +ctx.fillRect(25, 25, 50, 40); + +canvas.style.fontSize = '5px'; +ctx.font = '4em sans-serif'; +ctx.filter = 'drop-shadow(0 .5em black)'; + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/units-ex.html b/dom/canvas/test/reftest/filters/units-ex.html new file mode 100644 index 000000000..3bf4fadd7 --- /dev/null +++ b/dom/canvas/test/reftest/filters/units-ex.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.font = '10px sans-serif'; +ctx.filter = 'drop-shadow(0 2ex black)'; +ctx.fillStyle = '#0f0'; +ctx.fillRect(25, 25, 50, 40); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/units-off-screen.html b/dom/canvas/test/reftest/filters/units-off-screen.html new file mode 100644 index 000000000..879e575c1 --- /dev/null +++ b/dom/canvas/test/reftest/filters/units-off-screen.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<body> +<script> + +var canvas = document.createElement('canvas'); +canvas.width = 500; +canvas.height = 500; +canvas.style.width = '100px'; +canvas.style.height = '100px'; +var ctx = canvas.getContext('2d'); + +ctx.filter = 'drop-shadow(0 50px black)'; +ctx.fillStyle = '#0f0'; +ctx.fillRect(125, 125, 250, 200); + +document.body.appendChild(canvas); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/units-pt.html b/dom/canvas/test/reftest/filters/units-pt.html new file mode 100644 index 000000000..74fecb3d8 --- /dev/null +++ b/dom/canvas/test/reftest/filters/units-pt.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="100" height="100"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.filter = 'drop-shadow(0 10mm black)'; +ctx.fillStyle = '#0f0'; +ctx.fillRect(25, 25, 50, 40); + +</script> +</body> +</html> diff --git a/dom/canvas/test/reftest/filters/units.html b/dom/canvas/test/reftest/filters/units.html new file mode 100644 index 000000000..d12abdeb1 --- /dev/null +++ b/dom/canvas/test/reftest/filters/units.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="500" height="500" style="width: 100px; height: 100px"></canvas> +<script> + +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.filter = 'drop-shadow(0 50px black)'; +ctx.fillStyle = '#0f0'; +ctx.fillRect(125, 125, 250, 200); + +</script> +</body> +</html> |