diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /dom/canvas/test/reftest/filters | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'dom/canvas/test/reftest/filters')
48 files changed, 914 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 0000000000..82fb5eda38 --- /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 0000000000..0cf33deea8 --- /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 0000000000..6977b7d5e0 --- /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 0000000000..897d0565f1 --- /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 0000000000..28c3d7d028 --- /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 0000000000..9e416dbe94 --- /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 0000000000..3abc4ae82a --- /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 0000000000..f471335c86 --- /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 0000000000..898a3d9261 --- /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 0000000000..64762a3a67 --- /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 0000000000..41c9c5c642 --- /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 0000000000..a84b2fe92d --- /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 0000000000..17975bf37c --- /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 0000000000..5d332e3f09 --- /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 0000000000..9469175832 --- /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 0000000000..2577581401 --- /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 0000000000..8b6eb97520 --- /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 0000000000..cad9089354 --- /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 0000000000..61a6f206a3 --- /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-document-open.html b/dom/canvas/test/reftest/filters/liveness-document-open.html new file mode 100644 index 0000000000..de31875e53 --- /dev/null +++ b/dom/canvas/test/reftest/filters/liveness-document-open.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html lang="en"> +<title>canvas filters: remove referenced filter element through document.open()</title> +<body onload="loaded()"> +<canvas id="canvas" width="10" height="10"></canvas> +<svg height="0"> + <filter id="filter"> + <feFlood flood-color="red"/> + </filter> +</svg> +<script> +function loaded() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.filter = 'url(#filter)'; + ctx.fillRect(0, 0, 10, 10); // do a draw first to work around bug 1287316 + document.open(); + // The document.open() call removed #filter from the document. So the filter + // reference should now be invalid, and the rect should be drawn without a + // filter applied, resulting in black. + ctx.fillRect(0, 0, 10, 10); + try { + var data = ctx.getImageData(0, 0, 1, 1).data; + if (data[0] == 0 && data[1] == 0 && data[2] == 0 && data[3] == 255) { + // Successfully painted black. + document.write('PASS'); + } else { + // Painted something else, like red. + document.write('FAIL'); + } + } catch (e) { + document.write('getImageData failed'); + } + document.close(); +} +</script> diff --git a/dom/canvas/test/reftest/filters/liveness-document-removeChild.html b/dom/canvas/test/reftest/filters/liveness-document-removeChild.html new file mode 100644 index 0000000000..acce9b8694 --- /dev/null +++ b/dom/canvas/test/reftest/filters/liveness-document-removeChild.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang="en"> +<title>canvas filters: remove referenced filter element through document.removeChild()</title> +<body onload="loaded()"> +<canvas id="canvas" width="10" height="10"></canvas> +<svg height="0"> + <filter id="filter"> + <feFlood flood-color="red"/> + </filter> +</svg> +<script> +function loaded() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.filter = 'url(#filter)'; + ctx.fillRect(0, 0, 10, 10); // do a draw first to work around bug 1287316 + document.removeChild(document.documentElement); + // The document.removeChild() call removed #filter from the document. So the + // filter reference should now be invalid, and the rect should be drawn + // without a filter applied, resulting in black. + ctx.fillRect(0, 0, 10, 10); + try { + var data = ctx.getImageData(0, 0, 1, 1).data; + if (data[0] == 0 && data[1] == 0 && data[2] == 0 && data[3] == 255) { + // Successfully painted black. + document.write('PASS'); + } else { + // Painted something else, like red. + document.write('FAIL'); + } + } catch (e) { + document.write('getImageData failed'); + } +} +</script> diff --git a/dom/canvas/test/reftest/filters/liveness.html b/dom/canvas/test/reftest/filters/liveness.html new file mode 100644 index 0000000000..1f3b75d78e --- /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 0000000000..f8d9261c65 --- /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 0000000000..bb634fe66d --- /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.list b/dom/canvas/test/reftest/filters/reftest.list new file mode 100644 index 0000000000..c9990f5cc1 --- /dev/null +++ b/dom/canvas/test/reftest/filters/reftest.list @@ -0,0 +1,32 @@ +defaults pref(canvas.filters.enabled,true) + +== default-color.html ref.html +== drop-shadow.html ref.html +== drop-shadow-transformed.html ref.html +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)||azureSkia,0-1,0-1500) == global-alpha.html global-alpha-ref.html +== global-composite-operation.html global-composite-operation-ref.html +== liveness.html ref.html +== liveness-document-open.html data:text/html,PASS +== liveness-document-removeChild.html data:text/html,PASS +== 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(0-2,0-700) == fillText-with-filter-opacity-1.html fillText-with-filter-opacity-1-ref.html +fuzzy(0-1,0-302) == fillText-with-filter-opacity-2.html fillText-with-filter-opacity-2-ref.html +fuzzy(0-1,0-600) fuzzy-if(d2d&&!swgl,0-36,0-15) == strokeText-with-filter-grayscale-1.html strokeText-with-filter-grayscale-1-ref.html +fuzzy(0-1,0-600) == 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(0-1,0-400) == fillText-with-filter-grayscale-1.html fillText-with-filter-grayscale-1-ref.html +fuzzy(0-1,0-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 0000000000..736c5f94dd --- /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 0000000000..61de33bdc2 --- /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 0000000000..e576da6294 --- /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 0000000000..76ef3271e6 --- /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 0000000000..e020ab205c --- /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 0000000000..60e3374980 --- /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 0000000000..6c7ecf137a --- /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 0000000000..3b8b8be478 --- /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 0000000000..120cce9eb9 --- /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 0000000000..0892587a5e --- /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 0000000000..854190359f --- /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 0000000000..97b231b946 --- /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 0000000000..24ed92a9be --- /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 0000000000..323cea948a --- /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 0000000000..f25e26355d --- /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 0000000000..f9be99800a --- /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 0000000000..732fe7562f --- /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 0000000000..1aa22cd990 --- /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 0000000000..44f76dc4b4 --- /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 0000000000..3bf4fadd74 --- /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 0000000000..879e575c10 --- /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 0000000000..74fecb3d81 --- /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 0000000000..d12abdeb13 --- /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> |