diff options
Diffstat (limited to '')
242 files changed, 5189 insertions, 0 deletions
diff --git a/layout/reftests/image-element/broken-icon.html b/layout/reftests/image-element/broken-icon.html new file mode 100644 index 0000000000..f2f6b7c451 --- /dev/null +++ b/layout/reftests/image-element/broken-icon.html @@ -0,0 +1,9 @@ +<!doctype html> +<style> + img { + display: inline-block; + width: 100px; + height: 100px; + } +</style> +<img src="broken"> 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 0000000000..4ce9909969 --- /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 0000000000..69db6e1dfc --- /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 0000000000..6d427a0c6f --- /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 0000000000..89e91fa87e --- /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 0000000000..dff8217d77 --- /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 0000000000..8ee561356e --- /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 0000000000..0b4a1d851e --- /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); +}); + +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 0000000000..22f5910627 --- /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 = ""; +}); + +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 0000000000..259b69e731 --- /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 0000000000..473c7c3a33 --- /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 0000000000..9d70cc1e39 --- /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 0000000000..08664176e1 --- /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 0000000000..91cea3e3fa --- /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 0000000000..12cebc2bad --- /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 0000000000..e393d277c3 --- /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 0000000000..efc86d99ed --- /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:linear-gradient(to left, 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 0000000000..c90c582170 --- /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 0000000000..25e31fd3ad --- /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: linear-gradient(lime,lime) top left no-repeat, + 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 0000000000..f36280a243 --- /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 0000000000..f11f092b55 --- /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 = ""; +}); + +</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 0000000000..f01d9eb08a --- /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 = ""; +}); + +</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 0000000000..68fc3c3301 --- /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 0000000000..bdcadcc2ac --- /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 0000000000..8be4f109f2 --- /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 0000000000..826a49450f --- /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 0000000000..398034a0f1 --- /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 0000000000..439cd72665 --- /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 0000000000..a3c1aa5e96 --- /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:100px; height:100px; border:10px solid black; border-top:10px solid black; border-left:10px solid black;"></p> + <div style="width:100px; height:100px; border:10px solid blue; border-top:10px solid blue; border-left:10px 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 0000000000..d52ebbf0a0 --- /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 0000000000..ab56002d47 --- /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 0000000000..618665b46b --- /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 0000000000..3bf1bdf846 --- /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 0000000000..c8ad13a499 --- /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 0000000000..e9bfa6f05e --- /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 0000000000..d99f467559 --- /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 0000000000..2833c27553 --- /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 0000000000..fbfe6a1cf3 --- /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 0000000000..b8945c3256 --- /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 0000000000..b6ccfc8002 --- /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 0000000000..339a24a519 --- /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 0000000000..12bdde4704 --- /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 0000000000..8084aabc55 --- /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 0000000000..1ea1932599 --- /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 0000000000..232bea4241 --- /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 0000000000..93d94e15eb --- /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 0000000000..be8ce326d2 --- /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 0000000000..13824b181b --- /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 0000000000..341b0ecf29 --- /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 0000000000..b2d00c9c42 --- /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/empty-src.html b/layout/reftests/image-element/empty-src.html new file mode 100644 index 0000000000..36091cdc19 --- /dev/null +++ b/layout/reftests/image-element/empty-src.html @@ -0,0 +1,9 @@ +<!doctype html> +<style> + img { + display: inline-block; + width: 100px; + height: 100px; + } +</style> +<img src> 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 0000000000..cb31abbc3b --- /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 0000000000..f6991cb683 --- /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 0000000000..b7815be11e --- /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 0000000000..6eb1c76a62 --- /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 0000000000..b7815be11e --- /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 0000000000..cfb9b7b0d3 --- /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 0000000000..0df5ffe4b4 --- /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 0000000000..bc1deb1c4b --- /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 0000000000..06e9c58aa9 --- /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 0000000000..35fe9e9023 --- /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 0000000000..0533cfcfff --- /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 0000000000..725a20c1dc --- /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: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 0000000000..23f88a6771 --- /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 0000000000..294cbe27cd --- /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 0000000000..df3843c23e --- /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 0000000000..a8caf31038 --- /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 0000000000..41270af788 --- /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 0000000000..3e378436bf --- /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 0000000000..e9ff4d13af --- /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 0000000000..b3ef59d283 --- /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 = ""; + }; +}); + +</script> +</body> +</html> diff --git a/layout/reftests/image-element/invalid-src-2.html b/layout/reftests/image-element/invalid-src-2.html new file mode 100644 index 0000000000..c385acca6d --- /dev/null +++ b/layout/reftests/image-element/invalid-src-2.html @@ -0,0 +1,9 @@ +<!doctype html> +<style> + img { + display: inline-block; + width: 100px; + height: 100px; + } +</style> +<img src="http://yada yada"> diff --git a/layout/reftests/image-element/invalid-src.html b/layout/reftests/image-element/invalid-src.html new file mode 100644 index 0000000000..26821d39b2 --- /dev/null +++ b/layout/reftests/image-element/invalid-src.html @@ -0,0 +1,9 @@ +<!doctype html> +<style> + img { + display: inline-block; + width: 100px; + height: 100px; + } +</style> +<img src="yada yada"> 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 0000000000..833c846170 --- /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 0000000000..5dc3ec7f93 --- /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/mask-image-element-ref.html b/layout/reftests/image-element/mask-image-element-ref.html new file mode 100644 index 0000000000..adb1f6b2b4 --- /dev/null +++ b/layout/reftests/image-element/mask-image-element-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <head> + <style type="text/css"> + div { + background-color: white; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.auto { + left: 10px; + background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="blue" fill-opacity="1"/></svg>'); + } + + div.alpha { + left: 120px; + background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="blue" fill-opacity="1"/></svg>'); + } + + div.luminance1 { + left: 230px; + background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="rgb(238,238,255)" fill-opacity="1"/></svg>'); + } + + div.luminance2 { + left: 340px; + background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="rgb(201,201,255)" fill-opacity="1"/></svg>'); + } + + div.luminance3 { + left: 450px; + background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="rgb(73,73,255)" fill-opacity="1"/></svg>'); + } + </style> + </head> + <body> + <div class="auto"></div> + <div class="alpha"></div> + <div class="luminance1"></div> + <div class="luminance2"></div> + <div class="luminance3"></div> + </body> +</html> diff --git a/layout/reftests/image-element/mask-image-element.html b/layout/reftests/image-element/mask-image-element.html new file mode 100644 index 0000000000..3adf327b04 --- /dev/null +++ b/layout/reftests/image-element/mask-image-element.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> + <head> + <style type="text/css"> + div { + background-color: blue; + position: absolute; + margin: 0px; + padding: 0px; + width: 100px; + height: 100px; + top: 10px; + } + + div.auto { + left: 10px; + mask-mode: match-source; + mask-image: -moz-element(#blue-bg); + } + + div.alpha { + left: 120px; + mask-mode: alpha; + mask-image: -moz-element(#blue-bg); + } + + div.luminance1 { + left: 230px; + mask-mode: luminance; + mask-image: -moz-element(#blue-bg); + } + + div.luminance2 { + left: 340px; + mask-mode: luminance; + mask-image: -moz-element(#red-bg); + } + + div.luminance3 { + left: 450px; + mask-mode: luminance; + mask-image: -moz-element(#lime-bg); + } + </style> + </head> + <body> + <div class="auto"></div> + <div class="alpha"></div> + <div class="luminance1"></div> + <div class="luminance2"></div> + <div class="luminance3"></div> + + <div style="overflow:hidden; height:0;"> + <div id="blue-bg" style="width:100px; height:100px; background-color: blue;"> </div> + </div> + <div style="overflow:hidden; height:0;"> + <div id="red-bg" style="width:100px; height:100px; background-color: red;"></div> + </div> + <div style="overflow:hidden; height:0;"> + <div id="lime-bg" style="width:100px; height:100px; background-color: lime;"></div> + </div> + </body> +</html>
\ No newline at end of file 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 0000000000..2bba0c7316 --- /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 0000000000..f1ac067c0d --- /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 0000000000..d8ec098fcb --- /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 = ""; +}); + +</script> +</body> +</html> diff --git a/layout/reftests/image-element/no-src.html b/layout/reftests/image-element/no-src.html new file mode 100644 index 0000000000..6cc51078c0 --- /dev/null +++ b/layout/reftests/image-element/no-src.html @@ -0,0 +1,9 @@ +<!doctype html> +<style> + img { + display: inline-block; + width: 100px; + height: 100px; + } +</style> +<img> diff --git a/layout/reftests/image-element/orientation-1-ref.html b/layout/reftests/image-element/orientation-1-ref.html new file mode 100644 index 0000000000..b162de45c1 --- /dev/null +++ b/layout/reftests/image-element/orientation-1-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<div style="width: 200px; height: 100px;"><img src="../image/image-exif-90-deg.jpg"></div> +<img src="../image/image-exif-90-deg.jpg"> diff --git a/layout/reftests/image-element/orientation-1.html b/layout/reftests/image-element/orientation-1.html new file mode 100644 index 0000000000..cb48c59c29 --- /dev/null +++ b/layout/reftests/image-element/orientation-1.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<!-- Test that -moz-element() honors a target image's orientation metadata. --> +<div style="width: 200px; height: 100px; background-image: -moz-element(#e);"></div> +<img id="e" src="../image/image-exif-90-deg.jpg"> 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 0000000000..b991d9d17c --- /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 0000000000..fa91c3748d --- /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 0000000000..3c913649a3 --- /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 0000000000..043b32ec5e --- /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/reftest.list b/layout/reftests/image-element/reftest.list new file mode 100644 index 0000000000..1a68b9c95e --- /dev/null +++ b/layout/reftests/image-element/reftest.list @@ -0,0 +1,59 @@ +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&&!winWidget) fails-if(cocoaWidget) fails-if(remoteCanvas&&swgl&&winWidget) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),255-255,800000-800000) == 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 +fuzzy-if(winWidget,47-129,47-54) == 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 +== element-paint-continuation.html element-paint-continuation-ref.html +== element-paint-transform-01.html element-paint-transform-01-ref.html +random-if(d2d) fuzzy-if(!useDrawSnapshot,255-255,39-42) == element-paint-transform-02.html element-paint-transform-02-ref.html # bug 587133 +== 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(0-255,0-4) == element-paint-transform-repeated.html element-paint-transform-repeated-ref.html # Bug 1475907 +fuzzy-if(d2d,0-255,0-24) fuzzy-if(!useDrawSnapshot,255-255,50-115) == element-paint-transform-03.html element-paint-transform-03-ref.html + +# For element() uses fallback / skia in WebRender, which antialiases differently from WR. +# For Windows: bug 1496542, the scrollframe snaps differently. +# For the rest: -ref the scrollframe is active and layerized differently with APZ. +fuzzy(0-24,0-106) fuzzy-if(winWidget&&!layersGPUAccelerated,149-149,1203-1203) fuzzy-if(!useDrawSnapshot,1-48,5-68) fuzzy-if(winWidget,47-222,1197-1588) fuzzy-if(Android,0-40,0-81) == element-paint-native-widget.html element-paint-native-widget-ref.html + +# This fails with CreateSamplingRestrictedDrawable removed +fails-if(!Android&&!useDrawSnapshot) == element-paint-subimage-sampling-restriction.html about:blank +== element-paint-clippath.html element-paint-clippath-ref.html +fuzzy-if(!useDrawSnapshot,1-1,128-128) fuzzy-if(d2d,47-47,650-652) fuzzy-if(!useDrawSnapshot,36-39,704-738) == element-paint-sharpness-01a.html element-paint-sharpness-01b.html +fuzzy(0-1,0-326) fails-if(useDrawSnapshot) == element-paint-sharpness-01b.html element-paint-sharpness-01c.html +fuzzy-if(!useDrawSnapshot,1-1,128-128) fuzzy-if(d2d,47-47,650-652) fuzzy-if(!useDrawSnapshot,36-39,704-738) == element-paint-sharpness-01c.html element-paint-sharpness-01d.html +== element-paint-sharpness-02a.html element-paint-sharpness-02b.html +fails-if(useDrawSnapshot) == element-paint-sharpness-02b.html element-paint-sharpness-02c.html +== element-paint-paintserversize-rounding-01.html element-paint-paintserversize-rounding-01-ref.html +fuzzy(0-187,0-1191) == element-paint-paintserversize-rounding-02.html element-paint-paintserversize-rounding-02-ref.html # Linux32 from GCC update +fuzzy(0-1,0-625) == element-paint-multiple-backgrounds-01a.html element-paint-multiple-backgrounds-01-ref.html +fuzzy(0-1,0-625) == element-paint-multiple-backgrounds-01b.html element-paint-multiple-backgrounds-01-ref.html +fuzzy(0-1,0-625) == 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(0-1,0-9674) random-if(!cocoaWidget) fuzzy-if(cocoaWidget,1-1,22500-444200) == gradient-html-06a.html gradient-html-06b.html +fuzzy(0-1,0-9674) random-if(!cocoaWidget) fuzzy-if(cocoaWidget,1-1,22500-444200) == 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,0-2,0-42305) == gradient-html-07a.html gradient-html-07b.html +fuzzy(0-1,0-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 +!= broken-icon.html no-src.html +!= broken-icon.html empty-src.html +== empty-src.html no-src.html +== broken-icon.html invalid-src.html +fails == invalid-src.html invalid-src-2.html # bug 1506804 +fuzzy(0-1,0-30000) == mask-image-element.html mask-image-element-ref.html +== orientation-1.html orientation-1-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 0000000000..d114e100d3 --- /dev/null +++ b/layout/reftests/image-element/repeatable-diagonal-gradient.png diff --git a/layout/reftests/image-rect/background-common-usage-floating-point.html b/layout/reftests/image-rect/background-common-usage-floating-point.html new file mode 100644 index 0000000000..56015953e6 --- /dev/null +++ b/layout/reftests/image-rect/background-common-usage-floating-point.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + test1 and test2 test -moz-image-rect() where the image rect is specified by + mixed pixel values and percentage values. + + -moz-image-rect() can also take a floating point value for each side, and + each floating point value (after percent to pixel conversion) is rounded to + the nearest integer. test3 and test4 test if the rounding operation is + working as expected. +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + #test1 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 32, 100%, 0%); + } + #test2 { + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 0%, 32, 50%, 0); + } + #test3 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0.3, 16.2, 15.5, 0.4); + } + #test4 { + background-color: yellow; + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 51.2%, 100.4%, 99.2%, 48.9%); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + <div class="wrapper"><div id="test3"></div></div> + <div class="wrapper"><div id="test4"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-common-usage-percent.html b/layout/reftests/image-rect/background-common-usage-percent.html new file mode 100644 index 0000000000..55cabfe35a --- /dev/null +++ b/layout/reftests/image-rect/background-common-usage-percent.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Tests some common usages of -moz-image-rect() with image rect specified by + percentage values. +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + #test1 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0%, 100%, 100%, 0%); + } + #test2 { + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 0%, 100%, 50%, 0%); + } + #test3 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0%, 50%, 50%, 0%); + } + #test4 { + background-color: yellow; + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 50%, 100%, 100%, 50%); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + <div class="wrapper"><div id="test3"></div></div> + <div class="wrapper"><div id="test4"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-common-usage-pixel.html b/layout/reftests/image-rect/background-common-usage-pixel.html new file mode 100644 index 0000000000..d7978803a5 --- /dev/null +++ b/layout/reftests/image-rect/background-common-usage-pixel.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Tests some common usages of -moz-image-rect() with image rect specified by + pixel values. +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + #test1 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 32, 32, 0); + } + #test2 { + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 0, 32, 16, 0); + } + #test3 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 16, 16, 0); + } + #test4 { + background-color: yellow; + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 16, 32, 32, 16); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + <div class="wrapper"><div id="test3"></div></div> + <div class="wrapper"><div id="test4"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-common-usage-ref.html b/layout/reftests/image-rect/background-common-usage-ref.html new file mode 100644 index 0000000000..eaed0d21f7 --- /dev/null +++ b/layout/reftests/image-rect/background-common-usage-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + background-repeat: no-repeat; + } + #test1 { + width: 32px; + height: 32px; + background-position: 0px 0px; + background-image: url('green-16x16-in-blue-32x32.png'); + } + #test2 { + width: 32px; + height: 16px; + background-position: 0px 0px; + background-image: url('transparent-16x16-in-blue-32x32.png'); + } + #test3 { + width: 16px; + height: 16px; + background-position: 0px 0px; + background-image: url('green-16x16-in-blue-32x32.png'); + } + #test4 { + width: 32px; + height: 32px; + background-color: yellow; + background-position: -16px -16px; + background-image: url('transparent-16x16-in-blue-32x32.png'); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + <div class="wrapper"><div id="test3"></div></div> + <div class="wrapper"><div id="test4"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-draw-nothing-empty-rect.html b/layout/reftests/image-rect/background-draw-nothing-empty-rect.html new file mode 100644 index 0000000000..0e7c5d763e --- /dev/null +++ b/layout/reftests/image-rect/background-draw-nothing-empty-rect.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Makes sure that no image is drawn when an empty region of the source image + is specified by -moz-image-rect(). +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + /* Zero width and height */ + #test1 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 0, 0, 0); + } + /* Negative height */ + #test2 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 32, 32, 0, 0); + } + /* Image rect outside the source image */ + #test3 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 100, 200, 200, 100); + } + /* Negative height */ + #test4 { + /* It is only after the source image size is available that it can be + determined if this image is empty or not. */ + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 16, 32, 50%, 16); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + <div class="wrapper"><div id="test3"></div></div> + <div class="wrapper"><div id="test4"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-draw-nothing-invalid-syntax.html b/layout/reftests/image-rect/background-draw-nothing-invalid-syntax.html new file mode 100644 index 0000000000..c658a0fa19 --- /dev/null +++ b/layout/reftests/image-rect/background-draw-nothing-invalid-syntax.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Tests if the CSS parser can detect wrong syntax of -moz-image-rect() and + gracefully fail. +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + #test1 { + /* only non-negative values accepted */ + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), -1, 16, 16, 0); + } + #test2 { + /* only bare numbers and percent values accepted */ + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0px, 16, 16, 0); + } + #test3 { + /* must have a complete set of <top>, <right>, <bottom>, <left> */ + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 16, 16); + } + #test4 { + /* must be comma separated */ + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png) 0, 16, 16, 0); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + <div class="wrapper"><div id="test3"></div></div> + <div class="wrapper"><div id="test4"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-draw-nothing-malformed-images.html b/layout/reftests/image-rect/background-draw-nothing-malformed-images.html new file mode 100644 index 0000000000..f3d75d7509 --- /dev/null +++ b/layout/reftests/image-rect/background-draw-nothing-malformed-images.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Tests if some unusual source images do not cause a crash. +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + #test1 { + background-image: -moz-image-rect(url(missing.png), 0, 16, 16, 0); + } + #test2 { + background-image: -moz-image-rect(url(#), 0, 16, 16, 0); + } + #test3 { + background-image: -moz-image-rect(url(../backgrounds/malformed.png), 0, 16, 16, 0); + } + #test4 { + background-image: -moz-image-rect(url(../backgrounds/transparent-32x32.png), 0, 16, 16, 0); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + <div class="wrapper"><div id="test3"></div></div> + <div class="wrapper"><div id="test4"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-draw-nothing-ref.html b/layout/reftests/image-rect/background-draw-nothing-ref.html new file mode 100644 index 0000000000..a370d087a8 --- /dev/null +++ b/layout/reftests/image-rect/background-draw-nothing-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + <div class="wrapper"><div id="test3"></div></div> + <div class="wrapper"><div id="test4"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-monster-rect-ref.html b/layout/reftests/image-rect/background-monster-rect-ref.html new file mode 100644 index 0000000000..2b2203a53a --- /dev/null +++ b/layout/reftests/image-rect/background-monster-rect-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: url(green-16x16-in-blue-32x32.png) no-repeat; + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + <div class="wrapper"><div id="test3"></div></div> + <div class="wrapper"><div id="test4"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-monster-rect.html b/layout/reftests/image-rect/background-monster-rect.html new file mode 100644 index 0000000000..2f326ec7af --- /dev/null +++ b/layout/reftests/image-rect/background-monster-rect.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if huge values that overflow when converted to PRInt32 and small + non-zero values do not cause a crash or an unexpected behavior. +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + } + /* Huge values that exceed PR_INT32_MAX are clamped to PR_INT32_MAX, so + all the tests below should display the entire 32x32 image. */ + #test1 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 10000000000, 32, 0); + } + #test2 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0%, 10000000000%, 100%, 0%); + } + /* Small values (smaller than machine epsilon) are rounded to zero, so + all the tests below should display the entire 32x32 image. */ + #test3 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0.00000000001, 32, 32, 0); + } + #test4 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0.00000000001%, 100%, 100%, 0%); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + <div class="wrapper"><div id="test3"></div></div> + <div class="wrapper"><div id="test4"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-over-size-rect-ref.html b/layout/reftests/image-rect/background-over-size-rect-ref.html new file mode 100644 index 0000000000..b59c7cdfc8 --- /dev/null +++ b/layout/reftests/image-rect/background-over-size-rect-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 16px; + height: 16px; + background: -16px -16px url('green-16x16-in-blue-32x32.png') no-repeat; + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-over-size-rect.html b/layout/reftests/image-rect/background-over-size-rect.html new file mode 100644 index 0000000000..ea166e89fd --- /dev/null +++ b/layout/reftests/image-rect/background-over-size-rect.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Tests image rects that run off the source image bounds. +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + /* The final crop rect is computed by intersecting an image rect and the + source image bounds, so the following tests should display the bottom + right 16x16 corner of the image. */ + #test1 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 16, 50, 50, 16); + } + #test2 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 50.000001%, 1000000%, 1000000%, 50.000001%); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-test-parser-ref.html b/layout/reftests/image-rect/background-test-parser-ref.html new file mode 100644 index 0000000000..2f1dfb3af9 --- /dev/null +++ b/layout/reftests/image-rect/background-test-parser-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + } + #test1, #test2, #test3 { + width: 16px; + height: 16px; + background: url('green-16x16-in-blue-32x32.png') no-repeat; + } + #test4 { + width: 32px; + height: 32px; + background-color: yellow; + } + #test5, #test6 { + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + <div class="wrapper"><div id="test3"></div></div> + <div class="wrapper"><div id="test4"></div></div> + <div class="wrapper"><div id="test5"></div></div> + <div class="wrapper"><div id="test6"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-test-parser.html b/layout/reftests/image-rect/background-test-parser.html new file mode 100644 index 0000000000..5ada0f8c5d --- /dev/null +++ b/layout/reftests/image-rect/background-test-parser.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if the CSS parser can parse variations of -moz-image-rect() syntax + correctly or fail gracefully. +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + #test1 { + /* tests shorthand notation */ + background: transparent scroll no-repeat 0px 0px -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 16, 16, 0); + } + #test2 { + /* URL can be a quoted string */ + background-image: -moz-image-rect('green-16x16-in-blue-32x32.png',0,16,16,0); + } + #test3 { + /* URL can be a quoted string */ + background-image: -moz-image-rect( "green-16x16-in-blue-32x32.png" , 0 , 16 , 16 , 0 ); + } + #test4 { + /* Non-quoted URL is not allowed. When the parser encounters a syntax + error, it skips until the closing parenthesis, so background-color + should be painted with yellow since -moz-image-rect(...) is ignored. */ + background-image: -moz-image-rect(green-16x16-in-blue-32x32.png, 0, 16, 16, 0); + background-color: yellow; + } + #test5 { + /* Non-quoted URL is not allowed. When the parser encounters a syntax + error, it skips until the closing parenthesis, so background-color + should be ignored since there is no matching closing parenthesis. */ + background-image: -moz-image-rect(green-16x16-in-blue-32x32.png, 0, 16, 16, 0; + background-color: yellow; + } + #test6 { + /* this is ignored due to the missing closing parenthesis in #test5 */ + background-color: yellow; + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + <div class="wrapper"><div id="test3"></div></div> + <div class="wrapper"><div id="test4"></div></div> + <div class="wrapper"><div id="test5"></div></div> + <div class="wrapper"><div id="test6"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-with-other-properties-ref.html b/layout/reftests/image-rect/background-with-other-properties-ref.html new file mode 100644 index 0000000000..cc5a17952a --- /dev/null +++ b/layout/reftests/image-rect/background-with-other-properties-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + #test1 { + width: 32px; + height: 32px; + background-color: #00ff00; + } + #test2 { + width: 16px; + height: 16px; + background-color: #00ff00; + } + #test3 { + width: 32px; + height: 16px; + background-image: url('green-16x16-in-blue-32x32.png'); + } + #test4 { + width: 16px; + height: 16px; + background-color: #00ff00; + } + #test5 { + width: 32px; + height: 32px; + background-color: #00ff00; + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + <div class="wrapper"><div id="test3"></div></div> + <div class="wrapper"><div id="test4"></div></div> + <div class="wrapper"><div id="test5"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-with-other-properties.html b/layout/reftests/image-rect/background-with-other-properties.html new file mode 100644 index 0000000000..976f891ce3 --- /dev/null +++ b/layout/reftests/image-rect/background-with-other-properties.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Tests if -moz-image-rect() works collaboratively with other background + properties as expected. +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + } + /* tests with background-repeat */ + #test1 { + background: repeat -moz-image-rect(url(green-16x16-in-blue-32x32.png), 8, 24, 24, 8); + } + /* tests with background-position */ + #test2 { + background: no-repeat -8px -8px -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 24, 24, 0); + } + /* tests with background layers */ + #test3 { + background: no-repeat 0px 0px -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 16, 16, 0), + no-repeat 16px 0px -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 32, 16, 16); + } + /* for comparison with test5 */ + #test4 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 8, 24, 24, 8); + background-repeat: no-repeat; + } + /* tests with background-size */ + #test5 { + background-size: 100% 100%; + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 8, 24, 24, 8); + background-repeat: no-repeat; + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + <div class="wrapper"><div id="test3"></div></div> + <div class="wrapper"><div id="test4"></div></div> + <div class="wrapper"><div id="test5"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-zoom-1-ref.html b/layout/reftests/image-rect/background-zoom-1-ref.html new file mode 100644 index 0000000000..fbaada9ce7 --- /dev/null +++ b/layout/reftests/image-rect/background-zoom-1-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if the full zoom (x1.3) on -moz-image-rect() produces the same + result as the same full zoom on the CSS sprites produced by hacking + background-position. + + This file is identical to background-common-usage-pixel.html except the + zoom factor. +--> +<html reftest-zoom="1.304348"> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + #test1 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 32, 32, 0); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-zoom-1.html b/layout/reftests/image-rect/background-zoom-1.html new file mode 100644 index 0000000000..fbaada9ce7 --- /dev/null +++ b/layout/reftests/image-rect/background-zoom-1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if the full zoom (x1.3) on -moz-image-rect() produces the same + result as the same full zoom on the CSS sprites produced by hacking + background-position. + + This file is identical to background-common-usage-pixel.html except the + zoom factor. +--> +<html reftest-zoom="1.304348"> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + #test1 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 32, 32, 0); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-zoom-2-ref.html b/layout/reftests/image-rect/background-zoom-2-ref.html new file mode 100644 index 0000000000..617ae22599 --- /dev/null +++ b/layout/reftests/image-rect/background-zoom-2-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if the full zoom (x1.3) on -moz-image-rect() produces the same + result as the same full zoom on the CSS sprites produced by hacking + background-position. + + This file is identical to background-common-usage-pixel.html except the + zoom factor. +--> +<html reftest-zoom="1.304348"> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + #test2 { + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 0, 32, 16, 0); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test2"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-zoom-2.html b/layout/reftests/image-rect/background-zoom-2.html new file mode 100644 index 0000000000..617ae22599 --- /dev/null +++ b/layout/reftests/image-rect/background-zoom-2.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if the full zoom (x1.3) on -moz-image-rect() produces the same + result as the same full zoom on the CSS sprites produced by hacking + background-position. + + This file is identical to background-common-usage-pixel.html except the + zoom factor. +--> +<html reftest-zoom="1.304348"> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + #test2 { + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 0, 32, 16, 0); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test2"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-zoom-3-ref.html b/layout/reftests/image-rect/background-zoom-3-ref.html new file mode 100644 index 0000000000..45b909252f --- /dev/null +++ b/layout/reftests/image-rect/background-zoom-3-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if the full zoom (x1.3) on -moz-image-rect() produces the same + result as the same full zoom on the CSS sprites produced by hacking + background-position. + + This file is identical to background-common-usage-pixel.html except the + zoom factor. +--> +<html reftest-zoom="1.304348"> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + #test3 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 16, 16, 0); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test3"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-zoom-3.html b/layout/reftests/image-rect/background-zoom-3.html new file mode 100644 index 0000000000..45b909252f --- /dev/null +++ b/layout/reftests/image-rect/background-zoom-3.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if the full zoom (x1.3) on -moz-image-rect() produces the same + result as the same full zoom on the CSS sprites produced by hacking + background-position. + + This file is identical to background-common-usage-pixel.html except the + zoom factor. +--> +<html reftest-zoom="1.304348"> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + #test3 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 16, 16, 0); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test3"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-zoom-4-ref.html b/layout/reftests/image-rect/background-zoom-4-ref.html new file mode 100644 index 0000000000..77c83482e0 --- /dev/null +++ b/layout/reftests/image-rect/background-zoom-4-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if the full zoom (x1.3) on -moz-image-rect() produces the same + result as the same full zoom on the CSS sprites produced by hacking + background-position. + + This file is identical to background-common-usage-pixel.html except the + zoom factor. +--> +<html reftest-zoom="1.304348"> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + #test4 { + background-color: yellow; + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 16, 32, 32, 16); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test4"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-zoom-4.html b/layout/reftests/image-rect/background-zoom-4.html new file mode 100644 index 0000000000..77c83482e0 --- /dev/null +++ b/layout/reftests/image-rect/background-zoom-4.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if the full zoom (x1.3) on -moz-image-rect() produces the same + result as the same full zoom on the CSS sprites produced by hacking + background-position. + + This file is identical to background-common-usage-pixel.html except the + zoom factor. +--> +<html reftest-zoom="1.304348"> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + #test4 { + background-color: yellow; + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 16, 32, 32, 16); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test4"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/dom-api-computed-style.html b/layout/reftests/image-rect/dom-api-computed-style.html new file mode 100644 index 0000000000..f5efc91b07 --- /dev/null +++ b/layout/reftests/image-rect/dom-api-computed-style.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Tests if getComputedStyle() works on -moz-image-rect() and formats the + output correctly. +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + </style> + <script> + var curdir = location.href.replace(/[^/]+$/, ""); + // Tests a common usage + var test1 = "-moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 16, 16, 0)"; + var testRef1 = "-moz-image-rect(url(\"" + curdir + "green-16x16-in-blue-32x32.png\"), 0, 16, 16, 0)"; + // Tests an irregular but valid usage + var test2 = "-moz-image-rect( 'green-16x16-in-blue-32x32.png' , 0.0% , 50.5% , 49.5% , 0.0% )"; + var testRef2 = "-moz-image-rect(url(\"" + curdir + "green-16x16-in-blue-32x32.png\"), 0%, 50.5%, 49.5%, 0%)"; + // Tests a wrong syntax (negative value) + var test3 = "-moz-image-rect(url(green-16x16-in-blue-32x32.png), 0%, -50%, 50%, 0%)"; + var testRef3 = "none"; + // Checks if I didn't break the default url() notation. + var test4 = "url( green-16x16-in-blue-32x32.png )"; + var testRef4 = "url(\"" + curdir + "green-16x16-in-blue-32x32.png\")"; + + function equalComputedDOMIO(domInput, domOutputRef, targetId) { + var targetObj = document.getElementById(targetId); + targetObj.style.backgroundImage = domInput; + var domOutput = getComputedStyle(targetObj, null).getPropertyValue("background-image"); + document.write(domOutput == domOutputRef ? "SUCCESS" : ("FAIL: " + domOutput)); + } + </script> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <script> + equalComputedDOMIO(test1, testRef1, "test1"); + </script> + <div class="wrapper"><div id="test2"></div></div> + <script> + equalComputedDOMIO(test2, testRef2, "test2"); + </script> + <div class="wrapper"><div id="test3"></div></div> + <script> + equalComputedDOMIO(test3, testRef3, "test3"); + </script> + <div class="wrapper"><div id="test4"></div></div> + <script> + equalComputedDOMIO(test4, testRef4, "test4"); + </script> + </body> +</html> diff --git a/layout/reftests/image-rect/dom-api-ref.html b/layout/reftests/image-rect/dom-api-ref.html new file mode 100644 index 0000000000..9195e1ddfd --- /dev/null +++ b/layout/reftests/image-rect/dom-api-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + #test1 { + width: 16px; + height: 16px; + background-image: url('green-16x16-in-blue-32x32.png'); + } + #test2 { + width: 16px; + height: 16px; + background-image: url('green-16x16-in-blue-32x32.png'); + } + #test3 { + } + #test4 { + width: 32px; + height: 32px; + background-image: url('green-16x16-in-blue-32x32.png'); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + SUCCESS + <div class="wrapper"><div id="test2"></div></div> + SUCCESS + <div class="wrapper"><div id="test3"></div></div> + SUCCESS + <div class="wrapper"><div id="test4"></div></div> + SUCCESS + </body> +</html> diff --git a/layout/reftests/image-rect/dom-api.html b/layout/reftests/image-rect/dom-api.html new file mode 100644 index 0000000000..a20cb594d0 --- /dev/null +++ b/layout/reftests/image-rect/dom-api.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Tests if the DOM interface of -moz-image-rect() works and formats the + output correctly. +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + div.wrapper div { + width: 32px; + height: 32px; + background: no-repeat; + } + </style> + <script> + // Tests a common usage + var test1 = "-moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 16, 16, 0)"; + var testRef1 = "-moz-image-rect(url(\"green-16x16-in-blue-32x32.png\"), 0, 16, 16, 0)"; + // Tests an irregular but valid usage + var test2 = "-moz-image-rect( 'green-16x16-in-blue-32x32.png' , 0.0% , 50.5% , 49.5% , 0.0% )"; + var testRef2 = "-moz-image-rect(url(\"green-16x16-in-blue-32x32.png\"), 0%, 50.5%, 49.5%, 0%)"; + // Tests a wrong syntax (negative value) + var test3 = "-moz-image-rect(url(green-16x16-in-blue-32x32.png), 0%, -50%, 50%, 0%)"; + var testRef3 = ""; + // Checks if I didn't break the default url() notation. + var test4 = "url( green-16x16-in-blue-32x32.png )"; + var testRef4 = "url(\"green-16x16-in-blue-32x32.png\")"; + + function equalDOMIO(domInput, domOutputRef, targetId) { + var targetObj = document.getElementById(targetId); + targetObj.style.backgroundImage = domInput; + var domOutput = targetObj.style.backgroundImage; + document.write(domOutput == domOutputRef ? "SUCCESS" : ("FAIL: " + domOutput)); + } + </script> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <script> + equalDOMIO(test1, testRef1, "test1"); + </script> + <div class="wrapper"><div id="test2"></div></div> + <script> + equalDOMIO(test2, testRef2, "test2"); + </script> + <div class="wrapper"><div id="test3"></div></div> + <script> + equalDOMIO(test3, testRef3, "test3"); + </script> + <div class="wrapper"><div id="test4"></div></div> + <script> + equalDOMIO(test4, testRef4, "test4"); + </script> + </body> +</html> diff --git a/layout/reftests/image-rect/green-16x16-in-blue-32x32.png b/layout/reftests/image-rect/green-16x16-in-blue-32x32.png Binary files differnew file mode 100644 index 0000000000..038b4fa728 --- /dev/null +++ b/layout/reftests/image-rect/green-16x16-in-blue-32x32.png diff --git a/layout/reftests/image-rect/reftest.list b/layout/reftests/image-rect/reftest.list new file mode 100644 index 0000000000..2b01459ad8 --- /dev/null +++ b/layout/reftests/image-rect/reftest.list @@ -0,0 +1,16 @@ +== background-common-usage-floating-point.html background-common-usage-ref.html +== background-common-usage-percent.html background-common-usage-ref.html +== background-common-usage-pixel.html background-common-usage-ref.html +== background-draw-nothing-empty-rect.html background-draw-nothing-ref.html +== background-draw-nothing-invalid-syntax.html background-draw-nothing-ref.html +== background-draw-nothing-malformed-images.html background-draw-nothing-ref.html +== background-monster-rect.html background-monster-rect-ref.html +== background-over-size-rect.html background-over-size-rect-ref.html +== background-test-parser.html background-test-parser-ref.html +fuzzy-if(Android,0-113,0-124) == background-with-other-properties.html background-with-other-properties-ref.html +fuzzy(0-16,0-44) == background-zoom-1.html background-zoom-1-ref.html # Bug 1128229 +== background-zoom-2.html background-zoom-2-ref.html +== background-zoom-3.html background-zoom-3-ref.html +== background-zoom-4.html background-zoom-4-ref.html +== dom-api-computed-style.html dom-api-ref.html +== dom-api.html dom-api-ref.html diff --git a/layout/reftests/image-rect/transparent-16x16-in-blue-32x32.png b/layout/reftests/image-rect/transparent-16x16-in-blue-32x32.png Binary files differnew file mode 100644 index 0000000000..5baab0c1f9 --- /dev/null +++ b/layout/reftests/image-rect/transparent-16x16-in-blue-32x32.png diff --git a/layout/reftests/image-region/image-region-ref.png b/layout/reftests/image-region/image-region-ref.png Binary files differnew file mode 100644 index 0000000000..418cea798b --- /dev/null +++ b/layout/reftests/image-region/image-region-ref.png diff --git a/layout/reftests/image-region/image-region-ref.xhtml b/layout/reftests/image-region/image-region-ref.xhtml new file mode 100644 index 0000000000..b17f5b3135 --- /dev/null +++ b/layout/reftests/image-region/image-region-ref.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + --> +<?xml-stylesheet href="image-region.css" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + id="main" + class="reftest-image-region"> + <hbox id="ref"> + <image id="image1" /> + <hbox style="-moz-box-flex: 1000" /> + </hbox> +</window> diff --git a/layout/reftests/image-region/image-region.css b/layout/reftests/image-region/image-region.css new file mode 100644 index 0000000000..bfbceeb557 --- /dev/null +++ b/layout/reftests/image-region/image-region.css @@ -0,0 +1,19 @@ +/* + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + */ +hbox#test > image { + list-style-image: url("image-region.png"); +} + +hbox#test > #image1 { + -moz-image-region: rect(1px, 19px, 9px, 1px); +} + +hbox#ref > image { + list-style-image: none; +} + +hbox#ref > #image1 { + list-style-image: url("image-region-ref.png"); +} diff --git a/layout/reftests/image-region/image-region.png b/layout/reftests/image-region/image-region.png Binary files differnew file mode 100644 index 0000000000..ca1276d027 --- /dev/null +++ b/layout/reftests/image-region/image-region.png diff --git a/layout/reftests/image-region/image-region.xhtml b/layout/reftests/image-region/image-region.xhtml new file mode 100644 index 0000000000..142b10b8b4 --- /dev/null +++ b/layout/reftests/image-region/image-region.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + --> +<?xml-stylesheet href="image-region.css" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + id="main" + class="reftest-image-region"> + <hbox id="test"> + <image id="image1" /> + <hbox style="-moz-box-flex: 1000" /> + </hbox> +</window> diff --git a/layout/reftests/image-region/reftest.list b/layout/reftests/image-region/reftest.list new file mode 100644 index 0000000000..52f3f94415 --- /dev/null +++ b/layout/reftests/image-region/reftest.list @@ -0,0 +1 @@ +== chrome://reftest/content/image-region/image-region.xhtml chrome://reftest/content/image-region/image-region-ref.xhtml diff --git a/layout/reftests/image/100.png b/layout/reftests/image/100.png Binary files differnew file mode 100644 index 0000000000..df421453c2 --- /dev/null +++ b/layout/reftests/image/100.png diff --git a/layout/reftests/image/200.png b/layout/reftests/image/200.png Binary files differnew file mode 100644 index 0000000000..6f76d44387 --- /dev/null +++ b/layout/reftests/image/200.png diff --git a/layout/reftests/image/300.png b/layout/reftests/image/300.png Binary files differnew file mode 100644 index 0000000000..c12b7ceea1 --- /dev/null +++ b/layout/reftests/image/300.png diff --git a/layout/reftests/image/400.png b/layout/reftests/image/400.png Binary files differnew file mode 100644 index 0000000000..8855fc6d46 --- /dev/null +++ b/layout/reftests/image/400.png diff --git a/layout/reftests/image/50.png b/layout/reftests/image/50.png Binary files differnew file mode 100644 index 0000000000..144a2f0b93 --- /dev/null +++ b/layout/reftests/image/50.png diff --git a/layout/reftests/image/500.svg b/layout/reftests/image/500.svg new file mode 100644 index 0000000000..35ad0db4f0 --- /dev/null +++ b/layout/reftests/image/500.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="500px"> + +<title>Simple SVG with 500x500 intrinsic size</title> + <rect x1="0" y1="0" width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/image/background-image-zoom-1-ref.html b/layout/reftests/image/background-image-zoom-1-ref.html new file mode 100644 index 0000000000..b23048bb61 --- /dev/null +++ b/layout/reftests/image/background-image-zoom-1-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + --> +<html> +<head> +<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no" /> +<title>reference background-image-rendering: -moz-crisp-edges</title> +<style> +html +{ +background-image: url('big.png'); +background-attachment:fixed; +background-position: 20px 20px; +background-repeat: no-repeat; +overflow: hidden; +} +</style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/image/background-image-zoom-1.html b/layout/reftests/image/background-image-zoom-1.html new file mode 100644 index 0000000000..0572099a37 --- /dev/null +++ b/layout/reftests/image/background-image-zoom-1.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + --> +<html reftest-zoom="5"> +<head> +<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no" /> +<title>test background-image-rendering: -moz-crisp-edges</title> +<style> +html +{ +background-image: url('small.png'); +image-rendering: -moz-crisp-edges; +background-attachment:fixed; +background-position: 4px 4px; +background-repeat: no-repeat; +overflow: hidden; +} +</style> +</head> +<body> +</body> +</html> diff --git a/layout/reftests/image/background-image-zoom-2.html b/layout/reftests/image/background-image-zoom-2.html new file mode 100644 index 0000000000..18a41ea430 --- /dev/null +++ b/layout/reftests/image/background-image-zoom-2.html @@ -0,0 +1,23 @@ +<html reftest-zoom="1.8"> +<style> + a{ + background-repeat: inherit; + background-position: inherit; + /* this image has a red pixel at the bottom to + prevent image lib from optimizing it into a + solid color fill */ + background-image:url("nearly-white.png"); + line-height: 20px; /* set the line height so that the red pixel is not drawn */ + } +</style> +<div style="background-repeat: no-repeat"> + <a> </a><a> </a> +</div> +<p> +<div style="background-position: right top"> + <a> </a><a> </a> +</div> +<p> +<div> + <a> </a><a> </a> +</div> diff --git a/layout/reftests/image/big.png b/layout/reftests/image/big.png Binary files differnew file mode 100644 index 0000000000..76a32497c7 --- /dev/null +++ b/layout/reftests/image/big.png diff --git a/layout/reftests/image/blue-100x50.png b/layout/reftests/image/blue-100x50.png Binary files differnew file mode 100644 index 0000000000..85d980424c --- /dev/null +++ b/layout/reftests/image/blue-100x50.png diff --git a/layout/reftests/image/blue-16x20.png b/layout/reftests/image/blue-16x20.png Binary files differnew file mode 100644 index 0000000000..f0f4d319e8 --- /dev/null +++ b/layout/reftests/image/blue-16x20.png diff --git a/layout/reftests/image/blue-32x32.png b/layout/reftests/image/blue-32x32.png Binary files differnew file mode 100644 index 0000000000..deefd19b2a --- /dev/null +++ b/layout/reftests/image/blue-32x32.png diff --git a/layout/reftests/image/blue-50x100.png b/layout/reftests/image/blue-50x100.png Binary files differnew file mode 100644 index 0000000000..d09f03b25f --- /dev/null +++ b/layout/reftests/image/blue-50x100.png diff --git a/layout/reftests/image/blue-50x50.png b/layout/reftests/image/blue-50x50.png Binary files differnew file mode 100644 index 0000000000..bdb91e34c8 --- /dev/null +++ b/layout/reftests/image/blue-50x50.png diff --git a/layout/reftests/image/image-exif-0-deg-flip.jpg b/layout/reftests/image/image-exif-0-deg-flip.jpg Binary files differnew file mode 100644 index 0000000000..727bb34a8c --- /dev/null +++ b/layout/reftests/image/image-exif-0-deg-flip.jpg diff --git a/layout/reftests/image/image-exif-0-deg.jpg b/layout/reftests/image/image-exif-0-deg.jpg Binary files differnew file mode 100644 index 0000000000..92eb2605bf --- /dev/null +++ b/layout/reftests/image/image-exif-0-deg.jpg diff --git a/layout/reftests/image/image-exif-180-deg-flip.jpg b/layout/reftests/image/image-exif-180-deg-flip.jpg Binary files differnew file mode 100644 index 0000000000..a450d3db4e --- /dev/null +++ b/layout/reftests/image/image-exif-180-deg-flip.jpg diff --git a/layout/reftests/image/image-exif-180-deg.jpg b/layout/reftests/image/image-exif-180-deg.jpg Binary files differnew file mode 100644 index 0000000000..cefa5c8b3e --- /dev/null +++ b/layout/reftests/image/image-exif-180-deg.jpg diff --git a/layout/reftests/image/image-exif-270-deg-flip.jpg b/layout/reftests/image/image-exif-270-deg-flip.jpg Binary files differnew file mode 100644 index 0000000000..1881be3c3b --- /dev/null +++ b/layout/reftests/image/image-exif-270-deg-flip.jpg diff --git a/layout/reftests/image/image-exif-270-deg.jpg b/layout/reftests/image/image-exif-270-deg.jpg Binary files differnew file mode 100644 index 0000000000..eb3f240f4d --- /dev/null +++ b/layout/reftests/image/image-exif-270-deg.jpg diff --git a/layout/reftests/image/image-exif-90-deg-flip.jpg b/layout/reftests/image/image-exif-90-deg-flip.jpg Binary files differnew file mode 100644 index 0000000000..60538724fc --- /dev/null +++ b/layout/reftests/image/image-exif-90-deg-flip.jpg diff --git a/layout/reftests/image/image-exif-90-deg.jpg b/layout/reftests/image/image-exif-90-deg.jpg Binary files differnew file mode 100644 index 0000000000..249cfeab72 --- /dev/null +++ b/layout/reftests/image/image-exif-90-deg.jpg diff --git a/layout/reftests/image/image-exif-none.jpg b/layout/reftests/image/image-exif-none.jpg Binary files differnew file mode 100644 index 0000000000..78e3584eef --- /dev/null +++ b/layout/reftests/image/image-exif-none.jpg diff --git a/layout/reftests/image/image-in-iframe-1-ref.html b/layout/reftests/image/image-in-iframe-1-ref.html new file mode 100644 index 0000000000..b1e54684cd --- /dev/null +++ b/layout/reftests/image/image-in-iframe-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<img src="blue-50x50.png"> diff --git a/layout/reftests/image/image-in-iframe-1.html b/layout/reftests/image/image-in-iframe-1.html new file mode 100644 index 0000000000..c84789c869 --- /dev/null +++ b/layout/reftests/image/image-in-iframe-1.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<style> + iframe { + border: none; + /* This fixed size is just so that we would cause overflow & trigger + scrollbars, if we were adding any margin to the internal document. + (We're not intending to do so...) */ + height: 51px; + width: 51px; + } +</style> +<iframe src="blue-50x50.png"></iframe> diff --git a/layout/reftests/image/image-object-fit-dyn-1-ref.html b/layout/reftests/image/image-object-fit-dyn-1-ref.html new file mode 100644 index 0000000000..497c70c883 --- /dev/null +++ b/layout/reftests/image/image-object-fit-dyn-1-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <style type="text/css"> + embed, img, object, video { + object-fit: cover; + background: red; + width: 50px; + height: 30px; + } + </style> + </head> + <body> + <embed src="500.svg"> + <img src="500.svg"> + <object data="500.svg"></object> + <video poster="500.svg"></video> + </body> +</html> diff --git a/layout/reftests/image/image-object-fit-dyn-1.html b/layout/reftests/image/image-object-fit-dyn-1.html new file mode 100644 index 0000000000..4d10a285ae --- /dev/null +++ b/layout/reftests/image/image-object-fit-dyn-1.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase ensures that we repaint correctly when "object-fit" is + adjusted on a replaced element with SVG content. We start with + "object-fit: contain", which lets some of the red background show through + as we fit the SVG's square aspect-ratio into the wide rectangular + container elements. We then change dynamically to "object-fit: cover", + which should scale our SVG content to cover each replaced element's + content-box. No red should ultimately be visible in the reftest snapshot. +--> +<html class="reftest-wait"> + <head> + <meta charset="utf-8"> + <style type="text/css"> + embed, img, object, video { + object-fit: contain; + background: red; + width: 50px; + height: 30px; + } + </style> + <script> + function go() { + var elemsToTweak = ["embed", "img", "object", "video"]; + elemsToTweak.forEach(tweakElemObjectFit); + document.documentElement.removeAttribute("class"); + } + function tweakElemObjectFit(tagName) { + var elem = document.getElementsByTagName(tagName)[0]; + elem.style.objectFit = "cover"; + } + document.addEventListener("MozReftestInvalidate", go); + </script> + </head> + <body> + <embed src="500.svg"> + <img src="500.svg"> + <object data="500.svg"></object> + <video poster="500.svg"></video> + </body> +</html> diff --git a/layout/reftests/image/image-object-fit-with-background-1-ref.html b/layout/reftests/image/image-object-fit-with-background-1-ref.html new file mode 100644 index 0000000000..dc62869fdf --- /dev/null +++ b/layout/reftests/image/image-object-fit-with-background-1-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <style type="text/css"> + .test { + background: salmon; + padding: 4px; + width: 32px; + height: 32px; + display: block; + margin-bottom: 2px; + } + </style> + </head> + <body> + <img class="test" src="blue-32x32.png"> + <embed class="test" src="blue-32x32.png"> + <object class="test" data="blue-32x32.png"></object> + <video class="test" poster="blue-32x32.png"></video> + </body> +</html> diff --git a/layout/reftests/image/image-object-fit-with-background-1.html b/layout/reftests/image/image-object-fit-with-background-1.html new file mode 100644 index 0000000000..e44e22e7bd --- /dev/null +++ b/layout/reftests/image/image-object-fit-with-background-1.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase ensures that we paint the background around an opaque image, + when the image is kept from filling the container via 'object-fit'. This + is an interesting case because, by default, images fill their container, + which means we can often optimize away the background completely. BUT, if + "object-fit" prevents the image from filling its container, we can't + optimize away the background; it need to be painted in the uncovered area. +--> +<html> + <head> + <meta charset="utf-8"> + <style type="text/css"> + .test { + background: salmon; + object-fit: none; + width: 40px; + height: 40px; + display: block; + margin-bottom: 2px; + } + </style> + </head> + <body> + <img class="test" src="blue-32x32.png"> + <embed class="test" src="blue-32x32.png"> + <object class="test" data="blue-32x32.png"></object> + <video class="test" poster="blue-32x32.png"></video> + </body> +</html> diff --git a/layout/reftests/image/image-object-fit-with-background-2-ref.html b/layout/reftests/image/image-object-fit-with-background-2-ref.html new file mode 100644 index 0000000000..cccdaa3a7b --- /dev/null +++ b/layout/reftests/image/image-object-fit-with-background-2-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-paged"> + <head> + <meta charset="utf-8"> + <style type="text/css"> + .fakeBackground { + background: salmon; + height: 3in; + width: 32px; + } + + img.test { + width: 32px; + height: 32px; + display: block; /* Required for fragmentation */ + } + </style> + </head> + <body> + <div class="fakeBackground"></div> + <img class="test" src="blue-32x32.png"> + <div class="fakeBackground"></div> + </body> +</html> diff --git a/layout/reftests/image/image-object-fit-with-background-2.html b/layout/reftests/image/image-object-fit-with-background-2.html new file mode 100644 index 0000000000..6f0219a289 --- /dev/null +++ b/layout/reftests/image/image-object-fit-with-background-2.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase ensures that we paint the background around an opaque image, + when the image is kept from filling the container via 'object-fit' (and + the img element is fragmented). This is an interesting case because, by + default, images fill their container, which means we can often optimize + away the background completely. BUT, if "object-fit" prevents the image + from filling its container, we can't optimize away the background; it need + to be painted in the uncovered area. +--> +<html class="reftest-paged"> + <head> + <meta charset="utf-8"> + <style type="text/css"> + img.test { + background: salmon; + object-fit: none; + width: 32px; + /* We make the height 6in larger than the image's intrinsic height, + * which gives us the following happy results: + * (1) the <img> will split over several 3in tall reftest-paged cards + * (so, we get to test fragmentation). + * (2) the image pixels end up on the second fragment (not the first), + * so we get to test image-data painting on later fragments. + * (3) the reference case can easily match us using a simple img + * with 3in-tall divs before & after it. + */ + height: calc(32px + 6in); + display: block; /* Required for fragmentation */ + } + </style> + </head> + <body> + <img class="test" src="blue-32x32.png"> + </body> +</html> diff --git a/layout/reftests/image/image-object-position-dyn-1-ref.html b/layout/reftests/image/image-object-position-dyn-1-ref.html new file mode 100644 index 0000000000..81c3fe6376 --- /dev/null +++ b/layout/reftests/image/image-object-position-dyn-1-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <style type="text/css"> + embed, img, object, video { + object-fit: fill; + object-position: 0 0; + background: red; + width: 50px; + height: 30px; + } + </style> + </head> + <body> + <embed src="500.svg"> + <img src="500.svg"> + <object data="500.svg"></object> + <video poster="500.svg"></video> + </body> +</html> diff --git a/layout/reftests/image/image-object-position-dyn-1.html b/layout/reftests/image/image-object-position-dyn-1.html new file mode 100644 index 0000000000..54341e4499 --- /dev/null +++ b/layout/reftests/image/image-object-position-dyn-1.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase ensures that we repaint correctly when "object-position" is + adjusted on a replaced element with SVG content. We start with + "object-position: 10px 15px", which lets a strip of the red background + show through on the top and left edges. We then change dynamically to + "object-position: 0 0", which (given our "object-fit: fill" value) lets + the SVG image fill each replaced element without any uncovered edges. +--> +<html class="reftest-wait"> + <head> + <meta charset="utf-8"> + <style type="text/css"> + embed, img, object, video { + object-fit: fill; + object-position: 10px 15px; + background: red; + width: 50px; + height: 30px; + } + </style> + <script> + function go() { + var elemsToTweak = ["embed", "img", "object", "video"]; + elemsToTweak.forEach(tweakElemObjectFit); + document.documentElement.removeAttribute("class"); + } + function tweakElemObjectFit(tagName) { + var elem = document.getElementsByTagName(tagName)[0]; + elem.style.objectPosition = "0 0"; + } + document.addEventListener("MozReftestInvalidate", go); + </script> + </head> + <body> + <embed src="500.svg"> + <img src="500.svg"> + <object data="500.svg"></object> + <video poster="500.svg"></video> + </body> +</html> diff --git a/layout/reftests/image/image-object-position-with-background-1-ref.html b/layout/reftests/image/image-object-position-with-background-1-ref.html new file mode 100644 index 0000000000..510e494051 --- /dev/null +++ b/layout/reftests/image/image-object-position-with-background-1-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <style type="text/css"> + .crop { + /* Wrapper-div to simulate the cropping that happens in + the testcase. (In the testcase, "object-position" pushes + the image's destination rect off towards the bottom-right, + and crops it to the content-box.) */ + height: 32px; + width: 32px; + overflow: hidden; + margin-bottom: 2px; + } + .test { + background: salmon; + padding-top: 5px; + padding-left: 5px; + display: block; + } + </style> + </head> + <body> + <div class="crop"> + <img class="test" src="blue-32x32.png"> + </div> + <div class="crop"> + <embed class="test" src="blue-32x32.png"> + </div> + <div class="crop"> + <object class="test" data="blue-32x32.png"></object> + </div> + <div class="crop"> + <video class="test" poster="blue-32x32.png"></video> + </div> + </body> +</html> diff --git a/layout/reftests/image/image-object-position-with-background-1.html b/layout/reftests/image/image-object-position-with-background-1.html new file mode 100644 index 0000000000..ae7a0a2916 --- /dev/null +++ b/layout/reftests/image/image-object-position-with-background-1.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase ensures that we paint the background around an opaque image, + when the image is offset from the container via 'object-position'. This is + an interesting case because, by default, images fill their container, + which means we can often optimize away the background completely. BUT, if + "object-position" offsets the image from its container's content-box, we + can't optimize away the background; it need to be painted in the uncovered + area. +--> +<html> + <head> + <meta charset="utf-8"> + <style type="text/css"> + .test { + background: salmon; + object-position: 5px 5px; + width: 32px; + height: 32px; + display: block; + margin-bottom: 2px; + } + </style> + </head> + <body> + <img class="test" src="blue-32x32.png"> + <embed class="test" src="blue-32x32.png"> + <object class="test" data="blue-32x32.png"></object> + <video class="test" poster="blue-32x32.png"></video> + </body> +</html> diff --git a/layout/reftests/image/image-object-position-with-background-2-ref.html b/layout/reftests/image/image-object-position-with-background-2-ref.html new file mode 100644 index 0000000000..5088e21a1b --- /dev/null +++ b/layout/reftests/image/image-object-position-with-background-2-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-paged"> + <head> + <meta charset="utf-8"> + <style type="text/css"> + img.test { + background: salmon; + padding-left: 10px; + padding-top: 20px; + width: 22px; + height: calc(5in - 20px); + display: block; /* Required for fragmentation */ + } + </style> + </head> + <body> + <img class="test" src="blue-32x32.png"> + </body> +</html> diff --git a/layout/reftests/image/image-object-position-with-background-2.html b/layout/reftests/image/image-object-position-with-background-2.html new file mode 100644 index 0000000000..72c81076d6 --- /dev/null +++ b/layout/reftests/image/image-object-position-with-background-2.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This testcase ensures that we paint the background around an opaque image, + when the image is offset from the container via 'object-position' (and + the img element is fragmented). This is an interesting case because, by + default, images fill their container, which means we can often optimize + away the background completely. BUT, if "object-position" offsets the + image from its container's content-box, we can't optimize away the + background; it need to be painted in the uncovered area. +--> +<html class="reftest-paged"> + <head> + <meta charset="utf-8"> + <style type="text/css"> + img.test { + background: salmon; + object-position: 10px 20px; + width: 32px; + height: 5in; + display: block; /* Required for fragmentation */ + } + </style> + </head> + <body> + <img class="test" src="blue-32x32.png"> + </body> +</html> diff --git a/layout/reftests/image/image-orientation-background.html b/layout/reftests/image/image-orientation-background.html new file mode 100644 index 0000000000..0d1a193358 --- /dev/null +++ b/layout/reftests/image/image-orientation-background.html @@ -0,0 +1,43 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + div { + width: 100px; + height: 200px; + border: 50px solid black; + margin: 50px; + padding: 50px; + + /* This is deliberately an image with a non-neutral inherent orientation to */ + /* ensure that the inherent orientation is irrelevant. */ + background-image: url(image-exif-90-deg-flip.jpg); + background-position: center; + background-repeat: no-repeat; + } + </style> +</head> +<body> + <div></div> + + <script> + var fromImage = location.search == "from-image"; + + // Construct a style. + var style; + if (fromImage) { + style = "div { image-orientation: from-image; }\n"; + } else { + style = "div { image-orientation: none; }\n"; + } + + // Apply the style to the document. + var sheet = document.createElement('style'); + sheet.innerHTML = style; + document.body.appendChild(sheet); + </script> +</body> diff --git a/layout/reftests/image/image-orientation-dynamic-ref.html b/layout/reftests/image/image-orientation-dynamic-ref.html new file mode 100644 index 0000000000..8a2cd4c9bd --- /dev/null +++ b/layout/reftests/image/image-orientation-dynamic-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + table { + border-spacing: 0px; + } + div { + width: 100px; height: 200px; + } + td { + width: 50px; height: 100px; + } + </style> +</head> +<body> + <div> + <table> + <tr> + <td style="background-color: rgb(254, 0, 122);"></td> + <td style="background-color: rgb(191, 0, 93);"></td> + </tr> + <tr> + <td style="background-color: rgb(0, 255, 1);"></td> + <td style="background-color: rgb(0, 191, 0);"></td> + </tr> + </table> + </div> +</body> diff --git a/layout/reftests/image/image-orientation-dynamic.html b/layout/reftests/image/image-orientation-dynamic.html new file mode 100644 index 0000000000..a636b98f43 --- /dev/null +++ b/layout/reftests/image/image-orientation-dynamic.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + </style> + <img src="image-exif-180-deg.jpg"> + <script> + document.addEventListener("MozReftestInvalidate", function() { + document.querySelector("img").style.imageOrientation = "from-image"; + document.documentElement.className = ""; + }); + </script> +</html> diff --git a/layout/reftests/image/image-orientation-explicit-none.html b/layout/reftests/image/image-orientation-explicit-none.html new file mode 100644 index 0000000000..5fad591ca3 --- /dev/null +++ b/layout/reftests/image/image-orientation-explicit-none.html @@ -0,0 +1,21 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + img { + border: 50px solid black; + margin: 50px; + padding: 50px; + image-orientation: none; + } + </style> +</head> +<body> + <!-- This is deliberately an image with a non-neutral inherent orientation to + ensure that the inherent orientation is irrelevant. --> + <img src="image-exif-90-deg-flip.jpg"> +</body> diff --git a/layout/reftests/image/image-orientation-from-image.html b/layout/reftests/image/image-orientation-from-image.html new file mode 100644 index 0000000000..ec46986569 --- /dev/null +++ b/layout/reftests/image/image-orientation-from-image.html @@ -0,0 +1,40 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + img { + image-orientation: from-image; + border: 50px solid black; + margin: 50px; + padding: 50px; + } + </style> +</head> +<body> + <img id="image"> + + <script> + var orientationInfo = location.search.substring(1).split("&"); + var angle = orientationInfo[0]; + var flip = orientationInfo[1] == "flip" ? true : false; + + // Determine the final image file. 'none' is special-cased since its + // filename doesn't quite follow the same pattern as the others. + var imageFile; + if (angle == "none") { + imageFile = "image-exif-none.jpg"; + } else { + var imageFile = "image-exif-" + + angle + + "-deg" + + (flip ? "-flip" : "") + + ".jpg"; + } + + document.getElementById('image').src = imageFile; + </script> +</body> diff --git a/layout/reftests/image/image-orientation-generated-content-ref.html b/layout/reftests/image/image-orientation-generated-content-ref.html new file mode 100644 index 0000000000..4a1969360c --- /dev/null +++ b/layout/reftests/image/image-orientation-generated-content-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + table { + border-spacing: 0px; + } + div { + width: 200px; height: 100px; + } + td { + width: 100px; height: 50px; + } + </style> +</head> +<body> + <div> + <table> + <tr> + <td style="background-color: rgb(254, 0, 122);"></td> + <td style="background-color: rgb(0, 255, 1);"></td> + </tr> + <tr> + <td style="background-color: rgb(191, 0, 93);"></td> + <td style="background-color: rgb(0, 191, 0);"></td> + </tr> + </table> + </div> +</body> diff --git a/layout/reftests/image/image-orientation-generated-content.html b/layout/reftests/image/image-orientation-generated-content.html new file mode 100644 index 0000000000..ebf4b09d88 --- /dev/null +++ b/layout/reftests/image/image-orientation-generated-content.html @@ -0,0 +1,19 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + p { + image-orientation: from-image; + } + p:before { + content: url(image-exif-270-deg-flip.jpg); + } + </style> +</head> +<body> + <p></p> +</body> diff --git a/layout/reftests/image/image-orientation-ref.html b/layout/reftests/image/image-orientation-ref.html new file mode 100644 index 0000000000..598f3761b4 --- /dev/null +++ b/layout/reftests/image/image-orientation-ref.html @@ -0,0 +1,80 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + div { + border: 50px solid black; + margin: 50px; + padding: 50px; + } + table { + border-spacing: 0px; + } + </style> +</head> +<body> + <div> + <table> + <tr> + <td id="ul"></td> + <td id="ur"></td> + </tr> + <tr> + <td id="ll"></td> + <td id="lr"></td> + </tr> + </table> + </div> + + <script> + var orientationInfo = location.search.substring(1).split("&"); + var angle = parseInt(orientationInfo[0]); + var flip = orientationInfo[1] == "flip" ? true : false; + + // Each id corresponds to a color. + var ids = ["ul", "ur", "lr", "ll"]; + var colors = [ + "rgb(0, 191, 0)", + "rgb(0, 255, 1)", + "rgb(254, 0, 122)", + "rgb(191, 0, 93)", + ]; + + // 'Rotate' the colors according to the angle. + colors.unshift.apply(colors, colors.splice((360 - angle) / 90, colors.length)); + + // 'Flip' the colors if requested. + if (flip) { + var tmp = colors[0]; + colors[0] = colors[1]; + colors[1] = tmp; + tmp = colors[2]; + colors[2] = colors[3]; + colors[3] = tmp; + } + + // Construct a style. + var style = ""; + + if (angle == 90 || angle == 270) { + style += "div { width: 200px; height: 100px; }\n"; + style += "td { width: 100px; height: 50px; }\n"; + } else { + style += "div { width: 100px; height: 200px; }\n"; + style += "td { width: 50px; height: 100px; }\n"; + } + + for (var i = 0 ; i < 4 ; ++i) { + style += "#" + ids[i] + " { background-color: " + colors[i] + "; }\n"; + } + + // Apply the style to the document. + var sheet = document.createElement('style'); + sheet.innerHTML = style; + document.body.appendChild(sheet); + </script> +</body> diff --git a/layout/reftests/image/image-resize-percent-height.html b/layout/reftests/image/image-resize-percent-height.html new file mode 100644 index 0000000000..4365164c52 --- /dev/null +++ b/layout/reftests/image/image-resize-percent-height.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<script> +function run() { + var img = document.getElementsByTagName("img")[0]; + img.offsetWidth; // flush layout + img.onload = imgload; + img.src = "blue-50x50.png"; +} +function imgload() { + document.documentElement.classList.remove("reftest-wait"); +} +</script> +<body onload="run()"> +<div><img src="blue-50x100.png" style="width: 50px; height: 100%"></div> diff --git a/layout/reftests/image/image-resize-percent-width.html b/layout/reftests/image/image-resize-percent-width.html new file mode 100644 index 0000000000..edbed2623b --- /dev/null +++ b/layout/reftests/image/image-resize-percent-width.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<script> +function run() { + var img = document.getElementsByTagName("img")[0]; + img.offsetWidth; // flush layout + img.onload = imgload; + img.src = "blue-50x50.png"; +} +function imgload() { + document.documentElement.classList.remove("reftest-wait"); +} +</script> +<body onload="run()"> +<div style="width: max-content"><img src="blue-100x50.png" style="width: 100%; height: 50px"></div> diff --git a/layout/reftests/image/image-resize-ref.html b/layout/reftests/image/image-resize-ref.html new file mode 100644 index 0000000000..c51f11f91b --- /dev/null +++ b/layout/reftests/image/image-resize-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE HTML> +<body> +<div><img src="blue-50x50.png"></div> diff --git a/layout/reftests/image/image-seam-1-ref.html b/layout/reftests/image/image-seam-1-ref.html new file mode 100644 index 0000000000..5253219238 --- /dev/null +++ b/layout/reftests/image/image-seam-1-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML>
+<style>
+body {
+ background-color:black;
+}
+div {
+ transform: scale(0.3);
+ transform-origin: 0 0;
+ width: 512px;
+ height: 256px;
+ background: white;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/image/image-seam-1a.html b/layout/reftests/image/image-seam-1a.html new file mode 100644 index 0000000000..511ce5bbdd --- /dev/null +++ b/layout/reftests/image/image-seam-1a.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML>
+<style>
+body {
+ background-color:black;
+}
+div {
+ transform: scale(0.3);
+ transform-origin: 0 0;
+}
+</style>
+<div>
+<!-- Test that drawing of (scaled) single pixel images is snapped -->
+<img style="width:256px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+P//PwAF/gL+3MxZ5wAAAABJRU5ErkJggg=="
+><img style="width:256px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+P//PwAF/gL+3MxZ5wAAAABJRU5ErkJggg==">
+</div>
diff --git a/layout/reftests/image/image-seam-1b.html b/layout/reftests/image/image-seam-1b.html new file mode 100644 index 0000000000..8f03ac0e1a --- /dev/null +++ b/layout/reftests/image/image-seam-1b.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML>
+<style>
+body {
+ background-color:black;
+}
+div {
+ transform: scale(0.3);
+ transform-origin: 0 0;
+}
+</style>
+<div>
+<!-- Test that drawing of a 20x20 image with all pixels the same color is snapped -->
+<img style="width:256px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAG0lEQVQ4jWP4T2XAMGrgqIGjBo4aOGrgSDUQAOdROhuRCSeMAAAAAElFTkSuQmCC"
+><img style="width:256px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAG0lEQVQ4jWP4T2XAMGrgqIGjBo4aOGrgSDUQAOdROhuRCSeMAAAAAElFTkSuQmCC">
+</div>
diff --git a/layout/reftests/image/image-seam-2-ref.html b/layout/reftests/image/image-seam-2-ref.html new file mode 100644 index 0000000000..d49b9c9cfc --- /dev/null +++ b/layout/reftests/image/image-seam-2-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML>
+<style>
+body {
+ background-color:black;
+}
+div {
+ transform: scale(0.3);
+ transform-origin: 0 0;
+}
+</style>
+<div>
+<img style="width:412px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAADklEQVQImWP4jwYY0AEAlpkP8c9bnjkAAAAASUVORK5CYII="
+><img style="width:100px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAADklEQVQImWP4jwYY0AEAlpkP8c9bnjkAAAAASUVORK5CYII="
+>
+</div>
diff --git a/layout/reftests/image/image-seam-2.html b/layout/reftests/image/image-seam-2.html new file mode 100644 index 0000000000..8a45e0e5d6 --- /dev/null +++ b/layout/reftests/image/image-seam-2.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML>
+<style>
+body {
+ background-color:black;
+}
+div {
+ transform: scale(0.3);
+ transform-origin: 0 0;
+}
+</style>
+<div>
+<!-- Test that drawing of nonuniform images is snapped -->
+<!-- This is a 2x2 image where the top row is white and the bottom row is transpraent -->
+<img style="width:256px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="
+><img style="width:256px; height:256px"
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII=">
+</div>
diff --git a/layout/reftests/image/image-srcset-basic-selection-0.1x-ref.html b/layout/reftests/image/image-srcset-basic-selection-0.1x-ref.html new file mode 100644 index 0000000000..6110dace27 --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-0.1x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="0.1"> +<head> + +</head> +<body> + <img src="50.png" width="100"> + <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-0.1x.html b/layout/reftests/image/image-srcset-basic-selection-0.1x.html new file mode 100644 index 0000000000..784c142559 --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-0.1x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="0.1" class="reftest-wait"> +<head> + + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png"> + <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-0.5x-ref.html b/layout/reftests/image/image-srcset-basic-selection-0.5x-ref.html new file mode 100644 index 0000000000..e297d1be21 --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-0.5x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="0.5"> +<head> + +</head> +<body> + <img src="50.png" width="100"> + <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-0.5x.html b/layout/reftests/image/image-srcset-basic-selection-0.5x.html new file mode 100644 index 0000000000..6268b6783b --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-0.5x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="0.5" class="reftest-wait"> +<head> + + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png"> + <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-0.6x-ref.html b/layout/reftests/image/image-srcset-basic-selection-0.6x-ref.html new file mode 100644 index 0000000000..eaed1e41b9 --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-0.6x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="0.6"> +<head> + +</head> +<body> + <img src="100.png" width="100"> + <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-0.6x.html b/layout/reftests/image/image-srcset-basic-selection-0.6x.html new file mode 100644 index 0000000000..2bb6105708 --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-0.6x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="0.6" class="reftest-wait"> +<head> + + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png"> + <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-1.5x-ref.html b/layout/reftests/image/image-srcset-basic-selection-1.5x-ref.html new file mode 100644 index 0000000000..d17550ec3f --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-1.5x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="1.5"> +<head> + +</head> +<body> + <img src="200.png" width="100"> + <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-1.5x.html b/layout/reftests/image/image-srcset-basic-selection-1.5x.html new file mode 100644 index 0000000000..8a119d09b8 --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-1.5x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="1.5" class="reftest-wait"> +<head> + + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png"> + <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-1x-ref.html b/layout/reftests/image/image-srcset-basic-selection-1x-ref.html new file mode 100644 index 0000000000..838c06f743 --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-1x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="1"> +<head> + +</head> +<body> + <img src="100.png" width="100"> + <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-1x.html b/layout/reftests/image/image-srcset-basic-selection-1x.html new file mode 100644 index 0000000000..7ca617b3af --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-1x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="1" class="reftest-wait"> +<head> + + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png"> + <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-2x-ref.html b/layout/reftests/image/image-srcset-basic-selection-2x-ref.html new file mode 100644 index 0000000000..aaaac0bde9 --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-2x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="2"> +<head> + +</head> +<body> + <img src="200.png" width="100"> + <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-2x.html b/layout/reftests/image/image-srcset-basic-selection-2x.html new file mode 100644 index 0000000000..b03ac55969 --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-2x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="2" class="reftest-wait"> +<head> + + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png"> + <p>Test basic loading of sourceset at different resolutions, including proper intrinsic size selection</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-width-0.5x-ref.html b/layout/reftests/image/image-srcset-basic-selection-width-0.5x-ref.html new file mode 100644 index 0000000000..05ee254151 --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-width-0.5x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="0.5"> +<head> + <style>img { width: 50px; }</style> +</head> +<body> + <img src="50.png" width="50"> + <p>Ensure that width is honored and does not affect selection process</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-width-0.5x.html b/layout/reftests/image/image-srcset-basic-selection-width-0.5x.html new file mode 100644 index 0000000000..fc811c2cfc --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-width-0.5x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="0.5" class="reftest-wait"> +<head> + <style>img { width: 50px; }</style> + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png" width="1000"> + <p>Ensure that width is honored and does not affect selection process</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-width-10x-ref.html b/layout/reftests/image/image-srcset-basic-selection-width-10x-ref.html new file mode 100644 index 0000000000..2dcbb8d20f --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-width-10x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="10"> +<head> + <style>img { width: 50px; }</style> +</head> +<body> + <img src="300.png" width="50"> + <p>Ensure that width is honored and does not affect selection process</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-width-10x.html b/layout/reftests/image/image-srcset-basic-selection-width-10x.html new file mode 100644 index 0000000000..4ec1264a48 --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-width-10x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="10" class="reftest-wait"> +<head> + <style>img { width: 50px; }</style> + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png" width="1000"> + <p>Ensure that width is honored and does not affect selection process</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-width-1x-ref.html b/layout/reftests/image/image-srcset-basic-selection-width-1x-ref.html new file mode 100644 index 0000000000..b5e1718976 --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-width-1x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="1"> +<head> + <style>img { width: 50px; }</style> +</head> +<body> + <img src="100.png" width="50"> + <p>Ensure that width is honored and does not affect selection process</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-width-1x.html b/layout/reftests/image/image-srcset-basic-selection-width-1x.html new file mode 100644 index 0000000000..e4d45c887b --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-width-1x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="1" class="reftest-wait"> +<head> + <style>img { width: 50px; }</style> + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png" width="1000"> + <p>Ensure that width is honored and does not affect selection process</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-width-2x-ref.html b/layout/reftests/image/image-srcset-basic-selection-width-2x-ref.html new file mode 100644 index 0000000000..041b493d3e --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-width-2x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="2"> +<head> + <style>img { width: 50px; }</style> +</head> +<body> + <img src="200.png" width="50"> + <p>Ensure that width is honored and does not affect selection process</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-basic-selection-width-2x.html b/layout/reftests/image/image-srcset-basic-selection-width-2x.html new file mode 100644 index 0000000000..c4f86a18a8 --- /dev/null +++ b/layout/reftests/image/image-srcset-basic-selection-width-2x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="2" class="reftest-wait"> +<head> + <style>img { width: 50px; }</style> + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png" width="1000"> + <p>Ensure that width is honored and does not affect selection process</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-default-1x-ref.html b/layout/reftests/image/image-srcset-default-1x-ref.html new file mode 100644 index 0000000000..9e077b78af --- /dev/null +++ b/layout/reftests/image/image-srcset-default-1x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="1"> +<head> + +</head> +<body> + <img src="100.png" width="100"> + <p>Test default source in sourceset, src should be ignored</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-default-1x.html b/layout/reftests/image/image-srcset-default-1x.html new file mode 100644 index 0000000000..9cb108ccc0 --- /dev/null +++ b/layout/reftests/image/image-srcset-default-1x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="1" class="reftest-wait"> +<head> + + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="200.png 2x, 100.png" src="50.png"> + <p>Test default source in sourceset, src should be ignored</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-default-2x-ref.html b/layout/reftests/image/image-srcset-default-2x-ref.html new file mode 100644 index 0000000000..a6e264563d --- /dev/null +++ b/layout/reftests/image/image-srcset-default-2x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="2"> +<head> + +</head> +<body> + <img src="200.png" width="100"> + <p>Test default source in sourceset, src should be ignored</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-default-2x.html b/layout/reftests/image/image-srcset-default-2x.html new file mode 100644 index 0000000000..b53d099cc8 --- /dev/null +++ b/layout/reftests/image/image-srcset-default-2x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="2" class="reftest-wait"> +<head> + + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="200.png 2x, 100.png" src="50.png"> + <p>Test default source in sourceset, src should be ignored</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-default-src-1x-ref.html b/layout/reftests/image/image-srcset-default-src-1x-ref.html new file mode 100644 index 0000000000..e87c72953c --- /dev/null +++ b/layout/reftests/image/image-srcset-default-src-1x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="1"> +<head> + +</head> +<body> + <img src="50.png" width="50"> + <p>Test default source provided in src, with no default/1x in srcset</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-default-src-1x.html b/layout/reftests/image/image-srcset-default-src-1x.html new file mode 100644 index 0000000000..247ce733d0 --- /dev/null +++ b/layout/reftests/image/image-srcset-default-src-1x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="1" class="reftest-wait"> +<head> + + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="200.png 2x" src="50.png"> + <p>Test default source provided in src, with no default/1x in srcset</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-default-src-2x-ref.html b/layout/reftests/image/image-srcset-default-src-2x-ref.html new file mode 100644 index 0000000000..0128d05dd0 --- /dev/null +++ b/layout/reftests/image/image-srcset-default-src-2x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="2"> +<head> + +</head> +<body> + <img src="200.png" width="100"> + <p>Test default source provided in src, with no default/1x in srcset</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-default-src-2x.html b/layout/reftests/image/image-srcset-default-src-2x.html new file mode 100644 index 0000000000..ec92de752e --- /dev/null +++ b/layout/reftests/image/image-srcset-default-src-2x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="2" class="reftest-wait"> +<head> + + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="200.png 2x" src="50.png"> + <p>Test default source provided in src, with no default/1x in srcset</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-isize-ref.html b/layout/reftests/image/image-srcset-isize-ref.html new file mode 100644 index 0000000000..8dd146f480 --- /dev/null +++ b/layout/reftests/image/image-srcset-isize-ref.html @@ -0,0 +1,25 @@ +<!doctype html> +<html reftest-zoom="2"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<style> +.image-container { + display: inline; +} +.content-container { + display: inline-block; +} +.flex-container { + align-items: center; + display: flex; +} +</style> +<div class="flex-container"> + <div class="image-container"> + <img src="200.png" width="100"> + </div> + <div class="content-container"> + Should see me right by the side of the image. + </div> +</div> +</html> diff --git a/layout/reftests/image/image-srcset-isize.html b/layout/reftests/image/image-srcset-isize.html new file mode 100644 index 0000000000..2189c2bee9 --- /dev/null +++ b/layout/reftests/image/image-srcset-isize.html @@ -0,0 +1,41 @@ +<!doctype html> +<html reftest-zoom="2" class="reftest-wait"> +<title>CSS Test: srcset intrinsic size isn't confused</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1149357"> +<style> +.image-container { + display: inline; +} +.content-container { + display: inline-block; +} +.flex-container { + align-items: center; + display: flex; +} +</style> +<script> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); +</script> +<div class="flex-container"> + <div class="image-container"> + <img srcset="50.png 0.5x, 100.png 1x, 200.png 2x, 300.png 3x, 400.png"> + </div> + <div class="content-container"> + Should see me right by the side of the image. + </div> +</div> +</html> diff --git a/layout/reftests/image/image-srcset-svg-1x-ref.html b/layout/reftests/image/image-srcset-svg-1x-ref.html new file mode 100644 index 0000000000..d696bba0a9 --- /dev/null +++ b/layout/reftests/image/image-srcset-svg-1x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="1"> +<head> + +</head> +<body> + <img src="50.png" width="50"> + <p>Test that svgs work as expected in srcset</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-svg-1x.html b/layout/reftests/image/image-srcset-svg-1x.html new file mode 100644 index 0000000000..3e84709267 --- /dev/null +++ b/layout/reftests/image/image-srcset-svg-1x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="1" class="reftest-wait"> +<head> + + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="500.svg 2x, no-intrinsic-size.svg 3x" src="50.png"> + <p>Test that svgs work as expected in srcset</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-svg-2x-ref.html b/layout/reftests/image/image-srcset-svg-2x-ref.html new file mode 100644 index 0000000000..95bd377f5a --- /dev/null +++ b/layout/reftests/image/image-srcset-svg-2x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="2"> +<head> + +</head> +<body> + <img src="500.svg" width="250"> + <p>Test that svgs work as expected in srcset</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-svg-2x.html b/layout/reftests/image/image-srcset-svg-2x.html new file mode 100644 index 0000000000..1c90fd4a22 --- /dev/null +++ b/layout/reftests/image/image-srcset-svg-2x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="2" class="reftest-wait"> +<head> + + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="500.svg 2x, no-intrinsic-size.svg 3x" src="50.png"> + <p>Test that svgs work as expected in srcset</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-svg-3x-ref.html b/layout/reftests/image/image-srcset-svg-3x-ref.html new file mode 100644 index 0000000000..c0e3487fc6 --- /dev/null +++ b/layout/reftests/image/image-srcset-svg-3x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="3"> +<head> + +</head> +<body> + <img src="no-intrinsic-size.svg"> + <p>Test that svgs work as expected in srcset</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-svg-3x.html b/layout/reftests/image/image-srcset-svg-3x.html new file mode 100644 index 0000000000..531c17991c --- /dev/null +++ b/layout/reftests/image/image-srcset-svg-3x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="3" class="reftest-wait"> +<head> + + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="500.svg 2x, no-intrinsic-size.svg 3x" src="50.png"> + <p>Test that svgs work as expected in srcset</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-svg-default-1x-ref.html b/layout/reftests/image/image-srcset-svg-default-1x-ref.html new file mode 100644 index 0000000000..b4857f6fc1 --- /dev/null +++ b/layout/reftests/image/image-srcset-svg-default-1x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="1"> +<head> + +</head> +<body> + <img src="no-intrinsic-size.svg"> + <p>Test that svgs work as expected as the fallback from a srcset</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-svg-default-1x.html b/layout/reftests/image/image-srcset-svg-default-1x.html new file mode 100644 index 0000000000..3b79ce37fa --- /dev/null +++ b/layout/reftests/image/image-srcset-svg-default-1x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="1" class="reftest-wait"> +<head> + + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="200.png 2x" src="no-intrinsic-size.svg"> + <p>Test that svgs work as expected as the fallback from a srcset</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-svg-default-2x-ref.html b/layout/reftests/image/image-srcset-svg-default-2x-ref.html new file mode 100644 index 0000000000..2ee1007427 --- /dev/null +++ b/layout/reftests/image/image-srcset-svg-default-2x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="2"> +<head> + +</head> +<body> + <img src="200.png" width="100"> + <p>Test that svgs work as expected as the fallback from a srcset</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-svg-default-2x.html b/layout/reftests/image/image-srcset-svg-default-2x.html new file mode 100644 index 0000000000..ea13f13f8c --- /dev/null +++ b/layout/reftests/image/image-srcset-svg-default-2x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="2" class="reftest-wait"> +<head> + + <script type="application/javascript"> + // reftest-zoom is only applied at onload, so ensure the source-selection + // has happened after that + function clearWait() { + document.documentElement.classList.remove("reftest-wait"); + } + window.addEventListener("load", function() { + setTimeout(function() { + var img = document.querySelector("img"); + img.onload = clearWait; + img.onerror = clearWait; + img.src = img.src; + }, 0); + }); + </script> +</head> +<body> + <img srcset="200.png 2x" src="no-intrinsic-size.svg"> + <p>Test that svgs work as expected as the fallback from a srcset</p> +</body> +</html> diff --git a/layout/reftests/image/image-zoom-1-ref.html b/layout/reftests/image/image-zoom-1-ref.html new file mode 100644 index 0000000000..58bd5b8c69 --- /dev/null +++ b/layout/reftests/image/image-zoom-1-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + --> +<html> +<head> +<title>reference image-rendering: -moz-crisp-edges</title> +<style> +img { position:absolute;left:20px;top:20px; } +</style> +</head> +<body> +<img width="10" height="10" src="big.png"/> +</body> +</html> diff --git a/layout/reftests/image/image-zoom-1.html b/layout/reftests/image/image-zoom-1.html new file mode 100644 index 0000000000..fa4a791391 --- /dev/null +++ b/layout/reftests/image/image-zoom-1.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + --> +<html reftest-zoom="5"> +<head> +<title>test image-rendering: -moz-crisp-edges</title> +<style> +img { position:absolute;left:4px;top:4px; } +</style> +</head> +<body> +<img style="image-rendering: -moz-crisp-edges;" width="10" height="10" src="small.png"/> +</body> +</html> diff --git a/layout/reftests/image/image-zoom-2.html b/layout/reftests/image/image-zoom-2.html new file mode 100644 index 0000000000..d058dc81f6 --- /dev/null +++ b/layout/reftests/image/image-zoom-2.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + --> +<html reftest-zoom="5"> +<head> +<title>test image-rendering: -moz-crisp-edges</title> +<style> +img { position:absolute;left:4px;top:4px; opacity:0.9999; } +</style> +</head> +<body> +<img style="image-rendering: -moz-crisp-edges;" width="10" height="10" src="small.png"/> +</body> +</html> diff --git a/layout/reftests/image/img-invalidation-local-transform-1-ref.html b/layout/reftests/image/img-invalidation-local-transform-1-ref.html new file mode 100644 index 0000000000..75cb2b6cb8 --- /dev/null +++ b/layout/reftests/image/img-invalidation-local-transform-1-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html> +<head> +<style> + img { + max-width: 100%; + height: auto; + } +</style> +</head> +<body> +<div style="width: 450px"> +<img src="img-invalidation-local-transform-1-ref.png"> +</div> + +</body> +</html> diff --git a/layout/reftests/image/img-invalidation-local-transform-1-ref.png b/layout/reftests/image/img-invalidation-local-transform-1-ref.png Binary files differnew file mode 100644 index 0000000000..1835692bcd --- /dev/null +++ b/layout/reftests/image/img-invalidation-local-transform-1-ref.png diff --git a/layout/reftests/image/img-invalidation-local-transform-1.html b/layout/reftests/image/img-invalidation-local-transform-1.html new file mode 100644 index 0000000000..9bc45ad759 --- /dev/null +++ b/layout/reftests/image/img-invalidation-local-transform-1.html @@ -0,0 +1,51 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<!-- test for bug 1469000 https://bugzilla.mozilla.org/show_bug.cgi?id=1469000 --> +<!-- this based on image/*/delaytest.html tests --> +<head> +<style> + img { + max-width: 100%; + height: auto; + } +</style> +</head> +<body> +<div style="width: 450px"> +<img id="image1" src="img-invalidation-local-transform-1.png" srcset="img-invalidation-local-transform-1.png 400w, img-invalidation-local-transform-1.png 217w, img-invalidation-local-transform-1.png 100w"> +</div> + + +<script> +window.addEventListener("load", forceDecode); +window.addEventListener("MozReftestInvalidate", reftestInvalidateListener); + +let decodeComplete = false; +let gotReftestInvalidate = false; + +function forceDecode() { + let img = document.getElementById("image1"); + img.decode().then(function() { + decodeComplete = true; + maybeStartTimer(); + }); +} + +function reftestInvalidateListener() { + gotReftestInvalidate = true; + maybeStartTimer(); +} + +function maybeStartTimer() { + if (decodeComplete && gotReftestInvalidate) { + startTimer(); + } +} + +function startTimer() { + const delay = 2000; + setTimeout("document.documentElement.className = '';", delay); +} +</script> +</body> +</html> diff --git a/layout/reftests/image/img-invalidation-local-transform-1.png b/layout/reftests/image/img-invalidation-local-transform-1.png Binary files differnew file mode 100644 index 0000000000..778613d851 --- /dev/null +++ b/layout/reftests/image/img-invalidation-local-transform-1.png diff --git a/layout/reftests/image/invalid-url-image-1-ref.html b/layout/reftests/image/invalid-url-image-1-ref.html new file mode 100644 index 0000000000..737210be8e --- /dev/null +++ b/layout/reftests/image/invalid-url-image-1-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <img> + <input type="image"> + </body> +</html> diff --git a/layout/reftests/image/invalid-url-image-1.html b/layout/reftests/image/invalid-url-image-1.html new file mode 100644 index 0000000000..85fad81e4b --- /dev/null +++ b/layout/reftests/image/invalid-url-image-1.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <img src="http://www.foo oo.com" alt=""> + <input type="image" src="http://www.foo oo.com"> + </body> +</html> diff --git a/layout/reftests/image/moz-broken-matching-1-ref.html b/layout/reftests/image/moz-broken-matching-1-ref.html new file mode 100644 index 0000000000..94bb5e4962 --- /dev/null +++ b/layout/reftests/image/moz-broken-matching-1-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<style> + img { + border: 10px solid green; + } +</style> +<img src="nosuch:url"> diff --git a/layout/reftests/image/moz-broken-matching-1.html b/layout/reftests/image/moz-broken-matching-1.html new file mode 100644 index 0000000000..eb63194e14 --- /dev/null +++ b/layout/reftests/image/moz-broken-matching-1.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<style> + :-moz-broken { + border: 10px solid green; + } +</style> +<img src="nosuch:url"> diff --git a/layout/reftests/image/moz-broken-matching-lazy-load.html b/layout/reftests/image/moz-broken-matching-lazy-load.html new file mode 100644 index 0000000000..696560ac5c --- /dev/null +++ b/layout/reftests/image/moz-broken-matching-lazy-load.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<style> + :-moz-broken { + border: 10px solid green; + } +</style> +<!-- + We need to wait for an error event since we consider lazy load images are NOT + broken initially until loaded. +--> +<img loading="lazy" src="nosuch:url" onerror="document.documentElement.className=''"> +</html> diff --git a/layout/reftests/image/nearly-white.png b/layout/reftests/image/nearly-white.png Binary files differnew file mode 100644 index 0000000000..128d151100 --- /dev/null +++ b/layout/reftests/image/nearly-white.png diff --git a/layout/reftests/image/no-intrinsic-size.svg b/layout/reftests/image/no-intrinsic-size.svg new file mode 100644 index 0000000000..7024583524 --- /dev/null +++ b/layout/reftests/image/no-intrinsic-size.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + +<title>Simple SVG with no intrinsic size</title> + <rect x1="0" y1="0" width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/image/reftest.list b/layout/reftests/image/reftest.list new file mode 100644 index 0000000000..82e788ecc1 --- /dev/null +++ b/layout/reftests/image/reftest.list @@ -0,0 +1,73 @@ +fuzzy-if(Android,0-8,0-30) fails-if(useDrawSnapshot) == background-image-zoom-1.html background-image-zoom-1-ref.html +fails-if(usesRepeatResampling&&!winWidget) fails-if(useDrawSnapshot) == background-image-zoom-2.html about:blank +== image-in-iframe-1.html image-in-iframe-1-ref.html +== image-seam-1a.html image-seam-1-ref.html +== image-seam-1b.html image-seam-1-ref.html +fuzzy-if(Android,0-255,0-154) == image-seam-2.html image-seam-2-ref.html # Bug 1128229 +fails-if(useDrawSnapshot) == image-zoom-1.html image-zoom-1-ref.html +fails-if(useDrawSnapshot) == image-zoom-2.html image-zoom-1-ref.html +== invalid-url-image-1.html invalid-url-image-1-ref.html +== sync-image-switch-1a.html sync-image-switch-1-ref.html +== sync-image-switch-1b.html sync-image-switch-1-ref.html +== sync-image-switch-1c.html sync-image-switch-1-ref.html +== sync-image-switch-1d.html sync-image-switch-1-ref.html + +# Tests for "object-fit" & "object-position" +== image-object-fit-dyn-1.html image-object-fit-dyn-1-ref.html +== image-object-fit-with-background-1.html image-object-fit-with-background-1-ref.html +fuzzy-if(swgl&&cocoaWidget,0-1,0-2) == image-object-fit-with-background-2.html image-object-fit-with-background-2-ref.html +== image-object-position-dyn-1.html image-object-position-dyn-1-ref.html +== image-object-position-with-background-1.html image-object-position-with-background-1-ref.html +fuzzy-if(winWidget,0-117,0-374) fuzzy-if(cocoaWidget&&swgl,0-1,0-3) == image-object-position-with-background-2.html image-object-position-with-background-2-ref.html # Bug 1128229 + +# Tests for image-orientation used with 'from-image' (note that all +# image-orientation tests are fuzzy because the JPEG images do not perfectly +# reproduce blocks of solid color, even at maximum quality): +fuzzy(0-2,0-5) == image-orientation-from-image.html?none image-orientation-ref.html?0 +fuzzy(0-1,0-1) == image-orientation-from-image.html?0 image-orientation-ref.html?0 +fuzzy(0-1,0-1) == image-orientation-from-image.html?90 image-orientation-ref.html?90 +fuzzy(0-1,0-1) == image-orientation-from-image.html?180 image-orientation-ref.html?180 +fuzzy(0-1,0-1) == image-orientation-from-image.html?270 image-orientation-ref.html?270 +fuzzy(0-1,0-1) == image-orientation-from-image.html?0&flip image-orientation-ref.html?0&flip +fuzzy(0-1,0-1) == image-orientation-from-image.html?90&flip image-orientation-ref.html?90&flip +fuzzy(0-1,0-1) == image-orientation-from-image.html?180&flip image-orientation-ref.html?180&flip +fuzzy(0-1,0-1) == image-orientation-from-image.html?270&flip image-orientation-ref.html?270&flip + +# Tests for image-orientation used with an explicit 'none' orientation: +fuzzy(0-1,0-1) == image-orientation-explicit-none.html image-orientation-ref.html?0 + +# Tests for image-orientation:from-image used on generated content: +fuzzy(0-1,0-1) == image-orientation-generated-content.html image-orientation-generated-content-ref.html + +fuzzy(0-1,0-1) == image-orientation-dynamic.html image-orientation-dynamic-ref.html + +# <img srcset> tests +== image-srcset-basic-selection-0.1x.html image-srcset-basic-selection-0.1x-ref.html +fails-if(useDrawSnapshot) == image-srcset-basic-selection-2x.html image-srcset-basic-selection-2x-ref.html +== image-srcset-basic-selection-0.5x.html image-srcset-basic-selection-0.5x-ref.html +== image-srcset-basic-selection-0.6x.html image-srcset-basic-selection-0.6x-ref.html +fails-if(useDrawSnapshot) == image-srcset-basic-selection-1.5x.html image-srcset-basic-selection-1.5x-ref.html +== image-srcset-basic-selection-1x.html image-srcset-basic-selection-1x-ref.html +== image-srcset-basic-selection-width-0.5x.html image-srcset-basic-selection-width-0.5x-ref.html +fails-if(useDrawSnapshot) == image-srcset-basic-selection-width-10x.html image-srcset-basic-selection-width-10x-ref.html +fails-if(useDrawSnapshot) == image-srcset-basic-selection-width-2x.html image-srcset-basic-selection-width-2x-ref.html +== image-srcset-basic-selection-width-1x.html image-srcset-basic-selection-width-1x-ref.html +fails-if(useDrawSnapshot) == image-srcset-default-2x.html image-srcset-default-2x-ref.html +== image-srcset-default-1x.html image-srcset-default-1x-ref.html +fails-if(useDrawSnapshot) == image-srcset-default-src-2x.html image-srcset-default-src-2x-ref.html +== image-srcset-default-src-1x.html image-srcset-default-src-1x-ref.html +fails-if(useDrawSnapshot) == image-srcset-isize.html image-srcset-isize-ref.html +fails-if(useDrawSnapshot) == image-srcset-svg-3x.html image-srcset-svg-3x-ref.html +== image-srcset-svg-2x.html image-srcset-svg-2x-ref.html +== image-srcset-svg-1x.html image-srcset-svg-1x-ref.html +fails-if(useDrawSnapshot) == image-srcset-svg-default-2x.html image-srcset-svg-default-2x-ref.html +== image-srcset-svg-default-1x.html image-srcset-svg-default-1x-ref.html + +== image-resize-percent-height.html image-resize-ref.html +== image-resize-percent-width.html image-resize-ref.html + +== moz-broken-matching-1.html moz-broken-matching-1-ref.html +pref(dom.image-lazy-loading.enabled,true) == moz-broken-matching-lazy-load.html moz-broken-matching-1-ref.html + +== img-invalidation-local-transform-1.html img-invalidation-local-transform-1-ref.html +== unknown-protocol.html unknown-protocol-ref.html diff --git a/layout/reftests/image/small.png b/layout/reftests/image/small.png Binary files differnew file mode 100644 index 0000000000..9ff11a9932 --- /dev/null +++ b/layout/reftests/image/small.png diff --git a/layout/reftests/image/sync-image-switch-1-ref.html b/layout/reftests/image/sync-image-switch-1-ref.html new file mode 100644 index 0000000000..654d1a9b70 --- /dev/null +++ b/layout/reftests/image/sync-image-switch-1-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<html> + <img src="blue-32x32.png"> +</html> diff --git a/layout/reftests/image/sync-image-switch-1a.html b/layout/reftests/image/sync-image-switch-1a.html new file mode 100644 index 0000000000..f1b7d6316f --- /dev/null +++ b/layout/reftests/image/sync-image-switch-1a.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <img src="blue-16x20.png"> + <script> + var otherImageSrc = "blue-32x32.png" + window.onload = function() { + var img = document.querySelector("img"); + img.src = otherImageSrc; + img.style.width = img.naturalWidth + "px"; + img.style.height = img.naturalHeight + "px"; + document.documentElement.className = ""; + } + var otherImage = new Image; + otherImage.src = otherImageSrc; + </script> +</html> diff --git a/layout/reftests/image/sync-image-switch-1b.html b/layout/reftests/image/sync-image-switch-1b.html new file mode 100644 index 0000000000..7462ec696d --- /dev/null +++ b/layout/reftests/image/sync-image-switch-1b.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <img src="blue-16x20.png"> + <script> + var otherImageSrc = "blue-32x32.png" + window.onload = function() { + var img = document.querySelector("img"); + img.src = otherImageSrc; + img.style.width = img.width + "px"; + img.style.height = img.height + "px"; + document.documentElement.className = ""; + } + var otherImage = new Image; + otherImage.src = otherImageSrc; + </script> +</html> diff --git a/layout/reftests/image/sync-image-switch-1c.html b/layout/reftests/image/sync-image-switch-1c.html new file mode 100644 index 0000000000..2182e40db9 --- /dev/null +++ b/layout/reftests/image/sync-image-switch-1c.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <input type="image" src="blue-16x20.png"> + <script> + var otherImageSrc = "blue-32x32.png" + window.onload = function() { + var img = document.querySelector("input"); + img.src = otherImageSrc; + img.style.width = img.naturalWidth + "px"; + img.style.height = img.naturalHeight + "px"; + document.documentElement.className = ""; + } + var otherImage = new Image; + otherImage.src = otherImageSrc; + </script> +</html> diff --git a/layout/reftests/image/sync-image-switch-1d.html b/layout/reftests/image/sync-image-switch-1d.html new file mode 100644 index 0000000000..3001305b0c --- /dev/null +++ b/layout/reftests/image/sync-image-switch-1d.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <input type="image" src="blue-16x20.png"> + <script> + var otherImageSrc = "blue-32x32.png" + window.onload = function() { + var img = document.querySelector("input"); + img.src = otherImageSrc; + img.style.width = img.width + "px"; + img.style.height = img.height + "px"; + document.documentElement.className = ""; + } + var otherImage = new Image; + otherImage.src = otherImageSrc; + </script> +</html> diff --git a/layout/reftests/image/unknown-protocol-ref.html b/layout/reftests/image/unknown-protocol-ref.html new file mode 100644 index 0000000000..b5bb326eef --- /dev/null +++ b/layout/reftests/image/unknown-protocol-ref.html @@ -0,0 +1 @@ +<img src="mailto://foo"> diff --git a/layout/reftests/image/unknown-protocol.html b/layout/reftests/image/unknown-protocol.html new file mode 100644 index 0000000000..ef06881b7b --- /dev/null +++ b/layout/reftests/image/unknown-protocol.html @@ -0,0 +1 @@ +<img src="foobar://baz"> |
