diff options
Diffstat (limited to 'layout/reftests/w3c-css/submitted/images3')
251 files changed, 18385 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001-ref.html new file mode 100644 index 0000000000..8b5cce62b0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8.png"); + background-size: contain; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001c.html new file mode 100644 index 0000000000..a6dfd95813 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001c.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on canvas element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-png-001-ref.html"> + <style type="text/css"> + canvas { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + <script> + function drawImageToCanvases(imageURI) { + var image = new Image(); + image.onload = function() { + var canvasElems = document.getElementsByTagName("canvas"); + for (var i = 0; i < canvasElems.length; i++) { + var ctx = canvasElems[i].getContext("2d"); + ctx.drawImage(image, 0, 0); + } + document.documentElement.removeAttribute("class"); + } + image.src = imageURI; + } + </script> + </head> + <body onload="drawImageToCanvases('support/colors-16x8.png')"> + <!-- big/wide: --> + <canvas width="16" height="8" class="bigWide tr"></canvas> + <canvas width="16" height="8" class="bigWide bl"></canvas> + <canvas width="16" height="8" class="bigWide tl"></canvas> + <canvas width="16" height="8" class="bigWide br"></canvas> + <canvas width="16" height="8" class="bigWide tc"></canvas> + <canvas width="16" height="8" class="bigWide cr"></canvas> + <canvas width="16" height="8" class="bigWide"></canvas> + <br> + <!-- big/tall: --> + <canvas width="16" height="8" class="bigTall tr"></canvas> + <canvas width="16" height="8" class="bigTall bl"></canvas> + <canvas width="16" height="8" class="bigTall tl"></canvas> + <canvas width="16" height="8" class="bigTall br"></canvas> + <canvas width="16" height="8" class="bigTall tc"></canvas> + <canvas width="16" height="8" class="bigTall cr"></canvas> + <canvas width="16" height="8" class="bigTall"></canvas> + <br> + <!-- small: --> + <canvas width="16" height="8" class="small tr"></canvas> + <canvas width="16" height="8" class="small bl"></canvas> + <canvas width="16" height="8" class="small tl"></canvas> + <canvas width="16" height="8" class="small br"></canvas> + <canvas width="16" height="8" class="small tc"></canvas> + <canvas width="16" height="8" class="small cr"></canvas> + <canvas width="16" height="8" class="small"></canvas> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001e.html new file mode 100644 index 0000000000..572d30eeef --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001e.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on embed element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-png-001-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8.png" class="bigWide tr"> + <embed src="support/colors-16x8.png" class="bigWide bl"> + <embed src="support/colors-16x8.png" class="bigWide tl"> + <embed src="support/colors-16x8.png" class="bigWide br"> + <embed src="support/colors-16x8.png" class="bigWide tc"> + <embed src="support/colors-16x8.png" class="bigWide cr"> + <embed src="support/colors-16x8.png" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8.png" class="bigTall tr"> + <embed src="support/colors-16x8.png" class="bigTall bl"> + <embed src="support/colors-16x8.png" class="bigTall tl"> + <embed src="support/colors-16x8.png" class="bigTall br"> + <embed src="support/colors-16x8.png" class="bigTall tc"> + <embed src="support/colors-16x8.png" class="bigTall cr"> + <embed src="support/colors-16x8.png" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8.png" class="small tr"> + <embed src="support/colors-16x8.png" class="small bl"> + <embed src="support/colors-16x8.png" class="small tl"> + <embed src="support/colors-16x8.png" class="small br"> + <embed src="support/colors-16x8.png" class="small tc"> + <embed src="support/colors-16x8.png" class="small cr"> + <embed src="support/colors-16x8.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001i.html new file mode 100644 index 0000000000..39bbf249d5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001i.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on img element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-png-001-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8.png" class="bigWide tr"> + <img src="support/colors-16x8.png" class="bigWide bl"> + <img src="support/colors-16x8.png" class="bigWide tl"> + <img src="support/colors-16x8.png" class="bigWide br"> + <img src="support/colors-16x8.png" class="bigWide tc"> + <img src="support/colors-16x8.png" class="bigWide cr"> + <img src="support/colors-16x8.png" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8.png" class="bigTall tr"> + <img src="support/colors-16x8.png" class="bigTall bl"> + <img src="support/colors-16x8.png" class="bigTall tl"> + <img src="support/colors-16x8.png" class="bigTall br"> + <img src="support/colors-16x8.png" class="bigTall tc"> + <img src="support/colors-16x8.png" class="bigTall cr"> + <img src="support/colors-16x8.png" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8.png" class="small tr"> + <img src="support/colors-16x8.png" class="small bl"> + <img src="support/colors-16x8.png" class="small tl"> + <img src="support/colors-16x8.png" class="small br"> + <img src="support/colors-16x8.png" class="small tc"> + <img src="support/colors-16x8.png" class="small cr"> + <img src="support/colors-16x8.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001o.html new file mode 100644 index 0000000000..b126b48164 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001o.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on object element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-png-001-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8.png" class="bigWide tr"></object> + <object data="support/colors-16x8.png" class="bigWide bl"></object> + <object data="support/colors-16x8.png" class="bigWide tl"></object> + <object data="support/colors-16x8.png" class="bigWide br"></object> + <object data="support/colors-16x8.png" class="bigWide tc"></object> + <object data="support/colors-16x8.png" class="bigWide cr"></object> + <object data="support/colors-16x8.png" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8.png" class="bigTall tr"></object> + <object data="support/colors-16x8.png" class="bigTall bl"></object> + <object data="support/colors-16x8.png" class="bigTall tl"></object> + <object data="support/colors-16x8.png" class="bigTall br"></object> + <object data="support/colors-16x8.png" class="bigTall tc"></object> + <object data="support/colors-16x8.png" class="bigTall cr"></object> + <object data="support/colors-16x8.png" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8.png" class="small tr"></object> + <object data="support/colors-16x8.png" class="small bl"></object> + <object data="support/colors-16x8.png" class="small tl"></object> + <object data="support/colors-16x8.png" class="small br"></object> + <object data="support/colors-16x8.png" class="small tc"></object> + <object data="support/colors-16x8.png" class="small cr"></object> + <object data="support/colors-16x8.png" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001p.html new file mode 100644 index 0000000000..66c165e995 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001p.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on video element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-png-001-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8.png" class="bigWide tr"></video> + <video poster="support/colors-16x8.png" class="bigWide bl"></video> + <video poster="support/colors-16x8.png" class="bigWide tl"></video> + <video poster="support/colors-16x8.png" class="bigWide br"></video> + <video poster="support/colors-16x8.png" class="bigWide tc"></video> + <video poster="support/colors-16x8.png" class="bigWide cr"></video> + <video poster="support/colors-16x8.png" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8.png" class="bigTall tr"></video> + <video poster="support/colors-16x8.png" class="bigTall bl"></video> + <video poster="support/colors-16x8.png" class="bigTall tl"></video> + <video poster="support/colors-16x8.png" class="bigTall br"></video> + <video poster="support/colors-16x8.png" class="bigTall tc"></video> + <video poster="support/colors-16x8.png" class="bigTall cr"></video> + <video poster="support/colors-16x8.png" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8.png" class="small tr"></video> + <video poster="support/colors-16x8.png" class="small bl"></video> + <video poster="support/colors-16x8.png" class="small tl"></video> + <video poster="support/colors-16x8.png" class="small br"></video> + <video poster="support/colors-16x8.png" class="small tc"></video> + <video poster="support/colors-16x8.png" class="small cr"></video> + <video poster="support/colors-16x8.png" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002-ref.html new file mode 100644 index 0000000000..337775d969 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16.png"); + background-size: contain; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002c.html new file mode 100644 index 0000000000..4e49d0fbf7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002c.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on canvas element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-png-002-ref.html"> + <style type="text/css"> + canvas { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + <script> + function drawImageToCanvases(imageURI) { + var image = new Image(); + image.onload = function() { + var canvasElems = document.getElementsByTagName("canvas"); + for (var i = 0; i < canvasElems.length; i++) { + var ctx = canvasElems[i].getContext("2d"); + ctx.drawImage(image, 0, 0); + } + document.documentElement.removeAttribute("class"); + } + image.src = imageURI; + } + </script> + </head> + <body onload="drawImageToCanvases('support/colors-8x16.png')"> + <!-- big/wide: --> + <canvas width="8" height="16" class="bigWide tr"></canvas> + <canvas width="8" height="16" class="bigWide bl"></canvas> + <canvas width="8" height="16" class="bigWide tl"></canvas> + <canvas width="8" height="16" class="bigWide br"></canvas> + <canvas width="8" height="16" class="bigWide tc"></canvas> + <canvas width="8" height="16" class="bigWide cr"></canvas> + <canvas width="8" height="16" class="bigWide"></canvas> + <br> + <!-- big/tall: --> + <canvas width="8" height="16" class="bigTall tr"></canvas> + <canvas width="8" height="16" class="bigTall bl"></canvas> + <canvas width="8" height="16" class="bigTall tl"></canvas> + <canvas width="8" height="16" class="bigTall br"></canvas> + <canvas width="8" height="16" class="bigTall tc"></canvas> + <canvas width="8" height="16" class="bigTall cr"></canvas> + <canvas width="8" height="16" class="bigTall"></canvas> + <br> + <!-- small: --> + <canvas width="8" height="16" class="small tr"></canvas> + <canvas width="8" height="16" class="small bl"></canvas> + <canvas width="8" height="16" class="small tl"></canvas> + <canvas width="8" height="16" class="small br"></canvas> + <canvas width="8" height="16" class="small tc"></canvas> + <canvas width="8" height="16" class="small cr"></canvas> + <canvas width="8" height="16" class="small"></canvas> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002e.html new file mode 100644 index 0000000000..e42f05f03c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002e.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on embed element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-png-002-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16.png" class="bigWide tr"> + <embed src="support/colors-8x16.png" class="bigWide bl"> + <embed src="support/colors-8x16.png" class="bigWide tl"> + <embed src="support/colors-8x16.png" class="bigWide br"> + <embed src="support/colors-8x16.png" class="bigWide tc"> + <embed src="support/colors-8x16.png" class="bigWide cr"> + <embed src="support/colors-8x16.png" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16.png" class="bigTall tr"> + <embed src="support/colors-8x16.png" class="bigTall bl"> + <embed src="support/colors-8x16.png" class="bigTall tl"> + <embed src="support/colors-8x16.png" class="bigTall br"> + <embed src="support/colors-8x16.png" class="bigTall tc"> + <embed src="support/colors-8x16.png" class="bigTall cr"> + <embed src="support/colors-8x16.png" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16.png" class="small tr"> + <embed src="support/colors-8x16.png" class="small bl"> + <embed src="support/colors-8x16.png" class="small tl"> + <embed src="support/colors-8x16.png" class="small br"> + <embed src="support/colors-8x16.png" class="small tc"> + <embed src="support/colors-8x16.png" class="small cr"> + <embed src="support/colors-8x16.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002i.html new file mode 100644 index 0000000000..b03bafe860 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002i.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on img element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-png-002-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16.png" class="bigWide tr"> + <img src="support/colors-8x16.png" class="bigWide bl"> + <img src="support/colors-8x16.png" class="bigWide tl"> + <img src="support/colors-8x16.png" class="bigWide br"> + <img src="support/colors-8x16.png" class="bigWide tc"> + <img src="support/colors-8x16.png" class="bigWide cr"> + <img src="support/colors-8x16.png" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16.png" class="bigTall tr"> + <img src="support/colors-8x16.png" class="bigTall bl"> + <img src="support/colors-8x16.png" class="bigTall tl"> + <img src="support/colors-8x16.png" class="bigTall br"> + <img src="support/colors-8x16.png" class="bigTall tc"> + <img src="support/colors-8x16.png" class="bigTall cr"> + <img src="support/colors-8x16.png" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16.png" class="small tr"> + <img src="support/colors-8x16.png" class="small bl"> + <img src="support/colors-8x16.png" class="small tl"> + <img src="support/colors-8x16.png" class="small br"> + <img src="support/colors-8x16.png" class="small tc"> + <img src="support/colors-8x16.png" class="small cr"> + <img src="support/colors-8x16.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002o.html new file mode 100644 index 0000000000..f4aa820e39 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002o.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on object element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-png-002-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16.png" class="bigWide tr"></object> + <object data="support/colors-8x16.png" class="bigWide bl"></object> + <object data="support/colors-8x16.png" class="bigWide tl"></object> + <object data="support/colors-8x16.png" class="bigWide br"></object> + <object data="support/colors-8x16.png" class="bigWide tc"></object> + <object data="support/colors-8x16.png" class="bigWide cr"></object> + <object data="support/colors-8x16.png" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16.png" class="bigTall tr"></object> + <object data="support/colors-8x16.png" class="bigTall bl"></object> + <object data="support/colors-8x16.png" class="bigTall tl"></object> + <object data="support/colors-8x16.png" class="bigTall br"></object> + <object data="support/colors-8x16.png" class="bigTall tc"></object> + <object data="support/colors-8x16.png" class="bigTall cr"></object> + <object data="support/colors-8x16.png" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16.png" class="small tr"></object> + <object data="support/colors-8x16.png" class="small bl"></object> + <object data="support/colors-8x16.png" class="small tl"></object> + <object data="support/colors-8x16.png" class="small br"></object> + <object data="support/colors-8x16.png" class="small tc"></object> + <object data="support/colors-8x16.png" class="small cr"></object> + <object data="support/colors-8x16.png" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002p.html new file mode 100644 index 0000000000..f18e4818a1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002p.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on video element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-png-002-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16.png" class="bigWide tr"></video> + <video poster="support/colors-8x16.png" class="bigWide bl"></video> + <video poster="support/colors-8x16.png" class="bigWide tl"></video> + <video poster="support/colors-8x16.png" class="bigWide br"></video> + <video poster="support/colors-8x16.png" class="bigWide tc"></video> + <video poster="support/colors-8x16.png" class="bigWide cr"></video> + <video poster="support/colors-8x16.png" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16.png" class="bigTall tr"></video> + <video poster="support/colors-8x16.png" class="bigTall bl"></video> + <video poster="support/colors-8x16.png" class="bigTall tl"></video> + <video poster="support/colors-8x16.png" class="bigTall br"></video> + <video poster="support/colors-8x16.png" class="bigTall tc"></video> + <video poster="support/colors-8x16.png" class="bigTall cr"></video> + <video poster="support/colors-8x16.png" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16.png" class="small tr"></video> + <video poster="support/colors-8x16.png" class="small bl"></video> + <video poster="support/colors-8x16.png" class="small tl"></video> + <video poster="support/colors-8x16.png" class="small br"></video> + <video poster="support/colors-8x16.png" class="small tc"></video> + <video poster="support/colors-8x16.png" class="small cr"></video> + <video poster="support/colors-8x16.png" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001-ref.html new file mode 100644 index 0000000000..84fa4d5ac1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8.svg"); + background-size: contain; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001e.html new file mode 100644 index 0000000000..f067b335ca --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-001-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8.svg" class="bigWide tr"> + <embed src="support/colors-16x8.svg" class="bigWide bl"> + <embed src="support/colors-16x8.svg" class="bigWide tl"> + <embed src="support/colors-16x8.svg" class="bigWide br"> + <embed src="support/colors-16x8.svg" class="bigWide tc"> + <embed src="support/colors-16x8.svg" class="bigWide cr"> + <embed src="support/colors-16x8.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8.svg" class="bigTall tr"> + <embed src="support/colors-16x8.svg" class="bigTall bl"> + <embed src="support/colors-16x8.svg" class="bigTall tl"> + <embed src="support/colors-16x8.svg" class="bigTall br"> + <embed src="support/colors-16x8.svg" class="bigTall tc"> + <embed src="support/colors-16x8.svg" class="bigTall cr"> + <embed src="support/colors-16x8.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8.svg" class="small tr"> + <embed src="support/colors-16x8.svg" class="small bl"> + <embed src="support/colors-16x8.svg" class="small tl"> + <embed src="support/colors-16x8.svg" class="small br"> + <embed src="support/colors-16x8.svg" class="small tc"> + <embed src="support/colors-16x8.svg" class="small cr"> + <embed src="support/colors-16x8.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001i.html new file mode 100644 index 0000000000..48098656f4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-001-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8.svg" class="bigWide tr"> + <img src="support/colors-16x8.svg" class="bigWide bl"> + <img src="support/colors-16x8.svg" class="bigWide tl"> + <img src="support/colors-16x8.svg" class="bigWide br"> + <img src="support/colors-16x8.svg" class="bigWide tc"> + <img src="support/colors-16x8.svg" class="bigWide cr"> + <img src="support/colors-16x8.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8.svg" class="bigTall tr"> + <img src="support/colors-16x8.svg" class="bigTall bl"> + <img src="support/colors-16x8.svg" class="bigTall tl"> + <img src="support/colors-16x8.svg" class="bigTall br"> + <img src="support/colors-16x8.svg" class="bigTall tc"> + <img src="support/colors-16x8.svg" class="bigTall cr"> + <img src="support/colors-16x8.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8.svg" class="small tr"> + <img src="support/colors-16x8.svg" class="small bl"> + <img src="support/colors-16x8.svg" class="small tl"> + <img src="support/colors-16x8.svg" class="small br"> + <img src="support/colors-16x8.svg" class="small tc"> + <img src="support/colors-16x8.svg" class="small cr"> + <img src="support/colors-16x8.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001o.html new file mode 100644 index 0000000000..4debef17e9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-001-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8.svg" class="bigWide tr"></object> + <object data="support/colors-16x8.svg" class="bigWide bl"></object> + <object data="support/colors-16x8.svg" class="bigWide tl"></object> + <object data="support/colors-16x8.svg" class="bigWide br"></object> + <object data="support/colors-16x8.svg" class="bigWide tc"></object> + <object data="support/colors-16x8.svg" class="bigWide cr"></object> + <object data="support/colors-16x8.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8.svg" class="bigTall tr"></object> + <object data="support/colors-16x8.svg" class="bigTall bl"></object> + <object data="support/colors-16x8.svg" class="bigTall tl"></object> + <object data="support/colors-16x8.svg" class="bigTall br"></object> + <object data="support/colors-16x8.svg" class="bigTall tc"></object> + <object data="support/colors-16x8.svg" class="bigTall cr"></object> + <object data="support/colors-16x8.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8.svg" class="small tr"></object> + <object data="support/colors-16x8.svg" class="small bl"></object> + <object data="support/colors-16x8.svg" class="small tl"></object> + <object data="support/colors-16x8.svg" class="small br"></object> + <object data="support/colors-16x8.svg" class="small tc"></object> + <object data="support/colors-16x8.svg" class="small cr"></object> + <object data="support/colors-16x8.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001p.html new file mode 100644 index 0000000000..ff6cb4b061 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-001-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8.svg" class="bigWide tr"></video> + <video poster="support/colors-16x8.svg" class="bigWide bl"></video> + <video poster="support/colors-16x8.svg" class="bigWide tl"></video> + <video poster="support/colors-16x8.svg" class="bigWide br"></video> + <video poster="support/colors-16x8.svg" class="bigWide tc"></video> + <video poster="support/colors-16x8.svg" class="bigWide cr"></video> + <video poster="support/colors-16x8.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8.svg" class="bigTall tr"></video> + <video poster="support/colors-16x8.svg" class="bigTall bl"></video> + <video poster="support/colors-16x8.svg" class="bigTall tl"></video> + <video poster="support/colors-16x8.svg" class="bigTall br"></video> + <video poster="support/colors-16x8.svg" class="bigTall tc"></video> + <video poster="support/colors-16x8.svg" class="bigTall cr"></video> + <video poster="support/colors-16x8.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8.svg" class="small tr"></video> + <video poster="support/colors-16x8.svg" class="small bl"></video> + <video poster="support/colors-16x8.svg" class="small tl"></video> + <video poster="support/colors-16x8.svg" class="small br"></video> + <video poster="support/colors-16x8.svg" class="small tc"></video> + <video poster="support/colors-16x8.svg" class="small cr"></video> + <video poster="support/colors-16x8.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002-ref.html new file mode 100644 index 0000000000..3a8a5b542d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16.svg"); + background-size: contain; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002e.html new file mode 100644 index 0000000000..5c82003b67 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-002-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16.svg" class="bigWide tr"> + <embed src="support/colors-8x16.svg" class="bigWide bl"> + <embed src="support/colors-8x16.svg" class="bigWide tl"> + <embed src="support/colors-8x16.svg" class="bigWide br"> + <embed src="support/colors-8x16.svg" class="bigWide tc"> + <embed src="support/colors-8x16.svg" class="bigWide cr"> + <embed src="support/colors-8x16.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16.svg" class="bigTall tr"> + <embed src="support/colors-8x16.svg" class="bigTall bl"> + <embed src="support/colors-8x16.svg" class="bigTall tl"> + <embed src="support/colors-8x16.svg" class="bigTall br"> + <embed src="support/colors-8x16.svg" class="bigTall tc"> + <embed src="support/colors-8x16.svg" class="bigTall cr"> + <embed src="support/colors-8x16.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16.svg" class="small tr"> + <embed src="support/colors-8x16.svg" class="small bl"> + <embed src="support/colors-8x16.svg" class="small tl"> + <embed src="support/colors-8x16.svg" class="small br"> + <embed src="support/colors-8x16.svg" class="small tc"> + <embed src="support/colors-8x16.svg" class="small cr"> + <embed src="support/colors-8x16.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002i.html new file mode 100644 index 0000000000..bc8703c97c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-002-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16.svg" class="bigWide tr"> + <img src="support/colors-8x16.svg" class="bigWide bl"> + <img src="support/colors-8x16.svg" class="bigWide tl"> + <img src="support/colors-8x16.svg" class="bigWide br"> + <img src="support/colors-8x16.svg" class="bigWide tc"> + <img src="support/colors-8x16.svg" class="bigWide cr"> + <img src="support/colors-8x16.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16.svg" class="bigTall tr"> + <img src="support/colors-8x16.svg" class="bigTall bl"> + <img src="support/colors-8x16.svg" class="bigTall tl"> + <img src="support/colors-8x16.svg" class="bigTall br"> + <img src="support/colors-8x16.svg" class="bigTall tc"> + <img src="support/colors-8x16.svg" class="bigTall cr"> + <img src="support/colors-8x16.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16.svg" class="small tr"> + <img src="support/colors-8x16.svg" class="small bl"> + <img src="support/colors-8x16.svg" class="small tl"> + <img src="support/colors-8x16.svg" class="small br"> + <img src="support/colors-8x16.svg" class="small tc"> + <img src="support/colors-8x16.svg" class="small cr"> + <img src="support/colors-8x16.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002o.html new file mode 100644 index 0000000000..76f85f8cac --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-002-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16.svg" class="bigWide tr"></object> + <object data="support/colors-8x16.svg" class="bigWide bl"></object> + <object data="support/colors-8x16.svg" class="bigWide tl"></object> + <object data="support/colors-8x16.svg" class="bigWide br"></object> + <object data="support/colors-8x16.svg" class="bigWide tc"></object> + <object data="support/colors-8x16.svg" class="bigWide cr"></object> + <object data="support/colors-8x16.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16.svg" class="bigTall tr"></object> + <object data="support/colors-8x16.svg" class="bigTall bl"></object> + <object data="support/colors-8x16.svg" class="bigTall tl"></object> + <object data="support/colors-8x16.svg" class="bigTall br"></object> + <object data="support/colors-8x16.svg" class="bigTall tc"></object> + <object data="support/colors-8x16.svg" class="bigTall cr"></object> + <object data="support/colors-8x16.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16.svg" class="small tr"></object> + <object data="support/colors-8x16.svg" class="small bl"></object> + <object data="support/colors-8x16.svg" class="small tl"></object> + <object data="support/colors-8x16.svg" class="small br"></object> + <object data="support/colors-8x16.svg" class="small tc"></object> + <object data="support/colors-8x16.svg" class="small cr"></object> + <object data="support/colors-8x16.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002p.html new file mode 100644 index 0000000000..b8551be1af --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-002-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16.svg" class="bigWide tr"></video> + <video poster="support/colors-8x16.svg" class="bigWide bl"></video> + <video poster="support/colors-8x16.svg" class="bigWide tl"></video> + <video poster="support/colors-8x16.svg" class="bigWide br"></video> + <video poster="support/colors-8x16.svg" class="bigWide tc"></video> + <video poster="support/colors-8x16.svg" class="bigWide cr"></video> + <video poster="support/colors-8x16.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16.svg" class="bigTall tr"></video> + <video poster="support/colors-8x16.svg" class="bigTall bl"></video> + <video poster="support/colors-8x16.svg" class="bigTall tl"></video> + <video poster="support/colors-8x16.svg" class="bigTall br"></video> + <video poster="support/colors-8x16.svg" class="bigTall tc"></video> + <video poster="support/colors-8x16.svg" class="bigTall cr"></video> + <video poster="support/colors-8x16.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16.svg" class="small tr"></video> + <video poster="support/colors-8x16.svg" class="small bl"></video> + <video poster="support/colors-8x16.svg" class="small tl"></video> + <video poster="support/colors-8x16.svg" class="small br"></video> + <video poster="support/colors-8x16.svg" class="small tc"></video> + <video poster="support/colors-8x16.svg" class="small cr"></video> + <video poster="support/colors-8x16.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003-ref.html new file mode 100644 index 0000000000..fde7f9fc97 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8-noSize.svg"); + background-size: contain; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003e.html new file mode 100644 index 0000000000..34b2236019 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-003-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8-noSize.svg" class="bigWide tr"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide bl"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide tl"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide br"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide tc"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide cr"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8-noSize.svg" class="bigTall tr"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall bl"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall tl"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall br"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall tc"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall cr"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8-noSize.svg" class="small tr"> + <embed src="support/colors-16x8-noSize.svg" class="small bl"> + <embed src="support/colors-16x8-noSize.svg" class="small tl"> + <embed src="support/colors-16x8-noSize.svg" class="small br"> + <embed src="support/colors-16x8-noSize.svg" class="small tc"> + <embed src="support/colors-16x8-noSize.svg" class="small cr"> + <embed src="support/colors-16x8-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003i.html new file mode 100644 index 0000000000..2c9ce62f20 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-003-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8-noSize.svg" class="bigWide tr"> + <img src="support/colors-16x8-noSize.svg" class="bigWide bl"> + <img src="support/colors-16x8-noSize.svg" class="bigWide tl"> + <img src="support/colors-16x8-noSize.svg" class="bigWide br"> + <img src="support/colors-16x8-noSize.svg" class="bigWide tc"> + <img src="support/colors-16x8-noSize.svg" class="bigWide cr"> + <img src="support/colors-16x8-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8-noSize.svg" class="bigTall tr"> + <img src="support/colors-16x8-noSize.svg" class="bigTall bl"> + <img src="support/colors-16x8-noSize.svg" class="bigTall tl"> + <img src="support/colors-16x8-noSize.svg" class="bigTall br"> + <img src="support/colors-16x8-noSize.svg" class="bigTall tc"> + <img src="support/colors-16x8-noSize.svg" class="bigTall cr"> + <img src="support/colors-16x8-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8-noSize.svg" class="small tr"> + <img src="support/colors-16x8-noSize.svg" class="small bl"> + <img src="support/colors-16x8-noSize.svg" class="small tl"> + <img src="support/colors-16x8-noSize.svg" class="small br"> + <img src="support/colors-16x8-noSize.svg" class="small tc"> + <img src="support/colors-16x8-noSize.svg" class="small cr"> + <img src="support/colors-16x8-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003o.html new file mode 100644 index 0000000000..9bf111b128 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-003-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8-noSize.svg" class="small tr"></object> + <object data="support/colors-16x8-noSize.svg" class="small bl"></object> + <object data="support/colors-16x8-noSize.svg" class="small tl"></object> + <object data="support/colors-16x8-noSize.svg" class="small br"></object> + <object data="support/colors-16x8-noSize.svg" class="small tc"></object> + <object data="support/colors-16x8-noSize.svg" class="small cr"></object> + <object data="support/colors-16x8-noSize.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003p.html new file mode 100644 index 0000000000..87e37f3a4c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-003-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8-noSize.svg" class="small tr"></video> + <video poster="support/colors-16x8-noSize.svg" class="small bl"></video> + <video poster="support/colors-16x8-noSize.svg" class="small tl"></video> + <video poster="support/colors-16x8-noSize.svg" class="small br"></video> + <video poster="support/colors-16x8-noSize.svg" class="small tc"></video> + <video poster="support/colors-16x8-noSize.svg" class="small cr"></video> + <video poster="support/colors-16x8-noSize.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004-ref.html new file mode 100644 index 0000000000..25e768080b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16-noSize.svg"); + background-size: contain; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004e.html new file mode 100644 index 0000000000..4e4831da0b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-004-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16-noSize.svg" class="bigWide tr"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide bl"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide tl"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide br"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide tc"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide cr"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16-noSize.svg" class="bigTall tr"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall bl"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall tl"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall br"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall tc"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall cr"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16-noSize.svg" class="small tr"> + <embed src="support/colors-8x16-noSize.svg" class="small bl"> + <embed src="support/colors-8x16-noSize.svg" class="small tl"> + <embed src="support/colors-8x16-noSize.svg" class="small br"> + <embed src="support/colors-8x16-noSize.svg" class="small tc"> + <embed src="support/colors-8x16-noSize.svg" class="small cr"> + <embed src="support/colors-8x16-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004i.html new file mode 100644 index 0000000000..27769a8ba4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-004-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16-noSize.svg" class="bigWide tr"> + <img src="support/colors-8x16-noSize.svg" class="bigWide bl"> + <img src="support/colors-8x16-noSize.svg" class="bigWide tl"> + <img src="support/colors-8x16-noSize.svg" class="bigWide br"> + <img src="support/colors-8x16-noSize.svg" class="bigWide tc"> + <img src="support/colors-8x16-noSize.svg" class="bigWide cr"> + <img src="support/colors-8x16-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16-noSize.svg" class="bigTall tr"> + <img src="support/colors-8x16-noSize.svg" class="bigTall bl"> + <img src="support/colors-8x16-noSize.svg" class="bigTall tl"> + <img src="support/colors-8x16-noSize.svg" class="bigTall br"> + <img src="support/colors-8x16-noSize.svg" class="bigTall tc"> + <img src="support/colors-8x16-noSize.svg" class="bigTall cr"> + <img src="support/colors-8x16-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16-noSize.svg" class="small tr"> + <img src="support/colors-8x16-noSize.svg" class="small bl"> + <img src="support/colors-8x16-noSize.svg" class="small tl"> + <img src="support/colors-8x16-noSize.svg" class="small br"> + <img src="support/colors-8x16-noSize.svg" class="small tc"> + <img src="support/colors-8x16-noSize.svg" class="small cr"> + <img src="support/colors-8x16-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004o.html new file mode 100644 index 0000000000..8db408680e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-004-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16-noSize.svg" class="small tr"></object> + <object data="support/colors-8x16-noSize.svg" class="small bl"></object> + <object data="support/colors-8x16-noSize.svg" class="small tl"></object> + <object data="support/colors-8x16-noSize.svg" class="small br"></object> + <object data="support/colors-8x16-noSize.svg" class="small tc"></object> + <object data="support/colors-8x16-noSize.svg" class="small cr"></object> + <object data="support/colors-8x16-noSize.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004p.html new file mode 100644 index 0000000000..0a4502b52f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-004-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16-noSize.svg" class="small tr"></video> + <video poster="support/colors-8x16-noSize.svg" class="small bl"></video> + <video poster="support/colors-8x16-noSize.svg" class="small tl"></video> + <video poster="support/colors-8x16-noSize.svg" class="small br"></video> + <video poster="support/colors-8x16-noSize.svg" class="small tc"></video> + <video poster="support/colors-8x16-noSize.svg" class="small cr"></video> + <video poster="support/colors-8x16-noSize.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005-ref.html new file mode 100644 index 0000000000..c9089343c2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8-parDefault.svg"); + background-size: contain; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005e.html new file mode 100644 index 0000000000..f4a8ad0fa1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-005-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide br"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall br"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8-parDefault.svg" class="small tr"> + <embed src="support/colors-16x8-parDefault.svg" class="small bl"> + <embed src="support/colors-16x8-parDefault.svg" class="small tl"> + <embed src="support/colors-16x8-parDefault.svg" class="small br"> + <embed src="support/colors-16x8-parDefault.svg" class="small tc"> + <embed src="support/colors-16x8-parDefault.svg" class="small cr"> + <embed src="support/colors-16x8-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005i.html new file mode 100644 index 0000000000..9c9b35b0e8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-005-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8-parDefault.svg" class="bigWide tr"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide bl"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide tl"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide br"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide tc"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide cr"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8-parDefault.svg" class="bigTall tr"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall bl"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall tl"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall br"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall tc"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall cr"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8-parDefault.svg" class="small tr"> + <img src="support/colors-16x8-parDefault.svg" class="small bl"> + <img src="support/colors-16x8-parDefault.svg" class="small tl"> + <img src="support/colors-16x8-parDefault.svg" class="small br"> + <img src="support/colors-16x8-parDefault.svg" class="small tc"> + <img src="support/colors-16x8-parDefault.svg" class="small cr"> + <img src="support/colors-16x8-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005o.html new file mode 100644 index 0000000000..5bff95aa5f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-005-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8-parDefault.svg" class="small tr"></object> + <object data="support/colors-16x8-parDefault.svg" class="small bl"></object> + <object data="support/colors-16x8-parDefault.svg" class="small tl"></object> + <object data="support/colors-16x8-parDefault.svg" class="small br"></object> + <object data="support/colors-16x8-parDefault.svg" class="small tc"></object> + <object data="support/colors-16x8-parDefault.svg" class="small cr"></object> + <object data="support/colors-16x8-parDefault.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005p.html new file mode 100644 index 0000000000..fd2f2fe696 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-005-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small br"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006-ref.html new file mode 100644 index 0000000000..21f9f2f29d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16-parDefault.svg"); + background-size: contain; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006e.html new file mode 100644 index 0000000000..5914ee5671 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-006-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide br"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall br"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16-parDefault.svg" class="small tr"> + <embed src="support/colors-8x16-parDefault.svg" class="small bl"> + <embed src="support/colors-8x16-parDefault.svg" class="small tl"> + <embed src="support/colors-8x16-parDefault.svg" class="small br"> + <embed src="support/colors-8x16-parDefault.svg" class="small tc"> + <embed src="support/colors-8x16-parDefault.svg" class="small cr"> + <embed src="support/colors-8x16-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006i.html new file mode 100644 index 0000000000..1426a30bdf --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-006-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16-parDefault.svg" class="bigWide tr"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide bl"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide tl"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide br"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide tc"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide cr"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16-parDefault.svg" class="bigTall tr"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall bl"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall tl"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall br"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall tc"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall cr"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16-parDefault.svg" class="small tr"> + <img src="support/colors-8x16-parDefault.svg" class="small bl"> + <img src="support/colors-8x16-parDefault.svg" class="small tl"> + <img src="support/colors-8x16-parDefault.svg" class="small br"> + <img src="support/colors-8x16-parDefault.svg" class="small tc"> + <img src="support/colors-8x16-parDefault.svg" class="small cr"> + <img src="support/colors-8x16-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006o.html new file mode 100644 index 0000000000..c0de015b34 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-006-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16-parDefault.svg" class="small tr"></object> + <object data="support/colors-8x16-parDefault.svg" class="small bl"></object> + <object data="support/colors-8x16-parDefault.svg" class="small tl"></object> + <object data="support/colors-8x16-parDefault.svg" class="small br"></object> + <object data="support/colors-8x16-parDefault.svg" class="small tc"></object> + <object data="support/colors-8x16-parDefault.svg" class="small cr"></object> + <object data="support/colors-8x16-parDefault.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006p.html new file mode 100644 index 0000000000..1fcc56ae13 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-contain-svg-006-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small br"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001-ref.html new file mode 100644 index 0000000000..9245b71a50 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8.png"); + background-size: cover; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001c.html new file mode 100644 index 0000000000..f2a26a67c7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001c.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on canvas element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-png-001-ref.html"> + <style type="text/css"> + canvas { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + <script> + function drawImageToCanvases(imageURI) { + var image = new Image(); + image.onload = function() { + var canvasElems = document.getElementsByTagName("canvas"); + for (var i = 0; i < canvasElems.length; i++) { + var ctx = canvasElems[i].getContext("2d"); + ctx.drawImage(image, 0, 0); + } + document.documentElement.removeAttribute("class"); + } + image.src = imageURI; + } + </script> + </head> + <body onload="drawImageToCanvases('support/colors-16x8.png')"> + <!-- big/wide: --> + <canvas width="16" height="8" class="bigWide tr"></canvas> + <canvas width="16" height="8" class="bigWide bl"></canvas> + <canvas width="16" height="8" class="bigWide tl"></canvas> + <canvas width="16" height="8" class="bigWide br"></canvas> + <canvas width="16" height="8" class="bigWide tc"></canvas> + <canvas width="16" height="8" class="bigWide cr"></canvas> + <canvas width="16" height="8" class="bigWide"></canvas> + <br> + <!-- big/tall: --> + <canvas width="16" height="8" class="bigTall tr"></canvas> + <canvas width="16" height="8" class="bigTall bl"></canvas> + <canvas width="16" height="8" class="bigTall tl"></canvas> + <canvas width="16" height="8" class="bigTall br"></canvas> + <canvas width="16" height="8" class="bigTall tc"></canvas> + <canvas width="16" height="8" class="bigTall cr"></canvas> + <canvas width="16" height="8" class="bigTall"></canvas> + <br> + <!-- small: --> + <canvas width="16" height="8" class="small tr"></canvas> + <canvas width="16" height="8" class="small bl"></canvas> + <canvas width="16" height="8" class="small tl"></canvas> + <canvas width="16" height="8" class="small br"></canvas> + <canvas width="16" height="8" class="small tc"></canvas> + <canvas width="16" height="8" class="small cr"></canvas> + <canvas width="16" height="8" class="small"></canvas> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001e.html new file mode 100644 index 0000000000..e39b710bcf --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001e.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on embed element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-png-001-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8.png" class="bigWide tr"> + <embed src="support/colors-16x8.png" class="bigWide bl"> + <embed src="support/colors-16x8.png" class="bigWide tl"> + <embed src="support/colors-16x8.png" class="bigWide br"> + <embed src="support/colors-16x8.png" class="bigWide tc"> + <embed src="support/colors-16x8.png" class="bigWide cr"> + <embed src="support/colors-16x8.png" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8.png" class="bigTall tr"> + <embed src="support/colors-16x8.png" class="bigTall bl"> + <embed src="support/colors-16x8.png" class="bigTall tl"> + <embed src="support/colors-16x8.png" class="bigTall br"> + <embed src="support/colors-16x8.png" class="bigTall tc"> + <embed src="support/colors-16x8.png" class="bigTall cr"> + <embed src="support/colors-16x8.png" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8.png" class="small tr"> + <embed src="support/colors-16x8.png" class="small bl"> + <embed src="support/colors-16x8.png" class="small tl"> + <embed src="support/colors-16x8.png" class="small br"> + <embed src="support/colors-16x8.png" class="small tc"> + <embed src="support/colors-16x8.png" class="small cr"> + <embed src="support/colors-16x8.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001i.html new file mode 100644 index 0000000000..7d88c1a6d9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001i.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on img element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-png-001-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8.png" class="bigWide tr"> + <img src="support/colors-16x8.png" class="bigWide bl"> + <img src="support/colors-16x8.png" class="bigWide tl"> + <img src="support/colors-16x8.png" class="bigWide br"> + <img src="support/colors-16x8.png" class="bigWide tc"> + <img src="support/colors-16x8.png" class="bigWide cr"> + <img src="support/colors-16x8.png" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8.png" class="bigTall tr"> + <img src="support/colors-16x8.png" class="bigTall bl"> + <img src="support/colors-16x8.png" class="bigTall tl"> + <img src="support/colors-16x8.png" class="bigTall br"> + <img src="support/colors-16x8.png" class="bigTall tc"> + <img src="support/colors-16x8.png" class="bigTall cr"> + <img src="support/colors-16x8.png" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8.png" class="small tr"> + <img src="support/colors-16x8.png" class="small bl"> + <img src="support/colors-16x8.png" class="small tl"> + <img src="support/colors-16x8.png" class="small br"> + <img src="support/colors-16x8.png" class="small tc"> + <img src="support/colors-16x8.png" class="small cr"> + <img src="support/colors-16x8.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001o.html new file mode 100644 index 0000000000..e0e657099a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001o.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on object element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-png-001-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8.png" class="bigWide tr"></object> + <object data="support/colors-16x8.png" class="bigWide bl"></object> + <object data="support/colors-16x8.png" class="bigWide tl"></object> + <object data="support/colors-16x8.png" class="bigWide br"></object> + <object data="support/colors-16x8.png" class="bigWide tc"></object> + <object data="support/colors-16x8.png" class="bigWide cr"></object> + <object data="support/colors-16x8.png" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8.png" class="bigTall tr"></object> + <object data="support/colors-16x8.png" class="bigTall bl"></object> + <object data="support/colors-16x8.png" class="bigTall tl"></object> + <object data="support/colors-16x8.png" class="bigTall br"></object> + <object data="support/colors-16x8.png" class="bigTall tc"></object> + <object data="support/colors-16x8.png" class="bigTall cr"></object> + <object data="support/colors-16x8.png" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8.png" class="small tr"></object> + <object data="support/colors-16x8.png" class="small bl"></object> + <object data="support/colors-16x8.png" class="small tl"></object> + <object data="support/colors-16x8.png" class="small br"></object> + <object data="support/colors-16x8.png" class="small tc"></object> + <object data="support/colors-16x8.png" class="small cr"></object> + <object data="support/colors-16x8.png" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001p.html new file mode 100644 index 0000000000..49eb6dc327 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001p.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on video element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-png-001-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8.png" class="bigWide tr"></video> + <video poster="support/colors-16x8.png" class="bigWide bl"></video> + <video poster="support/colors-16x8.png" class="bigWide tl"></video> + <video poster="support/colors-16x8.png" class="bigWide br"></video> + <video poster="support/colors-16x8.png" class="bigWide tc"></video> + <video poster="support/colors-16x8.png" class="bigWide cr"></video> + <video poster="support/colors-16x8.png" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8.png" class="bigTall tr"></video> + <video poster="support/colors-16x8.png" class="bigTall bl"></video> + <video poster="support/colors-16x8.png" class="bigTall tl"></video> + <video poster="support/colors-16x8.png" class="bigTall br"></video> + <video poster="support/colors-16x8.png" class="bigTall tc"></video> + <video poster="support/colors-16x8.png" class="bigTall cr"></video> + <video poster="support/colors-16x8.png" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8.png" class="small tr"></video> + <video poster="support/colors-16x8.png" class="small bl"></video> + <video poster="support/colors-16x8.png" class="small tl"></video> + <video poster="support/colors-16x8.png" class="small br"></video> + <video poster="support/colors-16x8.png" class="small tc"></video> + <video poster="support/colors-16x8.png" class="small cr"></video> + <video poster="support/colors-16x8.png" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002-ref.html new file mode 100644 index 0000000000..ce31bc73dc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16.png"); + background-size: cover; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002c.html new file mode 100644 index 0000000000..ac0f1da740 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002c.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on canvas element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-png-002-ref.html"> + <style type="text/css"> + canvas { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + <script> + function drawImageToCanvases(imageURI) { + var image = new Image(); + image.onload = function() { + var canvasElems = document.getElementsByTagName("canvas"); + for (var i = 0; i < canvasElems.length; i++) { + var ctx = canvasElems[i].getContext("2d"); + ctx.drawImage(image, 0, 0); + } + document.documentElement.removeAttribute("class"); + } + image.src = imageURI; + } + </script> + </head> + <body onload="drawImageToCanvases('support/colors-8x16.png')"> + <!-- big/wide: --> + <canvas width="8" height="16" class="bigWide tr"></canvas> + <canvas width="8" height="16" class="bigWide bl"></canvas> + <canvas width="8" height="16" class="bigWide tl"></canvas> + <canvas width="8" height="16" class="bigWide br"></canvas> + <canvas width="8" height="16" class="bigWide tc"></canvas> + <canvas width="8" height="16" class="bigWide cr"></canvas> + <canvas width="8" height="16" class="bigWide"></canvas> + <br> + <!-- big/tall: --> + <canvas width="8" height="16" class="bigTall tr"></canvas> + <canvas width="8" height="16" class="bigTall bl"></canvas> + <canvas width="8" height="16" class="bigTall tl"></canvas> + <canvas width="8" height="16" class="bigTall br"></canvas> + <canvas width="8" height="16" class="bigTall tc"></canvas> + <canvas width="8" height="16" class="bigTall cr"></canvas> + <canvas width="8" height="16" class="bigTall"></canvas> + <br> + <!-- small: --> + <canvas width="8" height="16" class="small tr"></canvas> + <canvas width="8" height="16" class="small bl"></canvas> + <canvas width="8" height="16" class="small tl"></canvas> + <canvas width="8" height="16" class="small br"></canvas> + <canvas width="8" height="16" class="small tc"></canvas> + <canvas width="8" height="16" class="small cr"></canvas> + <canvas width="8" height="16" class="small"></canvas> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002e.html new file mode 100644 index 0000000000..dff433a9bd --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002e.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on embed element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-png-002-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16.png" class="bigWide tr"> + <embed src="support/colors-8x16.png" class="bigWide bl"> + <embed src="support/colors-8x16.png" class="bigWide tl"> + <embed src="support/colors-8x16.png" class="bigWide br"> + <embed src="support/colors-8x16.png" class="bigWide tc"> + <embed src="support/colors-8x16.png" class="bigWide cr"> + <embed src="support/colors-8x16.png" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16.png" class="bigTall tr"> + <embed src="support/colors-8x16.png" class="bigTall bl"> + <embed src="support/colors-8x16.png" class="bigTall tl"> + <embed src="support/colors-8x16.png" class="bigTall br"> + <embed src="support/colors-8x16.png" class="bigTall tc"> + <embed src="support/colors-8x16.png" class="bigTall cr"> + <embed src="support/colors-8x16.png" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16.png" class="small tr"> + <embed src="support/colors-8x16.png" class="small bl"> + <embed src="support/colors-8x16.png" class="small tl"> + <embed src="support/colors-8x16.png" class="small br"> + <embed src="support/colors-8x16.png" class="small tc"> + <embed src="support/colors-8x16.png" class="small cr"> + <embed src="support/colors-8x16.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002i.html new file mode 100644 index 0000000000..0c595c3e46 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002i.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on img element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-png-002-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16.png" class="bigWide tr"> + <img src="support/colors-8x16.png" class="bigWide bl"> + <img src="support/colors-8x16.png" class="bigWide tl"> + <img src="support/colors-8x16.png" class="bigWide br"> + <img src="support/colors-8x16.png" class="bigWide tc"> + <img src="support/colors-8x16.png" class="bigWide cr"> + <img src="support/colors-8x16.png" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16.png" class="bigTall tr"> + <img src="support/colors-8x16.png" class="bigTall bl"> + <img src="support/colors-8x16.png" class="bigTall tl"> + <img src="support/colors-8x16.png" class="bigTall br"> + <img src="support/colors-8x16.png" class="bigTall tc"> + <img src="support/colors-8x16.png" class="bigTall cr"> + <img src="support/colors-8x16.png" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16.png" class="small tr"> + <img src="support/colors-8x16.png" class="small bl"> + <img src="support/colors-8x16.png" class="small tl"> + <img src="support/colors-8x16.png" class="small br"> + <img src="support/colors-8x16.png" class="small tc"> + <img src="support/colors-8x16.png" class="small cr"> + <img src="support/colors-8x16.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002o.html new file mode 100644 index 0000000000..1148a6ee2f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002o.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on object element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-png-002-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16.png" class="bigWide tr"></object> + <object data="support/colors-8x16.png" class="bigWide bl"></object> + <object data="support/colors-8x16.png" class="bigWide tl"></object> + <object data="support/colors-8x16.png" class="bigWide br"></object> + <object data="support/colors-8x16.png" class="bigWide tc"></object> + <object data="support/colors-8x16.png" class="bigWide cr"></object> + <object data="support/colors-8x16.png" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16.png" class="bigTall tr"></object> + <object data="support/colors-8x16.png" class="bigTall bl"></object> + <object data="support/colors-8x16.png" class="bigTall tl"></object> + <object data="support/colors-8x16.png" class="bigTall br"></object> + <object data="support/colors-8x16.png" class="bigTall tc"></object> + <object data="support/colors-8x16.png" class="bigTall cr"></object> + <object data="support/colors-8x16.png" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16.png" class="small tr"></object> + <object data="support/colors-8x16.png" class="small bl"></object> + <object data="support/colors-8x16.png" class="small tl"></object> + <object data="support/colors-8x16.png" class="small br"></object> + <object data="support/colors-8x16.png" class="small tc"></object> + <object data="support/colors-8x16.png" class="small cr"></object> + <object data="support/colors-8x16.png" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002p.html new file mode 100644 index 0000000000..937be0c175 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002p.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on video element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-png-002-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16.png" class="bigWide tr"></video> + <video poster="support/colors-8x16.png" class="bigWide bl"></video> + <video poster="support/colors-8x16.png" class="bigWide tl"></video> + <video poster="support/colors-8x16.png" class="bigWide br"></video> + <video poster="support/colors-8x16.png" class="bigWide tc"></video> + <video poster="support/colors-8x16.png" class="bigWide cr"></video> + <video poster="support/colors-8x16.png" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16.png" class="bigTall tr"></video> + <video poster="support/colors-8x16.png" class="bigTall bl"></video> + <video poster="support/colors-8x16.png" class="bigTall tl"></video> + <video poster="support/colors-8x16.png" class="bigTall br"></video> + <video poster="support/colors-8x16.png" class="bigTall tc"></video> + <video poster="support/colors-8x16.png" class="bigTall cr"></video> + <video poster="support/colors-8x16.png" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16.png" class="small tr"></video> + <video poster="support/colors-8x16.png" class="small bl"></video> + <video poster="support/colors-8x16.png" class="small tl"></video> + <video poster="support/colors-8x16.png" class="small br"></video> + <video poster="support/colors-8x16.png" class="small tc"></video> + <video poster="support/colors-8x16.png" class="small cr"></video> + <video poster="support/colors-8x16.png" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001-ref.html new file mode 100644 index 0000000000..b1539f9278 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8.svg"); + background-size: cover; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001e.html new file mode 100644 index 0000000000..5ab74f1850 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-001-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8.svg" class="bigWide tr"> + <embed src="support/colors-16x8.svg" class="bigWide bl"> + <embed src="support/colors-16x8.svg" class="bigWide tl"> + <embed src="support/colors-16x8.svg" class="bigWide br"> + <embed src="support/colors-16x8.svg" class="bigWide tc"> + <embed src="support/colors-16x8.svg" class="bigWide cr"> + <embed src="support/colors-16x8.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8.svg" class="bigTall tr"> + <embed src="support/colors-16x8.svg" class="bigTall bl"> + <embed src="support/colors-16x8.svg" class="bigTall tl"> + <embed src="support/colors-16x8.svg" class="bigTall br"> + <embed src="support/colors-16x8.svg" class="bigTall tc"> + <embed src="support/colors-16x8.svg" class="bigTall cr"> + <embed src="support/colors-16x8.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8.svg" class="small tr"> + <embed src="support/colors-16x8.svg" class="small bl"> + <embed src="support/colors-16x8.svg" class="small tl"> + <embed src="support/colors-16x8.svg" class="small br"> + <embed src="support/colors-16x8.svg" class="small tc"> + <embed src="support/colors-16x8.svg" class="small cr"> + <embed src="support/colors-16x8.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001i.html new file mode 100644 index 0000000000..b0d82e47eb --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-001-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8.svg" class="bigWide tr"> + <img src="support/colors-16x8.svg" class="bigWide bl"> + <img src="support/colors-16x8.svg" class="bigWide tl"> + <img src="support/colors-16x8.svg" class="bigWide br"> + <img src="support/colors-16x8.svg" class="bigWide tc"> + <img src="support/colors-16x8.svg" class="bigWide cr"> + <img src="support/colors-16x8.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8.svg" class="bigTall tr"> + <img src="support/colors-16x8.svg" class="bigTall bl"> + <img src="support/colors-16x8.svg" class="bigTall tl"> + <img src="support/colors-16x8.svg" class="bigTall br"> + <img src="support/colors-16x8.svg" class="bigTall tc"> + <img src="support/colors-16x8.svg" class="bigTall cr"> + <img src="support/colors-16x8.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8.svg" class="small tr"> + <img src="support/colors-16x8.svg" class="small bl"> + <img src="support/colors-16x8.svg" class="small tl"> + <img src="support/colors-16x8.svg" class="small br"> + <img src="support/colors-16x8.svg" class="small tc"> + <img src="support/colors-16x8.svg" class="small cr"> + <img src="support/colors-16x8.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001o.html new file mode 100644 index 0000000000..78c6b87cce --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-001-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8.svg" class="bigWide tr"></object> + <object data="support/colors-16x8.svg" class="bigWide bl"></object> + <object data="support/colors-16x8.svg" class="bigWide tl"></object> + <object data="support/colors-16x8.svg" class="bigWide br"></object> + <object data="support/colors-16x8.svg" class="bigWide tc"></object> + <object data="support/colors-16x8.svg" class="bigWide cr"></object> + <object data="support/colors-16x8.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8.svg" class="bigTall tr"></object> + <object data="support/colors-16x8.svg" class="bigTall bl"></object> + <object data="support/colors-16x8.svg" class="bigTall tl"></object> + <object data="support/colors-16x8.svg" class="bigTall br"></object> + <object data="support/colors-16x8.svg" class="bigTall tc"></object> + <object data="support/colors-16x8.svg" class="bigTall cr"></object> + <object data="support/colors-16x8.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8.svg" class="small tr"></object> + <object data="support/colors-16x8.svg" class="small bl"></object> + <object data="support/colors-16x8.svg" class="small tl"></object> + <object data="support/colors-16x8.svg" class="small br"></object> + <object data="support/colors-16x8.svg" class="small tc"></object> + <object data="support/colors-16x8.svg" class="small cr"></object> + <object data="support/colors-16x8.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001p.html new file mode 100644 index 0000000000..3a5f3bf6dc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-001-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8.svg" class="bigWide tr"></video> + <video poster="support/colors-16x8.svg" class="bigWide bl"></video> + <video poster="support/colors-16x8.svg" class="bigWide tl"></video> + <video poster="support/colors-16x8.svg" class="bigWide br"></video> + <video poster="support/colors-16x8.svg" class="bigWide tc"></video> + <video poster="support/colors-16x8.svg" class="bigWide cr"></video> + <video poster="support/colors-16x8.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8.svg" class="bigTall tr"></video> + <video poster="support/colors-16x8.svg" class="bigTall bl"></video> + <video poster="support/colors-16x8.svg" class="bigTall tl"></video> + <video poster="support/colors-16x8.svg" class="bigTall br"></video> + <video poster="support/colors-16x8.svg" class="bigTall tc"></video> + <video poster="support/colors-16x8.svg" class="bigTall cr"></video> + <video poster="support/colors-16x8.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8.svg" class="small tr"></video> + <video poster="support/colors-16x8.svg" class="small bl"></video> + <video poster="support/colors-16x8.svg" class="small tl"></video> + <video poster="support/colors-16x8.svg" class="small br"></video> + <video poster="support/colors-16x8.svg" class="small tc"></video> + <video poster="support/colors-16x8.svg" class="small cr"></video> + <video poster="support/colors-16x8.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002-ref.html new file mode 100644 index 0000000000..86706084f4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16.svg"); + background-size: cover; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002e.html new file mode 100644 index 0000000000..48f3fc53a7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-002-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16.svg" class="bigWide tr"> + <embed src="support/colors-8x16.svg" class="bigWide bl"> + <embed src="support/colors-8x16.svg" class="bigWide tl"> + <embed src="support/colors-8x16.svg" class="bigWide br"> + <embed src="support/colors-8x16.svg" class="bigWide tc"> + <embed src="support/colors-8x16.svg" class="bigWide cr"> + <embed src="support/colors-8x16.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16.svg" class="bigTall tr"> + <embed src="support/colors-8x16.svg" class="bigTall bl"> + <embed src="support/colors-8x16.svg" class="bigTall tl"> + <embed src="support/colors-8x16.svg" class="bigTall br"> + <embed src="support/colors-8x16.svg" class="bigTall tc"> + <embed src="support/colors-8x16.svg" class="bigTall cr"> + <embed src="support/colors-8x16.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16.svg" class="small tr"> + <embed src="support/colors-8x16.svg" class="small bl"> + <embed src="support/colors-8x16.svg" class="small tl"> + <embed src="support/colors-8x16.svg" class="small br"> + <embed src="support/colors-8x16.svg" class="small tc"> + <embed src="support/colors-8x16.svg" class="small cr"> + <embed src="support/colors-8x16.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002i.html new file mode 100644 index 0000000000..a7a78b8832 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-002-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16.svg" class="bigWide tr"> + <img src="support/colors-8x16.svg" class="bigWide bl"> + <img src="support/colors-8x16.svg" class="bigWide tl"> + <img src="support/colors-8x16.svg" class="bigWide br"> + <img src="support/colors-8x16.svg" class="bigWide tc"> + <img src="support/colors-8x16.svg" class="bigWide cr"> + <img src="support/colors-8x16.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16.svg" class="bigTall tr"> + <img src="support/colors-8x16.svg" class="bigTall bl"> + <img src="support/colors-8x16.svg" class="bigTall tl"> + <img src="support/colors-8x16.svg" class="bigTall br"> + <img src="support/colors-8x16.svg" class="bigTall tc"> + <img src="support/colors-8x16.svg" class="bigTall cr"> + <img src="support/colors-8x16.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16.svg" class="small tr"> + <img src="support/colors-8x16.svg" class="small bl"> + <img src="support/colors-8x16.svg" class="small tl"> + <img src="support/colors-8x16.svg" class="small br"> + <img src="support/colors-8x16.svg" class="small tc"> + <img src="support/colors-8x16.svg" class="small cr"> + <img src="support/colors-8x16.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002o.html new file mode 100644 index 0000000000..fd0050ff23 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-002-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16.svg" class="bigWide tr"></object> + <object data="support/colors-8x16.svg" class="bigWide bl"></object> + <object data="support/colors-8x16.svg" class="bigWide tl"></object> + <object data="support/colors-8x16.svg" class="bigWide br"></object> + <object data="support/colors-8x16.svg" class="bigWide tc"></object> + <object data="support/colors-8x16.svg" class="bigWide cr"></object> + <object data="support/colors-8x16.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16.svg" class="bigTall tr"></object> + <object data="support/colors-8x16.svg" class="bigTall bl"></object> + <object data="support/colors-8x16.svg" class="bigTall tl"></object> + <object data="support/colors-8x16.svg" class="bigTall br"></object> + <object data="support/colors-8x16.svg" class="bigTall tc"></object> + <object data="support/colors-8x16.svg" class="bigTall cr"></object> + <object data="support/colors-8x16.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16.svg" class="small tr"></object> + <object data="support/colors-8x16.svg" class="small bl"></object> + <object data="support/colors-8x16.svg" class="small tl"></object> + <object data="support/colors-8x16.svg" class="small br"></object> + <object data="support/colors-8x16.svg" class="small tc"></object> + <object data="support/colors-8x16.svg" class="small cr"></object> + <object data="support/colors-8x16.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002p.html new file mode 100644 index 0000000000..272b3c714f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-002-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16.svg" class="bigWide tr"></video> + <video poster="support/colors-8x16.svg" class="bigWide bl"></video> + <video poster="support/colors-8x16.svg" class="bigWide tl"></video> + <video poster="support/colors-8x16.svg" class="bigWide br"></video> + <video poster="support/colors-8x16.svg" class="bigWide tc"></video> + <video poster="support/colors-8x16.svg" class="bigWide cr"></video> + <video poster="support/colors-8x16.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16.svg" class="bigTall tr"></video> + <video poster="support/colors-8x16.svg" class="bigTall bl"></video> + <video poster="support/colors-8x16.svg" class="bigTall tl"></video> + <video poster="support/colors-8x16.svg" class="bigTall br"></video> + <video poster="support/colors-8x16.svg" class="bigTall tc"></video> + <video poster="support/colors-8x16.svg" class="bigTall cr"></video> + <video poster="support/colors-8x16.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16.svg" class="small tr"></video> + <video poster="support/colors-8x16.svg" class="small bl"></video> + <video poster="support/colors-8x16.svg" class="small tl"></video> + <video poster="support/colors-8x16.svg" class="small br"></video> + <video poster="support/colors-8x16.svg" class="small tc"></video> + <video poster="support/colors-8x16.svg" class="small cr"></video> + <video poster="support/colors-8x16.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003-ref.html new file mode 100644 index 0000000000..18aa362436 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8-noSize.svg"); + background-size: cover; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003e.html new file mode 100644 index 0000000000..75b4ba6e9d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-003-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8-noSize.svg" class="bigWide tr"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide bl"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide tl"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide br"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide tc"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide cr"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8-noSize.svg" class="bigTall tr"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall bl"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall tl"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall br"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall tc"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall cr"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8-noSize.svg" class="small tr"> + <embed src="support/colors-16x8-noSize.svg" class="small bl"> + <embed src="support/colors-16x8-noSize.svg" class="small tl"> + <embed src="support/colors-16x8-noSize.svg" class="small br"> + <embed src="support/colors-16x8-noSize.svg" class="small tc"> + <embed src="support/colors-16x8-noSize.svg" class="small cr"> + <embed src="support/colors-16x8-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003i.html new file mode 100644 index 0000000000..b764d3db7d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-003-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8-noSize.svg" class="bigWide tr"> + <img src="support/colors-16x8-noSize.svg" class="bigWide bl"> + <img src="support/colors-16x8-noSize.svg" class="bigWide tl"> + <img src="support/colors-16x8-noSize.svg" class="bigWide br"> + <img src="support/colors-16x8-noSize.svg" class="bigWide tc"> + <img src="support/colors-16x8-noSize.svg" class="bigWide cr"> + <img src="support/colors-16x8-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8-noSize.svg" class="bigTall tr"> + <img src="support/colors-16x8-noSize.svg" class="bigTall bl"> + <img src="support/colors-16x8-noSize.svg" class="bigTall tl"> + <img src="support/colors-16x8-noSize.svg" class="bigTall br"> + <img src="support/colors-16x8-noSize.svg" class="bigTall tc"> + <img src="support/colors-16x8-noSize.svg" class="bigTall cr"> + <img src="support/colors-16x8-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8-noSize.svg" class="small tr"> + <img src="support/colors-16x8-noSize.svg" class="small bl"> + <img src="support/colors-16x8-noSize.svg" class="small tl"> + <img src="support/colors-16x8-noSize.svg" class="small br"> + <img src="support/colors-16x8-noSize.svg" class="small tc"> + <img src="support/colors-16x8-noSize.svg" class="small cr"> + <img src="support/colors-16x8-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003o.html new file mode 100644 index 0000000000..aca67ff236 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-003-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8-noSize.svg" class="small tr"></object> + <object data="support/colors-16x8-noSize.svg" class="small bl"></object> + <object data="support/colors-16x8-noSize.svg" class="small tl"></object> + <object data="support/colors-16x8-noSize.svg" class="small br"></object> + <object data="support/colors-16x8-noSize.svg" class="small tc"></object> + <object data="support/colors-16x8-noSize.svg" class="small cr"></object> + <object data="support/colors-16x8-noSize.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003p.html new file mode 100644 index 0000000000..76f54d6fb2 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-003-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8-noSize.svg" class="small tr"></video> + <video poster="support/colors-16x8-noSize.svg" class="small bl"></video> + <video poster="support/colors-16x8-noSize.svg" class="small tl"></video> + <video poster="support/colors-16x8-noSize.svg" class="small br"></video> + <video poster="support/colors-16x8-noSize.svg" class="small tc"></video> + <video poster="support/colors-16x8-noSize.svg" class="small cr"></video> + <video poster="support/colors-16x8-noSize.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004-ref.html new file mode 100644 index 0000000000..cf0f747f22 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16-noSize.svg"); + background-size: cover; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004e.html new file mode 100644 index 0000000000..17a20a97fc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-004-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16-noSize.svg" class="bigWide tr"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide bl"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide tl"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide br"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide tc"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide cr"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16-noSize.svg" class="bigTall tr"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall bl"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall tl"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall br"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall tc"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall cr"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16-noSize.svg" class="small tr"> + <embed src="support/colors-8x16-noSize.svg" class="small bl"> + <embed src="support/colors-8x16-noSize.svg" class="small tl"> + <embed src="support/colors-8x16-noSize.svg" class="small br"> + <embed src="support/colors-8x16-noSize.svg" class="small tc"> + <embed src="support/colors-8x16-noSize.svg" class="small cr"> + <embed src="support/colors-8x16-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004i.html new file mode 100644 index 0000000000..7094a04b29 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-004-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16-noSize.svg" class="bigWide tr"> + <img src="support/colors-8x16-noSize.svg" class="bigWide bl"> + <img src="support/colors-8x16-noSize.svg" class="bigWide tl"> + <img src="support/colors-8x16-noSize.svg" class="bigWide br"> + <img src="support/colors-8x16-noSize.svg" class="bigWide tc"> + <img src="support/colors-8x16-noSize.svg" class="bigWide cr"> + <img src="support/colors-8x16-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16-noSize.svg" class="bigTall tr"> + <img src="support/colors-8x16-noSize.svg" class="bigTall bl"> + <img src="support/colors-8x16-noSize.svg" class="bigTall tl"> + <img src="support/colors-8x16-noSize.svg" class="bigTall br"> + <img src="support/colors-8x16-noSize.svg" class="bigTall tc"> + <img src="support/colors-8x16-noSize.svg" class="bigTall cr"> + <img src="support/colors-8x16-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16-noSize.svg" class="small tr"> + <img src="support/colors-8x16-noSize.svg" class="small bl"> + <img src="support/colors-8x16-noSize.svg" class="small tl"> + <img src="support/colors-8x16-noSize.svg" class="small br"> + <img src="support/colors-8x16-noSize.svg" class="small tc"> + <img src="support/colors-8x16-noSize.svg" class="small cr"> + <img src="support/colors-8x16-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004o.html new file mode 100644 index 0000000000..954bbb459d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-004-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16-noSize.svg" class="small tr"></object> + <object data="support/colors-8x16-noSize.svg" class="small bl"></object> + <object data="support/colors-8x16-noSize.svg" class="small tl"></object> + <object data="support/colors-8x16-noSize.svg" class="small br"></object> + <object data="support/colors-8x16-noSize.svg" class="small tc"></object> + <object data="support/colors-8x16-noSize.svg" class="small cr"></object> + <object data="support/colors-8x16-noSize.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004p.html new file mode 100644 index 0000000000..d8fc343f35 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-004-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16-noSize.svg" class="small tr"></video> + <video poster="support/colors-8x16-noSize.svg" class="small bl"></video> + <video poster="support/colors-8x16-noSize.svg" class="small tl"></video> + <video poster="support/colors-8x16-noSize.svg" class="small br"></video> + <video poster="support/colors-8x16-noSize.svg" class="small tc"></video> + <video poster="support/colors-8x16-noSize.svg" class="small cr"></video> + <video poster="support/colors-8x16-noSize.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005-ref.html new file mode 100644 index 0000000000..374b0ac7e5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8-parDefault.svg"); + background-size: cover; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005e.html new file mode 100644 index 0000000000..d4d7e91993 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-005-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide br"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall br"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8-parDefault.svg" class="small tr"> + <embed src="support/colors-16x8-parDefault.svg" class="small bl"> + <embed src="support/colors-16x8-parDefault.svg" class="small tl"> + <embed src="support/colors-16x8-parDefault.svg" class="small br"> + <embed src="support/colors-16x8-parDefault.svg" class="small tc"> + <embed src="support/colors-16x8-parDefault.svg" class="small cr"> + <embed src="support/colors-16x8-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005i.html new file mode 100644 index 0000000000..6b9ea338c1 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-005-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8-parDefault.svg" class="bigWide tr"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide bl"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide tl"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide br"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide tc"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide cr"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8-parDefault.svg" class="bigTall tr"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall bl"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall tl"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall br"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall tc"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall cr"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8-parDefault.svg" class="small tr"> + <img src="support/colors-16x8-parDefault.svg" class="small bl"> + <img src="support/colors-16x8-parDefault.svg" class="small tl"> + <img src="support/colors-16x8-parDefault.svg" class="small br"> + <img src="support/colors-16x8-parDefault.svg" class="small tc"> + <img src="support/colors-16x8-parDefault.svg" class="small cr"> + <img src="support/colors-16x8-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005o.html new file mode 100644 index 0000000000..8ec4dcbf2d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-005-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8-parDefault.svg" class="small tr"></object> + <object data="support/colors-16x8-parDefault.svg" class="small bl"></object> + <object data="support/colors-16x8-parDefault.svg" class="small tl"></object> + <object data="support/colors-16x8-parDefault.svg" class="small br"></object> + <object data="support/colors-16x8-parDefault.svg" class="small tc"></object> + <object data="support/colors-16x8-parDefault.svg" class="small cr"></object> + <object data="support/colors-16x8-parDefault.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005p.html new file mode 100644 index 0000000000..2aaaf66a37 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-005-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small br"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006-ref.html new file mode 100644 index 0000000000..2e0ecc7d09 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16-parDefault.svg"); + background-size: cover; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006e.html new file mode 100644 index 0000000000..278d195a58 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-006-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide br"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall br"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16-parDefault.svg" class="small tr"> + <embed src="support/colors-8x16-parDefault.svg" class="small bl"> + <embed src="support/colors-8x16-parDefault.svg" class="small tl"> + <embed src="support/colors-8x16-parDefault.svg" class="small br"> + <embed src="support/colors-8x16-parDefault.svg" class="small tc"> + <embed src="support/colors-8x16-parDefault.svg" class="small cr"> + <embed src="support/colors-8x16-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006i.html new file mode 100644 index 0000000000..325b4c8339 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-006-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16-parDefault.svg" class="bigWide tr"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide bl"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide tl"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide br"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide tc"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide cr"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16-parDefault.svg" class="bigTall tr"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall bl"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall tl"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall br"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall tc"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall cr"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16-parDefault.svg" class="small tr"> + <img src="support/colors-8x16-parDefault.svg" class="small bl"> + <img src="support/colors-8x16-parDefault.svg" class="small tl"> + <img src="support/colors-8x16-parDefault.svg" class="small br"> + <img src="support/colors-8x16-parDefault.svg" class="small tc"> + <img src="support/colors-8x16-parDefault.svg" class="small cr"> + <img src="support/colors-8x16-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006o.html new file mode 100644 index 0000000000..8ff547f8fb --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-006-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16-parDefault.svg" class="small tr"></object> + <object data="support/colors-8x16-parDefault.svg" class="small bl"></object> + <object data="support/colors-8x16-parDefault.svg" class="small tl"></object> + <object data="support/colors-8x16-parDefault.svg" class="small br"></object> + <object data="support/colors-8x16-parDefault.svg" class="small tc"></object> + <object data="support/colors-8x16-parDefault.svg" class="small cr"></object> + <object data="support/colors-8x16-parDefault.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006p.html new file mode 100644 index 0000000000..8245fca4e9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-cover-svg-006-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small br"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001-ref.html new file mode 100644 index 0000000000..a7ed886b01 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001c.html new file mode 100644 index 0000000000..bdf547e190 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001c.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on canvas element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-png-001-ref.html"> + <style type="text/css"> + canvas { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + <script> + function drawImageToCanvases(imageURI) { + var image = new Image(); + image.onload = function() { + var canvasElems = document.getElementsByTagName("canvas"); + for (var i = 0; i < canvasElems.length; i++) { + var ctx = canvasElems[i].getContext("2d"); + ctx.drawImage(image, 0, 0); + } + document.documentElement.removeAttribute("class"); + } + image.src = imageURI; + } + </script> + </head> + <body onload="drawImageToCanvases('support/colors-16x8.png')"> + <!-- big/wide: --> + <canvas width="16" height="8" class="bigWide tr"></canvas> + <canvas width="16" height="8" class="bigWide bl"></canvas> + <canvas width="16" height="8" class="bigWide tl"></canvas> + <canvas width="16" height="8" class="bigWide br"></canvas> + <canvas width="16" height="8" class="bigWide tc"></canvas> + <canvas width="16" height="8" class="bigWide cr"></canvas> + <canvas width="16" height="8" class="bigWide"></canvas> + <br> + <!-- big/tall: --> + <canvas width="16" height="8" class="bigTall tr"></canvas> + <canvas width="16" height="8" class="bigTall bl"></canvas> + <canvas width="16" height="8" class="bigTall tl"></canvas> + <canvas width="16" height="8" class="bigTall br"></canvas> + <canvas width="16" height="8" class="bigTall tc"></canvas> + <canvas width="16" height="8" class="bigTall cr"></canvas> + <canvas width="16" height="8" class="bigTall"></canvas> + <br> + <!-- small: --> + <canvas width="16" height="8" class="small tr"></canvas> + <canvas width="16" height="8" class="small bl"></canvas> + <canvas width="16" height="8" class="small tl"></canvas> + <canvas width="16" height="8" class="small br"></canvas> + <canvas width="16" height="8" class="small tc"></canvas> + <canvas width="16" height="8" class="small cr"></canvas> + <canvas width="16" height="8" class="small"></canvas> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001e.html new file mode 100644 index 0000000000..b36e1491f0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001e.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on embed element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-png-001-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8.png" class="bigWide tr"> + <embed src="support/colors-16x8.png" class="bigWide bl"> + <embed src="support/colors-16x8.png" class="bigWide tl"> + <embed src="support/colors-16x8.png" class="bigWide br"> + <embed src="support/colors-16x8.png" class="bigWide tc"> + <embed src="support/colors-16x8.png" class="bigWide cr"> + <embed src="support/colors-16x8.png" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8.png" class="bigTall tr"> + <embed src="support/colors-16x8.png" class="bigTall bl"> + <embed src="support/colors-16x8.png" class="bigTall tl"> + <embed src="support/colors-16x8.png" class="bigTall br"> + <embed src="support/colors-16x8.png" class="bigTall tc"> + <embed src="support/colors-16x8.png" class="bigTall cr"> + <embed src="support/colors-16x8.png" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8.png" class="small tr"> + <embed src="support/colors-16x8.png" class="small bl"> + <embed src="support/colors-16x8.png" class="small tl"> + <embed src="support/colors-16x8.png" class="small br"> + <embed src="support/colors-16x8.png" class="small tc"> + <embed src="support/colors-16x8.png" class="small cr"> + <embed src="support/colors-16x8.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001i.html new file mode 100644 index 0000000000..1bf280d41d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001i.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on img element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-png-001-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8.png" class="bigWide tr"> + <img src="support/colors-16x8.png" class="bigWide bl"> + <img src="support/colors-16x8.png" class="bigWide tl"> + <img src="support/colors-16x8.png" class="bigWide br"> + <img src="support/colors-16x8.png" class="bigWide tc"> + <img src="support/colors-16x8.png" class="bigWide cr"> + <img src="support/colors-16x8.png" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8.png" class="bigTall tr"> + <img src="support/colors-16x8.png" class="bigTall bl"> + <img src="support/colors-16x8.png" class="bigTall tl"> + <img src="support/colors-16x8.png" class="bigTall br"> + <img src="support/colors-16x8.png" class="bigTall tc"> + <img src="support/colors-16x8.png" class="bigTall cr"> + <img src="support/colors-16x8.png" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8.png" class="small tr"> + <img src="support/colors-16x8.png" class="small bl"> + <img src="support/colors-16x8.png" class="small tl"> + <img src="support/colors-16x8.png" class="small br"> + <img src="support/colors-16x8.png" class="small tc"> + <img src="support/colors-16x8.png" class="small cr"> + <img src="support/colors-16x8.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001o.html new file mode 100644 index 0000000000..55f75245ac --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001o.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on object element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-png-001-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8.png" class="bigWide tr"></object> + <object data="support/colors-16x8.png" class="bigWide bl"></object> + <object data="support/colors-16x8.png" class="bigWide tl"></object> + <object data="support/colors-16x8.png" class="bigWide br"></object> + <object data="support/colors-16x8.png" class="bigWide tc"></object> + <object data="support/colors-16x8.png" class="bigWide cr"></object> + <object data="support/colors-16x8.png" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8.png" class="bigTall tr"></object> + <object data="support/colors-16x8.png" class="bigTall bl"></object> + <object data="support/colors-16x8.png" class="bigTall tl"></object> + <object data="support/colors-16x8.png" class="bigTall br"></object> + <object data="support/colors-16x8.png" class="bigTall tc"></object> + <object data="support/colors-16x8.png" class="bigTall cr"></object> + <object data="support/colors-16x8.png" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8.png" class="small tr"></object> + <object data="support/colors-16x8.png" class="small bl"></object> + <object data="support/colors-16x8.png" class="small tl"></object> + <object data="support/colors-16x8.png" class="small br"></object> + <object data="support/colors-16x8.png" class="small tc"></object> + <object data="support/colors-16x8.png" class="small cr"></object> + <object data="support/colors-16x8.png" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001p.html new file mode 100644 index 0000000000..0299aefc14 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001p.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on video element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-png-001-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8.png" class="bigWide tr"></video> + <video poster="support/colors-16x8.png" class="bigWide bl"></video> + <video poster="support/colors-16x8.png" class="bigWide tl"></video> + <video poster="support/colors-16x8.png" class="bigWide br"></video> + <video poster="support/colors-16x8.png" class="bigWide tc"></video> + <video poster="support/colors-16x8.png" class="bigWide cr"></video> + <video poster="support/colors-16x8.png" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8.png" class="bigTall tr"></video> + <video poster="support/colors-16x8.png" class="bigTall bl"></video> + <video poster="support/colors-16x8.png" class="bigTall tl"></video> + <video poster="support/colors-16x8.png" class="bigTall br"></video> + <video poster="support/colors-16x8.png" class="bigTall tc"></video> + <video poster="support/colors-16x8.png" class="bigTall cr"></video> + <video poster="support/colors-16x8.png" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8.png" class="small tr"></video> + <video poster="support/colors-16x8.png" class="small bl"></video> + <video poster="support/colors-16x8.png" class="small tl"></video> + <video poster="support/colors-16x8.png" class="small br"></video> + <video poster="support/colors-16x8.png" class="small tc"></video> + <video poster="support/colors-16x8.png" class="small cr"></video> + <video poster="support/colors-16x8.png" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002-ref.html new file mode 100644 index 0000000000..a6e9f59d6c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002c.html new file mode 100644 index 0000000000..1a851bd6d3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002c.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on canvas element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-png-002-ref.html"> + <style type="text/css"> + canvas { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + <script> + function drawImageToCanvases(imageURI) { + var image = new Image(); + image.onload = function() { + var canvasElems = document.getElementsByTagName("canvas"); + for (var i = 0; i < canvasElems.length; i++) { + var ctx = canvasElems[i].getContext("2d"); + ctx.drawImage(image, 0, 0); + } + document.documentElement.removeAttribute("class"); + } + image.src = imageURI; + } + </script> + </head> + <body onload="drawImageToCanvases('support/colors-8x16.png')"> + <!-- big/wide: --> + <canvas width="8" height="16" class="bigWide tr"></canvas> + <canvas width="8" height="16" class="bigWide bl"></canvas> + <canvas width="8" height="16" class="bigWide tl"></canvas> + <canvas width="8" height="16" class="bigWide br"></canvas> + <canvas width="8" height="16" class="bigWide tc"></canvas> + <canvas width="8" height="16" class="bigWide cr"></canvas> + <canvas width="8" height="16" class="bigWide"></canvas> + <br> + <!-- big/tall: --> + <canvas width="8" height="16" class="bigTall tr"></canvas> + <canvas width="8" height="16" class="bigTall bl"></canvas> + <canvas width="8" height="16" class="bigTall tl"></canvas> + <canvas width="8" height="16" class="bigTall br"></canvas> + <canvas width="8" height="16" class="bigTall tc"></canvas> + <canvas width="8" height="16" class="bigTall cr"></canvas> + <canvas width="8" height="16" class="bigTall"></canvas> + <br> + <!-- small: --> + <canvas width="8" height="16" class="small tr"></canvas> + <canvas width="8" height="16" class="small bl"></canvas> + <canvas width="8" height="16" class="small tl"></canvas> + <canvas width="8" height="16" class="small br"></canvas> + <canvas width="8" height="16" class="small tc"></canvas> + <canvas width="8" height="16" class="small cr"></canvas> + <canvas width="8" height="16" class="small"></canvas> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002e.html new file mode 100644 index 0000000000..3f5dc254d7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002e.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on embed element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-png-002-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16.png" class="bigWide tr"> + <embed src="support/colors-8x16.png" class="bigWide bl"> + <embed src="support/colors-8x16.png" class="bigWide tl"> + <embed src="support/colors-8x16.png" class="bigWide br"> + <embed src="support/colors-8x16.png" class="bigWide tc"> + <embed src="support/colors-8x16.png" class="bigWide cr"> + <embed src="support/colors-8x16.png" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16.png" class="bigTall tr"> + <embed src="support/colors-8x16.png" class="bigTall bl"> + <embed src="support/colors-8x16.png" class="bigTall tl"> + <embed src="support/colors-8x16.png" class="bigTall br"> + <embed src="support/colors-8x16.png" class="bigTall tc"> + <embed src="support/colors-8x16.png" class="bigTall cr"> + <embed src="support/colors-8x16.png" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16.png" class="small tr"> + <embed src="support/colors-8x16.png" class="small bl"> + <embed src="support/colors-8x16.png" class="small tl"> + <embed src="support/colors-8x16.png" class="small br"> + <embed src="support/colors-8x16.png" class="small tc"> + <embed src="support/colors-8x16.png" class="small cr"> + <embed src="support/colors-8x16.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002i.html new file mode 100644 index 0000000000..708a772070 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002i.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on img element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-png-002-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16.png" class="bigWide tr"> + <img src="support/colors-8x16.png" class="bigWide bl"> + <img src="support/colors-8x16.png" class="bigWide tl"> + <img src="support/colors-8x16.png" class="bigWide br"> + <img src="support/colors-8x16.png" class="bigWide tc"> + <img src="support/colors-8x16.png" class="bigWide cr"> + <img src="support/colors-8x16.png" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16.png" class="bigTall tr"> + <img src="support/colors-8x16.png" class="bigTall bl"> + <img src="support/colors-8x16.png" class="bigTall tl"> + <img src="support/colors-8x16.png" class="bigTall br"> + <img src="support/colors-8x16.png" class="bigTall tc"> + <img src="support/colors-8x16.png" class="bigTall cr"> + <img src="support/colors-8x16.png" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16.png" class="small tr"> + <img src="support/colors-8x16.png" class="small bl"> + <img src="support/colors-8x16.png" class="small tl"> + <img src="support/colors-8x16.png" class="small br"> + <img src="support/colors-8x16.png" class="small tc"> + <img src="support/colors-8x16.png" class="small cr"> + <img src="support/colors-8x16.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002o.html new file mode 100644 index 0000000000..9b8433ff4b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002o.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on object element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-png-002-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16.png" class="bigWide tr"></object> + <object data="support/colors-8x16.png" class="bigWide bl"></object> + <object data="support/colors-8x16.png" class="bigWide tl"></object> + <object data="support/colors-8x16.png" class="bigWide br"></object> + <object data="support/colors-8x16.png" class="bigWide tc"></object> + <object data="support/colors-8x16.png" class="bigWide cr"></object> + <object data="support/colors-8x16.png" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16.png" class="bigTall tr"></object> + <object data="support/colors-8x16.png" class="bigTall bl"></object> + <object data="support/colors-8x16.png" class="bigTall tl"></object> + <object data="support/colors-8x16.png" class="bigTall br"></object> + <object data="support/colors-8x16.png" class="bigTall tc"></object> + <object data="support/colors-8x16.png" class="bigTall cr"></object> + <object data="support/colors-8x16.png" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16.png" class="small tr"></object> + <object data="support/colors-8x16.png" class="small bl"></object> + <object data="support/colors-8x16.png" class="small tl"></object> + <object data="support/colors-8x16.png" class="small br"></object> + <object data="support/colors-8x16.png" class="small tc"></object> + <object data="support/colors-8x16.png" class="small cr"></object> + <object data="support/colors-8x16.png" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002p.html new file mode 100644 index 0000000000..fd51e92747 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002p.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on video element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-png-002-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16.png" class="bigWide tr"></video> + <video poster="support/colors-8x16.png" class="bigWide bl"></video> + <video poster="support/colors-8x16.png" class="bigWide tl"></video> + <video poster="support/colors-8x16.png" class="bigWide br"></video> + <video poster="support/colors-8x16.png" class="bigWide tc"></video> + <video poster="support/colors-8x16.png" class="bigWide cr"></video> + <video poster="support/colors-8x16.png" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16.png" class="bigTall tr"></video> + <video poster="support/colors-8x16.png" class="bigTall bl"></video> + <video poster="support/colors-8x16.png" class="bigTall tl"></video> + <video poster="support/colors-8x16.png" class="bigTall br"></video> + <video poster="support/colors-8x16.png" class="bigTall tc"></video> + <video poster="support/colors-8x16.png" class="bigTall cr"></video> + <video poster="support/colors-8x16.png" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16.png" class="small tr"></video> + <video poster="support/colors-8x16.png" class="small bl"></video> + <video poster="support/colors-8x16.png" class="small tl"></video> + <video poster="support/colors-8x16.png" class="small br"></video> + <video poster="support/colors-8x16.png" class="small tc"></video> + <video poster="support/colors-8x16.png" class="small cr"></video> + <video poster="support/colors-8x16.png" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001-ref.html new file mode 100644 index 0000000000..afb32785ad --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001e.html new file mode 100644 index 0000000000..a907f38419 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-001-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8.svg" class="bigWide tr"> + <embed src="support/colors-16x8.svg" class="bigWide bl"> + <embed src="support/colors-16x8.svg" class="bigWide tl"> + <embed src="support/colors-16x8.svg" class="bigWide br"> + <embed src="support/colors-16x8.svg" class="bigWide tc"> + <embed src="support/colors-16x8.svg" class="bigWide cr"> + <embed src="support/colors-16x8.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8.svg" class="bigTall tr"> + <embed src="support/colors-16x8.svg" class="bigTall bl"> + <embed src="support/colors-16x8.svg" class="bigTall tl"> + <embed src="support/colors-16x8.svg" class="bigTall br"> + <embed src="support/colors-16x8.svg" class="bigTall tc"> + <embed src="support/colors-16x8.svg" class="bigTall cr"> + <embed src="support/colors-16x8.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8.svg" class="small tr"> + <embed src="support/colors-16x8.svg" class="small bl"> + <embed src="support/colors-16x8.svg" class="small tl"> + <embed src="support/colors-16x8.svg" class="small br"> + <embed src="support/colors-16x8.svg" class="small tc"> + <embed src="support/colors-16x8.svg" class="small cr"> + <embed src="support/colors-16x8.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001i.html new file mode 100644 index 0000000000..487cf7c9b7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-001-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8.svg" class="bigWide tr"> + <img src="support/colors-16x8.svg" class="bigWide bl"> + <img src="support/colors-16x8.svg" class="bigWide tl"> + <img src="support/colors-16x8.svg" class="bigWide br"> + <img src="support/colors-16x8.svg" class="bigWide tc"> + <img src="support/colors-16x8.svg" class="bigWide cr"> + <img src="support/colors-16x8.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8.svg" class="bigTall tr"> + <img src="support/colors-16x8.svg" class="bigTall bl"> + <img src="support/colors-16x8.svg" class="bigTall tl"> + <img src="support/colors-16x8.svg" class="bigTall br"> + <img src="support/colors-16x8.svg" class="bigTall tc"> + <img src="support/colors-16x8.svg" class="bigTall cr"> + <img src="support/colors-16x8.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8.svg" class="small tr"> + <img src="support/colors-16x8.svg" class="small bl"> + <img src="support/colors-16x8.svg" class="small tl"> + <img src="support/colors-16x8.svg" class="small br"> + <img src="support/colors-16x8.svg" class="small tc"> + <img src="support/colors-16x8.svg" class="small cr"> + <img src="support/colors-16x8.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001o.html new file mode 100644 index 0000000000..7498dc1a85 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-001-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8.svg" class="bigWide tr"></object> + <object data="support/colors-16x8.svg" class="bigWide bl"></object> + <object data="support/colors-16x8.svg" class="bigWide tl"></object> + <object data="support/colors-16x8.svg" class="bigWide br"></object> + <object data="support/colors-16x8.svg" class="bigWide tc"></object> + <object data="support/colors-16x8.svg" class="bigWide cr"></object> + <object data="support/colors-16x8.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8.svg" class="bigTall tr"></object> + <object data="support/colors-16x8.svg" class="bigTall bl"></object> + <object data="support/colors-16x8.svg" class="bigTall tl"></object> + <object data="support/colors-16x8.svg" class="bigTall br"></object> + <object data="support/colors-16x8.svg" class="bigTall tc"></object> + <object data="support/colors-16x8.svg" class="bigTall cr"></object> + <object data="support/colors-16x8.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8.svg" class="small tr"></object> + <object data="support/colors-16x8.svg" class="small bl"></object> + <object data="support/colors-16x8.svg" class="small tl"></object> + <object data="support/colors-16x8.svg" class="small br"></object> + <object data="support/colors-16x8.svg" class="small tc"></object> + <object data="support/colors-16x8.svg" class="small cr"></object> + <object data="support/colors-16x8.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001p.html new file mode 100644 index 0000000000..40c80f8f26 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-001-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8.svg" class="bigWide tr"></video> + <video poster="support/colors-16x8.svg" class="bigWide bl"></video> + <video poster="support/colors-16x8.svg" class="bigWide tl"></video> + <video poster="support/colors-16x8.svg" class="bigWide br"></video> + <video poster="support/colors-16x8.svg" class="bigWide tc"></video> + <video poster="support/colors-16x8.svg" class="bigWide cr"></video> + <video poster="support/colors-16x8.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8.svg" class="bigTall tr"></video> + <video poster="support/colors-16x8.svg" class="bigTall bl"></video> + <video poster="support/colors-16x8.svg" class="bigTall tl"></video> + <video poster="support/colors-16x8.svg" class="bigTall br"></video> + <video poster="support/colors-16x8.svg" class="bigTall tc"></video> + <video poster="support/colors-16x8.svg" class="bigTall cr"></video> + <video poster="support/colors-16x8.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8.svg" class="small tr"></video> + <video poster="support/colors-16x8.svg" class="small bl"></video> + <video poster="support/colors-16x8.svg" class="small tl"></video> + <video poster="support/colors-16x8.svg" class="small br"></video> + <video poster="support/colors-16x8.svg" class="small tc"></video> + <video poster="support/colors-16x8.svg" class="small cr"></video> + <video poster="support/colors-16x8.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002-ref.html new file mode 100644 index 0000000000..13c4d84030 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002e.html new file mode 100644 index 0000000000..2b1cb19fb5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-002-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16.svg" class="bigWide tr"> + <embed src="support/colors-8x16.svg" class="bigWide bl"> + <embed src="support/colors-8x16.svg" class="bigWide tl"> + <embed src="support/colors-8x16.svg" class="bigWide br"> + <embed src="support/colors-8x16.svg" class="bigWide tc"> + <embed src="support/colors-8x16.svg" class="bigWide cr"> + <embed src="support/colors-8x16.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16.svg" class="bigTall tr"> + <embed src="support/colors-8x16.svg" class="bigTall bl"> + <embed src="support/colors-8x16.svg" class="bigTall tl"> + <embed src="support/colors-8x16.svg" class="bigTall br"> + <embed src="support/colors-8x16.svg" class="bigTall tc"> + <embed src="support/colors-8x16.svg" class="bigTall cr"> + <embed src="support/colors-8x16.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16.svg" class="small tr"> + <embed src="support/colors-8x16.svg" class="small bl"> + <embed src="support/colors-8x16.svg" class="small tl"> + <embed src="support/colors-8x16.svg" class="small br"> + <embed src="support/colors-8x16.svg" class="small tc"> + <embed src="support/colors-8x16.svg" class="small cr"> + <embed src="support/colors-8x16.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002i.html new file mode 100644 index 0000000000..7ecac72aec --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-002-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16.svg" class="bigWide tr"> + <img src="support/colors-8x16.svg" class="bigWide bl"> + <img src="support/colors-8x16.svg" class="bigWide tl"> + <img src="support/colors-8x16.svg" class="bigWide br"> + <img src="support/colors-8x16.svg" class="bigWide tc"> + <img src="support/colors-8x16.svg" class="bigWide cr"> + <img src="support/colors-8x16.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16.svg" class="bigTall tr"> + <img src="support/colors-8x16.svg" class="bigTall bl"> + <img src="support/colors-8x16.svg" class="bigTall tl"> + <img src="support/colors-8x16.svg" class="bigTall br"> + <img src="support/colors-8x16.svg" class="bigTall tc"> + <img src="support/colors-8x16.svg" class="bigTall cr"> + <img src="support/colors-8x16.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16.svg" class="small tr"> + <img src="support/colors-8x16.svg" class="small bl"> + <img src="support/colors-8x16.svg" class="small tl"> + <img src="support/colors-8x16.svg" class="small br"> + <img src="support/colors-8x16.svg" class="small tc"> + <img src="support/colors-8x16.svg" class="small cr"> + <img src="support/colors-8x16.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002o.html new file mode 100644 index 0000000000..2b8335002c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-002-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16.svg" class="bigWide tr"></object> + <object data="support/colors-8x16.svg" class="bigWide bl"></object> + <object data="support/colors-8x16.svg" class="bigWide tl"></object> + <object data="support/colors-8x16.svg" class="bigWide br"></object> + <object data="support/colors-8x16.svg" class="bigWide tc"></object> + <object data="support/colors-8x16.svg" class="bigWide cr"></object> + <object data="support/colors-8x16.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16.svg" class="bigTall tr"></object> + <object data="support/colors-8x16.svg" class="bigTall bl"></object> + <object data="support/colors-8x16.svg" class="bigTall tl"></object> + <object data="support/colors-8x16.svg" class="bigTall br"></object> + <object data="support/colors-8x16.svg" class="bigTall tc"></object> + <object data="support/colors-8x16.svg" class="bigTall cr"></object> + <object data="support/colors-8x16.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16.svg" class="small tr"></object> + <object data="support/colors-8x16.svg" class="small bl"></object> + <object data="support/colors-8x16.svg" class="small tl"></object> + <object data="support/colors-8x16.svg" class="small br"></object> + <object data="support/colors-8x16.svg" class="small tc"></object> + <object data="support/colors-8x16.svg" class="small cr"></object> + <object data="support/colors-8x16.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002p.html new file mode 100644 index 0000000000..d2527daff0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-002-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16.svg" class="bigWide tr"></video> + <video poster="support/colors-8x16.svg" class="bigWide bl"></video> + <video poster="support/colors-8x16.svg" class="bigWide tl"></video> + <video poster="support/colors-8x16.svg" class="bigWide br"></video> + <video poster="support/colors-8x16.svg" class="bigWide tc"></video> + <video poster="support/colors-8x16.svg" class="bigWide cr"></video> + <video poster="support/colors-8x16.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16.svg" class="bigTall tr"></video> + <video poster="support/colors-8x16.svg" class="bigTall bl"></video> + <video poster="support/colors-8x16.svg" class="bigTall tl"></video> + <video poster="support/colors-8x16.svg" class="bigTall br"></video> + <video poster="support/colors-8x16.svg" class="bigTall tc"></video> + <video poster="support/colors-8x16.svg" class="bigTall cr"></video> + <video poster="support/colors-8x16.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16.svg" class="small tr"></video> + <video poster="support/colors-8x16.svg" class="small bl"></video> + <video poster="support/colors-8x16.svg" class="small tl"></video> + <video poster="support/colors-8x16.svg" class="small br"></video> + <video poster="support/colors-8x16.svg" class="small tc"></video> + <video poster="support/colors-8x16.svg" class="small cr"></video> + <video poster="support/colors-8x16.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003-ref.html new file mode 100644 index 0000000000..ab27b3d717 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8-noSize.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003e.html new file mode 100644 index 0000000000..bc52a6e600 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-003-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8-noSize.svg" class="bigWide tr"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide bl"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide tl"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide br"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide tc"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide cr"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8-noSize.svg" class="bigTall tr"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall bl"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall tl"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall br"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall tc"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall cr"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8-noSize.svg" class="small tr"> + <embed src="support/colors-16x8-noSize.svg" class="small bl"> + <embed src="support/colors-16x8-noSize.svg" class="small tl"> + <embed src="support/colors-16x8-noSize.svg" class="small br"> + <embed src="support/colors-16x8-noSize.svg" class="small tc"> + <embed src="support/colors-16x8-noSize.svg" class="small cr"> + <embed src="support/colors-16x8-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003i.html new file mode 100644 index 0000000000..26e251e66e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-003-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8-noSize.svg" class="bigWide tr"> + <img src="support/colors-16x8-noSize.svg" class="bigWide bl"> + <img src="support/colors-16x8-noSize.svg" class="bigWide tl"> + <img src="support/colors-16x8-noSize.svg" class="bigWide br"> + <img src="support/colors-16x8-noSize.svg" class="bigWide tc"> + <img src="support/colors-16x8-noSize.svg" class="bigWide cr"> + <img src="support/colors-16x8-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8-noSize.svg" class="bigTall tr"> + <img src="support/colors-16x8-noSize.svg" class="bigTall bl"> + <img src="support/colors-16x8-noSize.svg" class="bigTall tl"> + <img src="support/colors-16x8-noSize.svg" class="bigTall br"> + <img src="support/colors-16x8-noSize.svg" class="bigTall tc"> + <img src="support/colors-16x8-noSize.svg" class="bigTall cr"> + <img src="support/colors-16x8-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8-noSize.svg" class="small tr"> + <img src="support/colors-16x8-noSize.svg" class="small bl"> + <img src="support/colors-16x8-noSize.svg" class="small tl"> + <img src="support/colors-16x8-noSize.svg" class="small br"> + <img src="support/colors-16x8-noSize.svg" class="small tc"> + <img src="support/colors-16x8-noSize.svg" class="small cr"> + <img src="support/colors-16x8-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003o.html new file mode 100644 index 0000000000..dabf5685f0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-003-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8-noSize.svg" class="small tr"></object> + <object data="support/colors-16x8-noSize.svg" class="small bl"></object> + <object data="support/colors-16x8-noSize.svg" class="small tl"></object> + <object data="support/colors-16x8-noSize.svg" class="small br"></object> + <object data="support/colors-16x8-noSize.svg" class="small tc"></object> + <object data="support/colors-16x8-noSize.svg" class="small cr"></object> + <object data="support/colors-16x8-noSize.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003p.html new file mode 100644 index 0000000000..a8fd8c21a8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-003-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8-noSize.svg" class="small tr"></video> + <video poster="support/colors-16x8-noSize.svg" class="small bl"></video> + <video poster="support/colors-16x8-noSize.svg" class="small tl"></video> + <video poster="support/colors-16x8-noSize.svg" class="small br"></video> + <video poster="support/colors-16x8-noSize.svg" class="small tc"></video> + <video poster="support/colors-16x8-noSize.svg" class="small cr"></video> + <video poster="support/colors-16x8-noSize.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004-ref.html new file mode 100644 index 0000000000..70c9487960 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16-noSize.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004e.html new file mode 100644 index 0000000000..4127215084 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-004-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16-noSize.svg" class="bigWide tr"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide bl"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide tl"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide br"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide tc"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide cr"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16-noSize.svg" class="bigTall tr"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall bl"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall tl"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall br"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall tc"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall cr"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16-noSize.svg" class="small tr"> + <embed src="support/colors-8x16-noSize.svg" class="small bl"> + <embed src="support/colors-8x16-noSize.svg" class="small tl"> + <embed src="support/colors-8x16-noSize.svg" class="small br"> + <embed src="support/colors-8x16-noSize.svg" class="small tc"> + <embed src="support/colors-8x16-noSize.svg" class="small cr"> + <embed src="support/colors-8x16-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004i.html new file mode 100644 index 0000000000..483849c1ed --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-004-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16-noSize.svg" class="bigWide tr"> + <img src="support/colors-8x16-noSize.svg" class="bigWide bl"> + <img src="support/colors-8x16-noSize.svg" class="bigWide tl"> + <img src="support/colors-8x16-noSize.svg" class="bigWide br"> + <img src="support/colors-8x16-noSize.svg" class="bigWide tc"> + <img src="support/colors-8x16-noSize.svg" class="bigWide cr"> + <img src="support/colors-8x16-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16-noSize.svg" class="bigTall tr"> + <img src="support/colors-8x16-noSize.svg" class="bigTall bl"> + <img src="support/colors-8x16-noSize.svg" class="bigTall tl"> + <img src="support/colors-8x16-noSize.svg" class="bigTall br"> + <img src="support/colors-8x16-noSize.svg" class="bigTall tc"> + <img src="support/colors-8x16-noSize.svg" class="bigTall cr"> + <img src="support/colors-8x16-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16-noSize.svg" class="small tr"> + <img src="support/colors-8x16-noSize.svg" class="small bl"> + <img src="support/colors-8x16-noSize.svg" class="small tl"> + <img src="support/colors-8x16-noSize.svg" class="small br"> + <img src="support/colors-8x16-noSize.svg" class="small tc"> + <img src="support/colors-8x16-noSize.svg" class="small cr"> + <img src="support/colors-8x16-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004o.html new file mode 100644 index 0000000000..4236112d53 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-004-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16-noSize.svg" class="small tr"></object> + <object data="support/colors-8x16-noSize.svg" class="small bl"></object> + <object data="support/colors-8x16-noSize.svg" class="small tl"></object> + <object data="support/colors-8x16-noSize.svg" class="small br"></object> + <object data="support/colors-8x16-noSize.svg" class="small tc"></object> + <object data="support/colors-8x16-noSize.svg" class="small cr"></object> + <object data="support/colors-8x16-noSize.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004p.html new file mode 100644 index 0000000000..6032b19e31 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-004-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16-noSize.svg" class="small tr"></video> + <video poster="support/colors-8x16-noSize.svg" class="small bl"></video> + <video poster="support/colors-8x16-noSize.svg" class="small tl"></video> + <video poster="support/colors-8x16-noSize.svg" class="small br"></video> + <video poster="support/colors-8x16-noSize.svg" class="small tc"></video> + <video poster="support/colors-8x16-noSize.svg" class="small cr"></video> + <video poster="support/colors-8x16-noSize.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005-ref.html new file mode 100644 index 0000000000..c8e4ce1e7d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8-parDefault.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005e.html new file mode 100644 index 0000000000..8dc338e2f3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-005-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide br"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall br"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8-parDefault.svg" class="small tr"> + <embed src="support/colors-16x8-parDefault.svg" class="small bl"> + <embed src="support/colors-16x8-parDefault.svg" class="small tl"> + <embed src="support/colors-16x8-parDefault.svg" class="small br"> + <embed src="support/colors-16x8-parDefault.svg" class="small tc"> + <embed src="support/colors-16x8-parDefault.svg" class="small cr"> + <embed src="support/colors-16x8-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005i.html new file mode 100644 index 0000000000..67d086d35d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-005-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8-parDefault.svg" class="bigWide tr"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide bl"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide tl"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide br"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide tc"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide cr"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8-parDefault.svg" class="bigTall tr"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall bl"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall tl"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall br"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall tc"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall cr"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8-parDefault.svg" class="small tr"> + <img src="support/colors-16x8-parDefault.svg" class="small bl"> + <img src="support/colors-16x8-parDefault.svg" class="small tl"> + <img src="support/colors-16x8-parDefault.svg" class="small br"> + <img src="support/colors-16x8-parDefault.svg" class="small tc"> + <img src="support/colors-16x8-parDefault.svg" class="small cr"> + <img src="support/colors-16x8-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005o.html new file mode 100644 index 0000000000..ca9ba1c6b4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-005-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8-parDefault.svg" class="small tr"></object> + <object data="support/colors-16x8-parDefault.svg" class="small bl"></object> + <object data="support/colors-16x8-parDefault.svg" class="small tl"></object> + <object data="support/colors-16x8-parDefault.svg" class="small br"></object> + <object data="support/colors-16x8-parDefault.svg" class="small tc"></object> + <object data="support/colors-16x8-parDefault.svg" class="small cr"></object> + <object data="support/colors-16x8-parDefault.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005p.html new file mode 100644 index 0000000000..54402d8c03 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-005-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small br"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006-ref.html new file mode 100644 index 0000000000..85883fe9dc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16-parDefault.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006e.html new file mode 100644 index 0000000000..a5cb343167 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-006-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide br"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall br"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16-parDefault.svg" class="small tr"> + <embed src="support/colors-8x16-parDefault.svg" class="small bl"> + <embed src="support/colors-8x16-parDefault.svg" class="small tl"> + <embed src="support/colors-8x16-parDefault.svg" class="small br"> + <embed src="support/colors-8x16-parDefault.svg" class="small tc"> + <embed src="support/colors-8x16-parDefault.svg" class="small cr"> + <embed src="support/colors-8x16-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006i.html new file mode 100644 index 0000000000..eceb363da3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-006-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16-parDefault.svg" class="bigWide tr"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide bl"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide tl"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide br"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide tc"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide cr"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16-parDefault.svg" class="bigTall tr"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall bl"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall tl"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall br"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall tc"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall cr"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16-parDefault.svg" class="small tr"> + <img src="support/colors-8x16-parDefault.svg" class="small bl"> + <img src="support/colors-8x16-parDefault.svg" class="small tl"> + <img src="support/colors-8x16-parDefault.svg" class="small br"> + <img src="support/colors-8x16-parDefault.svg" class="small tc"> + <img src="support/colors-8x16-parDefault.svg" class="small cr"> + <img src="support/colors-8x16-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006o.html new file mode 100644 index 0000000000..05a3339158 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-006-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16-parDefault.svg" class="small tr"></object> + <object data="support/colors-8x16-parDefault.svg" class="small bl"></object> + <object data="support/colors-8x16-parDefault.svg" class="small tl"></object> + <object data="support/colors-8x16-parDefault.svg" class="small br"></object> + <object data="support/colors-8x16-parDefault.svg" class="small tc"></object> + <object data="support/colors-8x16-parDefault.svg" class="small cr"></object> + <object data="support/colors-8x16-parDefault.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006p.html new file mode 100644 index 0000000000..c8e9ff2c10 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-fill-svg-006-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small br"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001-ref.html new file mode 100644 index 0000000000..3b151feba0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8.png"); + background-size: auto auto; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001c.html new file mode 100644 index 0000000000..c984fefb7e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001c.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on canvas element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-png-001-ref.html"> + <style type="text/css"> + canvas { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + <script> + function drawImageToCanvases(imageURI) { + var image = new Image(); + image.onload = function() { + var canvasElems = document.getElementsByTagName("canvas"); + for (var i = 0; i < canvasElems.length; i++) { + var ctx = canvasElems[i].getContext("2d"); + ctx.drawImage(image, 0, 0); + } + document.documentElement.removeAttribute("class"); + } + image.src = imageURI; + } + </script> + </head> + <body onload="drawImageToCanvases('support/colors-16x8.png')"> + <!-- big/wide: --> + <canvas width="16" height="8" class="bigWide tr"></canvas> + <canvas width="16" height="8" class="bigWide bl"></canvas> + <canvas width="16" height="8" class="bigWide tl"></canvas> + <canvas width="16" height="8" class="bigWide br"></canvas> + <canvas width="16" height="8" class="bigWide tc"></canvas> + <canvas width="16" height="8" class="bigWide cr"></canvas> + <canvas width="16" height="8" class="bigWide"></canvas> + <br> + <!-- big/tall: --> + <canvas width="16" height="8" class="bigTall tr"></canvas> + <canvas width="16" height="8" class="bigTall bl"></canvas> + <canvas width="16" height="8" class="bigTall tl"></canvas> + <canvas width="16" height="8" class="bigTall br"></canvas> + <canvas width="16" height="8" class="bigTall tc"></canvas> + <canvas width="16" height="8" class="bigTall cr"></canvas> + <canvas width="16" height="8" class="bigTall"></canvas> + <br> + <!-- small: --> + <canvas width="16" height="8" class="small tr"></canvas> + <canvas width="16" height="8" class="small bl"></canvas> + <canvas width="16" height="8" class="small tl"></canvas> + <canvas width="16" height="8" class="small br"></canvas> + <canvas width="16" height="8" class="small tc"></canvas> + <canvas width="16" height="8" class="small cr"></canvas> + <canvas width="16" height="8" class="small"></canvas> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001e.html new file mode 100644 index 0000000000..22417890c5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001e.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on embed element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-png-001-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8.png" class="bigWide tr"> + <embed src="support/colors-16x8.png" class="bigWide bl"> + <embed src="support/colors-16x8.png" class="bigWide tl"> + <embed src="support/colors-16x8.png" class="bigWide br"> + <embed src="support/colors-16x8.png" class="bigWide tc"> + <embed src="support/colors-16x8.png" class="bigWide cr"> + <embed src="support/colors-16x8.png" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8.png" class="bigTall tr"> + <embed src="support/colors-16x8.png" class="bigTall bl"> + <embed src="support/colors-16x8.png" class="bigTall tl"> + <embed src="support/colors-16x8.png" class="bigTall br"> + <embed src="support/colors-16x8.png" class="bigTall tc"> + <embed src="support/colors-16x8.png" class="bigTall cr"> + <embed src="support/colors-16x8.png" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8.png" class="small tr"> + <embed src="support/colors-16x8.png" class="small bl"> + <embed src="support/colors-16x8.png" class="small tl"> + <embed src="support/colors-16x8.png" class="small br"> + <embed src="support/colors-16x8.png" class="small tc"> + <embed src="support/colors-16x8.png" class="small cr"> + <embed src="support/colors-16x8.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001i.html new file mode 100644 index 0000000000..200ac3dafb --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001i.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on img element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-png-001-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8.png" class="bigWide tr"> + <img src="support/colors-16x8.png" class="bigWide bl"> + <img src="support/colors-16x8.png" class="bigWide tl"> + <img src="support/colors-16x8.png" class="bigWide br"> + <img src="support/colors-16x8.png" class="bigWide tc"> + <img src="support/colors-16x8.png" class="bigWide cr"> + <img src="support/colors-16x8.png" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8.png" class="bigTall tr"> + <img src="support/colors-16x8.png" class="bigTall bl"> + <img src="support/colors-16x8.png" class="bigTall tl"> + <img src="support/colors-16x8.png" class="bigTall br"> + <img src="support/colors-16x8.png" class="bigTall tc"> + <img src="support/colors-16x8.png" class="bigTall cr"> + <img src="support/colors-16x8.png" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8.png" class="small tr"> + <img src="support/colors-16x8.png" class="small bl"> + <img src="support/colors-16x8.png" class="small tl"> + <img src="support/colors-16x8.png" class="small br"> + <img src="support/colors-16x8.png" class="small tc"> + <img src="support/colors-16x8.png" class="small cr"> + <img src="support/colors-16x8.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001o.html new file mode 100644 index 0000000000..4b2659a2db --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001o.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on object element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-png-001-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8.png" class="bigWide tr"></object> + <object data="support/colors-16x8.png" class="bigWide bl"></object> + <object data="support/colors-16x8.png" class="bigWide tl"></object> + <object data="support/colors-16x8.png" class="bigWide br"></object> + <object data="support/colors-16x8.png" class="bigWide tc"></object> + <object data="support/colors-16x8.png" class="bigWide cr"></object> + <object data="support/colors-16x8.png" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8.png" class="bigTall tr"></object> + <object data="support/colors-16x8.png" class="bigTall bl"></object> + <object data="support/colors-16x8.png" class="bigTall tl"></object> + <object data="support/colors-16x8.png" class="bigTall br"></object> + <object data="support/colors-16x8.png" class="bigTall tc"></object> + <object data="support/colors-16x8.png" class="bigTall cr"></object> + <object data="support/colors-16x8.png" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8.png" class="small tr"></object> + <object data="support/colors-16x8.png" class="small bl"></object> + <object data="support/colors-16x8.png" class="small tl"></object> + <object data="support/colors-16x8.png" class="small br"></object> + <object data="support/colors-16x8.png" class="small tc"></object> + <object data="support/colors-16x8.png" class="small cr"></object> + <object data="support/colors-16x8.png" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001p.html new file mode 100644 index 0000000000..3e18c7960d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001p.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on video element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-png-001-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8.png" class="bigWide tr"></video> + <video poster="support/colors-16x8.png" class="bigWide bl"></video> + <video poster="support/colors-16x8.png" class="bigWide tl"></video> + <video poster="support/colors-16x8.png" class="bigWide br"></video> + <video poster="support/colors-16x8.png" class="bigWide tc"></video> + <video poster="support/colors-16x8.png" class="bigWide cr"></video> + <video poster="support/colors-16x8.png" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8.png" class="bigTall tr"></video> + <video poster="support/colors-16x8.png" class="bigTall bl"></video> + <video poster="support/colors-16x8.png" class="bigTall tl"></video> + <video poster="support/colors-16x8.png" class="bigTall br"></video> + <video poster="support/colors-16x8.png" class="bigTall tc"></video> + <video poster="support/colors-16x8.png" class="bigTall cr"></video> + <video poster="support/colors-16x8.png" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8.png" class="small tr"></video> + <video poster="support/colors-16x8.png" class="small bl"></video> + <video poster="support/colors-16x8.png" class="small tl"></video> + <video poster="support/colors-16x8.png" class="small br"></video> + <video poster="support/colors-16x8.png" class="small tc"></video> + <video poster="support/colors-16x8.png" class="small cr"></video> + <video poster="support/colors-16x8.png" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002-ref.html new file mode 100644 index 0000000000..f3a914f773 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16.png"); + background-size: auto auto; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002c.html new file mode 100644 index 0000000000..df58f407df --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002c.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on canvas element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-png-002-ref.html"> + <style type="text/css"> + canvas { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + <script> + function drawImageToCanvases(imageURI) { + var image = new Image(); + image.onload = function() { + var canvasElems = document.getElementsByTagName("canvas"); + for (var i = 0; i < canvasElems.length; i++) { + var ctx = canvasElems[i].getContext("2d"); + ctx.drawImage(image, 0, 0); + } + document.documentElement.removeAttribute("class"); + } + image.src = imageURI; + } + </script> + </head> + <body onload="drawImageToCanvases('support/colors-8x16.png')"> + <!-- big/wide: --> + <canvas width="8" height="16" class="bigWide tr"></canvas> + <canvas width="8" height="16" class="bigWide bl"></canvas> + <canvas width="8" height="16" class="bigWide tl"></canvas> + <canvas width="8" height="16" class="bigWide br"></canvas> + <canvas width="8" height="16" class="bigWide tc"></canvas> + <canvas width="8" height="16" class="bigWide cr"></canvas> + <canvas width="8" height="16" class="bigWide"></canvas> + <br> + <!-- big/tall: --> + <canvas width="8" height="16" class="bigTall tr"></canvas> + <canvas width="8" height="16" class="bigTall bl"></canvas> + <canvas width="8" height="16" class="bigTall tl"></canvas> + <canvas width="8" height="16" class="bigTall br"></canvas> + <canvas width="8" height="16" class="bigTall tc"></canvas> + <canvas width="8" height="16" class="bigTall cr"></canvas> + <canvas width="8" height="16" class="bigTall"></canvas> + <br> + <!-- small: --> + <canvas width="8" height="16" class="small tr"></canvas> + <canvas width="8" height="16" class="small bl"></canvas> + <canvas width="8" height="16" class="small tl"></canvas> + <canvas width="8" height="16" class="small br"></canvas> + <canvas width="8" height="16" class="small tc"></canvas> + <canvas width="8" height="16" class="small cr"></canvas> + <canvas width="8" height="16" class="small"></canvas> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002e.html new file mode 100644 index 0000000000..9d91465238 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002e.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on embed element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-png-002-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16.png" class="bigWide tr"> + <embed src="support/colors-8x16.png" class="bigWide bl"> + <embed src="support/colors-8x16.png" class="bigWide tl"> + <embed src="support/colors-8x16.png" class="bigWide br"> + <embed src="support/colors-8x16.png" class="bigWide tc"> + <embed src="support/colors-8x16.png" class="bigWide cr"> + <embed src="support/colors-8x16.png" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16.png" class="bigTall tr"> + <embed src="support/colors-8x16.png" class="bigTall bl"> + <embed src="support/colors-8x16.png" class="bigTall tl"> + <embed src="support/colors-8x16.png" class="bigTall br"> + <embed src="support/colors-8x16.png" class="bigTall tc"> + <embed src="support/colors-8x16.png" class="bigTall cr"> + <embed src="support/colors-8x16.png" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16.png" class="small tr"> + <embed src="support/colors-8x16.png" class="small bl"> + <embed src="support/colors-8x16.png" class="small tl"> + <embed src="support/colors-8x16.png" class="small br"> + <embed src="support/colors-8x16.png" class="small tc"> + <embed src="support/colors-8x16.png" class="small cr"> + <embed src="support/colors-8x16.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002i.html new file mode 100644 index 0000000000..57c66a35de --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002i.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on img element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-png-002-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16.png" class="bigWide tr"> + <img src="support/colors-8x16.png" class="bigWide bl"> + <img src="support/colors-8x16.png" class="bigWide tl"> + <img src="support/colors-8x16.png" class="bigWide br"> + <img src="support/colors-8x16.png" class="bigWide tc"> + <img src="support/colors-8x16.png" class="bigWide cr"> + <img src="support/colors-8x16.png" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16.png" class="bigTall tr"> + <img src="support/colors-8x16.png" class="bigTall bl"> + <img src="support/colors-8x16.png" class="bigTall tl"> + <img src="support/colors-8x16.png" class="bigTall br"> + <img src="support/colors-8x16.png" class="bigTall tc"> + <img src="support/colors-8x16.png" class="bigTall cr"> + <img src="support/colors-8x16.png" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16.png" class="small tr"> + <img src="support/colors-8x16.png" class="small bl"> + <img src="support/colors-8x16.png" class="small tl"> + <img src="support/colors-8x16.png" class="small br"> + <img src="support/colors-8x16.png" class="small tc"> + <img src="support/colors-8x16.png" class="small cr"> + <img src="support/colors-8x16.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002o.html new file mode 100644 index 0000000000..a34f947cdc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002o.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on object element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-png-002-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16.png" class="bigWide tr"></object> + <object data="support/colors-8x16.png" class="bigWide bl"></object> + <object data="support/colors-8x16.png" class="bigWide tl"></object> + <object data="support/colors-8x16.png" class="bigWide br"></object> + <object data="support/colors-8x16.png" class="bigWide tc"></object> + <object data="support/colors-8x16.png" class="bigWide cr"></object> + <object data="support/colors-8x16.png" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16.png" class="bigTall tr"></object> + <object data="support/colors-8x16.png" class="bigTall bl"></object> + <object data="support/colors-8x16.png" class="bigTall tl"></object> + <object data="support/colors-8x16.png" class="bigTall br"></object> + <object data="support/colors-8x16.png" class="bigTall tc"></object> + <object data="support/colors-8x16.png" class="bigTall cr"></object> + <object data="support/colors-8x16.png" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16.png" class="small tr"></object> + <object data="support/colors-8x16.png" class="small bl"></object> + <object data="support/colors-8x16.png" class="small tl"></object> + <object data="support/colors-8x16.png" class="small br"></object> + <object data="support/colors-8x16.png" class="small tc"></object> + <object data="support/colors-8x16.png" class="small cr"></object> + <object data="support/colors-8x16.png" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002p.html new file mode 100644 index 0000000000..7b1ee9a7d8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002p.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on video element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-png-002-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16.png" class="bigWide tr"></video> + <video poster="support/colors-8x16.png" class="bigWide bl"></video> + <video poster="support/colors-8x16.png" class="bigWide tl"></video> + <video poster="support/colors-8x16.png" class="bigWide br"></video> + <video poster="support/colors-8x16.png" class="bigWide tc"></video> + <video poster="support/colors-8x16.png" class="bigWide cr"></video> + <video poster="support/colors-8x16.png" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16.png" class="bigTall tr"></video> + <video poster="support/colors-8x16.png" class="bigTall bl"></video> + <video poster="support/colors-8x16.png" class="bigTall tl"></video> + <video poster="support/colors-8x16.png" class="bigTall br"></video> + <video poster="support/colors-8x16.png" class="bigTall tc"></video> + <video poster="support/colors-8x16.png" class="bigTall cr"></video> + <video poster="support/colors-8x16.png" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16.png" class="small tr"></video> + <video poster="support/colors-8x16.png" class="small bl"></video> + <video poster="support/colors-8x16.png" class="small tl"></video> + <video poster="support/colors-8x16.png" class="small br"></video> + <video poster="support/colors-8x16.png" class="small tc"></video> + <video poster="support/colors-8x16.png" class="small cr"></video> + <video poster="support/colors-8x16.png" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001-ref.html new file mode 100644 index 0000000000..3332452df7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001e.html new file mode 100644 index 0000000000..eb40852daa --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-001-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8.svg" class="bigWide tr"> + <embed src="support/colors-16x8.svg" class="bigWide bl"> + <embed src="support/colors-16x8.svg" class="bigWide tl"> + <embed src="support/colors-16x8.svg" class="bigWide br"> + <embed src="support/colors-16x8.svg" class="bigWide tc"> + <embed src="support/colors-16x8.svg" class="bigWide cr"> + <embed src="support/colors-16x8.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8.svg" class="bigTall tr"> + <embed src="support/colors-16x8.svg" class="bigTall bl"> + <embed src="support/colors-16x8.svg" class="bigTall tl"> + <embed src="support/colors-16x8.svg" class="bigTall br"> + <embed src="support/colors-16x8.svg" class="bigTall tc"> + <embed src="support/colors-16x8.svg" class="bigTall cr"> + <embed src="support/colors-16x8.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8.svg" class="small tr"> + <embed src="support/colors-16x8.svg" class="small bl"> + <embed src="support/colors-16x8.svg" class="small tl"> + <embed src="support/colors-16x8.svg" class="small br"> + <embed src="support/colors-16x8.svg" class="small tc"> + <embed src="support/colors-16x8.svg" class="small cr"> + <embed src="support/colors-16x8.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001i.html new file mode 100644 index 0000000000..128f6e4b5b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-001-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8.svg" class="bigWide tr"> + <img src="support/colors-16x8.svg" class="bigWide bl"> + <img src="support/colors-16x8.svg" class="bigWide tl"> + <img src="support/colors-16x8.svg" class="bigWide br"> + <img src="support/colors-16x8.svg" class="bigWide tc"> + <img src="support/colors-16x8.svg" class="bigWide cr"> + <img src="support/colors-16x8.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8.svg" class="bigTall tr"> + <img src="support/colors-16x8.svg" class="bigTall bl"> + <img src="support/colors-16x8.svg" class="bigTall tl"> + <img src="support/colors-16x8.svg" class="bigTall br"> + <img src="support/colors-16x8.svg" class="bigTall tc"> + <img src="support/colors-16x8.svg" class="bigTall cr"> + <img src="support/colors-16x8.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8.svg" class="small tr"> + <img src="support/colors-16x8.svg" class="small bl"> + <img src="support/colors-16x8.svg" class="small tl"> + <img src="support/colors-16x8.svg" class="small br"> + <img src="support/colors-16x8.svg" class="small tc"> + <img src="support/colors-16x8.svg" class="small cr"> + <img src="support/colors-16x8.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001o.html new file mode 100644 index 0000000000..8df5bfb5cf --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-001-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8.svg" class="bigWide tr"></object> + <object data="support/colors-16x8.svg" class="bigWide bl"></object> + <object data="support/colors-16x8.svg" class="bigWide tl"></object> + <object data="support/colors-16x8.svg" class="bigWide br"></object> + <object data="support/colors-16x8.svg" class="bigWide tc"></object> + <object data="support/colors-16x8.svg" class="bigWide cr"></object> + <object data="support/colors-16x8.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8.svg" class="bigTall tr"></object> + <object data="support/colors-16x8.svg" class="bigTall bl"></object> + <object data="support/colors-16x8.svg" class="bigTall tl"></object> + <object data="support/colors-16x8.svg" class="bigTall br"></object> + <object data="support/colors-16x8.svg" class="bigTall tc"></object> + <object data="support/colors-16x8.svg" class="bigTall cr"></object> + <object data="support/colors-16x8.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8.svg" class="small tr"></object> + <object data="support/colors-16x8.svg" class="small bl"></object> + <object data="support/colors-16x8.svg" class="small tl"></object> + <object data="support/colors-16x8.svg" class="small br"></object> + <object data="support/colors-16x8.svg" class="small tc"></object> + <object data="support/colors-16x8.svg" class="small cr"></object> + <object data="support/colors-16x8.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001p.html new file mode 100644 index 0000000000..9e82eb5e40 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-001-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8.svg" class="bigWide tr"></video> + <video poster="support/colors-16x8.svg" class="bigWide bl"></video> + <video poster="support/colors-16x8.svg" class="bigWide tl"></video> + <video poster="support/colors-16x8.svg" class="bigWide br"></video> + <video poster="support/colors-16x8.svg" class="bigWide tc"></video> + <video poster="support/colors-16x8.svg" class="bigWide cr"></video> + <video poster="support/colors-16x8.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8.svg" class="bigTall tr"></video> + <video poster="support/colors-16x8.svg" class="bigTall bl"></video> + <video poster="support/colors-16x8.svg" class="bigTall tl"></video> + <video poster="support/colors-16x8.svg" class="bigTall br"></video> + <video poster="support/colors-16x8.svg" class="bigTall tc"></video> + <video poster="support/colors-16x8.svg" class="bigTall cr"></video> + <video poster="support/colors-16x8.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8.svg" class="small tr"></video> + <video poster="support/colors-16x8.svg" class="small bl"></video> + <video poster="support/colors-16x8.svg" class="small tl"></video> + <video poster="support/colors-16x8.svg" class="small br"></video> + <video poster="support/colors-16x8.svg" class="small tc"></video> + <video poster="support/colors-16x8.svg" class="small cr"></video> + <video poster="support/colors-16x8.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002-ref.html new file mode 100644 index 0000000000..0e48003ec0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002e.html new file mode 100644 index 0000000000..e7055bb3fd --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-002-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16.svg" class="bigWide tr"> + <embed src="support/colors-8x16.svg" class="bigWide bl"> + <embed src="support/colors-8x16.svg" class="bigWide tl"> + <embed src="support/colors-8x16.svg" class="bigWide br"> + <embed src="support/colors-8x16.svg" class="bigWide tc"> + <embed src="support/colors-8x16.svg" class="bigWide cr"> + <embed src="support/colors-8x16.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16.svg" class="bigTall tr"> + <embed src="support/colors-8x16.svg" class="bigTall bl"> + <embed src="support/colors-8x16.svg" class="bigTall tl"> + <embed src="support/colors-8x16.svg" class="bigTall br"> + <embed src="support/colors-8x16.svg" class="bigTall tc"> + <embed src="support/colors-8x16.svg" class="bigTall cr"> + <embed src="support/colors-8x16.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16.svg" class="small tr"> + <embed src="support/colors-8x16.svg" class="small bl"> + <embed src="support/colors-8x16.svg" class="small tl"> + <embed src="support/colors-8x16.svg" class="small br"> + <embed src="support/colors-8x16.svg" class="small tc"> + <embed src="support/colors-8x16.svg" class="small cr"> + <embed src="support/colors-8x16.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002i.html new file mode 100644 index 0000000000..dbcba47ca8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-002-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16.svg" class="bigWide tr"> + <img src="support/colors-8x16.svg" class="bigWide bl"> + <img src="support/colors-8x16.svg" class="bigWide tl"> + <img src="support/colors-8x16.svg" class="bigWide br"> + <img src="support/colors-8x16.svg" class="bigWide tc"> + <img src="support/colors-8x16.svg" class="bigWide cr"> + <img src="support/colors-8x16.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16.svg" class="bigTall tr"> + <img src="support/colors-8x16.svg" class="bigTall bl"> + <img src="support/colors-8x16.svg" class="bigTall tl"> + <img src="support/colors-8x16.svg" class="bigTall br"> + <img src="support/colors-8x16.svg" class="bigTall tc"> + <img src="support/colors-8x16.svg" class="bigTall cr"> + <img src="support/colors-8x16.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16.svg" class="small tr"> + <img src="support/colors-8x16.svg" class="small bl"> + <img src="support/colors-8x16.svg" class="small tl"> + <img src="support/colors-8x16.svg" class="small br"> + <img src="support/colors-8x16.svg" class="small tc"> + <img src="support/colors-8x16.svg" class="small cr"> + <img src="support/colors-8x16.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002o.html new file mode 100644 index 0000000000..c6d017bb82 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-002-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16.svg" class="bigWide tr"></object> + <object data="support/colors-8x16.svg" class="bigWide bl"></object> + <object data="support/colors-8x16.svg" class="bigWide tl"></object> + <object data="support/colors-8x16.svg" class="bigWide br"></object> + <object data="support/colors-8x16.svg" class="bigWide tc"></object> + <object data="support/colors-8x16.svg" class="bigWide cr"></object> + <object data="support/colors-8x16.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16.svg" class="bigTall tr"></object> + <object data="support/colors-8x16.svg" class="bigTall bl"></object> + <object data="support/colors-8x16.svg" class="bigTall tl"></object> + <object data="support/colors-8x16.svg" class="bigTall br"></object> + <object data="support/colors-8x16.svg" class="bigTall tc"></object> + <object data="support/colors-8x16.svg" class="bigTall cr"></object> + <object data="support/colors-8x16.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16.svg" class="small tr"></object> + <object data="support/colors-8x16.svg" class="small bl"></object> + <object data="support/colors-8x16.svg" class="small tl"></object> + <object data="support/colors-8x16.svg" class="small br"></object> + <object data="support/colors-8x16.svg" class="small tc"></object> + <object data="support/colors-8x16.svg" class="small cr"></object> + <object data="support/colors-8x16.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002p.html new file mode 100644 index 0000000000..69fa424931 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-002-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16.svg" class="bigWide tr"></video> + <video poster="support/colors-8x16.svg" class="bigWide bl"></video> + <video poster="support/colors-8x16.svg" class="bigWide tl"></video> + <video poster="support/colors-8x16.svg" class="bigWide br"></video> + <video poster="support/colors-8x16.svg" class="bigWide tc"></video> + <video poster="support/colors-8x16.svg" class="bigWide cr"></video> + <video poster="support/colors-8x16.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16.svg" class="bigTall tr"></video> + <video poster="support/colors-8x16.svg" class="bigTall bl"></video> + <video poster="support/colors-8x16.svg" class="bigTall tl"></video> + <video poster="support/colors-8x16.svg" class="bigTall br"></video> + <video poster="support/colors-8x16.svg" class="bigTall tc"></video> + <video poster="support/colors-8x16.svg" class="bigTall cr"></video> + <video poster="support/colors-8x16.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16.svg" class="small tr"></video> + <video poster="support/colors-8x16.svg" class="small bl"></video> + <video poster="support/colors-8x16.svg" class="small tl"></video> + <video poster="support/colors-8x16.svg" class="small br"></video> + <video poster="support/colors-8x16.svg" class="small tc"></video> + <video poster="support/colors-8x16.svg" class="small cr"></video> + <video poster="support/colors-8x16.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003-ref.html new file mode 100644 index 0000000000..33a01176fa --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8-noSize.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003e.html new file mode 100644 index 0000000000..f90d1f8c7c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-003-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8-noSize.svg" class="bigWide tr"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide bl"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide tl"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide br"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide tc"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide cr"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8-noSize.svg" class="bigTall tr"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall bl"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall tl"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall br"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall tc"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall cr"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8-noSize.svg" class="small tr"> + <embed src="support/colors-16x8-noSize.svg" class="small bl"> + <embed src="support/colors-16x8-noSize.svg" class="small tl"> + <embed src="support/colors-16x8-noSize.svg" class="small br"> + <embed src="support/colors-16x8-noSize.svg" class="small tc"> + <embed src="support/colors-16x8-noSize.svg" class="small cr"> + <embed src="support/colors-16x8-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003i.html new file mode 100644 index 0000000000..769c10b466 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-003-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8-noSize.svg" class="bigWide tr"> + <img src="support/colors-16x8-noSize.svg" class="bigWide bl"> + <img src="support/colors-16x8-noSize.svg" class="bigWide tl"> + <img src="support/colors-16x8-noSize.svg" class="bigWide br"> + <img src="support/colors-16x8-noSize.svg" class="bigWide tc"> + <img src="support/colors-16x8-noSize.svg" class="bigWide cr"> + <img src="support/colors-16x8-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8-noSize.svg" class="bigTall tr"> + <img src="support/colors-16x8-noSize.svg" class="bigTall bl"> + <img src="support/colors-16x8-noSize.svg" class="bigTall tl"> + <img src="support/colors-16x8-noSize.svg" class="bigTall br"> + <img src="support/colors-16x8-noSize.svg" class="bigTall tc"> + <img src="support/colors-16x8-noSize.svg" class="bigTall cr"> + <img src="support/colors-16x8-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8-noSize.svg" class="small tr"> + <img src="support/colors-16x8-noSize.svg" class="small bl"> + <img src="support/colors-16x8-noSize.svg" class="small tl"> + <img src="support/colors-16x8-noSize.svg" class="small br"> + <img src="support/colors-16x8-noSize.svg" class="small tc"> + <img src="support/colors-16x8-noSize.svg" class="small cr"> + <img src="support/colors-16x8-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003o.html new file mode 100644 index 0000000000..04ff94b78f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-003-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8-noSize.svg" class="small tr"></object> + <object data="support/colors-16x8-noSize.svg" class="small bl"></object> + <object data="support/colors-16x8-noSize.svg" class="small tl"></object> + <object data="support/colors-16x8-noSize.svg" class="small br"></object> + <object data="support/colors-16x8-noSize.svg" class="small tc"></object> + <object data="support/colors-16x8-noSize.svg" class="small cr"></object> + <object data="support/colors-16x8-noSize.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003p.html new file mode 100644 index 0000000000..c1963da6e5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-003-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8-noSize.svg" class="small tr"></video> + <video poster="support/colors-16x8-noSize.svg" class="small bl"></video> + <video poster="support/colors-16x8-noSize.svg" class="small tl"></video> + <video poster="support/colors-16x8-noSize.svg" class="small br"></video> + <video poster="support/colors-16x8-noSize.svg" class="small tc"></video> + <video poster="support/colors-16x8-noSize.svg" class="small cr"></video> + <video poster="support/colors-16x8-noSize.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004-ref.html new file mode 100644 index 0000000000..757708cacc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16-noSize.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004e.html new file mode 100644 index 0000000000..e9591d3bdc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-004-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16-noSize.svg" class="bigWide tr"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide bl"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide tl"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide br"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide tc"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide cr"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16-noSize.svg" class="bigTall tr"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall bl"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall tl"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall br"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall tc"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall cr"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16-noSize.svg" class="small tr"> + <embed src="support/colors-8x16-noSize.svg" class="small bl"> + <embed src="support/colors-8x16-noSize.svg" class="small tl"> + <embed src="support/colors-8x16-noSize.svg" class="small br"> + <embed src="support/colors-8x16-noSize.svg" class="small tc"> + <embed src="support/colors-8x16-noSize.svg" class="small cr"> + <embed src="support/colors-8x16-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004i.html new file mode 100644 index 0000000000..d9d0844ab9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-004-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16-noSize.svg" class="bigWide tr"> + <img src="support/colors-8x16-noSize.svg" class="bigWide bl"> + <img src="support/colors-8x16-noSize.svg" class="bigWide tl"> + <img src="support/colors-8x16-noSize.svg" class="bigWide br"> + <img src="support/colors-8x16-noSize.svg" class="bigWide tc"> + <img src="support/colors-8x16-noSize.svg" class="bigWide cr"> + <img src="support/colors-8x16-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16-noSize.svg" class="bigTall tr"> + <img src="support/colors-8x16-noSize.svg" class="bigTall bl"> + <img src="support/colors-8x16-noSize.svg" class="bigTall tl"> + <img src="support/colors-8x16-noSize.svg" class="bigTall br"> + <img src="support/colors-8x16-noSize.svg" class="bigTall tc"> + <img src="support/colors-8x16-noSize.svg" class="bigTall cr"> + <img src="support/colors-8x16-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16-noSize.svg" class="small tr"> + <img src="support/colors-8x16-noSize.svg" class="small bl"> + <img src="support/colors-8x16-noSize.svg" class="small tl"> + <img src="support/colors-8x16-noSize.svg" class="small br"> + <img src="support/colors-8x16-noSize.svg" class="small tc"> + <img src="support/colors-8x16-noSize.svg" class="small cr"> + <img src="support/colors-8x16-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004o.html new file mode 100644 index 0000000000..91c7610cfd --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-004-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16-noSize.svg" class="small tr"></object> + <object data="support/colors-8x16-noSize.svg" class="small bl"></object> + <object data="support/colors-8x16-noSize.svg" class="small tl"></object> + <object data="support/colors-8x16-noSize.svg" class="small br"></object> + <object data="support/colors-8x16-noSize.svg" class="small tc"></object> + <object data="support/colors-8x16-noSize.svg" class="small cr"></object> + <object data="support/colors-8x16-noSize.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004p.html new file mode 100644 index 0000000000..2c9f0c6877 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-004-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16-noSize.svg" class="small tr"></video> + <video poster="support/colors-8x16-noSize.svg" class="small bl"></video> + <video poster="support/colors-8x16-noSize.svg" class="small tl"></video> + <video poster="support/colors-8x16-noSize.svg" class="small br"></video> + <video poster="support/colors-8x16-noSize.svg" class="small tc"></video> + <video poster="support/colors-8x16-noSize.svg" class="small cr"></video> + <video poster="support/colors-8x16-noSize.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005-ref.html new file mode 100644 index 0000000000..c8d70e4e0b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8-parDefault.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005e.html new file mode 100644 index 0000000000..f47196164a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-005-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide br"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall br"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8-parDefault.svg" class="small tr"> + <embed src="support/colors-16x8-parDefault.svg" class="small bl"> + <embed src="support/colors-16x8-parDefault.svg" class="small tl"> + <embed src="support/colors-16x8-parDefault.svg" class="small br"> + <embed src="support/colors-16x8-parDefault.svg" class="small tc"> + <embed src="support/colors-16x8-parDefault.svg" class="small cr"> + <embed src="support/colors-16x8-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005i.html new file mode 100644 index 0000000000..8407e78a7b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-005-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8-parDefault.svg" class="bigWide tr"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide bl"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide tl"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide br"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide tc"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide cr"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8-parDefault.svg" class="bigTall tr"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall bl"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall tl"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall br"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall tc"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall cr"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8-parDefault.svg" class="small tr"> + <img src="support/colors-16x8-parDefault.svg" class="small bl"> + <img src="support/colors-16x8-parDefault.svg" class="small tl"> + <img src="support/colors-16x8-parDefault.svg" class="small br"> + <img src="support/colors-16x8-parDefault.svg" class="small tc"> + <img src="support/colors-16x8-parDefault.svg" class="small cr"> + <img src="support/colors-16x8-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005o.html new file mode 100644 index 0000000000..df31fa2685 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-005-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8-parDefault.svg" class="small tr"></object> + <object data="support/colors-16x8-parDefault.svg" class="small bl"></object> + <object data="support/colors-16x8-parDefault.svg" class="small tl"></object> + <object data="support/colors-16x8-parDefault.svg" class="small br"></object> + <object data="support/colors-16x8-parDefault.svg" class="small tc"></object> + <object data="support/colors-16x8-parDefault.svg" class="small cr"></object> + <object data="support/colors-16x8-parDefault.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005p.html new file mode 100644 index 0000000000..aeafcb200a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-005-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small br"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006-ref.html new file mode 100644 index 0000000000..016ef69615 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16-parDefault.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006e.html new file mode 100644 index 0000000000..f7c0dcdd44 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-006-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide br"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall br"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16-parDefault.svg" class="small tr"> + <embed src="support/colors-8x16-parDefault.svg" class="small bl"> + <embed src="support/colors-8x16-parDefault.svg" class="small tl"> + <embed src="support/colors-8x16-parDefault.svg" class="small br"> + <embed src="support/colors-8x16-parDefault.svg" class="small tc"> + <embed src="support/colors-8x16-parDefault.svg" class="small cr"> + <embed src="support/colors-8x16-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006i.html new file mode 100644 index 0000000000..ea9ea1f799 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-006-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16-parDefault.svg" class="bigWide tr"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide bl"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide tl"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide br"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide tc"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide cr"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16-parDefault.svg" class="bigTall tr"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall bl"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall tl"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall br"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall tc"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall cr"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16-parDefault.svg" class="small tr"> + <img src="support/colors-8x16-parDefault.svg" class="small bl"> + <img src="support/colors-8x16-parDefault.svg" class="small tl"> + <img src="support/colors-8x16-parDefault.svg" class="small br"> + <img src="support/colors-8x16-parDefault.svg" class="small tc"> + <img src="support/colors-8x16-parDefault.svg" class="small cr"> + <img src="support/colors-8x16-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006o.html new file mode 100644 index 0000000000..2fe345923e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-006-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16-parDefault.svg" class="small tr"></object> + <object data="support/colors-8x16-parDefault.svg" class="small bl"></object> + <object data="support/colors-8x16-parDefault.svg" class="small tl"></object> + <object data="support/colors-8x16-parDefault.svg" class="small br"></object> + <object data="support/colors-8x16-parDefault.svg" class="small tc"></object> + <object data="support/colors-8x16-parDefault.svg" class="small cr"></object> + <object data="support/colors-8x16-parDefault.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006p.html new file mode 100644 index 0000000000..47776f29e4 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-none-svg-006-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small br"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001-ref.html new file mode 100644 index 0000000000..a0df585552 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8.png"); + background-size: auto auto; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001c.html new file mode 100644 index 0000000000..d3f7e4289b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001c.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on canvas element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-png-001-ref.html"> + <style type="text/css"> + canvas { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + <script> + function drawImageToCanvases(imageURI) { + var image = new Image(); + image.onload = function() { + var canvasElems = document.getElementsByTagName("canvas"); + for (var i = 0; i < canvasElems.length; i++) { + var ctx = canvasElems[i].getContext("2d"); + ctx.drawImage(image, 0, 0); + } + document.documentElement.removeAttribute("class"); + } + image.src = imageURI; + } + </script> + </head> + <body onload="drawImageToCanvases('support/colors-16x8.png')"> + <!-- big/wide: --> + <canvas width="16" height="8" class="bigWide tr"></canvas> + <canvas width="16" height="8" class="bigWide bl"></canvas> + <canvas width="16" height="8" class="bigWide tl"></canvas> + <canvas width="16" height="8" class="bigWide br"></canvas> + <canvas width="16" height="8" class="bigWide tc"></canvas> + <canvas width="16" height="8" class="bigWide cr"></canvas> + <canvas width="16" height="8" class="bigWide"></canvas> + <br> + <!-- big/tall: --> + <canvas width="16" height="8" class="bigTall tr"></canvas> + <canvas width="16" height="8" class="bigTall bl"></canvas> + <canvas width="16" height="8" class="bigTall tl"></canvas> + <canvas width="16" height="8" class="bigTall br"></canvas> + <canvas width="16" height="8" class="bigTall tc"></canvas> + <canvas width="16" height="8" class="bigTall cr"></canvas> + <canvas width="16" height="8" class="bigTall"></canvas> + <br> + <!-- small: --> + <canvas width="16" height="8" class="small tr"></canvas> + <canvas width="16" height="8" class="small bl"></canvas> + <canvas width="16" height="8" class="small tl"></canvas> + <canvas width="16" height="8" class="small br"></canvas> + <canvas width="16" height="8" class="small tc"></canvas> + <canvas width="16" height="8" class="small cr"></canvas> + <canvas width="16" height="8" class="small"></canvas> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001e.html new file mode 100644 index 0000000000..9950736c0a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001e.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on embed element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-png-001-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8.png" class="bigWide tr"> + <embed src="support/colors-16x8.png" class="bigWide bl"> + <embed src="support/colors-16x8.png" class="bigWide tl"> + <embed src="support/colors-16x8.png" class="bigWide br"> + <embed src="support/colors-16x8.png" class="bigWide tc"> + <embed src="support/colors-16x8.png" class="bigWide cr"> + <embed src="support/colors-16x8.png" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8.png" class="bigTall tr"> + <embed src="support/colors-16x8.png" class="bigTall bl"> + <embed src="support/colors-16x8.png" class="bigTall tl"> + <embed src="support/colors-16x8.png" class="bigTall br"> + <embed src="support/colors-16x8.png" class="bigTall tc"> + <embed src="support/colors-16x8.png" class="bigTall cr"> + <embed src="support/colors-16x8.png" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8.png" class="small tr"> + <embed src="support/colors-16x8.png" class="small bl"> + <embed src="support/colors-16x8.png" class="small tl"> + <embed src="support/colors-16x8.png" class="small br"> + <embed src="support/colors-16x8.png" class="small tc"> + <embed src="support/colors-16x8.png" class="small cr"> + <embed src="support/colors-16x8.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001i.html new file mode 100644 index 0000000000..f7bad02190 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001i.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on img element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-png-001-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8.png" class="bigWide tr"> + <img src="support/colors-16x8.png" class="bigWide bl"> + <img src="support/colors-16x8.png" class="bigWide tl"> + <img src="support/colors-16x8.png" class="bigWide br"> + <img src="support/colors-16x8.png" class="bigWide tc"> + <img src="support/colors-16x8.png" class="bigWide cr"> + <img src="support/colors-16x8.png" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8.png" class="bigTall tr"> + <img src="support/colors-16x8.png" class="bigTall bl"> + <img src="support/colors-16x8.png" class="bigTall tl"> + <img src="support/colors-16x8.png" class="bigTall br"> + <img src="support/colors-16x8.png" class="bigTall tc"> + <img src="support/colors-16x8.png" class="bigTall cr"> + <img src="support/colors-16x8.png" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8.png" class="small tr"> + <img src="support/colors-16x8.png" class="small bl"> + <img src="support/colors-16x8.png" class="small tl"> + <img src="support/colors-16x8.png" class="small br"> + <img src="support/colors-16x8.png" class="small tc"> + <img src="support/colors-16x8.png" class="small cr"> + <img src="support/colors-16x8.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001o.html new file mode 100644 index 0000000000..88fe859d73 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001o.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on object element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-png-001-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8.png" class="bigWide tr"></object> + <object data="support/colors-16x8.png" class="bigWide bl"></object> + <object data="support/colors-16x8.png" class="bigWide tl"></object> + <object data="support/colors-16x8.png" class="bigWide br"></object> + <object data="support/colors-16x8.png" class="bigWide tc"></object> + <object data="support/colors-16x8.png" class="bigWide cr"></object> + <object data="support/colors-16x8.png" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8.png" class="bigTall tr"></object> + <object data="support/colors-16x8.png" class="bigTall bl"></object> + <object data="support/colors-16x8.png" class="bigTall tl"></object> + <object data="support/colors-16x8.png" class="bigTall br"></object> + <object data="support/colors-16x8.png" class="bigTall tc"></object> + <object data="support/colors-16x8.png" class="bigTall cr"></object> + <object data="support/colors-16x8.png" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8.png" class="small tr"></object> + <object data="support/colors-16x8.png" class="small bl"></object> + <object data="support/colors-16x8.png" class="small tl"></object> + <object data="support/colors-16x8.png" class="small br"></object> + <object data="support/colors-16x8.png" class="small tc"></object> + <object data="support/colors-16x8.png" class="small cr"></object> + <object data="support/colors-16x8.png" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001p.html new file mode 100644 index 0000000000..55b24df754 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001p.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on video element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-png-001-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8.png" class="bigWide tr"></video> + <video poster="support/colors-16x8.png" class="bigWide bl"></video> + <video poster="support/colors-16x8.png" class="bigWide tl"></video> + <video poster="support/colors-16x8.png" class="bigWide br"></video> + <video poster="support/colors-16x8.png" class="bigWide tc"></video> + <video poster="support/colors-16x8.png" class="bigWide cr"></video> + <video poster="support/colors-16x8.png" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8.png" class="bigTall tr"></video> + <video poster="support/colors-16x8.png" class="bigTall bl"></video> + <video poster="support/colors-16x8.png" class="bigTall tl"></video> + <video poster="support/colors-16x8.png" class="bigTall br"></video> + <video poster="support/colors-16x8.png" class="bigTall tc"></video> + <video poster="support/colors-16x8.png" class="bigTall cr"></video> + <video poster="support/colors-16x8.png" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8.png" class="small tr"></video> + <video poster="support/colors-16x8.png" class="small bl"></video> + <video poster="support/colors-16x8.png" class="small tl"></video> + <video poster="support/colors-16x8.png" class="small br"></video> + <video poster="support/colors-16x8.png" class="small tc"></video> + <video poster="support/colors-16x8.png" class="small cr"></video> + <video poster="support/colors-16x8.png" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002-ref.html new file mode 100644 index 0000000000..5162493d28 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16.png"); + background-size: auto auto; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002c.html new file mode 100644 index 0000000000..ece408d098 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002c.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on canvas element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-png-002-ref.html"> + <style type="text/css"> + canvas { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + <script> + function drawImageToCanvases(imageURI) { + var image = new Image(); + image.onload = function() { + var canvasElems = document.getElementsByTagName("canvas"); + for (var i = 0; i < canvasElems.length; i++) { + var ctx = canvasElems[i].getContext("2d"); + ctx.drawImage(image, 0, 0); + } + document.documentElement.removeAttribute("class"); + } + image.src = imageURI; + } + </script> + </head> + <body onload="drawImageToCanvases('support/colors-8x16.png')"> + <!-- big/wide: --> + <canvas width="8" height="16" class="bigWide tr"></canvas> + <canvas width="8" height="16" class="bigWide bl"></canvas> + <canvas width="8" height="16" class="bigWide tl"></canvas> + <canvas width="8" height="16" class="bigWide br"></canvas> + <canvas width="8" height="16" class="bigWide tc"></canvas> + <canvas width="8" height="16" class="bigWide cr"></canvas> + <canvas width="8" height="16" class="bigWide"></canvas> + <br> + <!-- big/tall: --> + <canvas width="8" height="16" class="bigTall tr"></canvas> + <canvas width="8" height="16" class="bigTall bl"></canvas> + <canvas width="8" height="16" class="bigTall tl"></canvas> + <canvas width="8" height="16" class="bigTall br"></canvas> + <canvas width="8" height="16" class="bigTall tc"></canvas> + <canvas width="8" height="16" class="bigTall cr"></canvas> + <canvas width="8" height="16" class="bigTall"></canvas> + <br> + <!-- small: --> + <canvas width="8" height="16" class="small tr"></canvas> + <canvas width="8" height="16" class="small bl"></canvas> + <canvas width="8" height="16" class="small tl"></canvas> + <canvas width="8" height="16" class="small br"></canvas> + <canvas width="8" height="16" class="small tc"></canvas> + <canvas width="8" height="16" class="small cr"></canvas> + <canvas width="8" height="16" class="small"></canvas> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002e.html new file mode 100644 index 0000000000..4cd28c91a9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002e.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on embed element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-png-002-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16.png" class="bigWide tr"> + <embed src="support/colors-8x16.png" class="bigWide bl"> + <embed src="support/colors-8x16.png" class="bigWide tl"> + <embed src="support/colors-8x16.png" class="bigWide br"> + <embed src="support/colors-8x16.png" class="bigWide tc"> + <embed src="support/colors-8x16.png" class="bigWide cr"> + <embed src="support/colors-8x16.png" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16.png" class="bigTall tr"> + <embed src="support/colors-8x16.png" class="bigTall bl"> + <embed src="support/colors-8x16.png" class="bigTall tl"> + <embed src="support/colors-8x16.png" class="bigTall br"> + <embed src="support/colors-8x16.png" class="bigTall tc"> + <embed src="support/colors-8x16.png" class="bigTall cr"> + <embed src="support/colors-8x16.png" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16.png" class="small tr"> + <embed src="support/colors-8x16.png" class="small bl"> + <embed src="support/colors-8x16.png" class="small tl"> + <embed src="support/colors-8x16.png" class="small br"> + <embed src="support/colors-8x16.png" class="small tc"> + <embed src="support/colors-8x16.png" class="small cr"> + <embed src="support/colors-8x16.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002i.html new file mode 100644 index 0000000000..db5f385222 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002i.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on img element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-png-002-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16.png" class="bigWide tr"> + <img src="support/colors-8x16.png" class="bigWide bl"> + <img src="support/colors-8x16.png" class="bigWide tl"> + <img src="support/colors-8x16.png" class="bigWide br"> + <img src="support/colors-8x16.png" class="bigWide tc"> + <img src="support/colors-8x16.png" class="bigWide cr"> + <img src="support/colors-8x16.png" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16.png" class="bigTall tr"> + <img src="support/colors-8x16.png" class="bigTall bl"> + <img src="support/colors-8x16.png" class="bigTall tl"> + <img src="support/colors-8x16.png" class="bigTall br"> + <img src="support/colors-8x16.png" class="bigTall tc"> + <img src="support/colors-8x16.png" class="bigTall cr"> + <img src="support/colors-8x16.png" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16.png" class="small tr"> + <img src="support/colors-8x16.png" class="small bl"> + <img src="support/colors-8x16.png" class="small tl"> + <img src="support/colors-8x16.png" class="small br"> + <img src="support/colors-8x16.png" class="small tc"> + <img src="support/colors-8x16.png" class="small cr"> + <img src="support/colors-8x16.png" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002o.html new file mode 100644 index 0000000000..43700fd7a9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002o.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on object element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-png-002-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16.png" class="bigWide tr"></object> + <object data="support/colors-8x16.png" class="bigWide bl"></object> + <object data="support/colors-8x16.png" class="bigWide tl"></object> + <object data="support/colors-8x16.png" class="bigWide br"></object> + <object data="support/colors-8x16.png" class="bigWide tc"></object> + <object data="support/colors-8x16.png" class="bigWide cr"></object> + <object data="support/colors-8x16.png" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16.png" class="bigTall tr"></object> + <object data="support/colors-8x16.png" class="bigTall bl"></object> + <object data="support/colors-8x16.png" class="bigTall tl"></object> + <object data="support/colors-8x16.png" class="bigTall br"></object> + <object data="support/colors-8x16.png" class="bigTall tc"></object> + <object data="support/colors-8x16.png" class="bigTall cr"></object> + <object data="support/colors-8x16.png" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16.png" class="small tr"></object> + <object data="support/colors-8x16.png" class="small bl"></object> + <object data="support/colors-8x16.png" class="small tl"></object> + <object data="support/colors-8x16.png" class="small br"></object> + <object data="support/colors-8x16.png" class="small tc"></object> + <object data="support/colors-8x16.png" class="small cr"></object> + <object data="support/colors-8x16.png" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002p.html new file mode 100644 index 0000000000..7089444b30 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002p.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on video element, with a PNG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-png-002-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16.png" class="bigWide tr"></video> + <video poster="support/colors-8x16.png" class="bigWide bl"></video> + <video poster="support/colors-8x16.png" class="bigWide tl"></video> + <video poster="support/colors-8x16.png" class="bigWide br"></video> + <video poster="support/colors-8x16.png" class="bigWide tc"></video> + <video poster="support/colors-8x16.png" class="bigWide cr"></video> + <video poster="support/colors-8x16.png" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16.png" class="bigTall tr"></video> + <video poster="support/colors-8x16.png" class="bigTall bl"></video> + <video poster="support/colors-8x16.png" class="bigTall tl"></video> + <video poster="support/colors-8x16.png" class="bigTall br"></video> + <video poster="support/colors-8x16.png" class="bigTall tc"></video> + <video poster="support/colors-8x16.png" class="bigTall cr"></video> + <video poster="support/colors-8x16.png" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16.png" class="small tr"></video> + <video poster="support/colors-8x16.png" class="small bl"></video> + <video poster="support/colors-8x16.png" class="small tl"></video> + <video poster="support/colors-8x16.png" class="small br"></video> + <video poster="support/colors-8x16.png" class="small tc"></video> + <video poster="support/colors-8x16.png" class="small cr"></video> + <video poster="support/colors-8x16.png" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001-ref.html new file mode 100644 index 0000000000..1fad02c911 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001e.html new file mode 100644 index 0000000000..0640de4f35 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-001-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8.svg" class="bigWide tr"> + <embed src="support/colors-16x8.svg" class="bigWide bl"> + <embed src="support/colors-16x8.svg" class="bigWide tl"> + <embed src="support/colors-16x8.svg" class="bigWide br"> + <embed src="support/colors-16x8.svg" class="bigWide tc"> + <embed src="support/colors-16x8.svg" class="bigWide cr"> + <embed src="support/colors-16x8.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8.svg" class="bigTall tr"> + <embed src="support/colors-16x8.svg" class="bigTall bl"> + <embed src="support/colors-16x8.svg" class="bigTall tl"> + <embed src="support/colors-16x8.svg" class="bigTall br"> + <embed src="support/colors-16x8.svg" class="bigTall tc"> + <embed src="support/colors-16x8.svg" class="bigTall cr"> + <embed src="support/colors-16x8.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8.svg" class="small tr"> + <embed src="support/colors-16x8.svg" class="small bl"> + <embed src="support/colors-16x8.svg" class="small tl"> + <embed src="support/colors-16x8.svg" class="small br"> + <embed src="support/colors-16x8.svg" class="small tc"> + <embed src="support/colors-16x8.svg" class="small cr"> + <embed src="support/colors-16x8.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001i.html new file mode 100644 index 0000000000..0e5954b8d7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-001-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8.svg" class="bigWide tr"> + <img src="support/colors-16x8.svg" class="bigWide bl"> + <img src="support/colors-16x8.svg" class="bigWide tl"> + <img src="support/colors-16x8.svg" class="bigWide br"> + <img src="support/colors-16x8.svg" class="bigWide tc"> + <img src="support/colors-16x8.svg" class="bigWide cr"> + <img src="support/colors-16x8.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8.svg" class="bigTall tr"> + <img src="support/colors-16x8.svg" class="bigTall bl"> + <img src="support/colors-16x8.svg" class="bigTall tl"> + <img src="support/colors-16x8.svg" class="bigTall br"> + <img src="support/colors-16x8.svg" class="bigTall tc"> + <img src="support/colors-16x8.svg" class="bigTall cr"> + <img src="support/colors-16x8.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8.svg" class="small tr"> + <img src="support/colors-16x8.svg" class="small bl"> + <img src="support/colors-16x8.svg" class="small tl"> + <img src="support/colors-16x8.svg" class="small br"> + <img src="support/colors-16x8.svg" class="small tc"> + <img src="support/colors-16x8.svg" class="small cr"> + <img src="support/colors-16x8.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001o.html new file mode 100644 index 0000000000..15f19bb185 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-001-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8.svg" class="bigWide tr"></object> + <object data="support/colors-16x8.svg" class="bigWide bl"></object> + <object data="support/colors-16x8.svg" class="bigWide tl"></object> + <object data="support/colors-16x8.svg" class="bigWide br"></object> + <object data="support/colors-16x8.svg" class="bigWide tc"></object> + <object data="support/colors-16x8.svg" class="bigWide cr"></object> + <object data="support/colors-16x8.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8.svg" class="bigTall tr"></object> + <object data="support/colors-16x8.svg" class="bigTall bl"></object> + <object data="support/colors-16x8.svg" class="bigTall tl"></object> + <object data="support/colors-16x8.svg" class="bigTall br"></object> + <object data="support/colors-16x8.svg" class="bigTall tc"></object> + <object data="support/colors-16x8.svg" class="bigTall cr"></object> + <object data="support/colors-16x8.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8.svg" class="small tr"></object> + <object data="support/colors-16x8.svg" class="small bl"></object> + <object data="support/colors-16x8.svg" class="small tl"></object> + <object data="support/colors-16x8.svg" class="small br"></object> + <object data="support/colors-16x8.svg" class="small tc"></object> + <object data="support/colors-16x8.svg" class="small cr"></object> + <object data="support/colors-16x8.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001p.html new file mode 100644 index 0000000000..b542433699 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-001-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8.svg" class="bigWide tr"></video> + <video poster="support/colors-16x8.svg" class="bigWide bl"></video> + <video poster="support/colors-16x8.svg" class="bigWide tl"></video> + <video poster="support/colors-16x8.svg" class="bigWide br"></video> + <video poster="support/colors-16x8.svg" class="bigWide tc"></video> + <video poster="support/colors-16x8.svg" class="bigWide cr"></video> + <video poster="support/colors-16x8.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8.svg" class="bigTall tr"></video> + <video poster="support/colors-16x8.svg" class="bigTall bl"></video> + <video poster="support/colors-16x8.svg" class="bigTall tl"></video> + <video poster="support/colors-16x8.svg" class="bigTall br"></video> + <video poster="support/colors-16x8.svg" class="bigTall tc"></video> + <video poster="support/colors-16x8.svg" class="bigTall cr"></video> + <video poster="support/colors-16x8.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8.svg" class="small tr"></video> + <video poster="support/colors-16x8.svg" class="small bl"></video> + <video poster="support/colors-16x8.svg" class="small tl"></video> + <video poster="support/colors-16x8.svg" class="small br"></video> + <video poster="support/colors-16x8.svg" class="small tc"></video> + <video poster="support/colors-16x8.svg" class="small cr"></video> + <video poster="support/colors-16x8.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002-ref.html new file mode 100644 index 0000000000..03d4f4c939 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002e.html new file mode 100644 index 0000000000..813ab7ad4d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-002-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16.svg" class="bigWide tr"> + <embed src="support/colors-8x16.svg" class="bigWide bl"> + <embed src="support/colors-8x16.svg" class="bigWide tl"> + <embed src="support/colors-8x16.svg" class="bigWide br"> + <embed src="support/colors-8x16.svg" class="bigWide tc"> + <embed src="support/colors-8x16.svg" class="bigWide cr"> + <embed src="support/colors-8x16.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16.svg" class="bigTall tr"> + <embed src="support/colors-8x16.svg" class="bigTall bl"> + <embed src="support/colors-8x16.svg" class="bigTall tl"> + <embed src="support/colors-8x16.svg" class="bigTall br"> + <embed src="support/colors-8x16.svg" class="bigTall tc"> + <embed src="support/colors-8x16.svg" class="bigTall cr"> + <embed src="support/colors-8x16.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16.svg" class="small tr"> + <embed src="support/colors-8x16.svg" class="small bl"> + <embed src="support/colors-8x16.svg" class="small tl"> + <embed src="support/colors-8x16.svg" class="small br"> + <embed src="support/colors-8x16.svg" class="small tc"> + <embed src="support/colors-8x16.svg" class="small cr"> + <embed src="support/colors-8x16.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002i.html new file mode 100644 index 0000000000..107ad01921 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-002-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16.svg" class="bigWide tr"> + <img src="support/colors-8x16.svg" class="bigWide bl"> + <img src="support/colors-8x16.svg" class="bigWide tl"> + <img src="support/colors-8x16.svg" class="bigWide br"> + <img src="support/colors-8x16.svg" class="bigWide tc"> + <img src="support/colors-8x16.svg" class="bigWide cr"> + <img src="support/colors-8x16.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16.svg" class="bigTall tr"> + <img src="support/colors-8x16.svg" class="bigTall bl"> + <img src="support/colors-8x16.svg" class="bigTall tl"> + <img src="support/colors-8x16.svg" class="bigTall br"> + <img src="support/colors-8x16.svg" class="bigTall tc"> + <img src="support/colors-8x16.svg" class="bigTall cr"> + <img src="support/colors-8x16.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16.svg" class="small tr"> + <img src="support/colors-8x16.svg" class="small bl"> + <img src="support/colors-8x16.svg" class="small tl"> + <img src="support/colors-8x16.svg" class="small br"> + <img src="support/colors-8x16.svg" class="small tc"> + <img src="support/colors-8x16.svg" class="small cr"> + <img src="support/colors-8x16.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002o.html new file mode 100644 index 0000000000..7c9c9be8ce --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-002-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16.svg" class="bigWide tr"></object> + <object data="support/colors-8x16.svg" class="bigWide bl"></object> + <object data="support/colors-8x16.svg" class="bigWide tl"></object> + <object data="support/colors-8x16.svg" class="bigWide br"></object> + <object data="support/colors-8x16.svg" class="bigWide tc"></object> + <object data="support/colors-8x16.svg" class="bigWide cr"></object> + <object data="support/colors-8x16.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16.svg" class="bigTall tr"></object> + <object data="support/colors-8x16.svg" class="bigTall bl"></object> + <object data="support/colors-8x16.svg" class="bigTall tl"></object> + <object data="support/colors-8x16.svg" class="bigTall br"></object> + <object data="support/colors-8x16.svg" class="bigTall tc"></object> + <object data="support/colors-8x16.svg" class="bigTall cr"></object> + <object data="support/colors-8x16.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16.svg" class="small tr"></object> + <object data="support/colors-8x16.svg" class="small bl"></object> + <object data="support/colors-8x16.svg" class="small tl"></object> + <object data="support/colors-8x16.svg" class="small br"></object> + <object data="support/colors-8x16.svg" class="small tc"></object> + <object data="support/colors-8x16.svg" class="small cr"></object> + <object data="support/colors-8x16.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002p.html new file mode 100644 index 0000000000..78bce1974f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-002-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16.svg" class="bigWide tr"></video> + <video poster="support/colors-8x16.svg" class="bigWide bl"></video> + <video poster="support/colors-8x16.svg" class="bigWide tl"></video> + <video poster="support/colors-8x16.svg" class="bigWide br"></video> + <video poster="support/colors-8x16.svg" class="bigWide tc"></video> + <video poster="support/colors-8x16.svg" class="bigWide cr"></video> + <video poster="support/colors-8x16.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16.svg" class="bigTall tr"></video> + <video poster="support/colors-8x16.svg" class="bigTall bl"></video> + <video poster="support/colors-8x16.svg" class="bigTall tl"></video> + <video poster="support/colors-8x16.svg" class="bigTall br"></video> + <video poster="support/colors-8x16.svg" class="bigTall tc"></video> + <video poster="support/colors-8x16.svg" class="bigTall cr"></video> + <video poster="support/colors-8x16.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16.svg" class="small tr"></video> + <video poster="support/colors-8x16.svg" class="small bl"></video> + <video poster="support/colors-8x16.svg" class="small tl"></video> + <video poster="support/colors-8x16.svg" class="small br"></video> + <video poster="support/colors-8x16.svg" class="small tc"></video> + <video poster="support/colors-8x16.svg" class="small cr"></video> + <video poster="support/colors-8x16.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003-ref.html new file mode 100644 index 0000000000..18883dc9a3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8-noSize.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003e.html new file mode 100644 index 0000000000..65121fcf59 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-003-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8-noSize.svg" class="bigWide tr"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide bl"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide tl"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide br"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide tc"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide cr"> + <embed src="support/colors-16x8-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8-noSize.svg" class="bigTall tr"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall bl"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall tl"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall br"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall tc"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall cr"> + <embed src="support/colors-16x8-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8-noSize.svg" class="small tr"> + <embed src="support/colors-16x8-noSize.svg" class="small bl"> + <embed src="support/colors-16x8-noSize.svg" class="small tl"> + <embed src="support/colors-16x8-noSize.svg" class="small br"> + <embed src="support/colors-16x8-noSize.svg" class="small tc"> + <embed src="support/colors-16x8-noSize.svg" class="small cr"> + <embed src="support/colors-16x8-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003i.html new file mode 100644 index 0000000000..1e683fcb78 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-003-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8-noSize.svg" class="bigWide tr"> + <img src="support/colors-16x8-noSize.svg" class="bigWide bl"> + <img src="support/colors-16x8-noSize.svg" class="bigWide tl"> + <img src="support/colors-16x8-noSize.svg" class="bigWide br"> + <img src="support/colors-16x8-noSize.svg" class="bigWide tc"> + <img src="support/colors-16x8-noSize.svg" class="bigWide cr"> + <img src="support/colors-16x8-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8-noSize.svg" class="bigTall tr"> + <img src="support/colors-16x8-noSize.svg" class="bigTall bl"> + <img src="support/colors-16x8-noSize.svg" class="bigTall tl"> + <img src="support/colors-16x8-noSize.svg" class="bigTall br"> + <img src="support/colors-16x8-noSize.svg" class="bigTall tc"> + <img src="support/colors-16x8-noSize.svg" class="bigTall cr"> + <img src="support/colors-16x8-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8-noSize.svg" class="small tr"> + <img src="support/colors-16x8-noSize.svg" class="small bl"> + <img src="support/colors-16x8-noSize.svg" class="small tl"> + <img src="support/colors-16x8-noSize.svg" class="small br"> + <img src="support/colors-16x8-noSize.svg" class="small tc"> + <img src="support/colors-16x8-noSize.svg" class="small cr"> + <img src="support/colors-16x8-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003o.html new file mode 100644 index 0000000000..78023f789e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-003-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object> + <object data="support/colors-16x8-noSize.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8-noSize.svg" class="small tr"></object> + <object data="support/colors-16x8-noSize.svg" class="small bl"></object> + <object data="support/colors-16x8-noSize.svg" class="small tl"></object> + <object data="support/colors-16x8-noSize.svg" class="small br"></object> + <object data="support/colors-16x8-noSize.svg" class="small tc"></object> + <object data="support/colors-16x8-noSize.svg" class="small cr"></object> + <object data="support/colors-16x8-noSize.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003p.html new file mode 100644 index 0000000000..7070e08a32 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-003-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video> + <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8-noSize.svg" class="small tr"></video> + <video poster="support/colors-16x8-noSize.svg" class="small bl"></video> + <video poster="support/colors-16x8-noSize.svg" class="small tl"></video> + <video poster="support/colors-16x8-noSize.svg" class="small br"></video> + <video poster="support/colors-16x8-noSize.svg" class="small tc"></video> + <video poster="support/colors-16x8-noSize.svg" class="small cr"></video> + <video poster="support/colors-16x8-noSize.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004-ref.html new file mode 100644 index 0000000000..126b62ed34 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16-noSize.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004e.html new file mode 100644 index 0000000000..cdf7ef12b3 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-004-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16-noSize.svg" class="bigWide tr"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide bl"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide tl"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide br"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide tc"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide cr"> + <embed src="support/colors-8x16-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16-noSize.svg" class="bigTall tr"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall bl"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall tl"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall br"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall tc"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall cr"> + <embed src="support/colors-8x16-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16-noSize.svg" class="small tr"> + <embed src="support/colors-8x16-noSize.svg" class="small bl"> + <embed src="support/colors-8x16-noSize.svg" class="small tl"> + <embed src="support/colors-8x16-noSize.svg" class="small br"> + <embed src="support/colors-8x16-noSize.svg" class="small tc"> + <embed src="support/colors-8x16-noSize.svg" class="small cr"> + <embed src="support/colors-8x16-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004i.html new file mode 100644 index 0000000000..57d2183ff0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-004-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16-noSize.svg" class="bigWide tr"> + <img src="support/colors-8x16-noSize.svg" class="bigWide bl"> + <img src="support/colors-8x16-noSize.svg" class="bigWide tl"> + <img src="support/colors-8x16-noSize.svg" class="bigWide br"> + <img src="support/colors-8x16-noSize.svg" class="bigWide tc"> + <img src="support/colors-8x16-noSize.svg" class="bigWide cr"> + <img src="support/colors-8x16-noSize.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16-noSize.svg" class="bigTall tr"> + <img src="support/colors-8x16-noSize.svg" class="bigTall bl"> + <img src="support/colors-8x16-noSize.svg" class="bigTall tl"> + <img src="support/colors-8x16-noSize.svg" class="bigTall br"> + <img src="support/colors-8x16-noSize.svg" class="bigTall tc"> + <img src="support/colors-8x16-noSize.svg" class="bigTall cr"> + <img src="support/colors-8x16-noSize.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16-noSize.svg" class="small tr"> + <img src="support/colors-8x16-noSize.svg" class="small bl"> + <img src="support/colors-8x16-noSize.svg" class="small tl"> + <img src="support/colors-8x16-noSize.svg" class="small br"> + <img src="support/colors-8x16-noSize.svg" class="small tc"> + <img src="support/colors-8x16-noSize.svg" class="small cr"> + <img src="support/colors-8x16-noSize.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004o.html new file mode 100644 index 0000000000..ee0ebfd2fb --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-004-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object> + <object data="support/colors-8x16-noSize.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16-noSize.svg" class="small tr"></object> + <object data="support/colors-8x16-noSize.svg" class="small bl"></object> + <object data="support/colors-8x16-noSize.svg" class="small tl"></object> + <object data="support/colors-8x16-noSize.svg" class="small br"></object> + <object data="support/colors-8x16-noSize.svg" class="small tc"></object> + <object data="support/colors-8x16-noSize.svg" class="small cr"></object> + <object data="support/colors-8x16-noSize.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004p.html new file mode 100644 index 0000000000..f7388b6a96 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-004-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video> + <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16-noSize.svg" class="small tr"></video> + <video poster="support/colors-8x16-noSize.svg" class="small bl"></video> + <video poster="support/colors-8x16-noSize.svg" class="small tl"></video> + <video poster="support/colors-8x16-noSize.svg" class="small br"></video> + <video poster="support/colors-8x16-noSize.svg" class="small tc"></video> + <video poster="support/colors-8x16-noSize.svg" class="small cr"></video> + <video poster="support/colors-8x16-noSize.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005-ref.html new file mode 100644 index 0000000000..a107fb4641 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-16x8-parDefault.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005e.html new file mode 100644 index 0000000000..1e09aee168 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-005-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide br"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall br"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr"> + <embed src="support/colors-16x8-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-16x8-parDefault.svg" class="small tr"> + <embed src="support/colors-16x8-parDefault.svg" class="small bl"> + <embed src="support/colors-16x8-parDefault.svg" class="small tl"> + <embed src="support/colors-16x8-parDefault.svg" class="small br"> + <embed src="support/colors-16x8-parDefault.svg" class="small tc"> + <embed src="support/colors-16x8-parDefault.svg" class="small cr"> + <embed src="support/colors-16x8-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005i.html new file mode 100644 index 0000000000..dd5c82b9e9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-005-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-16x8-parDefault.svg" class="bigWide tr"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide bl"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide tl"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide br"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide tc"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide cr"> + <img src="support/colors-16x8-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-16x8-parDefault.svg" class="bigTall tr"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall bl"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall tl"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall br"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall tc"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall cr"> + <img src="support/colors-16x8-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-16x8-parDefault.svg" class="small tr"> + <img src="support/colors-16x8-parDefault.svg" class="small bl"> + <img src="support/colors-16x8-parDefault.svg" class="small tl"> + <img src="support/colors-16x8-parDefault.svg" class="small br"> + <img src="support/colors-16x8-parDefault.svg" class="small tc"> + <img src="support/colors-16x8-parDefault.svg" class="small cr"> + <img src="support/colors-16x8-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005o.html new file mode 100644 index 0000000000..108d97f286 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-005-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-16x8-parDefault.svg" class="small tr"></object> + <object data="support/colors-16x8-parDefault.svg" class="small bl"></object> + <object data="support/colors-16x8-parDefault.svg" class="small tl"></object> + <object data="support/colors-16x8-parDefault.svg" class="small br"></object> + <object data="support/colors-16x8-parDefault.svg" class="small tc"></object> + <object data="support/colors-16x8-parDefault.svg" class="small cr"></object> + <object data="support/colors-16x8-parDefault.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005p.html new file mode 100644 index 0000000000..56cbaba985 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-005-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small br"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video> + <video poster="support/colors-16x8-parDefault.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006-ref.html new file mode 100644 index 0000000000..4a06d37b5c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("support/colors-8x16-parDefault.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006e.html new file mode 100644 index 0000000000..9e6b0dc2c9 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006e.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-006-ref.html"> + <style type="text/css"> + embed { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide br"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall br"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr"> + <embed src="support/colors-8x16-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <embed src="support/colors-8x16-parDefault.svg" class="small tr"> + <embed src="support/colors-8x16-parDefault.svg" class="small bl"> + <embed src="support/colors-8x16-parDefault.svg" class="small tl"> + <embed src="support/colors-8x16-parDefault.svg" class="small br"> + <embed src="support/colors-8x16-parDefault.svg" class="small tc"> + <embed src="support/colors-8x16-parDefault.svg" class="small cr"> + <embed src="support/colors-8x16-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006i.html new file mode 100644 index 0000000000..29c2f227ad --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006i.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-006-ref.html"> + <style type="text/css"> + img { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <img src="support/colors-8x16-parDefault.svg" class="bigWide tr"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide bl"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide tl"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide br"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide tc"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide cr"> + <img src="support/colors-8x16-parDefault.svg" class="bigWide"> + <br> + <!-- big/tall: --> + <img src="support/colors-8x16-parDefault.svg" class="bigTall tr"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall bl"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall tl"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall br"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall tc"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall cr"> + <img src="support/colors-8x16-parDefault.svg" class="bigTall"> + <br> + <!-- small: --> + <img src="support/colors-8x16-parDefault.svg" class="small tr"> + <img src="support/colors-8x16-parDefault.svg" class="small bl"> + <img src="support/colors-8x16-parDefault.svg" class="small tl"> + <img src="support/colors-8x16-parDefault.svg" class="small br"> + <img src="support/colors-8x16-parDefault.svg" class="small tc"> + <img src="support/colors-8x16-parDefault.svg" class="small cr"> + <img src="support/colors-8x16-parDefault.svg" class="small"> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006o.html new file mode 100644 index 0000000000..43358a9b62 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006o.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-006-ref.html"> + <style type="text/css"> + object { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object> + <br> + <!-- big/tall: --> + <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object> + <br> + <!-- small: --> + <object data="support/colors-8x16-parDefault.svg" class="small tr"></object> + <object data="support/colors-8x16-parDefault.svg" class="small bl"></object> + <object data="support/colors-8x16-parDefault.svg" class="small tl"></object> + <object data="support/colors-8x16-parDefault.svg" class="small br"></object> + <object data="support/colors-8x16-parDefault.svg" class="small tc"></object> + <object data="support/colors-8x16-parDefault.svg" class="small cr"></object> + <object data="support/colors-8x16-parDefault.svg" class="small"></object> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006p.html new file mode 100644 index 0000000000..fe35065b2b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006p.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-fit-scale-down-svg-006-ref.html"> + <style type="text/css"> + video { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video> + <br> + <!-- big/tall: --> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video> + <br> + <!-- small: --> + <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small br"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video> + <video poster="support/colors-8x16-parDefault.svg" class="small"></video> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001-ref.html new file mode 100644 index 0000000000..1027cfc35c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001-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"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + div { + background: lightgray; + margin-right: 2px; + background-image: url("support/colors-16x8.png"); + background-size: contain; + background-repeat: no-repeat; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { background-position: 50% -7% } + .op_y13 { background-position: 50% 13% } + .op_y23 { background-position: 50% 23% } + .op_y50 { background-position: 50% 50% } + .op_y75 { background-position: 50% 75% } + .op_y88 { background-position: 50% 88% } + .op_y111 { background-position: 50% 111% } + + </style> + </head> + <body> + <div class="op_y-7"></div> + <div class="op_y13"></div> + <div class="op_y23"></div> + <div class="op_y50"></div> + <div class="op_y75"></div> + <div class="op_y88"></div> + <div class="op_y111"></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001c.html new file mode 100644 index 0000000000..20ff1cb935 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001c.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size canvas element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-001-ref.html"> + <style type="text/css"> + canvas { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { object-position: 50% -7% } + .op_y13 { object-position: 50% 13% } + .op_y23 { object-position: 50% 23% } + .op_y50 { object-position: 50% 50% } + .op_y75 { object-position: 50% 75% } + .op_y88 { object-position: 50% 88% } + .op_y111 { object-position: 50% 111% } + + </style> + <script> + function drawImageToCanvases(imageURI) { + var image = new Image(); + image.onload = function() { + var canvasElems = document.getElementsByTagName("canvas"); + for (var i = 0; i < canvasElems.length; i++) { + var ctx = canvasElems[i].getContext("2d"); + ctx.drawImage(image, 0, 0); + } + document.documentElement.removeAttribute("class"); + } + image.src = imageURI; + } + </script> + </head> + <body onload="drawImageToCanvases('support/colors-16x8.png')"> + <canvas width="16" height="8" class="op_y-7"></canvas> + <canvas width="16" height="8" class="op_y13"></canvas> + <canvas width="16" height="8" class="op_y23"></canvas> + <canvas width="16" height="8" class="op_y50"></canvas> + <canvas width="16" height="8" class="op_y75"></canvas> + <canvas width="16" height="8" class="op_y88"></canvas> + <canvas width="16" height="8" class="op_y111"></canvas> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001e.html new file mode 100644 index 0000000000..cdf35a1fc7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001e.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size embed element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-001-ref.html"> + <style type="text/css"> + embed { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { object-position: 50% -7% } + .op_y13 { object-position: 50% 13% } + .op_y23 { object-position: 50% 23% } + .op_y50 { object-position: 50% 50% } + .op_y75 { object-position: 50% 75% } + .op_y88 { object-position: 50% 88% } + .op_y111 { object-position: 50% 111% } + + </style> + </head> + <body> + <embed src="support/colors-16x8.png" class="op_y-7"> + <embed src="support/colors-16x8.png" class="op_y13"> + <embed src="support/colors-16x8.png" class="op_y23"> + <embed src="support/colors-16x8.png" class="op_y50"> + <embed src="support/colors-16x8.png" class="op_y75"> + <embed src="support/colors-16x8.png" class="op_y88"> + <embed src="support/colors-16x8.png" class="op_y111"> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001i.html new file mode 100644 index 0000000000..d3e2622b40 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001i.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size img element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-001-ref.html"> + <style type="text/css"> + img { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { object-position: 50% -7% } + .op_y13 { object-position: 50% 13% } + .op_y23 { object-position: 50% 23% } + .op_y50 { object-position: 50% 50% } + .op_y75 { object-position: 50% 75% } + .op_y88 { object-position: 50% 88% } + .op_y111 { object-position: 50% 111% } + + </style> + </head> + <body> + <img src="support/colors-16x8.png" class="op_y-7"> + <img src="support/colors-16x8.png" class="op_y13"> + <img src="support/colors-16x8.png" class="op_y23"> + <img src="support/colors-16x8.png" class="op_y50"> + <img src="support/colors-16x8.png" class="op_y75"> + <img src="support/colors-16x8.png" class="op_y88"> + <img src="support/colors-16x8.png" class="op_y111"> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001o.html new file mode 100644 index 0000000000..cdf0e0b530 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001o.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size object element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-001-ref.html"> + <style type="text/css"> + object { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { object-position: 50% -7% } + .op_y13 { object-position: 50% 13% } + .op_y23 { object-position: 50% 23% } + .op_y50 { object-position: 50% 50% } + .op_y75 { object-position: 50% 75% } + .op_y88 { object-position: 50% 88% } + .op_y111 { object-position: 50% 111% } + + </style> + </head> + <body> + <object data="support/colors-16x8.png" class="op_y-7"></object> + <object data="support/colors-16x8.png" class="op_y13"></object> + <object data="support/colors-16x8.png" class="op_y23"></object> + <object data="support/colors-16x8.png" class="op_y50"></object> + <object data="support/colors-16x8.png" class="op_y75"></object> + <object data="support/colors-16x8.png" class="op_y88"></object> + <object data="support/colors-16x8.png" class="op_y111"></object> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001p.html new file mode 100644 index 0000000000..8b80b9c5bf --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001p.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size video element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-001-ref.html"> + <style type="text/css"> + video { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { object-position: 50% -7% } + .op_y13 { object-position: 50% 13% } + .op_y23 { object-position: 50% 23% } + .op_y50 { object-position: 50% 50% } + .op_y75 { object-position: 50% 75% } + .op_y88 { object-position: 50% 88% } + .op_y111 { object-position: 50% 111% } + + </style> + </head> + <body> + <video poster="support/colors-16x8.png" class="op_y-7"></video> + <video poster="support/colors-16x8.png" class="op_y13"></video> + <video poster="support/colors-16x8.png" class="op_y23"></video> + <video poster="support/colors-16x8.png" class="op_y50"></video> + <video poster="support/colors-16x8.png" class="op_y75"></video> + <video poster="support/colors-16x8.png" class="op_y88"></video> + <video poster="support/colors-16x8.png" class="op_y111"></video> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002-ref.html new file mode 100644 index 0000000000..bd14f9cfc5 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002-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"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + div { + background: lightgray; + margin-right: 2px; + background-image: url("support/colors-8x16.png"); + background-size: contain; + background-repeat: no-repeat; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { background-position: -7% 50% } + .op_x13 { background-position: 13% 50% } + .op_x23 { background-position: 23% 50% } + .op_x50 { background-position: 50% 50% } + .op_x75 { background-position: 75% 50% } + .op_x88 { background-position: 88% 50% } + .op_x111 { background-position: 111% 50% } + + </style> + </head> + <body> + <div class="op_x-7"></div> + <div class="op_x13"></div> + <div class="op_x23"></div> + <div class="op_x50"></div> + <div class="op_x75"></div> + <div class="op_x88"></div> + <div class="op_x111"></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002c.html new file mode 100644 index 0000000000..5ad030ffb6 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002c.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size canvas element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-002-ref.html"> + <style type="text/css"> + canvas { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { object-position: -7% 50% } + .op_x13 { object-position: 13% 50% } + .op_x23 { object-position: 23% 50% } + .op_x50 { object-position: 50% 50% } + .op_x75 { object-position: 75% 50% } + .op_x88 { object-position: 88% 50% } + .op_x111 { object-position: 111% 50% } + + </style> + <script> + function drawImageToCanvases(imageURI) { + var image = new Image(); + image.onload = function() { + var canvasElems = document.getElementsByTagName("canvas"); + for (var i = 0; i < canvasElems.length; i++) { + var ctx = canvasElems[i].getContext("2d"); + ctx.drawImage(image, 0, 0); + } + document.documentElement.removeAttribute("class"); + } + image.src = imageURI; + } + </script> + </head> + <body onload="drawImageToCanvases('support/colors-8x16.png')"> + <canvas width="8" height="16" class="op_x-7"></canvas> + <canvas width="8" height="16" class="op_x13"></canvas> + <canvas width="8" height="16" class="op_x23"></canvas> + <canvas width="8" height="16" class="op_x50"></canvas> + <canvas width="8" height="16" class="op_x75"></canvas> + <canvas width="8" height="16" class="op_x88"></canvas> + <canvas width="8" height="16" class="op_x111"></canvas> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002e.html new file mode 100644 index 0000000000..749948ae4c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002e.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size embed element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-002-ref.html"> + <style type="text/css"> + embed { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { object-position: -7% 50% } + .op_x13 { object-position: 13% 50% } + .op_x23 { object-position: 23% 50% } + .op_x50 { object-position: 50% 50% } + .op_x75 { object-position: 75% 50% } + .op_x88 { object-position: 88% 50% } + .op_x111 { object-position: 111% 50% } + + </style> + </head> + <body> + <embed src="support/colors-8x16.png" class="op_x-7"> + <embed src="support/colors-8x16.png" class="op_x13"> + <embed src="support/colors-8x16.png" class="op_x23"> + <embed src="support/colors-8x16.png" class="op_x50"> + <embed src="support/colors-8x16.png" class="op_x75"> + <embed src="support/colors-8x16.png" class="op_x88"> + <embed src="support/colors-8x16.png" class="op_x111"> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002i.html new file mode 100644 index 0000000000..88b4a15001 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002i.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size img element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-002-ref.html"> + <style type="text/css"> + img { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { object-position: -7% 50% } + .op_x13 { object-position: 13% 50% } + .op_x23 { object-position: 23% 50% } + .op_x50 { object-position: 50% 50% } + .op_x75 { object-position: 75% 50% } + .op_x88 { object-position: 88% 50% } + .op_x111 { object-position: 111% 50% } + + </style> + </head> + <body> + <img src="support/colors-8x16.png" class="op_x-7"> + <img src="support/colors-8x16.png" class="op_x13"> + <img src="support/colors-8x16.png" class="op_x23"> + <img src="support/colors-8x16.png" class="op_x50"> + <img src="support/colors-8x16.png" class="op_x75"> + <img src="support/colors-8x16.png" class="op_x88"> + <img src="support/colors-8x16.png" class="op_x111"> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002o.html new file mode 100644 index 0000000000..0d507900f8 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002o.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size object element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-002-ref.html"> + <style type="text/css"> + object { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { object-position: -7% 50% } + .op_x13 { object-position: 13% 50% } + .op_x23 { object-position: 23% 50% } + .op_x50 { object-position: 50% 50% } + .op_x75 { object-position: 75% 50% } + .op_x88 { object-position: 88% 50% } + .op_x111 { object-position: 111% 50% } + + </style> + </head> + <body> + <object data="support/colors-8x16.png" class="op_x-7"></object> + <object data="support/colors-8x16.png" class="op_x13"></object> + <object data="support/colors-8x16.png" class="op_x23"></object> + <object data="support/colors-8x16.png" class="op_x50"></object> + <object data="support/colors-8x16.png" class="op_x75"></object> + <object data="support/colors-8x16.png" class="op_x88"></object> + <object data="support/colors-8x16.png" class="op_x111"></object> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002p.html new file mode 100644 index 0000000000..00ace782bc --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002p.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size video element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-002-ref.html"> + <style type="text/css"> + video { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { object-position: -7% 50% } + .op_x13 { object-position: 13% 50% } + .op_x23 { object-position: 23% 50% } + .op_x50 { object-position: 50% 50% } + .op_x75 { object-position: 75% 50% } + .op_x88 { object-position: 88% 50% } + .op_x111 { object-position: 111% 50% } + + </style> + </head> + <body> + <video poster="support/colors-8x16.png" class="op_x-7"></video> + <video poster="support/colors-8x16.png" class="op_x13"></video> + <video poster="support/colors-8x16.png" class="op_x23"></video> + <video poster="support/colors-8x16.png" class="op_x50"></video> + <video poster="support/colors-8x16.png" class="op_x75"></video> + <video poster="support/colors-8x16.png" class="op_x88"></video> + <video poster="support/colors-8x16.png" class="op_x111"></video> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001-ref.html new file mode 100644 index 0000000000..61c386d88f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001-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"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + div { + background: lightgray; + margin-right: 2px; + background-image: url("support/colors-16x8.svg"); + background-size: contain; + background-repeat: no-repeat; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { background-position: 50% -7% } + .op_y13 { background-position: 50% 13% } + .op_y23 { background-position: 50% 23% } + .op_y50 { background-position: 50% 50% } + .op_y75 { background-position: 50% 75% } + .op_y88 { background-position: 50% 88% } + .op_y111 { background-position: 50% 111% } + + </style> + </head> + <body> + <div class="op_y-7"></div> + <div class="op_y13"></div> + <div class="op_y23"></div> + <div class="op_y50"></div> + <div class="op_y75"></div> + <div class="op_y88"></div> + <div class="op_y111"></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001e.html new file mode 100644 index 0000000000..05f226cd88 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001e.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size embed element, with a SVG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-svg-001-ref.html"> + <style type="text/css"> + embed { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { object-position: 50% -7% } + .op_y13 { object-position: 50% 13% } + .op_y23 { object-position: 50% 23% } + .op_y50 { object-position: 50% 50% } + .op_y75 { object-position: 50% 75% } + .op_y88 { object-position: 50% 88% } + .op_y111 { object-position: 50% 111% } + + </style> + </head> + <body> + <embed src="support/colors-16x8.svg" class="op_y-7"> + <embed src="support/colors-16x8.svg" class="op_y13"> + <embed src="support/colors-16x8.svg" class="op_y23"> + <embed src="support/colors-16x8.svg" class="op_y50"> + <embed src="support/colors-16x8.svg" class="op_y75"> + <embed src="support/colors-16x8.svg" class="op_y88"> + <embed src="support/colors-16x8.svg" class="op_y111"> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001i.html new file mode 100644 index 0000000000..eecf0f4330 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001i.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size img element, with a SVG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-svg-001-ref.html"> + <style type="text/css"> + img { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { object-position: 50% -7% } + .op_y13 { object-position: 50% 13% } + .op_y23 { object-position: 50% 23% } + .op_y50 { object-position: 50% 50% } + .op_y75 { object-position: 50% 75% } + .op_y88 { object-position: 50% 88% } + .op_y111 { object-position: 50% 111% } + + </style> + </head> + <body> + <img src="support/colors-16x8.svg" class="op_y-7"> + <img src="support/colors-16x8.svg" class="op_y13"> + <img src="support/colors-16x8.svg" class="op_y23"> + <img src="support/colors-16x8.svg" class="op_y50"> + <img src="support/colors-16x8.svg" class="op_y75"> + <img src="support/colors-16x8.svg" class="op_y88"> + <img src="support/colors-16x8.svg" class="op_y111"> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001o.html new file mode 100644 index 0000000000..589999c91f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001o.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size object element, with a SVG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-svg-001-ref.html"> + <style type="text/css"> + object { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { object-position: 50% -7% } + .op_y13 { object-position: 50% 13% } + .op_y23 { object-position: 50% 23% } + .op_y50 { object-position: 50% 50% } + .op_y75 { object-position: 50% 75% } + .op_y88 { object-position: 50% 88% } + .op_y111 { object-position: 50% 111% } + + </style> + </head> + <body> + <object data="support/colors-16x8.svg" class="op_y-7"></object> + <object data="support/colors-16x8.svg" class="op_y13"></object> + <object data="support/colors-16x8.svg" class="op_y23"></object> + <object data="support/colors-16x8.svg" class="op_y50"></object> + <object data="support/colors-16x8.svg" class="op_y75"></object> + <object data="support/colors-16x8.svg" class="op_y88"></object> + <object data="support/colors-16x8.svg" class="op_y111"></object> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001p.html new file mode 100644 index 0000000000..8b0b468b2f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001p.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size video element, with a SVG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-svg-001-ref.html"> + <style type="text/css"> + video { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { object-position: 50% -7% } + .op_y13 { object-position: 50% 13% } + .op_y23 { object-position: 50% 23% } + .op_y50 { object-position: 50% 50% } + .op_y75 { object-position: 50% 75% } + .op_y88 { object-position: 50% 88% } + .op_y111 { object-position: 50% 111% } + + </style> + </head> + <body> + <video poster="support/colors-16x8.svg" class="op_y-7"></video> + <video poster="support/colors-16x8.svg" class="op_y13"></video> + <video poster="support/colors-16x8.svg" class="op_y23"></video> + <video poster="support/colors-16x8.svg" class="op_y50"></video> + <video poster="support/colors-16x8.svg" class="op_y75"></video> + <video poster="support/colors-16x8.svg" class="op_y88"></video> + <video poster="support/colors-16x8.svg" class="op_y111"></video> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002-ref.html new file mode 100644 index 0000000000..d75e5edb7c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002-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"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + div { + background: lightgray; + margin-right: 2px; + background-image: url("support/colors-8x16.svg"); + background-size: contain; + background-repeat: no-repeat; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { background-position: -7% 50% } + .op_x13 { background-position: 13% 50% } + .op_x23 { background-position: 23% 50% } + .op_x50 { background-position: 50% 50% } + .op_x75 { background-position: 75% 50% } + .op_x88 { background-position: 88% 50% } + .op_x111 { background-position: 111% 50% } + + </style> + </head> + <body> + <div class="op_x-7"></div> + <div class="op_x13"></div> + <div class="op_x23"></div> + <div class="op_x50"></div> + <div class="op_x75"></div> + <div class="op_x88"></div> + <div class="op_x111"></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002e.html new file mode 100644 index 0000000000..0bde50d0ca --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002e.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size embed element, with a SVG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-svg-002-ref.html"> + <style type="text/css"> + embed { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { object-position: -7% 50% } + .op_x13 { object-position: 13% 50% } + .op_x23 { object-position: 23% 50% } + .op_x50 { object-position: 50% 50% } + .op_x75 { object-position: 75% 50% } + .op_x88 { object-position: 88% 50% } + .op_x111 { object-position: 111% 50% } + + </style> + </head> + <body> + <embed src="support/colors-8x16.svg" class="op_x-7"> + <embed src="support/colors-8x16.svg" class="op_x13"> + <embed src="support/colors-8x16.svg" class="op_x23"> + <embed src="support/colors-8x16.svg" class="op_x50"> + <embed src="support/colors-8x16.svg" class="op_x75"> + <embed src="support/colors-8x16.svg" class="op_x88"> + <embed src="support/colors-8x16.svg" class="op_x111"> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002i.html new file mode 100644 index 0000000000..202b171c3a --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002i.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size img element, with a SVG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-svg-002-ref.html"> + <style type="text/css"> + img { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { object-position: -7% 50% } + .op_x13 { object-position: 13% 50% } + .op_x23 { object-position: 23% 50% } + .op_x50 { object-position: 50% 50% } + .op_x75 { object-position: 75% 50% } + .op_x88 { object-position: 88% 50% } + .op_x111 { object-position: 111% 50% } + + </style> + </head> + <body> + <img src="support/colors-8x16.svg" class="op_x-7"> + <img src="support/colors-8x16.svg" class="op_x13"> + <img src="support/colors-8x16.svg" class="op_x23"> + <img src="support/colors-8x16.svg" class="op_x50"> + <img src="support/colors-8x16.svg" class="op_x75"> + <img src="support/colors-8x16.svg" class="op_x88"> + <img src="support/colors-8x16.svg" class="op_x111"> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002o.html new file mode 100644 index 0000000000..e05938167c --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002o.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size object element, with a SVG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-svg-002-ref.html"> + <style type="text/css"> + object { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { object-position: -7% 50% } + .op_x13 { object-position: 13% 50% } + .op_x23 { object-position: 23% 50% } + .op_x50 { object-position: 50% 50% } + .op_x75 { object-position: 75% 50% } + .op_x88 { object-position: 88% 50% } + .op_x111 { object-position: 111% 50% } + + </style> + </head> + <body> + <object data="support/colors-8x16.svg" class="op_x-7"></object> + <object data="support/colors-8x16.svg" class="op_x13"></object> + <object data="support/colors-8x16.svg" class="op_x23"></object> + <object data="support/colors-8x16.svg" class="op_x50"></object> + <object data="support/colors-8x16.svg" class="op_x75"></object> + <object data="support/colors-8x16.svg" class="op_x88"></object> + <object data="support/colors-8x16.svg" class="op_x111"></object> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002p.html new file mode 100644 index 0000000000..3c6b7a3d40 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002p.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size video element, with a SVG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-svg-002-ref.html"> + <style type="text/css"> + video { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { object-position: -7% 50% } + .op_x13 { object-position: 13% 50% } + .op_x23 { object-position: 23% 50% } + .op_x50 { object-position: 50% 50% } + .op_x75 { object-position: 75% 50% } + .op_x88 { object-position: 88% 50% } + .op_x111 { object-position: 111% 50% } + + </style> + </head> + <body> + <video poster="support/colors-8x16.svg" class="op_x-7"></video> + <video poster="support/colors-8x16.svg" class="op_x13"></video> + <video poster="support/colors-8x16.svg" class="op_x23"></video> + <video poster="support/colors-8x16.svg" class="op_x50"></video> + <video poster="support/colors-8x16.svg" class="op_x75"></video> + <video poster="support/colors-8x16.svg" class="op_x88"></video> + <video poster="support/colors-8x16.svg" class="op_x111"></video> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/reftest-stylo.list b/layout/reftests/w3c-css/submitted/images3/reftest-stylo.list new file mode 100644 index 0000000000..5dd1821879 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/reftest-stylo.list @@ -0,0 +1,209 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +default-preferences test-pref(layout.css.object-fit-and-position.enabled,true) +# Tests for 'object-fit' / 'object-position' with a PNG image +== object-fit-fill-png-001c.html object-fit-fill-png-001c.html +fails == object-fit-fill-png-001e.html object-fit-fill-png-001e.html +== object-fit-fill-png-001i.html object-fit-fill-png-001i.html +fails == object-fit-fill-png-001o.html object-fit-fill-png-001o.html +== object-fit-fill-png-001p.html object-fit-fill-png-001p.html +== object-fit-fill-png-002c.html object-fit-fill-png-002c.html +fails == object-fit-fill-png-002e.html object-fit-fill-png-002e.html +== object-fit-fill-png-002i.html object-fit-fill-png-002i.html +fails == object-fit-fill-png-002o.html object-fit-fill-png-002o.html +== object-fit-fill-png-002p.html object-fit-fill-png-002p.html +== object-fit-contain-png-001c.html object-fit-contain-png-001c.html +fails == object-fit-contain-png-001e.html object-fit-contain-png-001e.html +== object-fit-contain-png-001i.html object-fit-contain-png-001i.html +fails == object-fit-contain-png-001o.html object-fit-contain-png-001o.html +== object-fit-contain-png-001p.html object-fit-contain-png-001p.html +== object-fit-contain-png-002c.html object-fit-contain-png-002c.html +fails == object-fit-contain-png-002e.html object-fit-contain-png-002e.html +== object-fit-contain-png-002i.html object-fit-contain-png-002i.html +fails == object-fit-contain-png-002o.html object-fit-contain-png-002o.html +== object-fit-contain-png-002p.html object-fit-contain-png-002p.html +== object-fit-cover-png-001c.html object-fit-cover-png-001c.html +fails == object-fit-cover-png-001e.html object-fit-cover-png-001e.html +== object-fit-cover-png-001i.html object-fit-cover-png-001i.html +== object-fit-cover-png-001o.html object-fit-cover-png-001o.html +== object-fit-cover-png-001p.html object-fit-cover-png-001p.html +== object-fit-cover-png-002c.html object-fit-cover-png-002c.html +fails == object-fit-cover-png-002e.html object-fit-cover-png-002e.html +== object-fit-cover-png-002i.html object-fit-cover-png-002i.html +fails == object-fit-cover-png-002o.html object-fit-cover-png-002o.html +== object-fit-cover-png-002p.html object-fit-cover-png-002p.html +skip == object-fit-none-png-001c.html object-fit-none-png-001c.html +== object-fit-none-png-001e.html object-fit-none-png-001e.html +== object-fit-none-png-001i.html object-fit-none-png-001i.html +fails == object-fit-none-png-001o.html object-fit-none-png-001o.html +== object-fit-none-png-001p.html object-fit-none-png-001p.html +== object-fit-none-png-002c.html object-fit-none-png-002c.html +fails == object-fit-none-png-002e.html object-fit-none-png-002e.html +== object-fit-none-png-002i.html object-fit-none-png-002i.html +fails == object-fit-none-png-002o.html object-fit-none-png-002o.html +== object-fit-none-png-002p.html object-fit-none-png-002p.html +== object-fit-scale-down-png-001c.html object-fit-scale-down-png-001c.html +== object-fit-scale-down-png-001e.html object-fit-scale-down-png-001e.html +== object-fit-scale-down-png-001i.html object-fit-scale-down-png-001i.html +== object-fit-scale-down-png-001o.html object-fit-scale-down-png-001o.html +== object-fit-scale-down-png-001p.html object-fit-scale-down-png-001p.html +== object-fit-scale-down-png-002c.html object-fit-scale-down-png-002c.html +fails == object-fit-scale-down-png-002e.html object-fit-scale-down-png-002e.html +== object-fit-scale-down-png-002i.html object-fit-scale-down-png-002i.html +fails == object-fit-scale-down-png-002o.html object-fit-scale-down-png-002o.html +== object-fit-scale-down-png-002p.html object-fit-scale-down-png-002p.html + +# Tests for 'object-fit' / 'object-position' with an SVG image +fails == object-fit-fill-svg-001e.html object-fit-fill-svg-001e.html +== object-fit-fill-svg-001i.html object-fit-fill-svg-001i.html +== object-fit-fill-svg-001o.html object-fit-fill-svg-001o.html +== object-fit-fill-svg-001p.html object-fit-fill-svg-001p.html +fails == object-fit-fill-svg-002e.html object-fit-fill-svg-002e.html +== object-fit-fill-svg-002i.html object-fit-fill-svg-002i.html +fails == object-fit-fill-svg-002o.html object-fit-fill-svg-002o.html +== object-fit-fill-svg-002p.html object-fit-fill-svg-002p.html +fails == object-fit-fill-svg-003e.html object-fit-fill-svg-003e.html +== object-fit-fill-svg-003i.html object-fit-fill-svg-003i.html +fails == object-fit-fill-svg-003o.html object-fit-fill-svg-003o.html +== object-fit-fill-svg-003p.html object-fit-fill-svg-003p.html +fails == object-fit-fill-svg-004e.html object-fit-fill-svg-004e.html +== object-fit-fill-svg-004i.html object-fit-fill-svg-004i.html +== object-fit-fill-svg-004o.html object-fit-fill-svg-004o.html +== object-fit-fill-svg-004p.html object-fit-fill-svg-004p.html +== object-fit-fill-svg-005e.html object-fit-fill-svg-005e.html +# bug 1092436 +== object-fit-fill-svg-005i.html object-fit-fill-svg-005i.html +# bug 1092436 +== object-fit-fill-svg-005o.html object-fit-fill-svg-005o.html +# bug 1092436 +== object-fit-fill-svg-005p.html object-fit-fill-svg-005p.html +# bug 1092436 +fails == object-fit-fill-svg-006e.html object-fit-fill-svg-006e.html +# bug 1092436 +== object-fit-fill-svg-006i.html object-fit-fill-svg-006i.html +# bug 1092436 +fails == object-fit-fill-svg-006o.html object-fit-fill-svg-006o.html +# bug 1092436 +== object-fit-fill-svg-006p.html object-fit-fill-svg-006p.html +# bug 1092436 +fails skip-if(B2G) == object-fit-contain-svg-001e.html object-fit-contain-svg-001e.html +== object-fit-contain-svg-001i.html object-fit-contain-svg-001i.html +fails skip-if(B2G) == object-fit-contain-svg-001o.html object-fit-contain-svg-001o.html +== object-fit-contain-svg-001p.html object-fit-contain-svg-001p.html +skip-if(B2G) == object-fit-contain-svg-002e.html object-fit-contain-svg-002e.html +== object-fit-contain-svg-002i.html object-fit-contain-svg-002i.html +skip-if(B2G) == object-fit-contain-svg-002o.html object-fit-contain-svg-002o.html +== object-fit-contain-svg-002p.html object-fit-contain-svg-002p.html +fails == object-fit-contain-svg-003e.html object-fit-contain-svg-003e.html +== object-fit-contain-svg-003i.html object-fit-contain-svg-003i.html +fails == object-fit-contain-svg-003o.html object-fit-contain-svg-003o.html +== object-fit-contain-svg-003p.html object-fit-contain-svg-003p.html +== object-fit-contain-svg-004e.html object-fit-contain-svg-004e.html +== object-fit-contain-svg-004i.html object-fit-contain-svg-004i.html +== object-fit-contain-svg-004o.html object-fit-contain-svg-004o.html +== object-fit-contain-svg-004p.html object-fit-contain-svg-004p.html +fails == object-fit-contain-svg-005e.html object-fit-contain-svg-005e.html +== object-fit-contain-svg-005i.html object-fit-contain-svg-005i.html +== object-fit-contain-svg-005o.html object-fit-contain-svg-005o.html +== object-fit-contain-svg-005p.html object-fit-contain-svg-005p.html +fails == object-fit-contain-svg-006e.html object-fit-contain-svg-006e.html +== object-fit-contain-svg-006i.html object-fit-contain-svg-006i.html +fails == object-fit-contain-svg-006o.html object-fit-contain-svg-006o.html +== object-fit-contain-svg-006p.html object-fit-contain-svg-006p.html +== object-fit-cover-svg-001e.html object-fit-cover-svg-001e.html +== object-fit-cover-svg-001i.html object-fit-cover-svg-001i.html +== object-fit-cover-svg-001o.html object-fit-cover-svg-001o.html +== object-fit-cover-svg-001p.html object-fit-cover-svg-001p.html +skip-if(B2G) == object-fit-cover-svg-002e.html object-fit-cover-svg-002e.html +== object-fit-cover-svg-002i.html object-fit-cover-svg-002i.html +fails skip-if(B2G) == object-fit-cover-svg-002o.html object-fit-cover-svg-002o.html +== object-fit-cover-svg-002p.html object-fit-cover-svg-002p.html +fails skip-if(B2G) == object-fit-cover-svg-003e.html object-fit-cover-svg-003e.html +== object-fit-cover-svg-003i.html object-fit-cover-svg-003i.html +fails skip-if(B2G) == object-fit-cover-svg-003o.html object-fit-cover-svg-003o.html +== object-fit-cover-svg-003p.html object-fit-cover-svg-003p.html +fails skip-if(B2G) == object-fit-cover-svg-004e.html object-fit-cover-svg-004e.html +== object-fit-cover-svg-004i.html object-fit-cover-svg-004i.html +skip-if(B2G) == object-fit-cover-svg-004o.html object-fit-cover-svg-004o.html +== object-fit-cover-svg-004p.html object-fit-cover-svg-004p.html +skip-if(B2G) == object-fit-cover-svg-005e.html object-fit-cover-svg-005e.html +== object-fit-cover-svg-005i.html object-fit-cover-svg-005i.html +fails skip-if(B2G) == object-fit-cover-svg-005o.html object-fit-cover-svg-005o.html +== object-fit-cover-svg-005p.html object-fit-cover-svg-005p.html +fails skip-if(B2G) == object-fit-cover-svg-006e.html object-fit-cover-svg-006e.html +== object-fit-cover-svg-006i.html object-fit-cover-svg-006i.html +fails skip-if(B2G) == object-fit-cover-svg-006o.html object-fit-cover-svg-006o.html +== object-fit-cover-svg-006p.html object-fit-cover-svg-006p.html +fails == object-fit-none-svg-001e.html object-fit-none-svg-001e.html +== object-fit-none-svg-001i.html object-fit-none-svg-001i.html +fails == object-fit-none-svg-001o.html object-fit-none-svg-001o.html +== object-fit-none-svg-001p.html object-fit-none-svg-001p.html +== object-fit-none-svg-002e.html object-fit-none-svg-002e.html +== object-fit-none-svg-002i.html object-fit-none-svg-002i.html +fails == object-fit-none-svg-002o.html object-fit-none-svg-002o.html +== object-fit-none-svg-002p.html object-fit-none-svg-002p.html +fails == object-fit-none-svg-003e.html object-fit-none-svg-003e.html +== object-fit-none-svg-003i.html object-fit-none-svg-003i.html +== object-fit-none-svg-003o.html object-fit-none-svg-003o.html +== object-fit-none-svg-003p.html object-fit-none-svg-003p.html +fails == object-fit-none-svg-004e.html object-fit-none-svg-004e.html +== object-fit-none-svg-004i.html object-fit-none-svg-004i.html +fails == object-fit-none-svg-004o.html object-fit-none-svg-004o.html +== object-fit-none-svg-004p.html object-fit-none-svg-004p.html +fails skip-if(B2G) == object-fit-none-svg-005e.html object-fit-none-svg-005e.html +== object-fit-none-svg-005i.html object-fit-none-svg-005i.html +fails skip-if(B2G) == object-fit-none-svg-005o.html object-fit-none-svg-005o.html +== object-fit-none-svg-005p.html object-fit-none-svg-005p.html +fails skip-if(B2G) == object-fit-none-svg-006e.html object-fit-none-svg-006e.html +== object-fit-none-svg-006i.html object-fit-none-svg-006i.html +fails skip-if(B2G) == object-fit-none-svg-006o.html object-fit-none-svg-006o.html +== object-fit-none-svg-006p.html object-fit-none-svg-006p.html +fails skip-if(B2G) == object-fit-scale-down-svg-001e.html object-fit-scale-down-svg-001e.html +== object-fit-scale-down-svg-001i.html object-fit-scale-down-svg-001i.html +fails skip-if(B2G) == object-fit-scale-down-svg-001o.html object-fit-scale-down-svg-001o.html +== object-fit-scale-down-svg-001p.html object-fit-scale-down-svg-001p.html +skip-if(B2G) == object-fit-scale-down-svg-002e.html object-fit-scale-down-svg-002e.html +== object-fit-scale-down-svg-002i.html object-fit-scale-down-svg-002i.html +fails skip-if(B2G) == object-fit-scale-down-svg-002o.html object-fit-scale-down-svg-002o.html +== object-fit-scale-down-svg-002p.html object-fit-scale-down-svg-002p.html +fails == object-fit-scale-down-svg-003e.html object-fit-scale-down-svg-003e.html +== object-fit-scale-down-svg-003i.html object-fit-scale-down-svg-003i.html +fails == object-fit-scale-down-svg-003o.html object-fit-scale-down-svg-003o.html +== object-fit-scale-down-svg-003p.html object-fit-scale-down-svg-003p.html +== object-fit-scale-down-svg-004e.html object-fit-scale-down-svg-004e.html +== object-fit-scale-down-svg-004i.html object-fit-scale-down-svg-004i.html +fails == object-fit-scale-down-svg-004o.html object-fit-scale-down-svg-004o.html +== object-fit-scale-down-svg-004p.html object-fit-scale-down-svg-004p.html +== object-fit-scale-down-svg-005e.html object-fit-scale-down-svg-005e.html +== object-fit-scale-down-svg-005i.html object-fit-scale-down-svg-005i.html +fails == object-fit-scale-down-svg-005o.html object-fit-scale-down-svg-005o.html +== object-fit-scale-down-svg-005p.html object-fit-scale-down-svg-005p.html +fails == object-fit-scale-down-svg-006e.html object-fit-scale-down-svg-006e.html +== object-fit-scale-down-svg-006i.html object-fit-scale-down-svg-006i.html +== object-fit-scale-down-svg-006o.html object-fit-scale-down-svg-006o.html +== object-fit-scale-down-svg-006p.html object-fit-scale-down-svg-006p.html +== object-position-png-001c.html object-position-png-001c.html +# bug 1105150 +fuzzy-if(Mulet,2,20) == object-position-png-001e.html object-position-png-001e.html +# Bug 1150536 +== object-position-png-001i.html object-position-png-001i.html +fails fuzzy-if(Mulet,2,20) == object-position-png-001o.html object-position-png-001o.html +# Bug 1150492 +== object-position-png-001p.html object-position-png-001p.html +== object-position-png-002c.html object-position-png-002c.html +# bug 1105150 +== object-position-png-002e.html object-position-png-002e.html +== object-position-png-002i.html object-position-png-002i.html +fails == object-position-png-002o.html object-position-png-002o.html +== object-position-png-002p.html object-position-png-002p.html +== object-position-svg-001e.html object-position-svg-001e.html +# bug 1103286 +== object-position-svg-001i.html object-position-svg-001i.html +fails == object-position-svg-001o.html object-position-svg-001o.html +# bug 1103286 +== object-position-svg-001p.html object-position-svg-001p.html +fails == object-position-svg-002e.html object-position-svg-002e.html +# bug 1103286 +== object-position-svg-002i.html object-position-svg-002i.html +== object-position-svg-002o.html object-position-svg-002o.html +# bug 1103286 +== object-position-svg-002p.html object-position-svg-002p.html diff --git a/layout/reftests/w3c-css/submitted/images3/reftest.list b/layout/reftests/w3c-css/submitted/images3/reftest.list new file mode 100644 index 0000000000..3834b0713f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/reftest.list @@ -0,0 +1,192 @@ +default-preferences test-pref(layout.css.object-fit-and-position.enabled,true) +# Tests for 'object-fit' / 'object-position' with a PNG image +== object-fit-fill-png-001c.html object-fit-fill-png-001-ref.html +== object-fit-fill-png-001e.html object-fit-fill-png-001-ref.html +== object-fit-fill-png-001i.html object-fit-fill-png-001-ref.html +== object-fit-fill-png-001o.html object-fit-fill-png-001-ref.html +== object-fit-fill-png-001p.html object-fit-fill-png-001-ref.html +== object-fit-fill-png-002c.html object-fit-fill-png-002-ref.html +== object-fit-fill-png-002e.html object-fit-fill-png-002-ref.html +== object-fit-fill-png-002i.html object-fit-fill-png-002-ref.html +== object-fit-fill-png-002o.html object-fit-fill-png-002-ref.html +== object-fit-fill-png-002p.html object-fit-fill-png-002-ref.html +== object-fit-contain-png-001c.html object-fit-contain-png-001-ref.html +== object-fit-contain-png-001e.html object-fit-contain-png-001-ref.html +== object-fit-contain-png-001i.html object-fit-contain-png-001-ref.html +== object-fit-contain-png-001o.html object-fit-contain-png-001-ref.html +== object-fit-contain-png-001p.html object-fit-contain-png-001-ref.html +== object-fit-contain-png-002c.html object-fit-contain-png-002-ref.html +== object-fit-contain-png-002e.html object-fit-contain-png-002-ref.html +== object-fit-contain-png-002i.html object-fit-contain-png-002-ref.html +== object-fit-contain-png-002o.html object-fit-contain-png-002-ref.html +== object-fit-contain-png-002p.html object-fit-contain-png-002-ref.html +== object-fit-cover-png-001c.html object-fit-cover-png-001-ref.html +== object-fit-cover-png-001e.html object-fit-cover-png-001-ref.html +== object-fit-cover-png-001i.html object-fit-cover-png-001-ref.html +== object-fit-cover-png-001o.html object-fit-cover-png-001-ref.html +== object-fit-cover-png-001p.html object-fit-cover-png-001-ref.html +== object-fit-cover-png-002c.html object-fit-cover-png-002-ref.html +== object-fit-cover-png-002e.html object-fit-cover-png-002-ref.html +== object-fit-cover-png-002i.html object-fit-cover-png-002-ref.html +== object-fit-cover-png-002o.html object-fit-cover-png-002-ref.html +== object-fit-cover-png-002p.html object-fit-cover-png-002-ref.html +== object-fit-none-png-001c.html object-fit-none-png-001-ref.html +== object-fit-none-png-001e.html object-fit-none-png-001-ref.html +== object-fit-none-png-001i.html object-fit-none-png-001-ref.html +== object-fit-none-png-001o.html object-fit-none-png-001-ref.html +== object-fit-none-png-001p.html object-fit-none-png-001-ref.html +== object-fit-none-png-002c.html object-fit-none-png-002-ref.html +== object-fit-none-png-002e.html object-fit-none-png-002-ref.html +== object-fit-none-png-002i.html object-fit-none-png-002-ref.html +== object-fit-none-png-002o.html object-fit-none-png-002-ref.html +== object-fit-none-png-002p.html object-fit-none-png-002-ref.html +== object-fit-scale-down-png-001c.html object-fit-scale-down-png-001-ref.html +== object-fit-scale-down-png-001e.html object-fit-scale-down-png-001-ref.html +== object-fit-scale-down-png-001i.html object-fit-scale-down-png-001-ref.html +== object-fit-scale-down-png-001o.html object-fit-scale-down-png-001-ref.html +== object-fit-scale-down-png-001p.html object-fit-scale-down-png-001-ref.html +== object-fit-scale-down-png-002c.html object-fit-scale-down-png-002-ref.html +== object-fit-scale-down-png-002e.html object-fit-scale-down-png-002-ref.html +== object-fit-scale-down-png-002i.html object-fit-scale-down-png-002-ref.html +== object-fit-scale-down-png-002o.html object-fit-scale-down-png-002-ref.html +== object-fit-scale-down-png-002p.html object-fit-scale-down-png-002-ref.html + +# Tests for 'object-fit' / 'object-position' with an SVG image +== object-fit-fill-svg-001e.html object-fit-fill-svg-001-ref.html +== object-fit-fill-svg-001i.html object-fit-fill-svg-001-ref.html +== object-fit-fill-svg-001o.html object-fit-fill-svg-001-ref.html +== object-fit-fill-svg-001p.html object-fit-fill-svg-001-ref.html +== object-fit-fill-svg-002e.html object-fit-fill-svg-002-ref.html +== object-fit-fill-svg-002i.html object-fit-fill-svg-002-ref.html +== object-fit-fill-svg-002o.html object-fit-fill-svg-002-ref.html +== object-fit-fill-svg-002p.html object-fit-fill-svg-002-ref.html +== object-fit-fill-svg-003e.html object-fit-fill-svg-003-ref.html +== object-fit-fill-svg-003i.html object-fit-fill-svg-003-ref.html +== object-fit-fill-svg-003o.html object-fit-fill-svg-003-ref.html +== object-fit-fill-svg-003p.html object-fit-fill-svg-003-ref.html +== object-fit-fill-svg-004e.html object-fit-fill-svg-004-ref.html +== object-fit-fill-svg-004i.html object-fit-fill-svg-004-ref.html +== object-fit-fill-svg-004o.html object-fit-fill-svg-004-ref.html +== object-fit-fill-svg-004p.html object-fit-fill-svg-004-ref.html +fails == object-fit-fill-svg-005e.html object-fit-fill-svg-005-ref.html # bug 1092436 +fails == object-fit-fill-svg-005i.html object-fit-fill-svg-005-ref.html # bug 1092436 +fails == object-fit-fill-svg-005o.html object-fit-fill-svg-005-ref.html # bug 1092436 +fails == object-fit-fill-svg-005p.html object-fit-fill-svg-005-ref.html # bug 1092436 +fails == object-fit-fill-svg-006e.html object-fit-fill-svg-006-ref.html # bug 1092436 +fails == object-fit-fill-svg-006i.html object-fit-fill-svg-006-ref.html # bug 1092436 +fails == object-fit-fill-svg-006o.html object-fit-fill-svg-006-ref.html # bug 1092436 +fails == object-fit-fill-svg-006p.html object-fit-fill-svg-006-ref.html # bug 1092436 +== object-fit-contain-svg-001e.html object-fit-contain-svg-001-ref.html +== object-fit-contain-svg-001i.html object-fit-contain-svg-001-ref.html +== object-fit-contain-svg-001o.html object-fit-contain-svg-001-ref.html +== object-fit-contain-svg-001p.html object-fit-contain-svg-001-ref.html +== object-fit-contain-svg-002e.html object-fit-contain-svg-002-ref.html +== object-fit-contain-svg-002i.html object-fit-contain-svg-002-ref.html +== object-fit-contain-svg-002o.html object-fit-contain-svg-002-ref.html +== object-fit-contain-svg-002p.html object-fit-contain-svg-002-ref.html +== object-fit-contain-svg-003e.html object-fit-contain-svg-003-ref.html +== object-fit-contain-svg-003i.html object-fit-contain-svg-003-ref.html +== object-fit-contain-svg-003o.html object-fit-contain-svg-003-ref.html +== object-fit-contain-svg-003p.html object-fit-contain-svg-003-ref.html +== object-fit-contain-svg-004e.html object-fit-contain-svg-004-ref.html +== object-fit-contain-svg-004i.html object-fit-contain-svg-004-ref.html +== object-fit-contain-svg-004o.html object-fit-contain-svg-004-ref.html +== object-fit-contain-svg-004p.html object-fit-contain-svg-004-ref.html +== object-fit-contain-svg-005e.html object-fit-contain-svg-005-ref.html +== object-fit-contain-svg-005i.html object-fit-contain-svg-005-ref.html +== object-fit-contain-svg-005o.html object-fit-contain-svg-005-ref.html +== object-fit-contain-svg-005p.html object-fit-contain-svg-005-ref.html +== object-fit-contain-svg-006e.html object-fit-contain-svg-006-ref.html +== object-fit-contain-svg-006i.html object-fit-contain-svg-006-ref.html +== object-fit-contain-svg-006o.html object-fit-contain-svg-006-ref.html +== object-fit-contain-svg-006p.html object-fit-contain-svg-006-ref.html +== object-fit-cover-svg-001e.html object-fit-cover-svg-001-ref.html +== object-fit-cover-svg-001i.html object-fit-cover-svg-001-ref.html +== object-fit-cover-svg-001o.html object-fit-cover-svg-001-ref.html +== object-fit-cover-svg-001p.html object-fit-cover-svg-001-ref.html +== object-fit-cover-svg-002e.html object-fit-cover-svg-002-ref.html +== object-fit-cover-svg-002i.html object-fit-cover-svg-002-ref.html +== object-fit-cover-svg-002o.html object-fit-cover-svg-002-ref.html +== object-fit-cover-svg-002p.html object-fit-cover-svg-002-ref.html +== object-fit-cover-svg-003e.html object-fit-cover-svg-003-ref.html +== object-fit-cover-svg-003i.html object-fit-cover-svg-003-ref.html +== object-fit-cover-svg-003o.html object-fit-cover-svg-003-ref.html +== object-fit-cover-svg-003p.html object-fit-cover-svg-003-ref.html +== object-fit-cover-svg-004e.html object-fit-cover-svg-004-ref.html +== object-fit-cover-svg-004i.html object-fit-cover-svg-004-ref.html +== object-fit-cover-svg-004o.html object-fit-cover-svg-004-ref.html +== object-fit-cover-svg-004p.html object-fit-cover-svg-004-ref.html +== object-fit-cover-svg-005e.html object-fit-cover-svg-005-ref.html +== object-fit-cover-svg-005i.html object-fit-cover-svg-005-ref.html +== object-fit-cover-svg-005o.html object-fit-cover-svg-005-ref.html +== object-fit-cover-svg-005p.html object-fit-cover-svg-005-ref.html +== object-fit-cover-svg-006e.html object-fit-cover-svg-006-ref.html +== object-fit-cover-svg-006i.html object-fit-cover-svg-006-ref.html +== object-fit-cover-svg-006o.html object-fit-cover-svg-006-ref.html +== object-fit-cover-svg-006p.html object-fit-cover-svg-006-ref.html +== object-fit-none-svg-001e.html object-fit-none-svg-001-ref.html +== object-fit-none-svg-001i.html object-fit-none-svg-001-ref.html +== object-fit-none-svg-001o.html object-fit-none-svg-001-ref.html +== object-fit-none-svg-001p.html object-fit-none-svg-001-ref.html +== object-fit-none-svg-002e.html object-fit-none-svg-002-ref.html +== object-fit-none-svg-002i.html object-fit-none-svg-002-ref.html +== object-fit-none-svg-002o.html object-fit-none-svg-002-ref.html +== object-fit-none-svg-002p.html object-fit-none-svg-002-ref.html +== object-fit-none-svg-003e.html object-fit-none-svg-003-ref.html +== object-fit-none-svg-003i.html object-fit-none-svg-003-ref.html +== object-fit-none-svg-003o.html object-fit-none-svg-003-ref.html +== object-fit-none-svg-003p.html object-fit-none-svg-003-ref.html +== object-fit-none-svg-004e.html object-fit-none-svg-004-ref.html +== object-fit-none-svg-004i.html object-fit-none-svg-004-ref.html +== object-fit-none-svg-004o.html object-fit-none-svg-004-ref.html +== object-fit-none-svg-004p.html object-fit-none-svg-004-ref.html +== object-fit-none-svg-005e.html object-fit-none-svg-005-ref.html +== object-fit-none-svg-005i.html object-fit-none-svg-005-ref.html +== object-fit-none-svg-005o.html object-fit-none-svg-005-ref.html +== object-fit-none-svg-005p.html object-fit-none-svg-005-ref.html +== object-fit-none-svg-006e.html object-fit-none-svg-006-ref.html +== object-fit-none-svg-006i.html object-fit-none-svg-006-ref.html +== object-fit-none-svg-006o.html object-fit-none-svg-006-ref.html +== object-fit-none-svg-006p.html object-fit-none-svg-006-ref.html +== object-fit-scale-down-svg-001e.html object-fit-scale-down-svg-001-ref.html +== object-fit-scale-down-svg-001i.html object-fit-scale-down-svg-001-ref.html +== object-fit-scale-down-svg-001o.html object-fit-scale-down-svg-001-ref.html +== object-fit-scale-down-svg-001p.html object-fit-scale-down-svg-001-ref.html +== object-fit-scale-down-svg-002e.html object-fit-scale-down-svg-002-ref.html +== object-fit-scale-down-svg-002i.html object-fit-scale-down-svg-002-ref.html +== object-fit-scale-down-svg-002o.html object-fit-scale-down-svg-002-ref.html +== object-fit-scale-down-svg-002p.html object-fit-scale-down-svg-002-ref.html +== object-fit-scale-down-svg-003e.html object-fit-scale-down-svg-003-ref.html +== object-fit-scale-down-svg-003i.html object-fit-scale-down-svg-003-ref.html +== object-fit-scale-down-svg-003o.html object-fit-scale-down-svg-003-ref.html +== object-fit-scale-down-svg-003p.html object-fit-scale-down-svg-003-ref.html +== object-fit-scale-down-svg-004e.html object-fit-scale-down-svg-004-ref.html +== object-fit-scale-down-svg-004i.html object-fit-scale-down-svg-004-ref.html +== object-fit-scale-down-svg-004o.html object-fit-scale-down-svg-004-ref.html +== object-fit-scale-down-svg-004p.html object-fit-scale-down-svg-004-ref.html +== object-fit-scale-down-svg-005e.html object-fit-scale-down-svg-005-ref.html +== object-fit-scale-down-svg-005i.html object-fit-scale-down-svg-005-ref.html +== object-fit-scale-down-svg-005o.html object-fit-scale-down-svg-005-ref.html +== object-fit-scale-down-svg-005p.html object-fit-scale-down-svg-005-ref.html +== object-fit-scale-down-svg-006e.html object-fit-scale-down-svg-006-ref.html +== object-fit-scale-down-svg-006i.html object-fit-scale-down-svg-006-ref.html +== object-fit-scale-down-svg-006o.html object-fit-scale-down-svg-006-ref.html +== object-fit-scale-down-svg-006p.html object-fit-scale-down-svg-006-ref.html +fails == object-position-png-001c.html object-position-png-001-ref.html # bug 1105150 +== object-position-png-001e.html object-position-png-001-ref.html +== object-position-png-001i.html object-position-png-001-ref.html +== object-position-png-001o.html object-position-png-001-ref.html +== object-position-png-001p.html object-position-png-001-ref.html +fails == object-position-png-002c.html object-position-png-002-ref.html # bug 1105150 +== object-position-png-002e.html object-position-png-002-ref.html +== object-position-png-002i.html object-position-png-002-ref.html +== object-position-png-002o.html object-position-png-002-ref.html +== object-position-png-002p.html object-position-png-002-ref.html +fails == object-position-svg-001e.html object-position-svg-001-ref.html # bug 1103286 +== object-position-svg-001i.html object-position-svg-001-ref.html +fails == object-position-svg-001o.html object-position-svg-001-ref.html # bug 1103286 +== object-position-svg-001p.html object-position-svg-001-ref.html +fails == object-position-svg-002e.html object-position-svg-002-ref.html # bug 1103286 +== object-position-svg-002i.html object-position-svg-002-ref.html +fails == object-position-svg-002o.html object-position-svg-002-ref.html # bug 1103286 +== object-position-svg-002p.html object-position-svg-002-ref.html diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-noSize.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-noSize.svg new file mode 100644 index 0000000000..db715d875e --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-noSize.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- This SVG file has an aspect-ratio (from its viewBox attribute), + but no intrinsic size. +--> +<svg xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 16 8"> + <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/> + <rect x="8" y="0" width="8px" height="4px" style="fill: black"/> + <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/> + <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/> +</svg> diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-parDefault.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-parDefault.svg new file mode 100644 index 0000000000..1b0bca0737 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-parDefault.svg @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- This SVG file has the default preserveAspectRatio (xMidyMid meet). + + If it's rendered via e.g. a square <img> element with 'object-fit: fill', + the SVG will receive the <img>'s full content-box to use as its viewport. + But, importantly, its viewBox-region should NOT be stretched/squashed to + fill this viewport; instead, the viewBox will scale *proportionally* until + it *just* fits inside the viewport (the <img>), without overflowing, and + it'll be centered inside the viewport in whichever dimension has extra + space available. (This is what "xMidYMid meet" requires.) +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="16" height="8" viewBox="0 0 16 8"> + <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/> + <rect x="8" y="0" width="8px" height="4px" style="fill: black"/> + <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/> + <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/> +</svg> diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.png b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.png Binary files differnew file mode 100644 index 0000000000..bd23845871 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.png diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.svg new file mode 100644 index 0000000000..08e3659402 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- This SVG file is meant to mimic colors-8x16.png as closely + as possible. In particular, this SVG has: + (1) an intrinsic size (from the 'width' & 'height' attributes) + (2) preserveAspectRatio="none", allowing it to stretch in the + same way that a raster image would. +--> +<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" + width="16" height="8" viewBox="0 0 16 8"> + <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/> + <rect x="8" y="0" width="8px" height="4px" style="fill: black"/> + <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/> + <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/> +</svg> diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-8x16-noSize.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16-noSize.svg new file mode 100644 index 0000000000..e741537b93 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16-noSize.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- This SVG file has an aspect-ratio (from its viewBox attribute), + but no intrinsic size. +--> +<svg xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 8 16"> + <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/> + <rect x="4" y="0" width="4px" height="8px" style="fill: black"/> + <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/> + <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/> +</svg> diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-8x16-parDefault.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16-parDefault.svg new file mode 100644 index 0000000000..ec8c59dcbd --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16-parDefault.svg @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- This SVG file has the default preserveAspectRatio (xMidyMid meet). + + If it's rendered via e.g. a square <img> element with 'object-fit: fill', + the SVG will receive the <img>'s full content-box to use as its viewport. + But, importantly, its viewBox-region should NOT be stretched/squashed to + fill this viewport; instead, the viewBox will scale *proportionally* until + it *just* fits inside the viewport (the <img>), without overflowing, and + it'll be centered inside the viewport in whichever dimension has extra + space available. (This is what "xMidYMid meet" requires.) +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8" height="16" viewBox="0 0 8 16"> + <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/> + <rect x="4" y="0" width="4px" height="8px" style="fill: black"/> + <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/> + <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/> +</svg> diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.png b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.png Binary files differnew file mode 100644 index 0000000000..596fdb389d --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.png diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.svg new file mode 100644 index 0000000000..c336e3af1b --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- This SVG file is meant to mimic colors-8x16.png as closely + as possible. In particular, this SVG has: + (1) an intrinsic size (from the 'width' & 'height' attributes) + (2) preserveAspectRatio="none", allowing it to stretch in the + same way that a raster image would. +--> +<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" + width="8" height="16" viewBox="0 0 8 16"> + <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/> + <rect x="4" y="0" width="4px" height="8px" style="fill: black"/> + <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/> + <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/> +</svg> diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-and-position-canvas-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-and-position-canvas-tests.sh new file mode 100644 index 0000000000..b66ea47269 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-and-position-canvas-tests.sh @@ -0,0 +1,72 @@ +#!/bin/bash +# +# Any copyright is dedicated to the Public Domain. +# http://creativecommons.org/publicdomain/zero/1.0/ +# +# Script to generate <canvas src> reftest files for "object-fit" and +# "object-position", from corresponding reftest files that use <object>. +# +# This script expects to be run from this working directory: +# mozilla-central/layout/reftests/w3c-css/submitted/images3 + +# Array of image files that we'll use +imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png") +canvasAttributeArr=('width="16" height="8"' 'width="8" height="16"') +numImageFiles=${#imageFileArr[@]} + + +for ((i = 0; i < $numImageFiles; i++)); do + + imageFile=${imageFileArr[$i]} + canvasAttrs=${canvasAttributeArr[$i]} + + # Loop across <object> tests: + # (We assume that tests that end with "001" use the first PNG image in + # $imageFileArr, and tests that end with "002" use the second PNG image.) + let testNum=$i+1 + for origTestName in object-*-png-*00${testNum}o.html; do + # Find the corresponding reference case: + origReferenceName=$(echo $origTestName | + sed "s/o.html/-ref.html/") + + # Replace "o" suffix in filename with "c" (for "canvas") + canvasTestName=$(echo $origTestName | + sed "s/o.html/c.html/") + + # Generate testcase + # (converting <object data="..."> to <canvas width="..." height="..."> + echo "Generating $canvasTestName from $origTestName." + hg cp $origTestName $canvasTestName + + # Do string-replacements in testcase to convert it to test canvas: + # Adjust html & body nodes: + sed -i "s|<html>|<html class=\"reftest-wait\">|" $canvasTestName + sed -i "s|<body>|<body onload=\"drawImageToCanvases('$imageFile')\">|" $canvasTestName + # Adjust <title>: + sed -i "s|object element|canvas element|g" $canvasTestName + # Tweak the actual tags (open & close tags, and CSS rule): + sed -i "s|object {|canvas {|" $canvasTestName + sed -i "s|<object|<canvas|" $canvasTestName + sed -i "s|</object>|</canvas>|" $canvasTestName + # Drop "data" attr (pointing to image URI) and replace with + # width/height attrs to establish the canvas's intrinsic size: + sed -i "s|data=\"$imageFile\"|$canvasAttrs|" $canvasTestName + + # Add a <script> block to draw an image into each canvas: + sed -i "/<\/style>/a \\ + <script>\n\ + function drawImageToCanvases(imageURI) {\n\ + var image = new Image();\n\ + image.onload = function() {\n\ + var canvasElems = document.getElementsByTagName(\"canvas\");\n\ + for (var i = 0; i < canvasElems.length; i++) {\n\ + var ctx = canvasElems[i].getContext(\"2d\");\n\ + ctx.drawImage(image, 0, 0);\n\ + }\n\ + document.documentElement.removeAttribute(\"class\");\n\ + }\n\ + image.src = imageURI;\n\ + }\n\ + <\/script>" $canvasTestName + done +done diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh new file mode 100644 index 0000000000..476977c890 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh @@ -0,0 +1,109 @@ +#!/bin/bash +# +# Any copyright is dedicated to the Public Domain. +# http://creativecommons.org/publicdomain/zero/1.0/ +# +# This is a script that I used to generate a suite of tests for the CSS +# properties "object-fit" and "object-position", using a template testcase +# file and reference case file. +# +# The reference case uses the "background-size" & "background-position" +# equivalent of the tested "object-fit" / "object-position" values. +# (One exception: since there is no "background-size" equivalent of +# "object-fit: scale-down", we add an extra CSS rule for the "scale-down" +# reference cases -- see REPLACEME_SCALE_DOWN_EXTRA_RULE below.) + +FILE_PATH="./" +REFTEST_LIST_FILE="$FILE_PATH/reftest.list" + +TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-fit-test.html +TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-fit-ref.html + +imageFileFormat="png" + +# Array of image files to use for testing: +imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png") +numImageFiles=${#imageFileArr[@]} + +# Array of "object-fit" values, & of corresponding "background-size" values. +# (Note: background-size has no equivalent for "object-fit: scale-down". We use +# "auto auto" here, which is equivalent *some* of the time; and for the cases +# where it's *not* equivalent, we use an extra CSS rule in the reference case. +# See REPLACEME_SCALE_DOWN_EXTRA_RULE below.) +objectFitArr=( "fill" "contain" "cover" "none" "scale-down" ) +backgroundSizeEquivArr=( "100% 100%" "contain" "cover" "auto auto" "auto auto" ) +numObjectFitVals=${#objectFitArr[@]} + +# Array of tag-names for elements that we'd like to test: +# (Also: array of a single-letter abbreviation for each element, an array of +# the close tag for each element -- if a close tag is needed -- and an array +# indicating the attribute that each element uses to specify its image source.) +tagNameArr=( "embed" "img" "object" "video" ) +tagLetterArr=( "e" "i" "o" "p" ) +tagCloseTokenArr=( "" "" "</object>" "</video>" ) +tagSrcAttrArr=( "src" "src" "data" "poster" ) +numTags=${#tagNameArr[@]} + +# FIRST: Add 'default-preferences' line to the top of our reftest manifest: +echo "default-preferences test-pref(layout.css.object-fit-and-position.enabled,true) +# Tests for 'object-fit' / 'object-position' with a PNG image" \ + >> $REFTEST_LIST_FILE + +for ((i = 0; i < $numObjectFitVals; i++)); do + objectFit=${objectFitArr[$i]} + backgroundSizeEquiv=${backgroundSizeEquivArr[$i]} + + # The reference case for "scale-down" needs an additional style rule, to + # look like "object-fit: scale-down" on small objects. (This is necessary + # because "background-size" doesn't have a value that exactly maps to + # "object-fit: scale-down".) + if [[ $objectFit == "scale-down" ]]; then + scaledownRule=".objectOuter > .small { background-size: contain; }" + scaledownSedCmd="s/REPLACEME_SCALE_DOWN_EXTRA_RULE/$scaledownRule/" + else + # (We're not testing "scale-down" in this generated file, so just delete + # the template's placeholder line for a "scale-down"-specific CSS rule.) + scaledownSedCmd="/REPLACEME_SCALE_DOWN_EXTRA_RULE/d" + fi + + for ((j = 0; j < $numImageFiles; j++)); do + imageFile=${imageFileArr[$j]} + let testNum=$j+1 + testNum="00$testNum" # zero-pad to 3 digits, per w3c convention + + filenameStub="object-fit-$objectFit-$imageFileFormat-$testNum" + + # Generate a reference case: + filenameRef="$filenameStub-ref.html" + echo Generating ${filenameRef}. + cat $TEMPLATE_REFERENCE_FILENAME \ + | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ + | sed "s/REPLACEME_BACKGROUND_SIZE_VAL/$backgroundSizeEquiv/" \ + | sed "$scaledownSedCmd" \ + > $FILE_PATH/$filenameRef; + + # Generate a test for each of our tags: + for ((k = 0; k < $numTags; k++)); do + tagName=${tagNameArr[$k]} + tagLetter=${tagLetterArr[$k]} + tagCloseToken=${tagCloseTokenArr[$k]} + tagSrcAttr=${tagSrcAttrArr[$k]} + + filenameTest="$filenameStub$tagLetter.html" + testTitle="'object-fit: $objectFit' on $tagName element, with a PNG image and with various 'object-position' values" + echo Generating ${filenameTest}. + cat $TEMPLATE_TESTCASE_FILENAME \ + | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ + | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \ + | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \ + | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \ + | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken," \ + | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \ + | sed "s/REPLACEME_OBJECT_FIT_VAL/$objectFit/" \ + > $FILE_PATH/$filenameTest + + echo "== $filenameTest $filenameRef" \ + >> $REFTEST_LIST_FILE + done + done +done diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-svg-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-svg-tests.sh new file mode 100644 index 0000000000..c4d51877e0 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-svg-tests.sh @@ -0,0 +1,116 @@ +#!/bin/bash +# +# Any copyright is dedicated to the Public Domain. +# http://creativecommons.org/publicdomain/zero/1.0/ +# +# This is a script that I used to generate a suite of tests for the CSS +# properties "object-fit" and "object-position", using a template testcase +# file and reference case file. +# +# The reference case uses the "background-size" & "background-position" +# equivalent of the tested "object-fit" / "object-position" values. +# (One exception: since there is no "background-size" equivalent of +# "object-fit: scale-down", we add an extra CSS rule for the "scale-down" +# reference cases -- see REPLACEME_SCALE_DOWN_EXTRA_RULE below.) + +FILE_PATH="./" +REFTEST_LIST_FILE="$FILE_PATH/reftest.list" + +TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-fit-test.html +TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-fit-ref.html + +imageFileFormat="svg" + +# Array of image files to use for testing: +imageFileArr=("support/colors-16x8.svg" + "support/colors-8x16.svg" + "support/colors-16x8-noSize.svg" + "support/colors-8x16-noSize.svg" + "support/colors-16x8-parDefault.svg" + "support/colors-8x16-parDefault.svg") +numImageFiles=${#imageFileArr[@]} + +# Array of "object-fit" values, & of corresponding "background-size" values. +# (Note: background-size has no equivalent for "object-fit: scale-down". We use +# "auto auto" here, which is equivalent *some* of the time; and for the cases +# where it's *not* equivalent, we use an extra CSS rule in the reference case. +# See REPLACEME_SCALE_DOWN_EXTRA_RULE below.) +objectFitArr=( "fill" "contain" "cover" "none" "scale-down" ) +backgroundSizeEquivArr=( "100% 100%" "contain" "cover" "auto auto" "auto auto" ) +numObjectFitVals=${#objectFitArr[@]} + +# Array of tag-names for elements that we'd like to test: +# (Also: array of a single-letter abbreviation for each element, an array of +# the close tag for each element -- if a close tag is needed -- and an array +# indicating the attribute that each element uses to specify its image source.) +tagNameArr=( "embed" "img" "object" "video" ) +tagLetterArr=( "e" "i" "o" "p" ) +tagCloseTokenArr=( "" "" "</object>" "</video>" ) +tagSrcAttrArr=( "src" "src" "data" "poster" ) +numTags=${#tagNameArr[@]} + +# FIRST: Add blank line & descriptive comment to reftest manifest: +echo " +# Tests for 'object-fit' / 'object-position' with an SVG image" \ + >> $REFTEST_LIST_FILE + +for ((i = 0; i < $numObjectFitVals; i++)); do + objectFit=${objectFitArr[$i]} + backgroundSizeEquiv=${backgroundSizeEquivArr[$i]} + + # The reference case for "scale-down" needs an additional style rule, to + # look like "object-fit: scale-down" on small objects. (This is necessary + # because "background-size" doesn't have a value that exactly maps to + # "object-fit: scale-down".) + if [[ $objectFit == "scale-down" ]]; then + scaledownRule=".objectOuter > .small { background-size: contain; }" + scaledownSedCmd="s/REPLACEME_SCALE_DOWN_EXTRA_RULE/$scaledownRule/" + else + # (We're not testing "scale-down" in this generated file, so just delete + # the template's placeholder line for a "scale-down"-specific CSS rule.) + scaledownSedCmd="/REPLACEME_SCALE_DOWN_EXTRA_RULE/d" + fi + + for ((j = 0; j < $numImageFiles; j++)); do + imageFile=${imageFileArr[$j]} + let testNum=$j+1 + testNum="00$testNum" # zero-pad to 3 digits, per w3c convention + + filenameStub="object-fit-$objectFit-$imageFileFormat-$testNum" + + # Generate a reference case: + filenameRef="$filenameStub-ref.html" + echo Generating ${filenameRef}. + cat $TEMPLATE_REFERENCE_FILENAME \ + | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ + | sed "s/REPLACEME_BACKGROUND_SIZE_VAL/$backgroundSizeEquiv/" \ + | sed "$scaledownSedCmd" \ + | sed "/image-rendering:/d" \ + > $FILE_PATH/$filenameRef; + + # Generate a test for each of our tags: + for ((k = 0; k < $numTags; k++)); do + tagName=${tagNameArr[$k]} + tagLetter=${tagLetterArr[$k]} + tagCloseToken=${tagCloseTokenArr[$k]} + tagSrcAttr=${tagSrcAttrArr[$k]} + + filenameTest="$filenameStub$tagLetter.html" + testTitle="'object-fit: $objectFit' on $tagName element, with a SVG image and with various 'object-position' values" + echo Generating ${filenameTest}. + cat $TEMPLATE_TESTCASE_FILENAME \ + | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ + | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \ + | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \ + | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \ + | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken," \ + | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \ + | sed "s/REPLACEME_OBJECT_FIT_VAL/$objectFit/" \ + | sed "/image-rendering:/d" \ + > $FILE_PATH/$filenameTest + + echo "== $filenameTest $filenameRef" \ + >> $REFTEST_LIST_FILE + done + done +done diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh new file mode 100644 index 0000000000..4763fabf7f --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh @@ -0,0 +1,88 @@ +#!/bin/bash +# +# Any copyright is dedicated to the Public Domain. +# http://creativecommons.org/publicdomain/zero/1.0/ +# +# This is a script that I used to generate a suite of tests for the CSS +# properties "object-fit" and "object-position" (focusing on edge-case +# object-position values that require pixel rounding), using a template +# testcase file and reference case file. +# +# The reference case uses the "background-size" & "background-position" +# equivalent of the tested "object-fit" / "object-position" values. + +FILE_PATH="./" +REFTEST_LIST_FILE="$FILE_PATH/reftest.list" + +TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-position-test.html +TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-position-ref.html + +imageFileFormat="png" + +# Array of image files to use for testing: +imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png") +numImageFiles=${#imageFileArr[@]} + +# Array of CSS classes to delete from the template, for a given image-file. +# DETAILS: The template files contain some elements/styles that exercise +# object-position x-values (op_x), and other elements/styles that exercise +# object-position y-values (op_y). But actually, we'll only have extra space +# for these percent values to resolve against in *one* dimension (since our +# image-files are rectangular, and the container element is square, and we +# scale the image up with "object-fit: contain"). So, we delete the +# elements/styles in the dimension where object-position % values will just +# resolve to 0 ("op_x" for the fat image, and "op_y" for the tall image). +classPatternToDeleteArr=("op_x" "op_y") + +# Array of tag-names for elements that we'd like to test: +# (Also: array of a single-letter abbreviation for each element, an array of +# the close tag for each element -- if a close tag is needed -- and an array +# indicating the attribute that each element uses to specify its image source.) +tagNameArr=( "embed" "img" "object" "video" ) +tagLetterArr=( "e" "i" "o" "p" ) +tagCloseTokenArr=( "" "" "</object>" "</video>" ) +tagSrcAttrArr=( "src" "src" "data" "poster" ) +numTags=${#tagNameArr[@]} + + for ((j = 0; j < $numImageFiles; j++)); do + imageFile=${imageFileArr[$j]} + + classPatternToDelete=${classPatternToDeleteArr[$j]} + + let testNum=$j+1 + testNum="00$testNum" # zero-pad to 3 digits, per w3c convention + + filenameStub="object-position-$imageFileFormat-$testNum" + + # Generate a reference case: + filenameRef="$filenameStub-ref.html" + echo Generating ${filenameRef}. + cat $TEMPLATE_REFERENCE_FILENAME \ + | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ + | sed "/$classPatternToDelete/d" \ + > $FILE_PATH/$filenameRef + + # Generate a test for each of our tags: + for ((k = 0; k < $numTags; k++)); do + tagName=${tagNameArr[$k]} + tagLetter=${tagLetterArr[$k]} + tagCloseToken=${tagCloseTokenArr[$k]} + tagSrcAttr=${tagSrcAttrArr[$k]} + + filenameTest="$filenameStub$tagLetter.html" + testTitle="various 'object-position' values on a fixed-size $tagName element, with a PNG image and 'object-fit:contain'." + echo Generating ${filenameTest}. + cat $TEMPLATE_TESTCASE_FILENAME \ + | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ + | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \ + | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \ + | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \ + | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken," \ + | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \ + | sed "/$classPatternToDelete/d" \ + > $FILE_PATH/$filenameTest + + echo "== $filenameTest $filenameRef" \ + >> $REFTEST_LIST_FILE + done + done diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-svg-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-svg-tests.sh new file mode 100644 index 0000000000..e00385a474 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-svg-tests.sh @@ -0,0 +1,88 @@ +#!/bin/bash +# +# Any copyright is dedicated to the Public Domain. +# http://creativecommons.org/publicdomain/zero/1.0/ +# +# This is a script that I used to generate a suite of tests for the CSS +# properties "object-fit" and "object-position" (focusing on edge-case +# object-position values that require pixel rounding), using a template +# testcase file and reference case file. +# +# The reference case uses the "background-size" & "background-position" +# equivalent of the tested "object-fit" / "object-position" values. + +FILE_PATH="./" +REFTEST_LIST_FILE="$FILE_PATH/reftest.list" + +TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-position-test.html +TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-position-ref.html + +imageFileFormat="svg" + +# Array of image files to use for testing: +imageFileArr=("support/colors-16x8.svg" "support/colors-8x16.svg") +numImageFiles=${#imageFileArr[@]} + +# Array of CSS classes to delete from the template, for a given image-file. +# DETAILS: The template files contain some elements/styles that exercise +# object-position x-values (op_x), and other elements/styles that exercise +# object-position y-values (op_y). But actually, we'll only have extra space +# for these percent values to resolve against in *one* dimension (since our +# image-files are rectangular, and the container element is square, and we +# scale the image up with "object-fit: contain"). So, we delete the +# elements/styles in the dimension where object-position % values will just +# resolve to 0 ("op_x" for the fat image, and "op_y" for the tall image). +classPatternToDeleteArr=("op_x" "op_y") + +# Array of tag-names for elements that we'd like to test: +# (Also: array of a single-letter abbreviation for each element, an array of +# the close tag for each element -- if a close tag is needed -- and an array +# indicating the attribute that each element uses to specify its image source.) +tagNameArr=( "embed" "img" "object" "video" ) +tagLetterArr=( "e" "i" "o" "p" ) +tagCloseTokenArr=( "" "" "</object>" "</video>" ) +tagSrcAttrArr=( "src" "src" "data" "poster" ) +numTags=${#tagNameArr[@]} + + for ((j = 0; j < $numImageFiles; j++)); do + imageFile=${imageFileArr[$j]} + + classPatternToDelete=${classPatternToDeleteArr[$j]} + + let testNum=$j+1 + testNum="00$testNum" # zero-pad to 3 digits, per w3c convention + + filenameStub="object-position-$imageFileFormat-$testNum" + + # Generate a reference case: + filenameRef="$filenameStub-ref.html" + echo Generating ${filenameRef}. + cat $TEMPLATE_REFERENCE_FILENAME \ + | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ + | sed "/$classPatternToDelete/d" \ + > $FILE_PATH/$filenameRef + + # Generate a test for each of our tags: + for ((k = 0; k < $numTags; k++)); do + tagName=${tagNameArr[$k]} + tagLetter=${tagLetterArr[$k]} + tagCloseToken=${tagCloseTokenArr[$k]} + tagSrcAttr=${tagSrcAttrArr[$k]} + + filenameTest="$filenameStub$tagLetter.html" + testTitle="various 'object-position' values on a fixed-size $tagName element, with a SVG image and 'object-fit:contain'." + echo Generating ${filenameTest}. + cat $TEMPLATE_TESTCASE_FILENAME \ + | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ + | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \ + | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \ + | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \ + | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken," \ + | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \ + | sed "/$classPatternToDelete/d" \ + > $FILE_PATH/$filenameTest + + echo "== $filenameTest $filenameRef" \ + >> $REFTEST_LIST_FILE + done + done diff --git a/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-ref.html b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-ref.html new file mode 100644 index 0000000000..94caf1ecbe --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("REPLACEME_IMAGE_FILENAME"); + background-size: REPLACEME_BACKGROUND_SIZE_VAL; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + REPLACEME_SCALE_DOWN_EXTRA_RULE + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-test.html b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-test.html new file mode 100644 index 0000000000..fe15182354 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-test.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: REPLACEME_TEST_TITLE</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="REPLACEME_REFERENCE_FILENAME"> + <style type="text/css"> + REPLACEME_CONTAINER_TAG { + border: 1px dashed gray; + padding: 1px; + object-fit: REPLACEME_OBJECT_FIT_VAL; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px center } + .cr { object-position: center right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tr">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide bl">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tl">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide br">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tc">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide cr">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide">REPLACEME_CONTAINER_CLOSETAG + <br> + <!-- big/tall: --> + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tr">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall bl">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tl">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall br">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tc">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall cr">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall">REPLACEME_CONTAINER_CLOSETAG + <br> + <!-- small: --> + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tr">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small bl">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tl">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small br">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tc">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small cr">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small">REPLACEME_CONTAINER_CLOSETAG + <br> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/support/template-object-position-ref.html b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-ref.html new file mode 100644 index 0000000000..19661f41f6 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + div { + background: lightgray; + margin-right: 2px; + background-image: url("REPLACEME_IMAGE_FILENAME"); + background-size: contain; + background-repeat: no-repeat; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { background-position: -7% 50% } + .op_x13 { background-position: 13% 50% } + .op_x23 { background-position: 23% 50% } + .op_x50 { background-position: 50% 50% } + .op_x75 { background-position: 75% 50% } + .op_x88 { background-position: 88% 50% } + .op_x111 { background-position: 111% 50% } + .op_y-7 { background-position: 50% -7% } + .op_y13 { background-position: 50% 13% } + .op_y23 { background-position: 50% 23% } + .op_y50 { background-position: 50% 50% } + .op_y75 { background-position: 50% 75% } + .op_y88 { background-position: 50% 88% } + .op_y111 { background-position: 50% 111% } + + </style> + </head> + <body> + <div class="op_x-7"></div> + <div class="op_x13"></div> + <div class="op_x23"></div> + <div class="op_x50"></div> + <div class="op_x75"></div> + <div class="op_x88"></div> + <div class="op_x111"></div> + <div class="op_y-7"></div> + <div class="op_y13"></div> + <div class="op_y23"></div> + <div class="op_y50"></div> + <div class="op_y75"></div> + <div class="op_y88"></div> + <div class="op_y111"></div> + </body> +</html> diff --git a/layout/reftests/w3c-css/submitted/images3/support/template-object-position-test.html b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-test.html new file mode 100644 index 0000000000..fb4b3ad3c7 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-test.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: REPLACEME_TEST_TITLE</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="REPLACEME_REFERENCE_FILENAME"> + <style type="text/css"> + REPLACEME_CONTAINER_TAG { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { object-position: -7% 50% } + .op_x13 { object-position: 13% 50% } + .op_x23 { object-position: 23% 50% } + .op_x50 { object-position: 50% 50% } + .op_x75 { object-position: 75% 50% } + .op_x88 { object-position: 88% 50% } + .op_x111 { object-position: 111% 50% } + .op_y-7 { object-position: 50% -7% } + .op_y13 { object-position: 50% 13% } + .op_y23 { object-position: 50% 23% } + .op_y50 { object-position: 50% 50% } + .op_y75 { object-position: 50% 75% } + .op_y88 { object-position: 50% 88% } + .op_y111 { object-position: 50% 111% } + + </style> + </head> + <body> + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x-7">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x13">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x23">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x50">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x75">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x88">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x111">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y-7">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y13">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y23">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y50">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y75">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y88">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y111">REPLACEME_CONTAINER_CLOSETAG + </body> +</html> |
