diff options
Diffstat (limited to 'layout/reftests/image-element')
84 files changed, 1908 insertions, 0 deletions
diff --git a/layout/reftests/image-element/bug-364968-ref.html b/layout/reftests/image-element/bug-364968-ref.html new file mode 100644 index 000000000..4ce990996 --- /dev/null +++ b/layout/reftests/image-element/bug-364968-ref.html @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test if an excessive downscaling works correctly. + (related to bug 364968) +--> +<html> +<style> + img { + -moz-image-rendering: fast; + } +</style> +<body style="margin:0"> + <div style="width:32px; height:16px; margin-left:256px; + background:-moz-element(#g) no-repeat; + background-size:32px 16px;"></div> + <div style="overflow:hidden; height:0;"> + <div id="g" style="width:4096px; height:32px;"> + <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACAAAAAAgCAYAAACG5JhhAAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1wUdBDEnzSKcAAAAAXpJREFUeJzt3MEJwDAMBEE5pP+WnSKCMSwzFdxXsGjtmT0AAABA2nL9AwAAQN5zewAAAAAAAAAA8J8AAAAAAAAAAAACBAAAAAAAAAAAECAAAAAAAAAAAIAAAQAAAAAAAAAABAgAAAAAAAAAACBAAAAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAABAgAAAAAAAAAAAAAIEAAAAAAAAAAAQIAAAAAAAAAAAgAABAAAAAAAAAAAECAAAAAAAAAAAIEAAAAAAAAAAAAAB75p9ewMAAABw2J51ewIAAABwmA8AAAAAAAAAABAgAAAAAAAAAACAAAEAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAAAAAECAAAAAAAAAAAIEAAAAAAAAAAAQIAAAAAAAAAAAAACBAAAAAAAAAAAECAAAAAAAAAAAIAAAQAAAAAAAAAABAgAAAAAAAAAACBAAAAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAABAwAdutQVA2w3ITgAAAABJRU5ErkJggg=="/><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACAAAAAAgCAYAAACG5JhhAAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1wUdBDEnzSKcAAAAAXpJREFUeJzt3MEJwDAMBEE5pP+WnSKCMSwzFdxXsGjtmT0AAABA2nL9AwAAQN5zewAAAAAAAAAA8J8AAAAAAAAAAAACBAAAAAAAAAAAECAAAAAAAAAAAIAAAQAAAAAAAAAABAgAAAAAAAAAACBAAAAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAABAgAAAAAAAAAAAAAIEAAAAAAAAAAAQIAAAAAAAAAAAgAABAAAAAAAAAAAECAAAAAAAAAAAIEAAAAAAAAAAAAAB75p9ewMAAABw2J51ewIAAABwmA8AAAAAAAAAABAgAAAAAAAAAACAAAEAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAAAAAECAAAAAAAAAAAIEAAAAAAAAAAAQIAAAAAAAAAAAAACBAAAAAAAAAAAECAAAAAAAAAAAIAAAQAAAAAAAAAABAgAAAAAAAAAACBAAAAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAABAwAdutQVA2w3ITgAAAABJRU5ErkJggg=="/> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/image-element/bug-364968.html b/layout/reftests/image-element/bug-364968.html new file mode 100644 index 000000000..69db6e1df --- /dev/null +++ b/layout/reftests/image-element/bug-364968.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test if an excessive downscaling works correctly. + (related to bug 364968) +--> +<html> +<body style="margin:0"> + <div style="width:32px; height:16px; margin-left:256px; + background:-moz-element(#g) no-repeat; + background-size:32px 16px;"></div> + <div style="overflow:hidden; height:0;"> + <div id="g" style="width:4096px; height:32px;"> + <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACAAAAAAgCAYAAACG5JhhAAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1wUdBDEnzSKcAAAAAXpJREFUeJzt3MEJwDAMBEE5pP+WnSKCMSwzFdxXsGjtmT0AAABA2nL9AwAAQN5zewAAAAAAAAAA8J8AAAAAAAAAAAACBAAAAAAAAAAAECAAAAAAAAAAAIAAAQAAAAAAAAAABAgAAAAAAAAAACBAAAAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAABAgAAAAAAAAAAAAAIEAAAAAAAAAAAQIAAAAAAAAAAAgAABAAAAAAAAAAAECAAAAAAAAAAAIEAAAAAAAAAAAAAB75p9ewMAAABw2J51ewIAAABwmA8AAAAAAAAAABAgAAAAAAAAAACAAAEAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAAAAAECAAAAAAAAAAAIEAAAAAAAAAAAQIAAAAAAAAAAAAACBAAAAAAAAAAAECAAAAAAAAAAAIAAAQAAAAAAAAAABAgAAAAAAAAAACBAAAAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAABAwAdutQVA2w3ITgAAAABJRU5ErkJggg=="/><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACAAAAAAgCAYAAACG5JhhAAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1wUdBDEnzSKcAAAAAXpJREFUeJzt3MEJwDAMBEE5pP+WnSKCMSwzFdxXsGjtmT0AAABA2nL9AwAAQN5zewAAAAAAAAAA8J8AAAAAAAAAAAACBAAAAAAAAAAAECAAAAAAAAAAAIAAAQAAAAAAAAAABAgAAAAAAAAAACBAAAAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAABAgAAAAAAAAAAAAAIEAAAAAAAAAAAQIAAAAAAAAAAAgAABAAAAAAAAAAAECAAAAAAAAAAAIEAAAAAAAAAAAAAB75p9ewMAAABw2J51ewIAAABwmA8AAAAAAAAAABAgAAAAAAAAAACAAAEAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAAAAAECAAAAAAAAAAAIEAAAAAAAAAAAQIAAAAAAAAAAAAACBAAAAAAAAAAAECAAAAAAAAAAAIAAAQAAAAAAAAAABAgAAAAAAAAAACBAAAAAAAAAAAAAAQIAAAAAAAAAAAgQAAAAAAAAAABAwAdutQVA2w3ITgAAAABJRU5ErkJggg=="/> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/image-element/bug-463204-ref.html b/layout/reftests/image-element/bug-463204-ref.html new file mode 100644 index 000000000..6d427a0c6 --- /dev/null +++ b/layout/reftests/image-element/bug-463204-ref.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> + <head> + <style> + span { + background-image: -moz-element(#g); + display: inline-block; + margin-left: 1px; + } + #repeat { + width: 38px; + height: 38px; + background-repeat: repeat; + } + #norepeat { + width: 19px; + height: 19px; + background-repeat: no-repeat; + background-position: center center; + } + </style> + </head> + <body> + <span id="repeat"></span><br/> + <span id="norepeat"></span> + <div style="overflow:hidden; height:0px"> + <div id="g" style="width:17px; height:17px; border:1px solid red; + background: orange;"></div> + </div> + </body> +</html> + diff --git a/layout/reftests/image-element/bug-463204.html b/layout/reftests/image-element/bug-463204.html new file mode 100644 index 000000000..89e91fa87 --- /dev/null +++ b/layout/reftests/image-element/bug-463204.html @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + bug 463204 +--> +<html> + <head> + <style> + span { + background-image: -moz-element(#g); + display: inline-block; + margin-left: 0.6px; + } + #repeat { + width: 38px; + height: 38px; + background-repeat: repeat; + } + #norepeat { + width: 19px; + height: 19px; + background-repeat: no-repeat; + background-position: center center; + } + </style> + </head> + <body> + <span id="repeat"></span><br/> + <span id="norepeat"></span> + <div style="overflow:hidden; height:0px"> + <div id="g" style="width:17px; height:17px; border:1px solid red; + background: orange;"></div> + </div> + </body> +</html> diff --git a/layout/reftests/image-element/canvas-drawing.js b/layout/reftests/image-element/canvas-drawing.js new file mode 100644 index 000000000..dff8217d7 --- /dev/null +++ b/layout/reftests/image-element/canvas-drawing.js @@ -0,0 +1,11 @@ +function createCanvas() { + var canvas = document.createElement("canvas"); + canvas.setAttribute("width", 100); + canvas.setAttribute("height", 100); + var ctx = canvas.getContext("2d"); + ctx.fillStyle = "rgb(200,0,0)"; + ctx.fillRect(10, 10, 55, 50); + ctx.fillStyle = "rgba(0,0,200,0.5)"; + ctx.fillRect(30, 30, 55, 50); + return canvas; +} diff --git a/layout/reftests/image-element/canvas-inside-document.html b/layout/reftests/image-element/canvas-inside-document.html new file mode 100644 index 000000000..8ee561356 --- /dev/null +++ b/layout/reftests/image-element/canvas-inside-document.html @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> +<body style="margin:0"> + <script src="canvas-drawing.js"></script> + <script> + document.body.appendChild(createCanvas()); + </script> +</body> +</html> diff --git a/layout/reftests/image-element/canvas-outside-document-invalidate-01.html b/layout/reftests/image-element/canvas-outside-document-invalidate-01.html new file mode 100644 index 000000000..cb2a8c048 --- /dev/null +++ b/layout/reftests/image-element/canvas-outside-document-invalidate-01.html @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test that painting in an out-of-document canvas causes a repaint. +--> +<!DOCTYPE html> +<html class="reftest-wait"> +<body style="background: -moz-element(#e) darkred"> + +<script> + +var canvas = document.createElement("canvas"); +canvas.width = canvas.height = 1; +var ctx = canvas.getContext('2d'); +ctx.fillStyle = "red"; +ctx.fillRect(0, 0, 1, 1); +window.addEventListener("MozReftestInvalidate", function () { + setTimeout(function () { + ctx.fillStyle = "white"; + ctx.fillRect(0, 0, 1, 1); + document.documentElement.className = ""; + }, 0); +}, false); + +document.mozSetImageElement("e", canvas); + +</script> +</body> +</html> diff --git a/layout/reftests/image-element/canvas-outside-document-invalidate-02.html b/layout/reftests/image-element/canvas-outside-document-invalidate-02.html new file mode 100644 index 000000000..a24e398a2 --- /dev/null +++ b/layout/reftests/image-element/canvas-outside-document-invalidate-02.html @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test that a complete redraw of the context invalidates the rendering observer, too. + (mozDrawText calls nsCanvasRenderingContext2D::Redraw() without a dirty rect to invalidate everything.) +--> +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<body style="background: -moz-element(#e) white"> + +<script> + +var canvas = document.createElement("canvas"); +canvas.width = canvas.height = 1; +var ctx = canvas.getContext('2d'); +ctx.fillStyle = "red"; +ctx.fillRect(0, 0, 1, 1); +window.addEventListener("MozReftestInvalidate", function () { + ctx.strokeStyle = "white"; + ctx.font = "50px bold Arial"; + ctx.translate(-8, 18); + ctx.lineWidth = 50; + ctx.strokeText("•", 0, 0); + document.documentElement.className = ""; +}, false); + +document.mozSetImageElement("e", canvas); + +</script> +</body> +</html> diff --git a/layout/reftests/image-element/canvas-outside-document.html b/layout/reftests/image-element/canvas-outside-document.html new file mode 100644 index 000000000..259b69e73 --- /dev/null +++ b/layout/reftests/image-element/canvas-outside-document.html @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test document.mozSetImageElement() with a DOM element not in a document. +--> +<html> +<body style="margin:0"> + <div style="width:100px; height:100px; + background:-moz-element(#d);"></div> + + <script src="canvas-drawing.js"></script> + <script> + var canvas = createCanvas(); + document.mozSetImageElement("d", canvas); + </script> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-background-size-01-ref.html b/layout/reftests/image-element/element-paint-background-size-01-ref.html new file mode 100644 index 000000000..473c7c3a3 --- /dev/null +++ b/layout/reftests/image-element/element-paint-background-size-01-ref.html @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> +<body> + <div style="width:120px; height:120px; border: 1px solid black;"> + <div style="border:30px solid red; width:60px; height:60px; + background:orange;"></div> + </div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-background-size-01.html b/layout/reftests/image-element/element-paint-background-size-01.html new file mode 100644 index 000000000..9d70cc1e3 --- /dev/null +++ b/layout/reftests/image-element/element-paint-background-size-01.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test with background-size. +--> +<html> +<body> + <div style="width:120px; height:120px; border:1px solid black; + background:-moz-element(#d) no-repeat; + background-size:100%"></div> + <div style="overflow:hidden; height:0;"> + <div id="d" style="border:10px solid red; width:20px; height:20px; + background:orange;"></div> + </div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-background-size-02-ref.html b/layout/reftests/image-element/element-paint-background-size-02-ref.html new file mode 100644 index 000000000..08664176e --- /dev/null +++ b/layout/reftests/image-element/element-paint-background-size-02-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> +<body style="filter:url(#thresholdAt128);"> + <div style="width:80px; height:80px; border: 1px solid black;"> + <div style="border:20px solid red; width:40px; height:40px; + background:yellow;"></div> + </div> + <svg> + <filter id="thresholdAt128" color-interpolation-filters="sRGB"> + <feColorMatrix type="matrix" + values="255 0 0 0 -128 + 0 255 0 0 -128 + 0 0 255 0 -128 + 0 0 0 255 -128"/> + + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-background-size-02.html b/layout/reftests/image-element/element-paint-background-size-02.html new file mode 100644 index 000000000..91cea3e3f --- /dev/null +++ b/layout/reftests/image-element/element-paint-background-size-02.html @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test with background-size. +--> +<html> +<body style="filter:url(#thresholdAt128);"> + <div style="width:80px; height:80px; border:1px solid black; + background:-moz-element(#d) no-repeat; + background-size:100%"></div> + <div style="overflow:hidden; height:0;"> + <div id="d" style="border:10px solid red; width:20px; height:20px; + background:yellow;"></div> + </div> + <svg> + <filter id="thresholdAt128" color-interpolation-filters="sRGB"> + <feColorMatrix type="matrix" + values="255 0 0 0 -128 + 0 255 0 0 -128 + 0 0 255 0 -128 + 0 0 0 255 -128"/> + + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-clippath-ref.html b/layout/reftests/image-element/element-paint-clippath-ref.html new file mode 100644 index 000000000..12cebc2ba --- /dev/null +++ b/layout/reftests/image-element/element-paint-clippath-ref.html @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> +<body style="margin:0"> + <div style="margin:50px; width:50px; height:50px; background:lime;"></div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-clippath.html b/layout/reftests/image-element/element-paint-clippath.html new file mode 100644 index 000000000..e393d277c --- /dev/null +++ b/layout/reftests/image-element/element-paint-clippath.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test with clip-path. +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> + <div style="width:200px; height:200px; + clip-path:url(#c); + background:-moz-element(#d);"></div> + + <div style="overflow:hidden; height:0;"> + <div id="d" style="width:200px; height:200px; background:lime;"></div> + </div> + <svg height="0"> + <clipPath id="c" clipPathUnits="userSpaceOnUse"> + <rect x="50" y="50" width="50" height="50"></rect> + </clipPath> + </svg> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-continuation-ref.html b/layout/reftests/image-element/element-paint-continuation-ref.html new file mode 100644 index 000000000..ddfae7328 --- /dev/null +++ b/layout/reftests/image-element/element-paint-continuation-ref.html @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test painting a continuation. +--> +<html> +<style> +@font-face +{ + font-family: Ahem; + src: url(../fonts/Ahem.ttf); +} +</style> +<body style="line-height:1; font-family: Ahem; color: transparent;"> + <div style="width:100px; height:100px; border:10px solid black;"> + <div style="width:50px;"> + <span style="display:inline-block; width:25px; height:1px;"></span + ><span id="d" style="background:-moz-linear-gradient(right, yellow, yellow);" + ><span style="display:inline-block; width:25px; height:1px;"></span> + AA</span> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-continuation.html b/layout/reftests/image-element/element-paint-continuation.html new file mode 100644 index 000000000..c90c58217 --- /dev/null +++ b/layout/reftests/image-element/element-paint-continuation.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test painting a continuation. +--> +<html> +<style> +@font-face +{ + font-family: Ahem; + src: url(../fonts/Ahem.ttf); +} +</style> +<meta name="flags" content="ahem" /> +<body style="line-height:1; font-family: Ahem; color: transparent;"> + <div style="width:100px; height:100px; border:10px solid black; + background:-moz-element(#d) no-repeat;"></div> + <div style="overflow:hidden; height:0; width:50px;"> + <span style="display:inline-block; width:25px; height:1px;"></span + ><span id="d" style="background:yellow;" + ><span style="display:inline-block; width:25px; height:1px;"></span> + AA</span> + </div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-multiple-backgrounds-01-ref.html b/layout/reftests/image-element/element-paint-multiple-backgrounds-01-ref.html new file mode 100644 index 000000000..ff9366a1f --- /dev/null +++ b/layout/reftests/image-element/element-paint-multiple-backgrounds-01-ref.html @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + Multiple -moz-element background images +--> +<!DOCTYPE html> +<html> +<head> +<style> + +#box { + height: 100px; + width: 200px; + background: -moz-linear-gradient(lime,lime) top left no-repeat, + -moz-linear-gradient(green,green) top right no-repeat red; + background-size: 100px 100px; +} + +div > div { + width: 100px; + height: 100px; +} + +</style> +</head> +<body style="margin:0"> +<div id="box"></div> + +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-multiple-backgrounds-01a.html b/layout/reftests/image-element/element-paint-multiple-backgrounds-01a.html new file mode 100644 index 000000000..f36280a24 --- /dev/null +++ b/layout/reftests/image-element/element-paint-multiple-backgrounds-01a.html @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + Multiple -moz-element background images +--> +<!DOCTYPE html> +<html> +<head> +<style> + +#box { + height: 100px; + width: 200px; + background: -moz-element(#lime) top left no-repeat, + -moz-element(#green) top right no-repeat red; +} + +div > div { + width: 100px; + height: 100px; +} + +</style> +</head> +<body style="margin:0"> +<div id="box"></div> + +<div style="overflow:hidden; height:0"> + <div id="lime" style="background-color: lime"></div> + <div id="green" style="background-color: green"></div> +</div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-multiple-backgrounds-01b.html b/layout/reftests/image-element/element-paint-multiple-backgrounds-01b.html new file mode 100644 index 000000000..a48c331f1 --- /dev/null +++ b/layout/reftests/image-element/element-paint-multiple-backgrounds-01b.html @@ -0,0 +1,44 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + Dynamic repaint with multiple -moz-element background images +--> +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<style> + +#box { + height: 100px; + width: 200px; + background: -moz-element(#lime) top left no-repeat, + -moz-element(#green) top right no-repeat red; +} + +div > div { + width: 100px; + height: 100px; +} + +</style> +</head> +<body style="margin:0"> +<div id="box"></div> + +<div style="overflow:hidden; height:0"> + <div id="lime" style="background-color: darkred"></div> + <div id="green" style="background-color: black"></div> +</div> + +<script> + +window.addEventListener("MozReftestInvalidate", function () { + document.getElementById("lime").style.backgroundColor = "lime"; + document.getElementById("green").style.backgroundColor = "green"; + document.documentElement.className = ""; +}, false); + +</script> + +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-multiple-backgrounds-01c.html b/layout/reftests/image-element/element-paint-multiple-backgrounds-01c.html new file mode 100644 index 000000000..4abc349fb --- /dev/null +++ b/layout/reftests/image-element/element-paint-multiple-backgrounds-01c.html @@ -0,0 +1,45 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + Dynamic repaint with multiple -moz-element background images +--> +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<style> + +#box { + height: 100px; + width: 200px; + background: -moz-element(#darkred) top left no-repeat, + -moz-element(#black) top right no-repeat red; +} + +div > div { + width: 100px; + height: 100px; +} + +</style> +</head> +<body style="margin:0"> +<div id="box"></div> + +<div style="overflow:hidden; height:0"> + <div id="darkred" style="background-color: darkred"></div> + <div id="black" style="background-color: black"></div> + <div id="lime" style="background-color: lime"></div> + <div id="green" style="background-color: green"></div> +</div> + +<script> + +window.addEventListener("MozReftestInvalidate", function () { + document.getElementById("box").style.backgroundImage = "-moz-element(#lime), -moz-element(#green)"; + document.documentElement.className = ""; +}, false); + +</script> + +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-native-widget-ref.html b/layout/reftests/image-element/element-paint-native-widget-ref.html new file mode 100644 index 000000000..68fc3c330 --- /dev/null +++ b/layout/reftests/image-element/element-paint-native-widget-ref.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> +<body> + <input type="text"/> + <div style="width:100px; height:100px; overflow:scroll;"> + In 1629, Isaac Beeckman proposed an experiment in which a person would + observe the flash of a cannon reflecting off a mirror about one mile + (1.6 km) away. + </div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-native-widget.html b/layout/reftests/image-element/element-paint-native-widget.html new file mode 100644 index 000000000..bdcadcc2a --- /dev/null +++ b/layout/reftests/image-element/element-paint-native-widget.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test if native widgets are painted correctly. +--> +<html> +<body> + <div style="width:100%; height:100%; background:-moz-element(#w) no-repeat;"></div> + <div style="overflow:hidden; height:0;"> + <div id="w"> + <input type="text"/> + <div style="width:100px; height:100px; overflow:scroll;"> + In 1629, Isaac Beeckman proposed an experiment in which a person would + observe the flash of a cannon reflecting off a mirror about one mile + (1.6 km) away. + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-paintserversize-rounding-01-ref.html b/layout/reftests/image-element/element-paint-paintserversize-rounding-01-ref.html new file mode 100644 index 000000000..8be4f109f --- /dev/null +++ b/layout/reftests/image-element/element-paint-paintserversize-rounding-01-ref.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + The green square should always be rendered at 100px. +--> +<!DOCTYPE html> +<html> +<head> +<style> +body > div { + width: 200px; + height: 200px; + float: left; +} + +body > div > div { + width: 100px; + height: 100px; + background: lime; +} +</style> +</head> +<body style="margin:0"> +<div><div></div></div> +<div><div></div></div> +<div><div></div></div> +<div><div></div></div> +<div><div></div></div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-paintserversize-rounding-01.html b/layout/reftests/image-element/element-paint-paintserversize-rounding-01.html new file mode 100644 index 000000000..826a49450 --- /dev/null +++ b/layout/reftests/image-element/element-paint-paintserversize-rounding-01.html @@ -0,0 +1,39 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + The green square should always be rendered at 100px. +--> +<!DOCTYPE html> +<html> +<head> +<style> +body > div { + width: 200px; + height: 200px; + float: left; + background-repeat: no-repeat; +} + +div > div { + background: lime; +} + +</style> +</head> +<body style="margin:0"> +<div style="background-image: -moz-element(#eInteger)"></div> +<div style="background-image: -moz-element(#eRoundUp1)"></div> +<div style="background-image: -moz-element(#eRoundUp2)"></div> +<div style="background-image: -moz-element(#eRoundDown1)"></div> +<div style="background-image: -moz-element(#eRoundDown2)"></div> + +<div style="overflow:hidden; height:0"> + <div id="eInteger" style="margin: 0.3px; width: 100px; height: 100px;"></div> + <div id="eRoundUp1" style="margin: 0.3px; width: 99.6px; height: 99.6px;"></div> + <div id="eRoundUp2" style="margin: 0.6px; width: 99.6px; height: 99.6px;"></div> + <div id="eRoundDown1" style="margin: 0.3px; width: 100.3px; height: 100.3px;"></div> + <div id="eRoundDown2" style="margin: 0.6px; width: 100.3px; height: 100.3px;"></div> +</div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-paintserversize-rounding-02-ref.html b/layout/reftests/image-element/element-paint-paintserversize-rounding-02-ref.html new file mode 100644 index 000000000..398034a0f --- /dev/null +++ b/layout/reftests/image-element/element-paint-paintserversize-rounding-02-ref.html @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<!DOCTYPE html> +<html> +<head> +<style> +body > div { + width: 200px; + height: 200px; + background: lime; + float: left; +} +</style> +</head> +<body style="margin:0"> +<div></div> +<div></div> +<div></div> +<div></div> +<div></div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-paintserversize-rounding-02.html b/layout/reftests/image-element/element-paint-paintserversize-rounding-02.html new file mode 100644 index 000000000..439cd7266 --- /dev/null +++ b/layout/reftests/image-element/element-paint-paintserversize-rounding-02.html @@ -0,0 +1,37 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<!DOCTYPE html> +<html> +<head> +<style> +body > div { + width: 200px; + height: 200px; + float: left; + background-repeat: repeat; +} + +div > div { + background: lime; +} + +</style> +</head> +<body style="margin:0"> +<div style="background-image: -moz-element(#eInteger)"></div> +<div style="background-image: -moz-element(#eRoundUp1)"></div> +<div style="background-image: -moz-element(#eRoundUp2); background-size: 100.3px;"></div> +<div style="background-image: -moz-element(#eRoundDown1)"></div> +<div style="background-image: -moz-element(#eRoundDown2); background-size: 99.6px;"></div> + +<div style="overflow:hidden; height:0"> + <div id="eInteger" style="margin: 0.3px; width: 100px; height: 100px;"></div> + <div id="eRoundUp1" style="margin: 0.3px; width: 99.6px; height: 99.6px;"></div> + <div id="eRoundUp2" style="margin: 0.6px; width: 99.6px; height: 99.6px;"></div> + <div id="eRoundDown1" style="margin: 0.3px; width: 100.3px; height: 100.3px;"></div> + <div id="eRoundDown2" style="margin: 0.6px; width: 100.3px; height: 100.3px;"></div> +</div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-recursion-ref.html b/layout/reftests/image-element/element-paint-recursion-ref.html new file mode 100644 index 000000000..e37ec2980 --- /dev/null +++ b/layout/reftests/image-element/element-paint-recursion-ref.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> +<body> + <p style="width:90px; height:90px; border:10px solid black; border-top:20px solid black; border-left:20px solid black;"></p> + <div style="width:90px; height:90px; border:10px solid blue; border-top:20px solid blue; border-left:20px solid blue;"></div> + <p style="width:100px; height:100px; border:10px solid green; background:yellow;"></div> + <div style="width:100px; height:100px; border:10px solid cyan;"> + <div style="width:90px; height:90px; border-left:10px solid magenta; border-top:10px solid magenta;"> + <div style="width:80px; height:80px; border-left:10px solid cyan; border-top:10px solid cyan;"></div> + </div> + </div> + <div style="width:100px; height:100px; border:10px solid magenta;"> + <div style="width:90px; height:90px; border-left:10px solid cyan; border-top:10px solid cyan;"> + <div style="width:80px; height:80px; border-left:10px solid magenta; border-top:10px solid magenta;"></div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-recursion.html b/layout/reftests/image-element/element-paint-recursion.html new file mode 100644 index 000000000..d52ebbf0a --- /dev/null +++ b/layout/reftests/image-element/element-paint-recursion.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test painting elements recursively using each other as background. +--> +<html> +<body> + <p id="d" style="width:100px; height:100px; border:10px solid black; + background:-moz-element(#d);"></p> + <div id="e"> + <div style="width:100px; height:100px; border:10px solid blue; + background:-moz-element(#e);"></div> + </div> + <div id="f"></div> + <!-- test zero-sized images --> + <p style="width:100px; height:100px; border:10px solid green; + background:-moz-element(#f) yellow;"></div> + <div id="g"> + <div style="width:100px; height:100px; border:10px solid cyan; + background:-moz-element(#h);"></div> + </div> + <div id="h"> + <div style="width:100px; height:100px; border:10px solid magenta; + background:-moz-element(#g);"></div> + </div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-repeated-ref.html b/layout/reftests/image-element/element-paint-repeated-ref.html new file mode 100644 index 000000000..ab56002d4 --- /dev/null +++ b/layout/reftests/image-element/element-paint-repeated-ref.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> +<body> + <div style="position:absolute; width:25px; height:25px; + background:blue; top:50px; left:50px;"></div> + <div style="position:absolute; width:25px; height:25px; + background:blue; top:50px; left:100px;"></div> + <div style="position:absolute; width:25px; height:25px; + background:blue; top:100px; left:50px;"></div> + <div style="position:absolute; width:25px; height:25px; + background:blue; top:100px; left:100px;"></div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-repeated.html b/layout/reftests/image-element/element-paint-repeated.html new file mode 100644 index 000000000..618665b46 --- /dev/null +++ b/layout/reftests/image-element/element-paint-repeated.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test a repeated background image with -moz-element(). +--> +<html> +<body> + <div style="width:100px; height:100px; background:-moz-element(#d); + background-attachment:fixed; position:absolute; left:25px; top:25px;"></div> + <div style="overflow:hidden; height:0;"> + <div id="d" style="width:50px; height:50px;"> + <div style="width:25px; height:25px; background:blue;"></div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-sharpness-01a.html b/layout/reftests/image-element/element-paint-sharpness-01a.html new file mode 100644 index 000000000..3bf1bdf84 --- /dev/null +++ b/layout/reftests/image-element/element-paint-sharpness-01a.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test that background-size and zooming don't degrade rendering sharpness. +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> +<div style="width:200px; height:200px; background-image:-moz-element(#e); background-size: cover;"></div> +<div style="overflow:hidden; height:0"> + <div id="e" style="width:100px; height:100px;"> + <div style="width:100px; height:100px; border-radius:100%; background-color:lime;"></div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-sharpness-01b.html b/layout/reftests/image-element/element-paint-sharpness-01b.html new file mode 100644 index 000000000..c8ad13a49 --- /dev/null +++ b/layout/reftests/image-element/element-paint-sharpness-01b.html @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test that background-size and zooming don't degrade rendering sharpness. +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> +<div style="width:200px; height:200px; border-radius:100%; background-color:lime;"></div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-sharpness-01c.html b/layout/reftests/image-element/element-paint-sharpness-01c.html new file mode 100644 index 000000000..e9bfa6f05 --- /dev/null +++ b/layout/reftests/image-element/element-paint-sharpness-01c.html @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test that background-size and zooming don't degrade rendering sharpness. +--> +<!DOCTYPE html> +<html reftest-zoom="2"> +<body style="margin:0"> +<div style="width:100px; height:100px; border-radius:100%; background-color:lime;"></div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-sharpness-01d.html b/layout/reftests/image-element/element-paint-sharpness-01d.html new file mode 100644 index 000000000..d99f46755 --- /dev/null +++ b/layout/reftests/image-element/element-paint-sharpness-01d.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test that background-size and zooming don't degrade rendering sharpness. +--> +<!DOCTYPE html> +<html reftest-zoom="2"> +<body style="margin:0"> +<div style="width:100px; height:100px; background-image:-moz-element(#e);"></div> +<div style="overflow:hidden; height:0"> + <div id="e" style="width:100px; height:100px;"> + <div style="width:100px; height:100px; border-radius:100%; background-color:lime;"></div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-sharpness-02a.html b/layout/reftests/image-element/element-paint-sharpness-02a.html new file mode 100644 index 000000000..2833c2755 --- /dev/null +++ b/layout/reftests/image-element/element-paint-sharpness-02a.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test that background-size and zooming don't degrade rendering sharpness even when rendering to a surface. +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> +<div style="width:400px; height:400px; background-image:-moz-element(#e); background-size: 200px;"></div> +<div style="overflow:hidden; height:0"> + <div id="e" style="width:100px; height:100px;"> + <div style="width:100px; height:100px; border-radius:100%; background-color:lime;"></div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-sharpness-02b.html b/layout/reftests/image-element/element-paint-sharpness-02b.html new file mode 100644 index 000000000..fbfe6a1cf --- /dev/null +++ b/layout/reftests/image-element/element-paint-sharpness-02b.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test that background-size and zooming don't degrade rendering sharpness even when rendering to a surface. +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> +<div style="width:400px; height:400px; background-image:-moz-element(#e);"></div> +<div style="overflow:hidden; height:0"> + <div id="e" style="width:200px; height:200px;"> + <div style="width:200px; height:200px; border-radius:100%; background-color:lime;"></div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-sharpness-02c.html b/layout/reftests/image-element/element-paint-sharpness-02c.html new file mode 100644 index 000000000..b8945c325 --- /dev/null +++ b/layout/reftests/image-element/element-paint-sharpness-02c.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test that background-size and zooming don't degrade rendering sharpness even when rendering to a surface. +--> +<!DOCTYPE html> +<html reftest-zoom="2"> +<body style="margin:0"> +<div style="width:200px; height:200px; background-image:-moz-element(#e);"></div> +<div style="overflow:hidden; height:0"> + <div id="e" style="width:100px; height:100px;"> + <div style="width:100px; height:100px; border-radius:100%; background-color:lime;"></div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-simple-ref.html b/layout/reftests/image-element/element-paint-simple-ref.html new file mode 100644 index 000000000..b6ccfc800 --- /dev/null +++ b/layout/reftests/image-element/element-paint-simple-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> +<body> + <p style="width:60%; border:1px solid black; margin-left:100px; + position:relative;"> + <span style="border:2px solid red; width:50px; height:50px; + position:absolute; z-index: -1;">A</span> + "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum." + </p> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-simple.html b/layout/reftests/image-element/element-paint-simple.html new file mode 100644 index 000000000..339a24a51 --- /dev/null +++ b/layout/reftests/image-element/element-paint-simple.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test a simple element painting. + Note: if background is repeated, a temporary surface will be created to + hold the paint server image, which results in a reftest failure: + temporary surfaces use the RGBA 32bit format, but the fonts are rendered + with a deeper format (more than 32bit), so when rendering a font to a + temporary surface, we lose some color information. +--> +<html> +<body> + <p style="width:60%; border:1px solid black; margin-left:100px; + background:-moz-element(#d); background-repeat:no-repeat;"> + "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum." + </p> + <div style="overflow:hidden; height:0;"> + <div id="d" style="border:2px solid red; width:50px; height:50px;">A</div> + </div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-subimage-sampling-restriction.html b/layout/reftests/image-element/element-paint-subimage-sampling-restriction.html new file mode 100644 index 000000000..12bdde470 --- /dev/null +++ b/layout/reftests/image-element/element-paint-subimage-sampling-restriction.html @@ -0,0 +1,39 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test zooming, image snapping and subimage sampling restriction. + This is like 446100-1a.html. +--> +<!DOCTYPE HTML> +<html reftest-zoom="1.2" class="reftest-wait"> +<head> +<style> +div { margin:1em; } +/* A 7x7px image, black with a 5x5 transparent box centered in it */ +div.box { background-image:-moz-element(#e5x5in7x7); } +/* A 7x5px image, black with a 5x5 transparent box centered in it */ +div.vstrip { background-image:-moz-element(#e5x5in7x5); } +/* A 5x7px image, black with a 5x5 transparent box centered in it */ +div.hstrip { background-image:-moz-element(#e5x5in5x7); } +</style> +</head> +<body> +<div class="box" style="background-position:-1px -1px; width:5px; height:5px;"></div> +<div class="vstrip" style="background-position:-1px 0px; width:5px; height:22px;"></div> +<div class="hstrip" style="background-position:0px -1px; width:22px; height:5px;"></div> +<script> +var waitingForLoad = 0; +function setURLImage(name, url) { + var img = new Image(); + img.src = url; + document.mozSetImageElement(name, img); + waitingForLoad++; + img.onload = function () { if (--waitingForLoad == 0) document.documentElement.className = ""; }; +} +setURLImage("e5x5in7x7", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAFklEQVQImWNgYGD4jwdDCCxgQCWxYgBX8hfpeym4dwAAAABJRU5ErkJggg=="); +setURLImage("e5x5in7x5", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAFCAYAAACJmvbYAAAAFElEQVQImWNgYGD4z4Ad/GcYAEkAw+kJ94z5rSYAAAAASUVORK5CYII="); +setURLImage("e5x5in5x7", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAHCAYAAADAp4fuAAAAE0lEQVQImWNgYGD4jwXTD2DYDgDN4Qn3yMcPlwAAAABJRU5ErkJggg=="); +</script> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-transform-01-ref.html b/layout/reftests/image-element/element-paint-transform-01-ref.html new file mode 100644 index 000000000..8084aabc5 --- /dev/null +++ b/layout/reftests/image-element/element-paint-transform-01-ref.html @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> +<body> + <div style="width:100px; height:100px; border: 1px solid black; + -moz-transform:matrix(2,0,0,2,50,50);"> + <div style="margin:50px; border:10px solid red; width:20px; height:20px; + background:orange"></div> + </div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-transform-01.html b/layout/reftests/image-element/element-paint-transform-01.html new file mode 100644 index 000000000..1ea193259 --- /dev/null +++ b/layout/reftests/image-element/element-paint-transform-01.html @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test with background-position and some transform. +--> +<html> +<body> + <div style="width:100px; height:100px; border: 1px solid black; + background: 50px 50px -moz-element(#d) no-repeat; + -moz-transform:matrix(2,0,0,2,50,50);"> + </div> + <div style="overflow:hidden; height:0;"> + <div id="d" style="border:10px solid red; width:20px; height:20px; + background:orange"></div> + </div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-transform-02-ref.html b/layout/reftests/image-element/element-paint-transform-02-ref.html new file mode 100644 index 000000000..232bea424 --- /dev/null +++ b/layout/reftests/image-element/element-paint-transform-02-ref.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> +<body style="filter:url(#thresholdAt128);"> + <div style="width:100px; height:100px; border: 1px solid black; + -moz-transform:matrix(2,1,0,2,50,50);"> + <div style="margin:50px; border:10px solid red; width:20px; height:20px; + background:yellow"></div> + </div> + <svg> + <filter id="thresholdAt128" color-interpolation-filters="sRGB"> + <feColorMatrix type="matrix" + values="255 0 0 0 -128 + 0 255 0 0 -128 + 0 0 255 0 -128 + 0 0 0 255 -128"/> + + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-transform-02.html b/layout/reftests/image-element/element-paint-transform-02.html new file mode 100644 index 000000000..93d94e15e --- /dev/null +++ b/layout/reftests/image-element/element-paint-transform-02.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test with background-position and some transform. +--> +<html> +<body style="filter:url(#thresholdAt128);"> + <div style="width:100px; height:100px; border: 1px solid black; + background: 50px 50px -moz-element(#d) no-repeat; + -moz-transform:matrix(2,1,0,2,50,50);"> + </div> + <div style="overflow:hidden; height:0;"> + <div id="d" style="border:10px solid red; width:20px; height:20px; + background:yellow"></div> + </div> + <svg> + <filter id="thresholdAt128" color-interpolation-filters="sRGB"> + <feColorMatrix type="matrix" + values="255 0 0 0 -128 + 0 255 0 0 -128 + 0 0 255 0 -128 + 0 0 0 255 -128"/> + + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-transform-03-ref.html b/layout/reftests/image-element/element-paint-transform-03-ref.html new file mode 100644 index 000000000..be8ce326d --- /dev/null +++ b/layout/reftests/image-element/element-paint-transform-03-ref.html @@ -0,0 +1,49 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<!DOCTYPE html> +<html> +<body style="margin:0; filter:url(#thresholdAt128);"> + <div style="width:80px; height:40px; border:1px solid black;"> + <div style="position:absolute; top:1px; left:1px; + border:10px solid blue; width:20px; height:20px; background:lime;"></div> + <div style="position:absolute; top:1px; left:41px; + border:10px solid blue; width:20px; height:20px; background:lime;"></div> + </div> + <div style="width:80px; height:40px; border:1px solid black;"> + <div style="position:absolute; top:43px; left:1px; + width:40px; height:40px; overflow:hidden;"> + <div style="border:10px solid blue; width:20px; height:20px; + background:lime; -moz-transform:rotate(30deg);"></div> + </div> + <div style="position:absolute; top:43px; left:41px; + width:40px; height:40px; overflow:hidden;"> + <div style="border:10px solid blue; width:20px; height:20px; + background:lime; -moz-transform:rotate(30deg);"></div> + </div> + </div> + <div style="width:80px; height:40px; border:1px solid black;"> + <div style="position:absolute; top:85px; left:1px; + width:40px; height:40px; overflow:hidden;"> + <div style="border:10px solid blue; width:20px; height:20px; + background:lime; -moz-transform:rotate(30deg);"></div> + </div> + <div style="position:absolute; top:85px; left:41px; + width:40px; height:40px; overflow:hidden;"> + <div style="border:10px solid blue; width:20px; height:20px; + background:lime; -moz-transform:rotate(30deg);"></div> + </div> + </div> + <svg> + <filter id="thresholdAt128" color-interpolation-filters="sRGB"> + <feColorMatrix type="matrix" + values="255 0 0 0 -128 + 0 255 0 0 -128 + 0 0 255 0 -128 + 0 0 0 255 -128"/> + + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-transform-03.html b/layout/reftests/image-element/element-paint-transform-03.html new file mode 100644 index 000000000..13824b181 --- /dev/null +++ b/layout/reftests/image-element/element-paint-transform-03.html @@ -0,0 +1,37 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test paint servers that are rotated. We have to paint them as rectangles. +--> +<!DOCTYPE html> +<html> +<body style="margin:0; filter:url(#thresholdAt128);"> + <div style="width:80px; height:40px; border:1px solid black; + background:-moz-element(#d1);"></div> + <div style="width:80px; height:40px; border:1px solid black; + background:-moz-element(#d2);"></div> + <div style="width:80px; height:40px; border:1px solid black; + background:-moz-element(#d3);"></div> + + <div style="overflow:hidden; height:0;"> + <div id="d1" style="width:40px; height:40px; -moz-transform:rotate(-30deg);"> + <div id="d2" style="width:40px; height:40px"> + <div id="d3" style="border:10px solid blue; width:20px; height:20px; + -moz-transform:rotate(30deg); background:lime"> + </div> + </div> + </div> + </div> + <svg> + <filter id="thresholdAt128" color-interpolation-filters="sRGB"> + <feColorMatrix type="matrix" + values="255 0 0 0 -128 + 0 255 0 0 -128 + 0 0 255 0 -128 + 0 0 0 255 -128"/> + + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-transform-repeated-ref.html b/layout/reftests/image-element/element-paint-transform-repeated-ref.html new file mode 100644 index 000000000..341b0ecf2 --- /dev/null +++ b/layout/reftests/image-element/element-paint-transform-repeated-ref.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> +<body> + <div style="width:80px; height:80px; border: 1px solid black; background:white; + -moz-transform:matrix(2,0,0,2,50,50);"> + <div style="position:absolute; top:17px; left:17px; width:20px; height:20px; + background:black;"></div> + <div style="position:absolute; top:57px; left:17px; width:20px; height:20px; + background:black;"></div> + <div style="position:absolute; top:17px; left:57px; width:20px; height:20px; + background:black;"></div> + <div style="position:absolute; top:57px; left:57px; width:20px; height:20px; + background:black;"></div> + </div> +</body> +</html> diff --git a/layout/reftests/image-element/element-paint-transform-repeated.html b/layout/reftests/image-element/element-paint-transform-repeated.html new file mode 100644 index 000000000..b2d00c9c4 --- /dev/null +++ b/layout/reftests/image-element/element-paint-transform-repeated.html @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test a repeated background with some transform. + The transform scales up which causes blurring, so + we use an SVG filter to get rid of it. +--> +<html> +<body style="filter:url(#thresholdAt128)"> + <div style="width:80px; height:80px; border: 1px solid black; + background: 7px 7px -moz-element(#d); + -moz-transform:matrix(2,0,0,2,50,50);"> + </div> + <div style="overflow:hidden; height:0;"> + <div id="d" style="border:10px solid white; width:20px; height:20px; + background:black;"></div> + </div> + + <svg> + <filter id="thresholdAt128" color-interpolation-filters="sRGB"> + <feComponentTransfer> + <feFuncR type="linear" slope="255" intercept="-128"/> + <feFuncG type="linear" slope="255" intercept="-128"/> + <feFuncB type="linear" slope="255" intercept="-128"/> + </feComponentTransfer> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/image-element/gradient-html-01-ref.svg b/layout/reftests/image-element/gradient-html-01-ref.svg new file mode 100644 index 000000000..cb31abbc3 --- /dev/null +++ b/layout/reftests/image-element/gradient-html-01-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" fill="url(#g)"/> + <linearGradient id="g" x2="0" y2="1"> + <stop stop-color="lime" offset="0"/> + <stop stop-color="lime" stop-opacity="0" offset="1"/> + </linearGradient> +</svg> diff --git a/layout/reftests/image-element/gradient-html-01.html b/layout/reftests/image-element/gradient-html-01.html new file mode 100644 index 000000000..f6991cb68 --- /dev/null +++ b/layout/reftests/image-element/gradient-html-01.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> + <div style="width:100px; height:100px; background:-moz-element(#g);"></div> + <svg> + <linearGradient id="g" x2="0" y2="1"> + <stop stop-color="lime" offset="0"></stop> + <stop stop-color="lime" stop-opacity="0" offset="1"></stop> + </linearGradient> + </svg> +</body> +</html> diff --git a/layout/reftests/image-element/gradient-html-02-ref.svg b/layout/reftests/image-element/gradient-html-02-ref.svg new file mode 100644 index 000000000..b7815be11 --- /dev/null +++ b/layout/reftests/image-element/gradient-html-02-ref.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" fill="url(#g)"/> + <rect y="100" width="100" height="100" fill="blue"/> + <linearGradient id="g" x2="0" y2="1"> + <stop stop-color="lime" offset="0"/> + <stop stop-color="lime" stop-opacity="0" offset="1"/> + </linearGradient> +</svg> diff --git a/layout/reftests/image-element/gradient-html-02.html b/layout/reftests/image-element/gradient-html-02.html new file mode 100644 index 000000000..6eb1c76a6 --- /dev/null +++ b/layout/reftests/image-element/gradient-html-02.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> + <div style="width:100px; height:100px; background:-moz-element(#g);"> + <div style="height:100px;"></div> + <div style="width:100px; height:100px; background:blue;"></div> + </div> + <svg> + <defs> + <linearGradient id="g" x2="0" y2="1"> + <stop stop-color="lime" offset="0"></stop> + <stop stop-color="lime" stop-opacity="0" offset="1"></stop> + </linearGradient> + </defs> + </svg> +</body> +</html> diff --git a/layout/reftests/image-element/gradient-html-03-ref.svg b/layout/reftests/image-element/gradient-html-03-ref.svg new file mode 100644 index 000000000..b7815be11 --- /dev/null +++ b/layout/reftests/image-element/gradient-html-03-ref.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" fill="url(#g)"/> + <rect y="100" width="100" height="100" fill="blue"/> + <linearGradient id="g" x2="0" y2="1"> + <stop stop-color="lime" offset="0"/> + <stop stop-color="lime" stop-opacity="0" offset="1"/> + </linearGradient> +</svg> diff --git a/layout/reftests/image-element/gradient-html-03.html b/layout/reftests/image-element/gradient-html-03.html new file mode 100644 index 000000000..cfb9b7b0d --- /dev/null +++ b/layout/reftests/image-element/gradient-html-03.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> + <div style="width:100px; height:100px; background:-moz-element(#g);"> + <div style="height:100px;"></div> + <div style="width:100px; height:100px; background:blue;"></div> + </div> + <svg> + <linearGradient gradientUnits="userSpaceOnUse" id="g" x2="0" y2="100"> + <stop stop-color="lime" offset="0"></stop> + <stop stop-color="lime" stop-opacity="0" offset="1"></stop> + </linearGradient> + </svg> +</body> +</html> diff --git a/layout/reftests/image-element/gradient-html-04-ref.html b/layout/reftests/image-element/gradient-html-04-ref.html new file mode 100644 index 000000000..0df5ffe4b --- /dev/null +++ b/layout/reftests/image-element/gradient-html-04-ref.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<!DOCTYPE html> +<html> +<head> +<style> +.unit { display:inline-block; width:100px; height:1px; } +</style> +</head> +<body style="margin:0; width:350px; line-height:100px;"> + <span class="unit"></span><span class="unit" + ></span><span style="background:lime"><span class="unit"></span><span class="unit" + ></span></span> +</body> +</html> diff --git a/layout/reftests/image-element/gradient-html-04.html b/layout/reftests/image-element/gradient-html-04.html new file mode 100644 index 000000000..bc1deb1c4 --- /dev/null +++ b/layout/reftests/image-element/gradient-html-04.html @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<!DOCTYPE html> +<html> +<head> +<style> +.unit { display:inline-block; width:100px; height:1px; } +</style> +</head> +<body style="margin:0; width:350px; line-height:100px;"> + <span class="unit"></span><span class="unit" + ></span><span style="background:-moz-element(#g)"><span class="unit"></span><span class="unit" + ></span></span> + + <svg> + <linearGradient id="g" x2="0" y2="1"> + <stop stop-color="lime" offset="0"></stop> + <stop stop-color="lime" offset="1"></stop> + </linearGradient> + </svg> +</body> +</html> diff --git a/layout/reftests/image-element/gradient-html-05-ref.html b/layout/reftests/image-element/gradient-html-05-ref.html new file mode 100644 index 000000000..06e9c58aa --- /dev/null +++ b/layout/reftests/image-element/gradient-html-05-ref.html @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<!DOCTYPE html> +<html> +<head> +<style> +.unit { display:inline-block; width:100px; height:1px; background:blue; } +</style> +</head> +<body style="margin:0; width:300px; line-height:100px;"> + <span class="unit"></span><span class="unit" + ></span><span class="unit"></span><span style="background:lime"><span class="unit" + ></span></span> +</body> +</html> diff --git a/layout/reftests/image-element/gradient-html-05.html b/layout/reftests/image-element/gradient-html-05.html new file mode 100644 index 000000000..35fe9e902 --- /dev/null +++ b/layout/reftests/image-element/gradient-html-05.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<!DOCTYPE html> +<html> +<head> +<style> +.unit { display:inline-block; width:100px; height:1px; background:blue; } +</style> +</head> +<body style="margin:0; width:300px; line-height:100px;"> + <span class="unit"></span><span class="unit" + ></span><span style="background:-moz-element(#g)"><span class="unit"></span><span class="unit" + ></span></span> + + <svg> + <linearGradient gradientUnits="userSpaceOnUse" id="g" x1="0" y1="0" x2="200" y2="0"> + <stop stop-color="lime" stop-opacity="0" offset="0"></stop> + <stop stop-color="lime" stop-opacity="0" offset="0.5"></stop> + <stop stop-color="lime" offset="0.5"></stop> + <stop stop-color="lime" offset="1"></stop> + </linearGradient> + </svg> +</body> +</html> diff --git a/layout/reftests/image-element/gradient-html-06a.html b/layout/reftests/image-element/gradient-html-06a.html new file mode 100644 index 000000000..0533cfcff --- /dev/null +++ b/layout/reftests/image-element/gradient-html-06a.html @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + Test whether SVG gradients as -moz-element render the same as + CSS gradients. +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> + <div style="width:300px; height:300px; background-image:-moz-element(#g)"></div> + <svg> + <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <stop stop-color="lime" offset="0"></stop> + <stop stop-color="black" offset="1"></stop> + </linearGradient> + </svg> +</body> +</html> diff --git a/layout/reftests/image-element/gradient-html-06b.html b/layout/reftests/image-element/gradient-html-06b.html new file mode 100644 index 000000000..87e7c22e7 --- /dev/null +++ b/layout/reftests/image-element/gradient-html-06b.html @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + Test whether SVG gradients as -moz-element render the same as + CSS gradients. +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> + <div style="width:300px; height:300px; background-image:-moz-linear-gradient(lime, black)"></div> +</body> +</html> + diff --git a/layout/reftests/image-element/gradient-html-06c.html b/layout/reftests/image-element/gradient-html-06c.html new file mode 100644 index 000000000..23f88a677 --- /dev/null +++ b/layout/reftests/image-element/gradient-html-06c.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + Test whether SVG gradients as -moz-element render the same as + a SVG rect with an SVG gradient. +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> + <svg width="300" height="300"> + <rect width="300" height="300" fill="url(#g)"></rect> + <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <stop stop-color="lime" offset="0"></stop> + <stop stop-color="black" offset="1"></stop> + </linearGradient> + </svg> +</body> +</html> + diff --git a/layout/reftests/image-element/gradient-html-06d.html b/layout/reftests/image-element/gradient-html-06d.html new file mode 100644 index 000000000..294cbe27c --- /dev/null +++ b/layout/reftests/image-element/gradient-html-06d.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + Ensure that -moz-element using an SVG gradient is affected by + mozSetImageElement. +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> + <div style="width:300px; height:300px; background-image:-moz-element(#g)"></div> + <svg> + <linearGradient id="green" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <stop stop-color="lime" offset="0"></stop> + <stop stop-color="black" offset="1"></stop> + </linearGradient> + <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <stop stop-color="red" offset="0"></stop> + <stop stop-color="black" offset="1"></stop> + </linearGradient> + </svg> + <script>document.mozSetImageElement("g", document.getElementById("green"));</script> +</body> +</html> diff --git a/layout/reftests/image-element/gradient-html-06e.html b/layout/reftests/image-element/gradient-html-06e.html new file mode 100644 index 000000000..df3843c23 --- /dev/null +++ b/layout/reftests/image-element/gradient-html-06e.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + Ensure that SVG elements using fill="url(#...)" are *not* + affected by mozSetImageElement. +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> + <svg width="300" height="300"> + <rect width="300" height="300" fill="url(#g)"></rect> + <linearGradient id="red" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <stop stop-color="red" offset="0"></stop> + <stop stop-color="black" offset="1"></stop> + </linearGradient> + <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <stop stop-color="lime" offset="0"></stop> + <stop stop-color="black" offset="1"></stop> + </linearGradient> + </svg> + <script>document.mozSetImageElement("g", document.getElementById("red"));</script> +</body> +</html> diff --git a/layout/reftests/image-element/gradient-html-07a.html b/layout/reftests/image-element/gradient-html-07a.html new file mode 100644 index 000000000..a8caf3103 --- /dev/null +++ b/layout/reftests/image-element/gradient-html-07a.html @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + Test that diagonal repeating SVG gradients as -moz-element render the same as + CSS gradients. +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> + <div style="width:300px; height:300px; background-image:-moz-element(#g); background-size: 100px 100px;"></div> + <svg> + <linearGradient id="g" gradientUnits="objectBoundingBox" x2="1" y2="1"> + <stop stop-color="lime" offset="0"></stop> + <stop stop-color="black" offset="1"></stop> + </linearGradient> + </svg> +</body> +</html> diff --git a/layout/reftests/image-element/gradient-html-07b.html b/layout/reftests/image-element/gradient-html-07b.html new file mode 100644 index 000000000..41270af78 --- /dev/null +++ b/layout/reftests/image-element/gradient-html-07b.html @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + Test that diagonal repeating SVG gradients as -moz-element render the same as + CSS gradients. +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> + <div style="width:300px; height:300px; background-image:linear-gradient(135deg, lime, black); background-size: 100px 100px;"></div> +</body> +</html> diff --git a/layout/reftests/image-element/gradient-html-07c.html b/layout/reftests/image-element/gradient-html-07c.html new file mode 100644 index 000000000..3e378436b --- /dev/null +++ b/layout/reftests/image-element/gradient-html-07c.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + Test that diagonal repeating SVG gradients as -moz-element + using userSpaceOnUse render the same as using objectBoundingBox + with the right conversion. +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> + <div style="width:200px; height:200px; background-image:-moz-element(#g); background-size: 100px 100px;"></div> + <svg> + <linearGradient id="g" gradientUnits="userSpaceOnUse" x2="200" y2="200"> + <stop stop-color="#00ff00" offset="0"></stop> + <stop stop-color="black" offset="1"></stop> + </linearGradient> + </svg> +</body> +</html> diff --git a/layout/reftests/image-element/gradient-html-07d.html b/layout/reftests/image-element/gradient-html-07d.html new file mode 100644 index 000000000..e9ff4d13a --- /dev/null +++ b/layout/reftests/image-element/gradient-html-07d.html @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + Test that diagonal repeating SVG gradients as -moz-element render the same as + CSS gradients. +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> + <div style="width:200px; height:200px; background-image:linear-gradient(135deg, #00ff00, #008000); background-size: 100px 100px;"></div> +</body> +</html> diff --git a/layout/reftests/image-element/image-outside-document-invalidate.html b/layout/reftests/image-element/image-outside-document-invalidate.html new file mode 100644 index 000000000..4e3b8e828 --- /dev/null +++ b/layout/reftests/image-element/image-outside-document-invalidate.html @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test that document.mozSetImageElement() after an image load causes a repaint. +--> +<!DOCTYPE html> +<html class="reftest-wait"> +<body style="background: -moz-element(#e) red"> + +<script> + +window.addEventListener("MozReftestInvalidate", function () { + var img = new Image(); + img.src = "data:image/gif;base64,R0lGODlhAQABAID/AP///wAAACwAAAAAAQABAAACAkQBADs="; /* 1x1 white gif */ + document.mozSetImageElement("e", img); + img.onload = function () { + document.documentElement.className = ""; + }; +}, false); + +</script> +</body> +</html> diff --git a/layout/reftests/image-element/invalidate-1-ref.html b/layout/reftests/image-element/invalidate-1-ref.html new file mode 100644 index 000000000..833c84617 --- /dev/null +++ b/layout/reftests/image-element/invalidate-1-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body> +<div style="background:url(repeatable-diagonal-gradient.png?4567); width:100px; height:100px"></div> +<div style="background:url(repeatable-diagonal-gradient.png?90); width:100px; height:100px"></div> +</body> +</html> diff --git a/layout/reftests/image-element/invalidate-1.html b/layout/reftests/image-element/invalidate-1.html new file mode 100644 index 000000000..5dc3ec7f9 --- /dev/null +++ b/layout/reftests/image-element/invalidate-1.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<script> + /* this test shouldn't need reftest-wait, but if the reftest snapshot is triggered before we've painted, + * then we might not get a chance to invalidate the -moz-element div in time + * See Bug 1283302 + */ + window.addEventListener("MozReftestInvalidate", endTest); + + function endTest() { + document.documentElement.removeAttribute("class"); + } +</script> +<body> +<div id="A" style="background:url(repeatable-diagonal-gradient.png?1234); width:100px; height:100px"></div> +<div style="background:-moz-element(#A); width:100px; height:100px;"></div> +</body> +</html> diff --git a/layout/reftests/image-element/mozsetimageelement-01-ref.html b/layout/reftests/image-element/mozsetimageelement-01-ref.html new file mode 100644 index 000000000..2bba0c731 --- /dev/null +++ b/layout/reftests/image-element/mozsetimageelement-01-ref.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> + <head> + <style> + div { + width: 10px; + height: 10px; + } + </style> + </head> +<body style="margin:0"> + <div style="background:black;"></div> + <div style="background:red;"></div> + <div style="background:black;"></div> +</body> +</html> diff --git a/layout/reftests/image-element/mozsetimageelement-01.html b/layout/reftests/image-element/mozsetimageelement-01.html new file mode 100644 index 000000000..f1ac067c0 --- /dev/null +++ b/layout/reftests/image-element/mozsetimageelement-01.html @@ -0,0 +1,44 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test document.mozSetImageElement() DOM API and check if ID targets are + correctly overridden. +--> +<html> + <head> + <style> + div { + width: 10px; + height: 10px; + } + </style> + </head> +<body style="margin:0"> + <div style="background:-moz-element(#d1);"></div> + <div style="background:-moz-element(#d2);"></div> + <div style="background:-moz-element(#d3);"></div> + + <div style="overflow:hidden; height:0;"> + <div id="d1" style="background:red;"></div> + <div id="d2" style="background:blue;"></div> + <!-- two elements with the same ID: the former one will be used --> + <div id="d3" style="background:black;"></div> + <div id="d3" style="background:yellow;"></div> + </div> + + <script> + var d1 = document.getElementById("d1"); + var d2 = document.getElementById("d2"); + var d3 = document.getElementById("d3"); + document.mozSetImageElement("d1", d3); + document.mozSetImageElement("d2", null); + document.mozSetImageElement("d3", d1); + document.mozSetImageElement("d3", null); + document.mozSetImageElement("d4", d1); + document.mozSetImageElement("", d1); + d1.id = "d2"; + d2.id = "d1"; + </script> +</body> +</html> diff --git a/layout/reftests/image-element/mozsetimageelement-02.html b/layout/reftests/image-element/mozsetimageelement-02.html new file mode 100644 index 000000000..21bd6b2d1 --- /dev/null +++ b/layout/reftests/image-element/mozsetimageelement-02.html @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test that document.mozSetImageElement() after a paint causes a repaint. +--> +<!DOCTYPE html> +<html class="reftest-wait"> +<body style="background-image: -moz-element(#e)"> + +<div style="overflow:hidden; height:0;"> + <div id="e" style="width: 50px; height: 50px; background: red;"></div> + <div id="white" style="width: 50px; height: 50px; background: white;"></div> +</div> + +<script> + +window.addEventListener("MozReftestInvalidate", function () { + document.mozSetImageElement("e", document.getElementById("white")); + document.documentElement.className = ""; +}, false); + +</script> +</body> +</html> diff --git a/layout/reftests/image-element/pattern-html-01-ref.svg b/layout/reftests/image-element/pattern-html-01-ref.svg new file mode 100644 index 000000000..b991d9d17 --- /dev/null +++ b/layout/reftests/image-element/pattern-html-01-ref.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="10" y="10" width="10" height="10" fill="lime"/> + <rect x="60" y="10" width="10" height="10" fill="lime"/> + <rect x="10" y="60" width="10" height="10" fill="lime"/> + <rect x="60" y="60" width="10" height="10" fill="lime"/> + <rect x="0" y="200" width="10" height="10" fill="lime"/> + <rect x="50" y="200" width="10" height="10" fill="lime"/> + <rect x="0" y="250" width="10" height="10" fill="lime"/> + <rect x="50" y="250" width="10" height="10" fill="lime"/> +</svg> diff --git a/layout/reftests/image-element/pattern-html-01.html b/layout/reftests/image-element/pattern-html-01.html new file mode 100644 index 000000000..fa91c3748 --- /dev/null +++ b/layout/reftests/image-element/pattern-html-01.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test painting simple patterns with offsets. +--> +<!DOCTYPE html> +<html> +<body style="margin:0"> + <div style="width:100px; height:100px; background:-moz-element(#p);"></div> + <div style="margin-top:100px; width:100px; height:100px; + background:-moz-element(#p); background-position:-10px -10px;"></div> + + <svg> + <pattern id="p" patternUnits="userSpaceOnUse" + x="0" y="0" width="50" height="50"> + <rect x="10" y="10" width="10" height="10" fill="lime"></rect> + </pattern> + </svg> +</body> +</html> diff --git a/layout/reftests/image-element/pattern-html-02-ref.svg b/layout/reftests/image-element/pattern-html-02-ref.svg new file mode 100644 index 000000000..3c913649a --- /dev/null +++ b/layout/reftests/image-element/pattern-html-02-ref.svg @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="30" height="30" fill="black"/> + <rect x="75" y="15" width="30" height="30" fill="black"/> + + <rect x="5" y="65" width="10" height="10" fill="black"/> + <rect x="25" y="65" width="10" height="10" fill="black"/> + <rect x="45" y="65" width="10" height="10" fill="black"/> + <rect x="65" y="65" width="10" height="10" fill="black"/> + <rect x="85" y="65" width="10" height="10" fill="black"/> + <rect x="105" y="65" width="10" height="10" fill="black"/> + <rect x="5" y="85" width="10" height="10" fill="black"/> + <rect x="25" y="85" width="10" height="10" fill="black"/> + <rect x="45" y="85" width="10" height="10" fill="black"/> + <rect x="65" y="85" width="10" height="10" fill="black"/> + <rect x="85" y="85" width="10" height="10" fill="black"/> + <rect x="105" y="85" width="10" height="10" fill="black"/> + <rect x="5" y="105" width="10" height="10" fill="black"/> + <rect x="25" y="105" width="10" height="10" fill="black"/> + <rect x="45" y="105" width="10" height="10" fill="black"/> + <rect x="65" y="105" width="10" height="10" fill="black"/> + <rect x="85" y="105" width="10" height="10" fill="black"/> + <rect x="105" y="105" width="10" height="10" fill="black"/> +</svg> diff --git a/layout/reftests/image-element/pattern-html-02.html b/layout/reftests/image-element/pattern-html-02.html new file mode 100644 index 000000000..043b32ec5 --- /dev/null +++ b/layout/reftests/image-element/pattern-html-02.html @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Test painting patterns with scaling by background-size and + -moz-transform. +--> +<!DOCTYPE html> +<html> +<body style="margin:0;"> + <div style="background: white; overflow: hidden;"> + <div style="margin:20px 0px 20px 40px; width:40px; height:20px; + background:-moz-element(#p); + -moz-transform:scale(3);"></div> + <div style="width:120px; height:60px; + background:-moz-element(#p); + background-size:300% 300%;"></div> + + <svg> + <pattern id="p" patternUnits="userSpaceOnUse" + x="0" y="0" width="20" height="20"> + <rect x="5" y="5" width="10" height="10" fill="black"></rect> + </pattern> + </svg> + </div> +</body> +</html> diff --git a/layout/reftests/image-element/referenced-from-binding-01-ref.html b/layout/reftests/image-element/referenced-from-binding-01-ref.html new file mode 100644 index 000000000..6dd4ce331 --- /dev/null +++ b/layout/reftests/image-element/referenced-from-binding-01-ref.html @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=587585 --> +<!DOCTYPE html> +<title>Test -moz-element reference with external binding</title> + +<body style="margin:0"> + <div style="width: 100px; height: 100px; background: lime;"></div> +</body> diff --git a/layout/reftests/image-element/referenced-from-binding-01.html b/layout/reftests/image-element/referenced-from-binding-01.html new file mode 100644 index 000000000..6d8b3971c --- /dev/null +++ b/layout/reftests/image-element/referenced-from-binding-01.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=587585 --> +<!DOCTYPE html> +<title>Test -moz-element reference with external binding</title> +<style> +.paintClient { + background: -moz-element(#image-element); + width: 100px; + height: 100px; +} +</style> + +<body style="margin:0"> + <div style="-moz-binding: url(referenced-from-binding-01.xbl#insertPaintClient);"></div> + <div style="height: 0; overflow: hidden;"> + <div id="image-element" + style="width: 20px; height: 20px; background: lime;"></div> + </div> +</body> diff --git a/layout/reftests/image-element/referenced-from-binding-01.xbl b/layout/reftests/image-element/referenced-from-binding-01.xbl new file mode 100644 index 000000000..d64575ebe --- /dev/null +++ b/layout/reftests/image-element/referenced-from-binding-01.xbl @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<bindings xmlns="http://www.mozilla.org/xbl"> + <binding id="insertPaintClient"> + <content> + <div xmlns="http://www.w3.org/1999/xhtml" class="paintClient"></div> + </content> + </binding> +</bindings> diff --git a/layout/reftests/image-element/reftest-stylo.list b/layout/reftests/image-element/reftest-stylo.list new file mode 100644 index 000000000..518d86024 --- /dev/null +++ b/layout/reftests/image-element/reftest-stylo.list @@ -0,0 +1,67 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +random == bug-364968.html bug-364968.html +== bug-463204.html bug-463204.html +== canvas-outside-document.html canvas-outside-document.html +== mozsetimageelement-01.html mozsetimageelement-01.html +skip-if(B2G||Mulet) == mozsetimageelement-02.html mozsetimageelement-02.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == image-outside-document-invalidate.html image-outside-document-invalidate.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == canvas-outside-document-invalidate-01.html canvas-outside-document-invalidate-01.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +skip == canvas-outside-document-invalidate-02.html canvas-outside-document-invalidate-02.html +# See bug 666800 +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +#fails with Skia due to Skia bug http://code.google.com/p/skia/issues/detail?id=568 +== element-paint-simple.html element-paint-simple.html +== element-paint-repeated.html element-paint-repeated.html +== element-paint-recursion.html element-paint-recursion.html +skip-if(B2G||Mulet) HTTP(..) == element-paint-continuation.html element-paint-continuation.html +# Initial mulet triage: parity with B2G/B2G Desktop +== element-paint-transform-01.html element-paint-transform-01.html +random-if(d2d) == element-paint-transform-02.html element-paint-transform-02.html +# bug 587133 +fuzzy-if(d2d&&/^Windows\x20NT\x206\.1/.test(http.oscpu),16,90) == element-paint-background-size-01.html element-paint-background-size-01.html +== element-paint-background-size-02.html element-paint-background-size-02.html +== element-paint-transform-repeated.html element-paint-transform-repeated.html +fuzzy-if(d2d,255,24) == element-paint-transform-03.html element-paint-transform-03.html +fails fuzzy-if(asyncPan,2,140) fuzzy-if(skiaContent,2,106) == element-paint-native-widget.html element-paint-native-widget.html +# in -ref the scrollframe is active and layerized differently with APZ +skip fails-if(usesRepeatResampling) == element-paint-subimage-sampling-restriction.html element-paint-subimage-sampling-restriction.html +== element-paint-clippath.html element-paint-clippath.html +== element-paint-sharpness-01a.html element-paint-sharpness-01a.html +fuzzy-if(skiaContent,1,326) == element-paint-sharpness-01b.html element-paint-sharpness-01b.html +== element-paint-sharpness-01c.html element-paint-sharpness-01c.html +== element-paint-sharpness-02a.html element-paint-sharpness-02a.html +fuzzy-if(B2G,11,4) == element-paint-sharpness-02b.html element-paint-sharpness-02b.html +== element-paint-paintserversize-rounding-01.html element-paint-paintserversize-rounding-01.html +fuzzy-if(!isDebugBuild&>kWidget&&/^Linux\x20i686/.test(http.oscpu),79,1191) == element-paint-paintserversize-rounding-02.html element-paint-paintserversize-rounding-02.html +# Linux32 from GCC update +== element-paint-multiple-backgrounds-01a.html element-paint-multiple-backgrounds-01a.html +skip-if(B2G||Mulet) == element-paint-multiple-backgrounds-01b.html element-paint-multiple-backgrounds-01b.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == element-paint-multiple-backgrounds-01c.html element-paint-multiple-backgrounds-01c.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +== gradient-html-01.html gradient-html-01.html +== gradient-html-02.html gradient-html-02.html +random-if(!cocoaWidget) == gradient-html-03.html gradient-html-03.html +== gradient-html-04.html gradient-html-04.html +== gradient-html-05.html gradient-html-05.html +fuzzy(1,9674) random-if(!cocoaWidget) == gradient-html-06a.html gradient-html-06a.html +fuzzy(1,9674) random-if(!cocoaWidget) == gradient-html-06b.html gradient-html-06b.html +== gradient-html-06c.html gradient-html-06c.html +== gradient-html-06d.html gradient-html-06d.html +random-if(!cocoaWidget) fuzzy-if(cocoaWidget,2,42305) == gradient-html-07a.html gradient-html-07a.html +== gradient-html-07c.html gradient-html-07c.html +HTTP == invalidate-1.html invalidate-1.html +== pattern-html-01.html pattern-html-01.html +== pattern-html-02.html pattern-html-02.html +# skip XBL test case on B2G +skip-if(B2G||Mulet) == referenced-from-binding-01.html referenced-from-binding-01.html +# Initial mulet triage: parity with B2G/B2G Desktop diff --git a/layout/reftests/image-element/reftest.list b/layout/reftests/image-element/reftest.list new file mode 100644 index 000000000..781b2654c --- /dev/null +++ b/layout/reftests/image-element/reftest.list @@ -0,0 +1,47 @@ +random == bug-364968.html bug-364968-ref.html +== bug-463204.html bug-463204-ref.html +== canvas-outside-document.html canvas-inside-document.html +== mozsetimageelement-01.html mozsetimageelement-01-ref.html +== mozsetimageelement-02.html about:blank +== image-outside-document-invalidate.html about:blank +== canvas-outside-document-invalidate-01.html about:blank +fails-if(azureSkia) fails-if(cocoaWidget) == canvas-outside-document-invalidate-02.html about:blank # See bug 666800 +#fails with Skia due to Skia bug http://code.google.com/p/skia/issues/detail?id=568 +== element-paint-simple.html element-paint-simple-ref.html +== element-paint-repeated.html element-paint-repeated-ref.html +== element-paint-recursion.html element-paint-recursion-ref.html +HTTP(..) == element-paint-continuation.html element-paint-continuation-ref.html +== element-paint-transform-01.html element-paint-transform-01-ref.html +random-if(d2d) == element-paint-transform-02.html element-paint-transform-02-ref.html # bug 587133 +fuzzy-if(d2d&&/^Windows\x20NT\x206\.1/.test(http.oscpu),16,90) == element-paint-background-size-01.html element-paint-background-size-01-ref.html +== element-paint-background-size-02.html element-paint-background-size-02-ref.html +fuzzy-if(skiaContent,255,4) == element-paint-transform-repeated.html element-paint-transform-repeated-ref.html +fuzzy-if(d2d,255,24) == element-paint-transform-03.html element-paint-transform-03-ref.html +fuzzy-if(asyncPan,2,140) fuzzy-if(skiaContent,2,106) == element-paint-native-widget.html element-paint-native-widget-ref.html # in -ref the scrollframe is active and layerized differently with APZ +fails-if(usesRepeatResampling) == element-paint-subimage-sampling-restriction.html about:blank +== element-paint-clippath.html element-paint-clippath-ref.html +== element-paint-sharpness-01a.html element-paint-sharpness-01b.html +fuzzy-if(skiaContent,1,326) == element-paint-sharpness-01b.html element-paint-sharpness-01c.html +== element-paint-sharpness-01c.html element-paint-sharpness-01d.html +== element-paint-sharpness-02a.html element-paint-sharpness-02b.html +== element-paint-sharpness-02b.html element-paint-sharpness-02c.html +== element-paint-paintserversize-rounding-01.html element-paint-paintserversize-rounding-01-ref.html +fuzzy-if(skiaContent,187,1191) == element-paint-paintserversize-rounding-02.html element-paint-paintserversize-rounding-02-ref.html # Linux32 from GCC update +== element-paint-multiple-backgrounds-01a.html element-paint-multiple-backgrounds-01-ref.html +== element-paint-multiple-backgrounds-01b.html element-paint-multiple-backgrounds-01-ref.html +== element-paint-multiple-backgrounds-01c.html element-paint-multiple-backgrounds-01-ref.html +== gradient-html-01.html gradient-html-01-ref.svg +== gradient-html-02.html gradient-html-02-ref.svg +random-if(!cocoaWidget) == gradient-html-03.html gradient-html-03-ref.svg +== gradient-html-04.html gradient-html-04-ref.html +== gradient-html-05.html gradient-html-05-ref.html +fuzzy(1,9674) random-if(!cocoaWidget) == gradient-html-06a.html gradient-html-06b.html +fuzzy(1,9674) random-if(!cocoaWidget) == gradient-html-06b.html gradient-html-06c.html +== gradient-html-06c.html gradient-html-06d.html +== gradient-html-06d.html gradient-html-06e.html +random-if(!cocoaWidget) fuzzy-if(cocoaWidget,2,42305) == gradient-html-07a.html gradient-html-07b.html +fuzzy(1,16900) == gradient-html-07c.html gradient-html-07d.html +HTTP == invalidate-1.html invalidate-1-ref.html +== pattern-html-01.html pattern-html-01-ref.svg +== pattern-html-02.html pattern-html-02-ref.svg +== referenced-from-binding-01.html referenced-from-binding-01-ref.html diff --git a/layout/reftests/image-element/repeatable-diagonal-gradient.png b/layout/reftests/image-element/repeatable-diagonal-gradient.png Binary files differnew file mode 100644 index 000000000..d114e100d --- /dev/null +++ b/layout/reftests/image-element/repeatable-diagonal-gradient.png |
