diff options
Diffstat (limited to 'layout/reftests/image')
111 files changed, 2189 insertions, 0 deletions
diff --git a/layout/reftests/image/100.png b/layout/reftests/image/100.png Binary files differnew file mode 100644 index 000000000..df421453c --- /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 000000000..6f76d4438 --- /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 000000000..c12b7ceea --- /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 000000000..8855fc6d4 --- /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 000000000..144a2f0b9 --- /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 000000000..35ad0db4f --- /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 000000000..b23048bb6 --- /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 000000000..0572099a3 --- /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 000000000..18a41ea43 --- /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 000000000..76a32497c --- /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 000000000..85d980424 --- /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 000000000..f0f4d319e --- /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 000000000..deefd19b2 --- /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 000000000..d09f03b25 --- /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 000000000..bdb91e34c --- /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 000000000..727bb34a8 --- /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 000000000..92eb2605b --- /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 000000000..a450d3db4 --- /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 000000000..cefa5c8b3 --- /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 000000000..1881be3c3 --- /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 000000000..eb3f240f4 --- /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 000000000..60538724f --- /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 000000000..249cfeab7 --- /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 000000000..78e3584ee --- /dev/null +++ b/layout/reftests/image/image-exif-none.jpg 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 000000000..497c70c88 --- /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 000000000..4d10a285a --- /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 000000000..dc62869fd --- /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 000000000..e44e22e7b --- /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 000000000..d3c5e69ec --- /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-print"> + <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 000000000..e5107a2fd --- /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-print"> + <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-print 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 000000000..81c3fe637 --- /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 000000000..54341e449 --- /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 000000000..510e49405 --- /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 000000000..ae7a0a291 --- /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 000000000..9daa6b731 --- /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-print"> + <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 000000000..e02da36a0 --- /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-print"> + <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 000000000..f02411366 --- /dev/null +++ b/layout/reftests/image/image-orientation-background.html @@ -0,0 +1,48 @@ +<!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 orientation = location.search.substring(1).split("&"); + var angle = orientation[0]; + var flip = orientation[1] == "flip" ? true : false; + + // Construct a style. "from-image" is special-cased. + var style; + if (angle == "from-image") { + style = "div { image-orientation: from-image; }\n"; + } else { + style = "div { image-orientation: " + + angle + "deg" + + (flip ? " flip" : "") + + "; }\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-border-image.html b/layout/reftests/image/image-orientation-border-image.html new file mode 100644 index 000000000..7d58b9af1 --- /dev/null +++ b/layout/reftests/image/image-orientation-border-image.html @@ -0,0 +1,46 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + div { + width: 100px; + height: 100px; + margin: 50px; + + /* This is deliberately an image with a non-neutral inherent orientation to */ + /* ensure that the inherent orientation is irrelevant. */ + border-style: solid; + border-width: 20px; + border-image: url(image-exif-90-deg-flip.jpg) 27 repeat; + } + </style> +</head> +<body> + <div></div> + + <script> + var orientation = location.search.substring(1).split("&"); + var angle = orientation[0]; + var flip = orientation[1] == "flip" ? true : false; + + // Construct a style. "from-image" is special-cased. + var style; + if (angle == "from-image") { + style = "div { image-orientation: from-image; }\n"; + } else { + style = "div { image-orientation: " + + angle + "deg" + + (flip ? " flip" : "") + + "; }\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 000000000..750ae0836 --- /dev/null +++ b/layout/reftests/image/image-orientation-dynamic-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<img src="big.png" style="image-orientation: 90deg"> diff --git a/layout/reftests/image/image-orientation-dynamic.html b/layout/reftests/image/image-orientation-dynamic.html new file mode 100644 index 000000000..f58cb600d --- /dev/null +++ b/layout/reftests/image/image-orientation-dynamic.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <img src="big.png"> + <script> + document.addEventListener("MozReftestInvalidate", function() { + document.querySelector("img").style.imageOrientation = "90deg"; + document.documentElement.className = ""; + }); + </script> +</html> diff --git a/layout/reftests/image/image-orientation-explicit.html b/layout/reftests/image/image-orientation-explicit.html new file mode 100644 index 000000000..321c16a37 --- /dev/null +++ b/layout/reftests/image/image-orientation-explicit.html @@ -0,0 +1,37 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + img { + border: 50px solid black; + margin: 50px; + padding: 50px; + } + </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"> + + <script> + var orientationInfo = location.search.substring(1).split("&"); + var angle = orientationInfo[0]; + var flip = orientationInfo[1] == "flip" ? true : false; + + // Construct a style. + var style = "img { image-orientation: " + + angle + "deg" + + (flip ? " flip" : "") + + "; }\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-from-image.html b/layout/reftests/image/image-orientation-from-image.html new file mode 100644 index 000000000..ec4698656 --- /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 000000000..bb65deae6 --- /dev/null +++ b/layout/reftests/image/image-orientation-generated-content-ref.html @@ -0,0 +1,75 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + 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-orientation-generated-content.html b/layout/reftests/image/image-orientation-generated-content.html new file mode 100644 index 000000000..2aa415df8 --- /dev/null +++ b/layout/reftests/image/image-orientation-generated-content.html @@ -0,0 +1,38 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + p:before { + content: url(image-exif-270-deg-flip.jpg); + } + </style> +</head> +<body> + <p></p> + + <script> + var orientationInfo = location.search.substring(1).split("&"); + var angle = orientationInfo[0]; + var flip = orientationInfo[1] == "flip" ? true : false; + + // Construct a style. "from-image" is special-cased. + var style; + if (angle == "from-image") { + style = "p { image-orientation: from-image; }\n"; + } else { + style = "p { image-orientation: " + + angle + "deg" + + (flip ? " flip" : "") + + "; }\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-list-style-image.html b/layout/reftests/image/image-orientation-list-style-image.html new file mode 100644 index 000000000..af3ff247b --- /dev/null +++ b/layout/reftests/image/image-orientation-list-style-image.html @@ -0,0 +1,39 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + ul { + list-style-position: inside; + list-style-image: url(image-exif-270-deg-flip.jpg); + } + </style> +</head> +<body> + <ul><li></li></ul> + + <script> + var orientation = location.search.substring(1).split("&"); + var angle = orientation[0]; + var flip = orientation[1] == "flip" ? true : false; + + // Construct a style. "from-image" is special-cased. + var style; + if (angle == "from-image") { + style = "ul { image-orientation: from-image; }\n"; + } else { + style = "ul { image-orientation: " + + angle + "deg" + + (flip ? " flip" : "") + + "; }\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-ref.html b/layout/reftests/image/image-orientation-ref.html new file mode 100644 index 000000000..598f3761b --- /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 000000000..4365164c5 --- /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 000000000..b54785d7a --- /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: -moz-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 000000000..c51f11f91 --- /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 000000000..525321923 --- /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 000000000..511ce5bbd --- /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 000000000..8f03ac0e1 --- /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 000000000..d49b9c9cf --- /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 000000000..8a45e0e5d --- /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 000000000..6110dace2 --- /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 000000000..784c14255 --- /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 000000000..e297d1be2 --- /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 000000000..6268b6783 --- /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 000000000..eaed1e41b --- /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 000000000..2bb610570 --- /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 000000000..d17550ec3 --- /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 000000000..8a119d09b --- /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 000000000..838c06f74 --- /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 000000000..7ca617b3a --- /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 000000000..aaaac0bde --- /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 000000000..b03ac5596 --- /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 000000000..05ee25415 --- /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 000000000..fc811c2cf --- /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 000000000..2dcbb8d20 --- /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 000000000..4ec1264a4 --- /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 000000000..b5e171897 --- /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 000000000..e4d45c887 --- /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 000000000..041b493d3 --- /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 000000000..c4f86a18a --- /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 000000000..9e077b78a --- /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 000000000..9cb108ccc --- /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 000000000..a6e264563 --- /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 000000000..b53d099cc --- /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 000000000..e87c72953 --- /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 000000000..247ce733d --- /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 000000000..0128d05dd --- /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 000000000..ec92de752 --- /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-orientation-1x-ref.html b/layout/reftests/image/image-srcset-orientation-1x-ref.html new file mode 100644 index 000000000..013ccd4e8 --- /dev/null +++ b/layout/reftests/image/image-srcset-orientation-1x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="1"> +<head> + <style>img { image-orientation: 90deg flip; }</style> +</head> +<body> + <img src="100.png" width="100"> + <p>Make sure orientation is respected when using both srcset and fallback-src selections</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-orientation-1x.html b/layout/reftests/image/image-srcset-orientation-1x.html new file mode 100644 index 000000000..d509b64a4 --- /dev/null +++ b/layout/reftests/image/image-srcset-orientation-1x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="1" class="reftest-wait"> +<head> + <style>img { image-orientation: 90deg flip; }</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="200.png 2x" src="100.png"> + <p>Make sure orientation is respected when using both srcset and fallback-src selections</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-orientation-2x-ref.html b/layout/reftests/image/image-srcset-orientation-2x-ref.html new file mode 100644 index 000000000..a85f9d2a1 --- /dev/null +++ b/layout/reftests/image/image-srcset-orientation-2x-ref.html @@ -0,0 +1,11 @@ + +<!DOCTYPE html> +<html reftest-zoom="2"> +<head> + <style>img { image-orientation: 90deg flip; }</style> +</head> +<body> + <img src="200.png" width="100"> + <p>Make sure orientation is respected when using both srcset and fallback-src selections</p> +</body> +</html> diff --git a/layout/reftests/image/image-srcset-orientation-2x.html b/layout/reftests/image/image-srcset-orientation-2x.html new file mode 100644 index 000000000..18a7799e2 --- /dev/null +++ b/layout/reftests/image/image-srcset-orientation-2x.html @@ -0,0 +1,26 @@ + +<!DOCTYPE html> +<html reftest-zoom="2" class="reftest-wait"> +<head> + <style>img { image-orientation: 90deg flip; }</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="200.png 2x" src="100.png"> + <p>Make sure orientation is respected when using both srcset and fallback-src selections</p> +</body> +</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 000000000..d696bba0a --- /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 000000000..3e8470926 --- /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 000000000..95bd377f5 --- /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 000000000..1c90fd4a2 --- /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 000000000..c0e3487fc --- /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 000000000..531c17991 --- /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 000000000..b4857f6fc --- /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 000000000..3b79ce37f --- /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 000000000..2ee100742 --- /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 000000000..ea13f13f8 --- /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 000000000..58bd5b8c6 --- /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 000000000..fa4a79139 --- /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 000000000..d058dc81f --- /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/invalid-url-image-1-ref.html b/layout/reftests/image/invalid-url-image-1-ref.html new file mode 100644 index 000000000..737210be8 --- /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 000000000..85fad81e4 --- /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/nearly-white.png b/layout/reftests/image/nearly-white.png Binary files differnew file mode 100644 index 000000000..128d15110 --- /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 000000000..702458352 --- /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-stylo.list b/layout/reftests/image/reftest-stylo.list new file mode 100644 index 000000000..23d4783a3 --- /dev/null +++ b/layout/reftests/image/reftest-stylo.list @@ -0,0 +1,137 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +fuzzy-if(Android,8,30) == background-image-zoom-1.html background-image-zoom-1.html +fails-if(usesRepeatResampling) == background-image-zoom-2.html background-image-zoom-2.html +== image-seam-1a.html image-seam-1a.html +== image-seam-1b.html image-seam-1b.html +fuzzy-if(Android,255,154) == image-seam-2.html image-seam-2.html +# Bug 1128229 +skip-if((B2G&&browserIsRemote)||Mulet) == image-zoom-1.html image-zoom-1.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if((B2G&&browserIsRemote)||Mulet) == image-zoom-2.html image-zoom-2.html +# Initial mulet triage: parity with B2G/B2G Desktop +== invalid-url-image-1.html invalid-url-image-1.html +random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1a.html sync-image-switch-1a.html +# bug 855050 for WinXP +random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1b.html sync-image-switch-1b.html +# bug 855050 for WinXP +random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1c.html sync-image-switch-1c.html +# bug 855050 for WinXP +random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1d.html sync-image-switch-1d.html +# bug 855050 for WinXP + +# Tests for "object-fit" & "object-position" +skip == image-object-fit-dyn-1.html image-object-fit-dyn-1.html +skip == image-object-fit-with-background-1.html image-object-fit-with-background-1.html +skip == image-object-fit-with-background-2.html image-object-fit-with-background-2.html +skip == image-object-position-dyn-1.html image-object-position-dyn-1.html +skip == image-object-position-with-background-1.html image-object-position-with-background-1.html +skip == image-object-position-with-background-2.html image-object-position-with-background-2.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): +== image-orientation-from-image.html?none image-orientation-from-image.html?none +== image-orientation-from-image.html?0 image-orientation-from-image.html?0 +== image-orientation-from-image.html?90 image-orientation-from-image.html?90 +== image-orientation-from-image.html?180 image-orientation-from-image.html?180 +== image-orientation-from-image.html?270 image-orientation-from-image.html?270 +== image-orientation-from-image.html?0&flip image-orientation-from-image.html?0&flip +== image-orientation-from-image.html?90&flip image-orientation-from-image.html?90&flip +== image-orientation-from-image.html?180&flip image-orientation-from-image.html?180&flip +== image-orientation-from-image.html?270&flip image-orientation-from-image.html?270&flip + +# Tests for image-orientation used with an explicit orientation: +fuzzy(1,1) == image-orientation-explicit.html?0 image-orientation-explicit.html?0 +== image-orientation-explicit.html?90 image-orientation-explicit.html?90 +== image-orientation-explicit.html?180 image-orientation-explicit.html?180 +== image-orientation-explicit.html?270 image-orientation-explicit.html?270 +== image-orientation-explicit.html?0&flip image-orientation-explicit.html?0&flip +== image-orientation-explicit.html?90&flip image-orientation-explicit.html?90&flip +== image-orientation-explicit.html?180&flip image-orientation-explicit.html?180&flip +== image-orientation-explicit.html?270&flip image-orientation-explicit.html?270&flip + +# Tests for image-orientation used with non-axis-aligned angles: +fuzzy(1,1) == image-orientation-explicit.html?-45 image-orientation-explicit.html?-45 +fuzzy(1,1) == image-orientation-explicit.html?-15 image-orientation-explicit.html?-15 +fuzzy(1,1) == image-orientation-explicit.html?15 image-orientation-explicit.html?15 +== image-orientation-explicit.html?45 image-orientation-explicit.html?45 +== image-orientation-explicit.html?75 image-orientation-explicit.html?75 +== image-orientation-explicit.html?105 image-orientation-explicit.html?105 +== image-orientation-explicit.html?135 image-orientation-explicit.html?135 +== image-orientation-explicit.html?165 image-orientation-explicit.html?165 +== image-orientation-explicit.html?195 image-orientation-explicit.html?195 +== image-orientation-explicit.html?225 image-orientation-explicit.html?225 +== image-orientation-explicit.html?255 image-orientation-explicit.html?255 +== image-orientation-explicit.html?285 image-orientation-explicit.html?285 +fuzzy(1,1) == image-orientation-explicit.html?315 image-orientation-explicit.html?315 +fuzzy(1,1) == image-orientation-explicit.html?345 image-orientation-explicit.html?345 + +# Tests for image-orientation used on generated content: +== image-orientation-generated-content.html?from-image image-orientation-generated-content.html?from-image +== image-orientation-generated-content.html?0 image-orientation-generated-content.html?0 +== image-orientation-generated-content.html?90 image-orientation-generated-content.html?90 +== image-orientation-generated-content.html?180 image-orientation-generated-content.html?180 +== image-orientation-generated-content.html?270 image-orientation-generated-content.html?270 +== image-orientation-generated-content.html?0&flip image-orientation-generated-content.html?0&flip +== image-orientation-generated-content.html?90&flip image-orientation-generated-content.html?90&flip +== image-orientation-generated-content.html?180&flip image-orientation-generated-content.html?180&flip +== image-orientation-generated-content.html?270&flip image-orientation-generated-content.html?270&flip + +# Tests that image-orientation does not apply to decorative images: +== image-orientation-background.html?from-image image-orientation-background.html?from-image +== image-orientation-background.html?90&flip image-orientation-background.html?90&flip +== image-orientation-border-image.html?from-image image-orientation-border-image.html?from-image +== image-orientation-border-image.html?90&flip image-orientation-border-image.html?90&flip +== image-orientation-list-style-image.html?from-image image-orientation-list-style-image.html?from-image +== image-orientation-list-style-image.html?90&flip image-orientation-list-style-image.html?90&flip + +# Sanity checks for the image-orientation tests. Ensures that the various +# combinations of rotations and flips actually look different from each other. +== image-orientation-ref.html?0 image-orientation-ref.html?0 +== image-orientation-ref.html?0 image-orientation-ref.html?0 +== image-orientation-ref.html?0 image-orientation-ref.html?0 +== image-orientation-ref.html?90 image-orientation-ref.html?90 +== image-orientation-ref.html?90 image-orientation-ref.html?90 +== image-orientation-ref.html?180 image-orientation-ref.html?180 +== image-orientation-ref.html?0 image-orientation-ref.html?0 +== image-orientation-ref.html?90 image-orientation-ref.html?90 +== image-orientation-ref.html?180 image-orientation-ref.html?180 +== image-orientation-ref.html?270 image-orientation-ref.html?270 +== image-orientation-generated-content-ref.html?0 image-orientation-generated-content-ref.html?0 +== image-orientation-generated-content-ref.html?0 image-orientation-generated-content-ref.html?0 +== image-orientation-generated-content-ref.html?0 image-orientation-generated-content-ref.html?0 +== image-orientation-generated-content-ref.html?90 image-orientation-generated-content-ref.html?90 +== image-orientation-generated-content-ref.html?90 image-orientation-generated-content-ref.html?90 +== image-orientation-generated-content-ref.html?180 image-orientation-generated-content-ref.html?180 +== image-orientation-generated-content-ref.html?0 image-orientation-generated-content-ref.html?0 +== image-orientation-generated-content-ref.html?90 image-orientation-generated-content-ref.html?90 +== image-orientation-generated-content-ref.html?180 image-orientation-generated-content-ref.html?180 +== image-orientation-generated-content-ref.html?270 image-orientation-generated-content-ref.html?270 +== image-orientation-dynamic.html image-orientation-dynamic.html + +# <img srcset> tests +skip == image-srcset-basic-selection-0.1x.html image-srcset-basic-selection-0.1x.html +skip == image-srcset-basic-selection-2x.html image-srcset-basic-selection-2x.html +skip == image-srcset-basic-selection-0.5x.html image-srcset-basic-selection-0.5x.html +skip == image-srcset-basic-selection-0.6x.html image-srcset-basic-selection-0.6x.html +skip == image-srcset-basic-selection-1.5x.html image-srcset-basic-selection-1.5x.html +skip == image-srcset-basic-selection-1x.html image-srcset-basic-selection-1x.html +skip == image-srcset-basic-selection-width-0.5x.html image-srcset-basic-selection-width-0.5x.html +skip == image-srcset-basic-selection-width-10x.html image-srcset-basic-selection-width-10x.html +skip == image-srcset-basic-selection-width-2x.html image-srcset-basic-selection-width-2x.html +skip == image-srcset-basic-selection-width-1x.html image-srcset-basic-selection-width-1x.html +== image-srcset-default-2x.html image-srcset-default-2x.html +== image-srcset-default-1x.html image-srcset-default-1x.html +== image-srcset-default-src-2x.html image-srcset-default-src-2x.html +== image-srcset-default-src-1x.html image-srcset-default-src-1x.html +== image-srcset-orientation-2x.html image-srcset-orientation-2x.html +== image-srcset-orientation-1x.html image-srcset-orientation-1x.html +== image-srcset-svg-3x.html image-srcset-svg-3x.html +== image-srcset-svg-2x.html image-srcset-svg-2x.html +== image-srcset-svg-1x.html image-srcset-svg-1x.html +== image-srcset-svg-default-2x.html image-srcset-svg-default-2x.html +== image-srcset-svg-default-1x.html image-srcset-svg-default-1x.html + +== image-resize-percent-height.html image-resize-percent-height.html +== image-resize-percent-width.html image-resize-percent-width.html diff --git a/layout/reftests/image/reftest.list b/layout/reftests/image/reftest.list new file mode 100644 index 000000000..1a610811d --- /dev/null +++ b/layout/reftests/image/reftest.list @@ -0,0 +1,128 @@ +fuzzy-if(Android,8,30) == background-image-zoom-1.html background-image-zoom-1-ref.html +fails-if(usesRepeatResampling) == background-image-zoom-2.html about:blank +== image-seam-1a.html image-seam-1-ref.html +== image-seam-1b.html image-seam-1-ref.html +fuzzy-if(Android,255,154) == image-seam-2.html image-seam-2-ref.html # Bug 1128229 +== image-zoom-1.html image-zoom-1-ref.html +== image-zoom-2.html image-zoom-1-ref.html +== invalid-url-image-1.html invalid-url-image-1-ref.html +random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1a.html sync-image-switch-1-ref.html # bug 855050 for WinXP +random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1b.html sync-image-switch-1-ref.html # bug 855050 for WinXP +random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1c.html sync-image-switch-1-ref.html # bug 855050 for WinXP +random-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == sync-image-switch-1d.html sync-image-switch-1-ref.html # bug 855050 for WinXP + +# Tests for "object-fit" & "object-position" +test-pref(layout.css.object-fit-and-position.enabled,true) == image-object-fit-dyn-1.html image-object-fit-dyn-1-ref.html +test-pref(layout.css.object-fit-and-position.enabled,true) == image-object-fit-with-background-1.html image-object-fit-with-background-1-ref.html +test-pref(layout.css.object-fit-and-position.enabled,true) == image-object-fit-with-background-2.html image-object-fit-with-background-2-ref.html +test-pref(layout.css.object-fit-and-position.enabled,true) == image-object-position-dyn-1.html image-object-position-dyn-1-ref.html +test-pref(layout.css.object-fit-and-position.enabled,true) == image-object-position-with-background-1.html image-object-position-with-background-1-ref.html +test-pref(layout.css.object-fit-and-position.enabled,true) fuzzy-if(winWidget,117,374) == 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(2,5) == image-orientation-from-image.html?none image-orientation-ref.html?0 +fuzzy(1,1) == image-orientation-from-image.html?0 image-orientation-ref.html?0 +fuzzy(1,1) == image-orientation-from-image.html?90 image-orientation-ref.html?90 +fuzzy(1,1) == image-orientation-from-image.html?180 image-orientation-ref.html?180 +fuzzy(1,1) == image-orientation-from-image.html?270 image-orientation-ref.html?270 +fuzzy(1,1) == image-orientation-from-image.html?0&flip image-orientation-ref.html?0&flip +fuzzy(1,1) == image-orientation-from-image.html?90&flip image-orientation-ref.html?90&flip +fuzzy(1,1) == image-orientation-from-image.html?180&flip image-orientation-ref.html?180&flip +fuzzy(1,1) == image-orientation-from-image.html?270&flip image-orientation-ref.html?270&flip + +# Tests for image-orientation used with an explicit orientation: +fuzzy(1,1) == image-orientation-explicit.html?0 image-orientation-ref.html?0 +fuzzy(1,1) == image-orientation-explicit.html?90 image-orientation-ref.html?90 +fuzzy(1,1) == image-orientation-explicit.html?180 image-orientation-ref.html?180 +fuzzy(1,1) == image-orientation-explicit.html?270 image-orientation-ref.html?270 +fuzzy(1,1) == image-orientation-explicit.html?0&flip image-orientation-ref.html?0&flip +fuzzy(1,1) == image-orientation-explicit.html?90&flip image-orientation-ref.html?90&flip +fuzzy(1,1) == image-orientation-explicit.html?180&flip image-orientation-ref.html?180&flip +fuzzy(1,1) == image-orientation-explicit.html?270&flip image-orientation-ref.html?270&flip + +# Tests for image-orientation used with non-axis-aligned angles: +fuzzy(1,1) == image-orientation-explicit.html?-45 image-orientation-ref.html?0 +fuzzy(1,1) == image-orientation-explicit.html?-15 image-orientation-ref.html?0 +fuzzy(1,1) == image-orientation-explicit.html?15 image-orientation-ref.html?0 +fuzzy(1,1) == image-orientation-explicit.html?45 image-orientation-ref.html?90 +fuzzy(1,1) == image-orientation-explicit.html?75 image-orientation-ref.html?90 +fuzzy(1,1) == image-orientation-explicit.html?105 image-orientation-ref.html?90 +fuzzy(1,1) == image-orientation-explicit.html?135 image-orientation-ref.html?180 +fuzzy(1,1) == image-orientation-explicit.html?165 image-orientation-ref.html?180 +fuzzy(1,1) == image-orientation-explicit.html?195 image-orientation-ref.html?180 +fuzzy(1,1) == image-orientation-explicit.html?225 image-orientation-ref.html?270 +fuzzy(1,1) == image-orientation-explicit.html?255 image-orientation-ref.html?270 +fuzzy(1,1) == image-orientation-explicit.html?285 image-orientation-ref.html?270 +fuzzy(1,1) == image-orientation-explicit.html?315 image-orientation-ref.html?0 +fuzzy(1,1) == image-orientation-explicit.html?345 image-orientation-ref.html?0 + +# Tests for image-orientation used on generated content: +fuzzy(1,1) == image-orientation-generated-content.html?from-image image-orientation-generated-content-ref.html?270&flip +fuzzy(1,1) == image-orientation-generated-content.html?0 image-orientation-generated-content-ref.html?0 +fuzzy(1,1) == image-orientation-generated-content.html?90 image-orientation-generated-content-ref.html?90 +fuzzy(1,1) == image-orientation-generated-content.html?180 image-orientation-generated-content-ref.html?180 +fuzzy(1,1) == image-orientation-generated-content.html?270 image-orientation-generated-content-ref.html?270 +fuzzy(1,1) == image-orientation-generated-content.html?0&flip image-orientation-generated-content-ref.html?0&flip +fuzzy(1,1) == image-orientation-generated-content.html?90&flip image-orientation-generated-content-ref.html?90&flip +fuzzy(1,1) == image-orientation-generated-content.html?180&flip image-orientation-generated-content-ref.html?180&flip +fuzzy(1,1) == image-orientation-generated-content.html?270&flip image-orientation-generated-content-ref.html?270&flip + +# Tests that image-orientation does not apply to decorative images: +fuzzy(1,1) == image-orientation-background.html?from-image image-orientation-ref.html?0 +fuzzy(1,1) == image-orientation-background.html?90&flip image-orientation-ref.html?0 +== image-orientation-border-image.html?from-image image-orientation-border-image.html?0 +== image-orientation-border-image.html?90&flip image-orientation-border-image.html?0 +== image-orientation-list-style-image.html?from-image image-orientation-list-style-image.html?0 +== image-orientation-list-style-image.html?90&flip image-orientation-list-style-image.html?0 + +# Sanity checks for the image-orientation tests. Ensures that the various +# combinations of rotations and flips actually look different from each other. +!= image-orientation-ref.html?0 image-orientation-ref.html?90 +!= image-orientation-ref.html?0 image-orientation-ref.html?180 +!= image-orientation-ref.html?0 image-orientation-ref.html?270 +!= image-orientation-ref.html?90 image-orientation-ref.html?180 +!= image-orientation-ref.html?90 image-orientation-ref.html?270 +!= image-orientation-ref.html?180 image-orientation-ref.html?270 +!= image-orientation-ref.html?0 image-orientation-ref.html?0&flip +!= image-orientation-ref.html?90 image-orientation-ref.html?90&flip +!= image-orientation-ref.html?180 image-orientation-ref.html?180&flip +!= image-orientation-ref.html?270 image-orientation-ref.html?270&flip +!= image-orientation-generated-content-ref.html?0 image-orientation-generated-content-ref.html?90 +!= image-orientation-generated-content-ref.html?0 image-orientation-generated-content-ref.html?180 +!= image-orientation-generated-content-ref.html?0 image-orientation-generated-content-ref.html?270 +!= image-orientation-generated-content-ref.html?90 image-orientation-generated-content-ref.html?180 +!= image-orientation-generated-content-ref.html?90 image-orientation-generated-content-ref.html?270 +!= image-orientation-generated-content-ref.html?180 image-orientation-generated-content-ref.html?270 +!= image-orientation-generated-content-ref.html?0 image-orientation-generated-content-ref.html?0&flip +!= image-orientation-generated-content-ref.html?90 image-orientation-generated-content-ref.html?90&flip +!= image-orientation-generated-content-ref.html?180 image-orientation-generated-content-ref.html?180&flip +!= image-orientation-generated-content-ref.html?270 image-orientation-generated-content-ref.html?270&flip +== 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 +== 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 +== 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 +== image-srcset-basic-selection-width-10x.html image-srcset-basic-selection-width-10x-ref.html +== 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 +== image-srcset-default-2x.html image-srcset-default-2x-ref.html +== image-srcset-default-1x.html image-srcset-default-1x-ref.html +== 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 +== image-srcset-orientation-2x.html image-srcset-orientation-2x-ref.html +== image-srcset-orientation-1x.html image-srcset-orientation-1x-ref.html +== 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 +== 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 diff --git a/layout/reftests/image/small.png b/layout/reftests/image/small.png Binary files differnew file mode 100644 index 000000000..9ff11a993 --- /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 000000000..654d1a9b7 --- /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 000000000..f1b7d6316 --- /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 000000000..7462ec696 --- /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 000000000..2182e40db --- /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 000000000..3001305b0 --- /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> |
