diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-images | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-images')
628 files changed, 28485 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-images/META.yml b/testing/web-platform/tests/css/css-images/META.yml new file mode 100644 index 0000000000..8d3b9472b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/META.yml @@ -0,0 +1,5 @@ +spec: https://drafts.csswg.org/css-images/ +suggested_reviewers: + - plinss + - tabatkins + - fantasai diff --git a/testing/web-platform/tests/css/css-images/animation/image-no-interpolation.html b/testing/web-platform/tests/css/css-images/animation/image-no-interpolation.html new file mode 100644 index 0000000000..1f9faf7fbb --- /dev/null +++ b/testing/web-platform/tests/css/css-images/animation/image-no-interpolation.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<link rel=help href="https://drafts.csswg.org/css-transitions-2/#transition-property-property"> +<link rel=help href="https://w3c.github.io/csswg-drafts/css-images/#the-image-rendering"> +<link rel=help href="https://w3c.github.io/csswg-drafts/css-images/#the-image-orientation"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'image-orientation', + from: 'initial', + to: 'none' +}); + +test_no_interpolation({ + property: 'image-rendering', + from: 'initial', + to: 'pixelated' +}); +</script> diff --git a/testing/web-platform/tests/css/css-images/animation/object-position-interpolation.html b/testing/web-platform/tests/css/css-images/animation/object-position-interpolation.html new file mode 100644 index 0000000000..13a1b177c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/animation/object-position-interpolation.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#the-object-position"> +<meta name="test" content="object-position supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body></body> + +<script> + // Default object-position value is 50% 50% + test_interpolation({ + property: 'object-position', + from: neutralKeyframe, + to: 'left top', + }, [ + { at: -0.25, expect: '62.5% 62.5%' }, + { at: 0, expect: '50% 50%' }, + { at: 0.25, expect: '37.5% 37.5%' }, + { at: 0.5, expect: '25% 25%' }, + { at: 0.75, expect: '12.5% 12.5%' }, + { at: 1, expect: '0% 0%' }, + { at: 1.25, expect: '-12.5% -12.5%' }, + ]); + + // Animate x axis + test_interpolation({ + property: 'object-position', + from: 'initial', + to: 'center top', + }, [ + { at: -0.25, expect: '50% 62.5%' }, + { at: 0, expect: '50% 50%' }, + { at: 0.25, expect: '50% 37.5%' }, + { at: 0.5, expect: '50% 25%' }, + { at: 0.75, expect: '50% 12.5%' }, + { at: 1, expect: '50% 0%' }, + { at: 1.25, expect: '50% -12.5%' }, + ]); + + // Animate y axis + test_interpolation({ + property: 'object-position', + from: 'initial', + to: 'left center', + }, [ + { at: -0.25, expect: '62.5% 50%' }, + { at: 0, expect: '50% 50%' }, + { at: 0.25, expect: '37.5% 50%' }, + { at: 0.5, expect: '25% 50%' }, + { at: 0.75, expect: '12.5% 50%' }, + { at: 1, expect: '0% 50%' }, + { at: 1.25, expect: '-12.5% 50%' }, + ]); + + // Pixel values + test_interpolation({ + property: 'object-position', + from: '20px 20px', + to: '100px 100px', + }, [ + { at: -0.25, expect: '0px 0px' }, + { at: 0, expect: '20px 20px' }, + { at: 0.25, expect: '40px 40px' }, + { at: 0.5, expect: '60px 60px' }, + { at: 0.75, expect: '80px 80px' }, + { at: 1, expect: '100px 100px' }, + { at: 1.25, expect: '120px 120px' }, + ]); +</script> diff --git a/testing/web-platform/tests/css/css-images/animation/object-view-box-interpolation.html b/testing/web-platform/tests/css/css-images/animation/object-view-box-interpolation.html new file mode 100644 index 0000000000..18ac72db70 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/animation/object-view-box-interpolation.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<meta charset="UTF-8"> +<title>clip-path-interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> +<meta name="assert" content="object-view-box supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> +<style> +.target { + width: 100px; + height: 100px; +} +</style> +<body> +<img src="support/exif-orientation-6-ru.jpg"></img> +<script> +test_interpolation({ + property: 'object-view-box', + from: 'inset(0px)', + to: 'inset(20px)', +}, [ + {at: 0, expect: 'inset(0px)'}, + {at: 0.5, expect: 'inset(10px)'}, + {at: 1, expect: 'inset(20px)'}, +]); + +test_interpolation({ + property: 'object-view-box', + from: 'inset(0%)', + to: 'inset(20%)', +}, [ + {at: 0, expect: 'inset(0%)'}, + {at: 0.5, expect: 'inset(10%)'}, + {at: 1, expect: 'inset(20%)'}, +]); + +test_interpolation({ + property: 'object-view-box', + from: 'rect(0px 10px 20px 30px)', + to: 'rect(10px 20px 30px 40px)', +}, [ + {at: 0, expect: 'rect(0px 10px 20px 30px)'}, + {at: 0.5, expect: 'rect(5px 15px 25px 35px)'}, + {at: 1, expect: 'rect(10px 20px 30px 40px)'}, +]); + +test_interpolation({ + property: 'object-view-box', + from: 'xywh(0px 10px 20px 30px)', + to: 'xywh(10px 20px 30px 40px)', +}, [ + {at: 0, expect: 'xywh(0px 10px 20px 30px)'}, + {at: 0.5, expect: 'xywh(5px 15px 25px 35px)'}, + {at: 1, expect: 'xywh(10px 20px 30px 40px)'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-images/color-stop-currentcolor-ref.html b/testing/web-platform/tests/css/css-images/color-stop-currentcolor-ref.html new file mode 100644 index 0000000000..7686a3b16e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/color-stop-currentcolor-ref.html @@ -0,0 +1,27 @@ +<!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="Dan Glastonbury" href="mailto:dglastonbury@mozilla.com" /> + <style type="text/css"> + body { + background: linear-gradient(to right, currentcolor, limegreen); + } + + div { + width: 100vw; + height: 100vh; + background: linear-gradient(to right, limegreen, limegreen); + } + </style> + </head> + <body> + <!-- content of test --> + <div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/color-stop-currentcolor.html b/testing/web-platform/tests/css/css-images/color-stop-currentcolor.html new file mode 100644 index 0000000000..e3074e398f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/color-stop-currentcolor.html @@ -0,0 +1,31 @@ +<!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: 'color-stop' on linear-gradient respects 'currentcolor'</title> + <link rel="author" title="Dan Glastonbury" href="mailto:dglastonbury@mozilla.com" /> + <link rel="help" href="https://www.w3.org/TR/css3-images/#color-stop-syntax" /> + <link rel="help" href="https://www.w3.org/TR/css-color-3/#currentcolor" /> + <link rel="match" href="color-stop-currentcolor-ref.html" /> + <style type="text/css"> + body { + background: linear-gradient(to right, currentcolor, limegreen); + } + + div { + width: 100vw; + height: 100vh; + color: limegreen; + background: inherit; + } + </style> + </head> + <body> + <!-- content of test --> + <div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/conic-gradient-angle-negative.html b/testing/web-platform/tests/css/css-images/conic-gradient-angle-negative.html new file mode 100644 index 0000000000..ff8e20aafe --- /dev/null +++ b/testing/web-platform/tests/css/css-images/conic-gradient-angle-negative.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Conic gradient with negative angle parameter</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients"> +<meta name="assert" content="Rendering of conic-gradient with negative center parameter"> +<link rel="match" href="reference/200x200-blue-black-green-red.html"> +<style> + #gradient { + width: 200px; + height: 200px; + background-image: conic-gradient(from -90deg, blue 0 25%, black 25% 50%, red 50% 75%, green 75% 100%); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/conic-gradient-angle.html b/testing/web-platform/tests/css/css-images/conic-gradient-angle.html new file mode 100644 index 0000000000..0b3404508d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/conic-gradient-angle.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Conic gradient with custom angle parameter</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients"> +<meta name="assert" content="Rendering of conic-gradient with custom center parameter"> +<link rel="match" href="reference/200x200-blue-black-green-red.html"> +<style> + #gradient { + width: 200px; + height: 200px; + background-image: conic-gradient(from 90deg, red 0 25%, green 25% 50%, blue 50% 75%, black 75% 100%); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/conic-gradient-center-ref.html b/testing/web-platform/tests/css/css-images/conic-gradient-center-ref.html new file mode 100644 index 0000000000..6af682601e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/conic-gradient-center-ref.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset="utf-8"> +<style> + #box { + width: 200px; + height: 200px; + } + #top { + border-left: 50px solid black; + border-right: 150px solid red; + height: 50px; + } + #bottom { + border-left: 50px solid blue; + border-right: 150px solid green; + height: 150px; + } +</style> +<div id="box"> + <div id="top"></div> + <div id="bottom"></div> +</div> diff --git a/testing/web-platform/tests/css/css-images/conic-gradient-center.html b/testing/web-platform/tests/css/css-images/conic-gradient-center.html new file mode 100644 index 0000000000..ecbc3ffa5c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/conic-gradient-center.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Conic gradient with custom center parameter</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients"> +<meta name="assert" content="Rendering of conic-gradient with custom center parameter"> +<link rel="match" href="conic-gradient-center-ref.html"> +<style> + #gradient { + width: 200px; + height: 200px; + background-image: conic-gradient(at 25% 25%, red 0 25%, green 25% 50%, blue 50% 75%, black 75% 100%); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations-ref.html b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations-ref.html new file mode 100644 index 0000000000..f319303676 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Image Fallbacks and Annotations: the 'image()' notation</title> + <link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com"> + <style type="text/css"> + .square{ + width: 200px; + height: 200px; + background-color: green; + } + </style> +</head> +<body> +<p>Test passes if background is green and no red.</p> +<div class="square"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations.html b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations.html new file mode 100644 index 0000000000..3a0e5e02da --- /dev/null +++ b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Image Fallbacks and Annotations: the 'image()' notation</title> + <link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com"> + <link rel="help" href="https://www.w3.org/TR/css-images-3/#image-values"> + <link rel="match" href="css-image-fallbacks-and-annotations-ref.html"> + <meta name="assert" content="When the image doesn't load, the background color is still there to ensure that the white text is readable."> + <style type="text/css"> + .square{ + width: 200px; + height: 200px; + background-color: red; + background: image("green.png", green); + } + </style> +</head> +<body> +<p>Test passes if background is green and no red.</p> +<div class="square"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations002.html b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations002.html new file mode 100644 index 0000000000..4fd340aba2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Image Fallbacks and Annotations: the 'image()' notation</title> + <link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com"> + <link rel="help" href="https://www.w3.org/TR/css-images-3/#image-values"> + <link rel="match" href="css-image-fallbacks-and-annotations-ref.html"> + <meta name="assert" content="The 'image()' function load the image."> + <style type="text/css"> + .square{ + width: 200px; + height: 200px; + color: white; + background-color: red; + background-image: image("support/1x1-green.png"); + } + </style> +</head> +<body> +<p>Test passes if background is green and no red.</p> +<div class="square"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations003.html b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations003.html new file mode 100644 index 0000000000..c71f7328a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations003.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Image Fallbacks and Annotations: the 'image()' notation</title> + <link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com"> + <link rel="help" href="https://www.w3.org/TR/css-images-3/#image-values"> + <link rel="match" href="css-image-fallbacks-and-annotations-ref.html"> + <meta name="assert" content="The rule below would tell the UA to load The first file if it can; failing that to load The second file; failing that to display The third file."> + <style type="text/css"> + .square{ + width: 200px; + height: 200px; + background-color: red; + background-image: image("1x1-green.svg", "support/1x1-green.png","support/1x1-green.gif"); + } + </style> +</head> +<body> +<p>Test passes if background is green and no red.</p> +<div class="square"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations004.html b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations004.html new file mode 100644 index 0000000000..f72627027e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations004.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Image Fallbacks and Annotations: the 'image()' notation</title> + <link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com"> + <link rel="help" href="https://www.w3.org/TR/css-images-3/#image-values"> + <link rel="match" href="css-image-fallbacks-and-annotations-ref.html"> + <meta name="assert" content="The rule below would tell the UA to load The first file if it can; failing that to load The second file."> + <style type="text/css"> + .square{ + width: 200px; + height: 200px; + background-color: red; + background-image: image("1x1-green.svg", "1x1-green.png", "support/1x1-green.gif"); + } + </style> +</head> +<body> +<p>Test passes if background is green and no red.</p> +<div class="square"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations005.html b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations005.html new file mode 100644 index 0000000000..584cba7688 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/css-image-fallbacks-and-annotations005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Image Fallbacks and Annotations: the 'image()' notation</title> + <link rel="author" title="Hirokazu Egashira" href="mailto:yo9ega@aol.com"> + <link rel="help" href="https://www.w3.org/TR/css-images-3/#image-values"> + <link rel="match" href="css-image-fallbacks-and-annotations-ref.html"> + <meta name="assert" content="The 'image()' function specifies only a color without any URLs, the function immediately falls back to representing a solid-color image of the chosen color."> + <style type="text/css"> + .square{ + width: 200px; + height: 200px; + background-color: red; + background-image: image(rgba(0,0,255,0.5)), url("support/1x1-green.png"); + } + </style> +</head> +<body> +<p>Test passes if background is pale green and no green and no red.</p> +<div class="square"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/empty-background-image.html b/testing/web-platform/tests/css/css-images/empty-background-image.html new file mode 100644 index 0000000000..5192ff254c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/empty-background-image.html @@ -0,0 +1,22 @@ +<!doctype html> +<title>Empty url shouldn't try to load a subresource.</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-values-4/#url-empty"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1302991"> +<style> +@import url(); +@import url(''); +@import url(""); +</style> +<div style="background-image: url()"></div> +<div style="background-image: url('')"></div> +<div style='background-image: url("")'></div> +<script> +let t = async_test("Empty url shouldn't try to load a subresource."); +onload = t.step_func_done(function() { + for (let entry of performance.getEntriesByType("resource")) { + assert_not_equals(entry.name, location.href, "Shouldn't have tried to request ourselves as a subresource") + } +}); +</script> diff --git a/testing/web-platform/tests/css/css-images/empty-radial-gradient-crash.html b/testing/web-platform/tests/css/css-images/empty-radial-gradient-crash.html new file mode 100644 index 0000000000..be1fb120cc --- /dev/null +++ b/testing/web-platform/tests/css/css-images/empty-radial-gradient-crash.html @@ -0,0 +1,4 @@ +<!doctype html> +<title>CSS Images Test: 0px x 0px radial-gradient crashes Chrome</title> +<link rel="help" href="https://crbug.com/1404396"> +<div style="background-image: radial-gradient(ellipse closest-corner at 0px 0px, white, red);">Should not crash</div> diff --git a/testing/web-platform/tests/css/css-images/gradient-border-box-ref.html b/testing/web-platform/tests/css/css-images/gradient-border-box-ref.html new file mode 100644 index 0000000000..5b219cea6c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient-border-box-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> +#x { + width: 280px; + height: 280px; + background-image: repeating-linear-gradient(to bottom right, white, black, white 30px); +} + </style> +</head> +<body> + <div id="x"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient-border-box.html b/testing/web-platform/tests/css/css-images/gradient-border-box.html new file mode 100644 index 0000000000..2938c5ea99 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient-border-box.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Gradient Background aligned to Content Box</title> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-origin"> + <link rel="match" href="gradient-border-box-ref.html"> + <meta name="assert" content="The background-origin: border-box; statement is understood."> + <style> +#x { + background-origin: border-box; + width: 200px; + height: 200px; + border-style: solid; + border-width: 40px; + border-color: transparent; + background-image: repeating-linear-gradient(to bottom right, white, black, white 30px); +} + </style> +</head> +<body> + <div id="x"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient-button-ref.html b/testing/web-platform/tests/css/css-images/gradient-button-ref.html new file mode 100644 index 0000000000..2f4d7ba77f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient-button-ref.html @@ -0,0 +1,15 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Big button with gradient (without padding)</title> +<style> + #button { + width: calc(300px + 2 * 30px); + height: calc(80px + 2 * 20px); + background: linear-gradient(blue, green); + border-width: 5px; + border-style: solid; + border-color: red; + border-radius: 10px; + } +</style> +<div id="button"></div> diff --git a/testing/web-platform/tests/css/css-images/gradient-button.html b/testing/web-platform/tests/css/css-images/gradient-button.html new file mode 100644 index 0000000000..76cd933bcc --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient-button.html @@ -0,0 +1,19 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Gradients with padding</title> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#gradients"> +<meta name="assert" content="gradients cover element padding"> +<link rel="match" href="gradient-button-ref.html"> +<style> +#button { + width: 300px; + height: 80px; + padding: 20px 30px; + background: linear-gradient(blue, green); + border-width: 5px; + border-style: solid; + border-color: red; + border-radius: 10px; +} +</style> +<div id="button"></div> diff --git a/testing/web-platform/tests/css/css-images/gradient-content-box-ref.html b/testing/web-platform/tests/css/css-images/gradient-content-box-ref.html new file mode 100644 index 0000000000..fae2954012 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient-content-box-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <style> +#x { + width: 200px; + height: 200px; + border: 40px; + border-style: solid; + border-color: transparent; + background-image: repeating-linear-gradient(to bottom right, white, black, white 30px); +} + </style> +</head> +<body> + <div id="x"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient-content-box.html b/testing/web-platform/tests/css/css-images/gradient-content-box.html new file mode 100644 index 0000000000..82b42ee8fb --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient-content-box.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Gradient Background aligned to Content Box</title> + <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-origin"> + <link rel="match" href="gradient-content-box-ref.html"> + <meta name="assert" content="The background-origin: content-box; statement is understood."> + <style> +#x { + background-origin: content-box; + width: 200px; + height: 200px; + padding: 40px; + background-image: repeating-linear-gradient(to bottom right, white, black, white 30px); +} + </style> +</head> +<body> + <div id="x"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient-move-stops-ref.html b/testing/web-platform/tests/css/css-images/gradient-move-stops-ref.html new file mode 100644 index 0000000000..cb2d50bb9f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient-move-stops-ref.html @@ -0,0 +1,19 @@ +<!doctype html> +<html> + +<head> + <meta charset="utf-8"> + <style> + #gradient { + width: 400px; + height: 300px; + background-image: linear-gradient(to right, yellow 0%, blue 70%, green 70%, green 100%); + } + </style> +</head> + +<body> + <div id="gradient"></div> +</body> + +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-images/gradient-move-stops.html b/testing/web-platform/tests/css/css-images/gradient-move-stops.html new file mode 100644 index 0000000000..21449bc300 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient-move-stops.html @@ -0,0 +1,22 @@ +<!doctype html> +<html> + +<head> + <meta charset="utf-8"> + <title>Linear gradient which needs some positions changed and inferred.</title> + <link rel="help" href="https://drafts.csswg.org/css-images-3/#radial-color-stops"> + <link rel="match" href="gradient-move-stops-ref.html"> + <style> + #gradient { + width: 400px; + height: 300px; + background-image: linear-gradient(to right, yellow, blue 70%, green 0); + } + </style> +</head> + +<body> + <div id="gradient"></div> +</body> + +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-images/gradient-nan-crash.html b/testing/web-platform/tests/css/css-images/gradient-nan-crash.html new file mode 100644 index 0000000000..8c4b647042 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient-nan-crash.html @@ -0,0 +1,2 @@ +<!doctype html> +<style>body { background: linear-gradient(black calc(0% * (1e39 - 1e39)), black 0%); }</style> diff --git a/testing/web-platform/tests/css/css-images/gradient-refcrash.html b/testing/web-platform/tests/css/css-images/gradient-refcrash.html new file mode 100644 index 0000000000..ef0efc61e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient-refcrash.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Does this gradient crash the browser?</title> +<link rel="match" href="../reference/blank.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#color-stop-syntax"> +<meta name="assert" content="Gradients with total length zero and absolute positioned stops do not crash."> +<style> + div { + background: linear-gradient(black 0,white); + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-images/gradient/color-stops-parsing.html b/testing/web-platform/tests/css/css-images/gradient/color-stops-parsing.html new file mode 100644 index 0000000000..a8baa63a67 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/color-stops-parsing.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<html> + <head> + <title>Color-stops parsing</title> + <link rel="author" title="Florin Malita" href="mailto:fmalita@chromium.org"> + <link rel="help" href="http://www.w3.org/TR/css-images-4/#color-stop-syntax"> + <meta name="assert" content="General color stop parsing (applicable to all gradients) follows CSS Images 4 rules."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <script> + var tests = [ + // invalid stops + { stops: "" , parse: false }, + { stops: "black" , parse: false }, + { stops: "black 0%" , parse: false }, + { stops: "black, 25%" , parse: false }, + { stops: "black, invalid" , parse: false }, + { stops: "black, , white" , parse: false }, + { stops: "black, white, 75%" , parse: false }, + { stops: "black, 25% 50%, white" , parse: false }, + { stops: "black, 25%, 50%, white" , parse: false }, + { stops: "black 10% 25% 50%, white", parse: false }, + { stops: ",black, white" , parse: false }, + { stops: "0%, black, white" , parse: false }, + + // basic stops + { stops: "black, white" , parse: true }, + { stops: "black 0, white" , parse: true }, + { stops: "black 0%, white" , parse: true }, + { stops: "black 0%, white 100%" , parse: true }, + { stops: "black, green, white" , parse: true }, + { stops: "black 0%, green 50%, white 100%" , parse: true }, + { stops: "black 50%, green 10%, white 100%", parse: true }, + + // interpolation hints + { stops: "black, 25%, white" , parse: true }, + { stops: "black 0%, 25%, white 100%" , parse: true }, + { stops: "black 0%, 15%, green 50%, 60%, white 100%", parse: true }, + + // dual-positioning + { stops: "black 0% 50%, white" , parse: true }, + { stops: "black 0% 50%, white 50% 100%" , parse: true }, + { stops: "black 0% 50%, green 25% 75%, white 50% 100%", parse: true }, + + // kitchen sink + { stops: "black 0% calc(100% / 5), 25%, green 30% 60%, calc(100% * 3 / 4), white calc(100% - 20%) 100%", parse: true }, + ]; + + function check_gradient(gradient, stops, shouldParse) { + var div = document.createElement('div'); + div.setAttribute("style", "background-image: " + gradient + "(" + stops + ")"); + + var inline_style = div.style.getPropertyValue("background-image"); + assert_equals(inline_style.startsWith(gradient), shouldParse); + + document.body.appendChild(div); + var computed_style = getComputedStyle(div).getPropertyValue("background-image"); + assert_equals(computed_style.startsWith(gradient), shouldParse); + + div.remove(); + } + + [ "linear-gradient", + "repeating-linear-gradient", + "radial-gradient", + "repeating-radial-gradient", + "conic-gradient", + "repeating-conic-gradient" + ].forEach(function(gradient) { + tests.forEach(function(tst) { + test(function() { + check_gradient(gradient, tst.stops, tst.parse); + }, gradient + "(" + tst.stops + ") " + (tst.parse ? "[ parsable ]" : "[ unparsable ]")); + }); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/css-color-4-colors-default-to-oklab-gradient.html b/testing/web-platform/tests/css/css-images/gradient/css-color-4-colors-default-to-oklab-gradient.html new file mode 100644 index 0000000000..9ef20db236 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/css-color-4-colors-default-to-oklab-gradient.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS color 4 colors default to OKLab gradient interpolation</title> + <meta name="fuzzy" content="maxDifference=1-8;totalPixels=0-24000"> + <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Test that new color inputs default to OKLab for gradient interpolation when none is provided. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html"> + <link rel="match" href="oklab-gradient-ref.html"> + <style> + .test { + width: 480px; + height: 50px; + background: linear-gradient(to right, rgb(255, 0, 0), color(srgb 0 1 0)); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001-ref.html new file mode 100644 index 0000000000..8f3070fcbe --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <style> + .test { + width: 100px; + height: 100px; + background: rgb(0% 50% 0%); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001.html new file mode 100644 index 0000000000..98a9d92345 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gradient interpolation</title> + <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000"> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="A narrow segment of a wide gradient is essentially a single color, allowing for anti-aliasing"> + <link rel="match" href="gradient-eval-001-ref.html"> + <style> + :root { + --start: rgb(0% 0% 0%); + --end: rgb(0% 100% 0%); + --t: 0.5; + --big: 131070000px; + } + .test { + width: 100px; + height: 100px; + background: linear-gradient(var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t)))); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002-ref.html new file mode 100644 index 0000000000..4db29f5ce9 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gradient interpolation</title> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <style> + .test { + width: 100px; + height: 100px; + background: red; + background: lab(60% 0 0); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002.html new file mode 100644 index 0000000000..5a0790ab0d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gradient interpolation</title> + <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000"> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Tests gradient interpolation in Lab when endpoints are specified in Lab and in gamut"> + <link rel="match" href="gradient-eval-002-ref.html"> + <style> + :root { + --start: lab(60% -50 50); /* rgb(20.71% 64.94% 17.04%) */ + --end: lab(60% 50 -50); /* rgb(76.52% 42.74% 91.9%) */ + --t: 0.5; + --big: 131070000px; + } + .test { + width: 100px; + height: 100px; + background: linear-gradient(in lab, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t)))); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003-ref.html new file mode 100644 index 0000000000..4db29f5ce9 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gradient interpolation</title> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <style> + .test { + width: 100px; + height: 100px; + background: red; + background: lab(60% 0 0); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003.html new file mode 100644 index 0000000000..86f76a7365 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gradient interpolation</title> + <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000"> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Gradient interpolation takes place in the specified space rather than in the colorspace of the endpoints"> + <link rel="match" href="gradient-eval-003-ref.html"> + <style> + :root { + --start: rgb(34.04% 57.84% 91.39%); /* lab(60% 0 -50) */ + --end: rgb(64.07% 56.14% 19.72%); /* lab(60% 0 50) */ + --t: 0.5; + --big: 131070000px; + } + .test { + width: 100px; + height: 100px; + background: linear-gradient(in lab, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t)))); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004-ref.html new file mode 100644 index 0000000000..f197386bcf --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gradient interpolation</title> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <style> + .test { + width: 100px; + height: 100px; + background: rgb(0% 50% 50%); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004.html new file mode 100644 index 0000000000..ada406fd2a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gradient interpolation</title> + <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000"> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#missing"> + <meta name="assert" content="Gradient evaluation when one of the components is none works as specified"/> + <link rel="match" href="gradient-eval-004-ref.html"> + <style> + :root { + --start: rgb(0% 0% 50%); + --end: rgb(0% 100% none); + --t: 0.5; + --big: 131070000px; + } + .test { + width: 100px; + height: 100px; + background: linear-gradient(var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t)))); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005-ref.html new file mode 100644 index 0000000000..b4a36ff6d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gradient interpolation</title> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <style> + .test { + width: 100px; + height: 100px; + background: red; + background: lch(60% 60 0); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005.html new file mode 100644 index 0000000000..1165fcb5a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gradient interpolation</title> + <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000"> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Test gradient interpolation in LCH with both endpoints in gamut."> + <link rel="match" href="gradient-eval-005-ref.html"> + <style> + :root { + --start: lch(60% 60 -70); + --end: lch(60% 60 70); + --t: 0.5; + --big: 131070000px; + } + .test { + width: 100px; + height: 100px; + background: linear-gradient(in lch, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t)))); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006-ref.html new file mode 100644 index 0000000000..8ed6e683b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gradient interpolation</title> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <style> + .test { + width: 100px; + height: 100px; + background: red; + background: lab(75% 0 0); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006.html new file mode 100644 index 0000000000..e719d2e110 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gradient interpolation</title> + <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000"> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Tests that interpolation between two out-of-gamut doesn't gamut-map the end-points before interpolation"> + <link rel="match" href="gradient-eval-006-ref.html"> + <style> + :root { + --start: lab(75% 50 86.6); /* rgb(111.9% 55.94% -11.3%) */ + --end: lab(75% -50 -86.6); /* rgb(-76.3% 83.91% 135.5%) */ + --t: 0.5; + --big: 131070000px; + } + .test { + width: 100px; + height: 100px; + background: linear-gradient(in lab, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t)))); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007-ref.html new file mode 100644 index 0000000000..b4a36ff6d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gradient interpolation</title> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <style> + .test { + width: 100px; + height: 100px; + background: red; + background: lch(60% 60 0); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007.html new file mode 100644 index 0000000000..e85fec2b4d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gradient interpolation</title> + <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000"> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Test gradient interpolation in LCH uses the shorter hue-interpolation method if unspecified"> + <link rel="match" href="gradient-eval-007-ref.html"> + <style> + :root { + --start: lch(60% 60 70); + --end: lch(60% 60 290); + --t: 0.5; + --big: 131070000px; + } + .test { + width: 100px; + height: 100px; + background: linear-gradient(in lch, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t)))); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008-ref.html new file mode 100644 index 0000000000..b4a36ff6d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gradient interpolation</title> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <style> + .test { + width: 100px; + height: 100px; + background: red; + background: lch(60% 60 0); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008.html new file mode 100644 index 0000000000..5201062f8e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gradient interpolation</title> + <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000"> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Test gradient interpolation in LCH respects the longer hue-interpolation method"> + <link rel="match" href="gradient-eval-008-ref.html"> + <style> + :root { + --start: lch(60% 60 170); + --end: lch(60% 60 190); + --t: 0.5; + --big: 131070000px; + } + .test { + width: 100px; + height: 100px; + background: linear-gradient(in lch longer hue, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t)))); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009-ref.html new file mode 100644 index 0000000000..b4a36ff6d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gradient interpolation</title> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <style> + .test { + width: 100px; + height: 100px; + background: red; + background: lch(60% 60 0); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009.html new file mode 100644 index 0000000000..d361bdc3f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>Gradient interpolation</title> + <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000"> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Test gradient interpolation in LCH works if the hue angles are not normalized to 0..360"> + <link rel="match" href="gradient-eval-009-ref.html"> <!-- could be 007, this is the same but with 3600 added to each component --> + <style> + :root { + --start: lch(60% 60 3670); + --end: lch(60% 60 3890); + --t: 0.5; + --big: 131070000px; + } + .test { + width: 100px; + height: 100px; + background: linear-gradient(in lch, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t)))); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/legacy-color-gradient.html b/testing/web-platform/tests/css/css-images/gradient/legacy-color-gradient.html new file mode 100644 index 0000000000..e6af42103b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/legacy-color-gradient.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>Legacy color gradient interpolation</title> + <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-24000"> + <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Legacy colors are interpolated in sRGB color space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html"> + <link rel="match" href="srgb-gradient-ref.html"> + <style> + .test { + width: 480px; + height: 50px; + background: linear-gradient(to right, rgb(255, 0, 0), rgb(0, 255, 0)); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/oklab-gradient-ref.html b/testing/web-platform/tests/css/css-images/gradient/oklab-gradient-ref.html new file mode 100644 index 0000000000..ca2232e380 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/oklab-gradient-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>OKLab gradient interpolation</title> + <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Test OKLab as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html"> + <style> + .test { + width: 480px; + height: 50px; + background: url("resources/oklab-gradient.png"); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/oklab-gradient.html b/testing/web-platform/tests/css/css-images/gradient/oklab-gradient.html new file mode 100644 index 0000000000..5291a4f428 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/oklab-gradient.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>OKLab gradient interpolation</title> + <meta name="fuzzy" content="maxDifference=1-8;totalPixels=0-24000"> + <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Test OKLab as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html"> + <link rel="match" href="oklab-gradient-ref.html"> + <style> + .test { + width: 480px; + height: 50px; + background: linear-gradient(to right in oklab, rgb(255, 0, 0), rgb(0, 255, 0)); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/resources/oklab-gradient.png b/testing/web-platform/tests/css/css-images/gradient/resources/oklab-gradient.png Binary files differnew file mode 100644 index 0000000000..9e52fd9b84 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/resources/oklab-gradient.png diff --git a/testing/web-platform/tests/css/css-images/gradient/resources/red-green-gradient-linear-colorspace.png b/testing/web-platform/tests/css/css-images/gradient/resources/red-green-gradient-linear-colorspace.png Binary files differnew file mode 100644 index 0000000000..e379a5df3e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/resources/red-green-gradient-linear-colorspace.png diff --git a/testing/web-platform/tests/css/css-images/gradient/resources/srgb-gradient.png b/testing/web-platform/tests/css/css-images/gradient/resources/srgb-gradient.png Binary files differnew file mode 100644 index 0000000000..1fc6660919 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/resources/srgb-gradient.png diff --git a/testing/web-platform/tests/css/css-images/gradient/resources/xyz-gradient.png b/testing/web-platform/tests/css/css-images/gradient/resources/xyz-gradient.png Binary files differnew file mode 100644 index 0000000000..eb3ab78936 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/resources/xyz-gradient.png diff --git a/testing/web-platform/tests/css/css-images/gradient/srgb-gradient-ref.html b/testing/web-platform/tests/css/css-images/gradient/srgb-gradient-ref.html new file mode 100644 index 0000000000..49a402d68e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/srgb-gradient-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>sRGB gradient interpolation</title> + <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Test srgb as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html"> + <style> + .test { + width: 480px; + height: 50px; + background: url("resources/srgb-gradient.png"); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/srgb-gradient.html b/testing/web-platform/tests/css/css-images/gradient/srgb-gradient.html new file mode 100644 index 0000000000..4cdb0f17b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/srgb-gradient.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>sRGb gradient interpolation</title> + <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-24000"> + <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Test srgb as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html"> + <link rel="match" href="srgb-gradient-ref.html"> + <style> + .test { + width: 480px; + height: 50px; + background: linear-gradient(to right in srgb, rgb(255 0 0), rgb(0 255 0)); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient-ref.html b/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient-ref.html new file mode 100644 index 0000000000..34f660f6f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>sRGB-linear gradient interpolation</title> + <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Test sRGB-linear as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html"> + <style> + .test { + width: 480px; + height: 50px; + background: url("resources/red-green-gradient-linear-colorspace.png"); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient.html b/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient.html new file mode 100644 index 0000000000..8d928e21b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>sRGB-linear gradient interpolation</title> + <meta name="fuzzy" content="maxDifference=1-8;totalPixels=0-24000"> + <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Test sRGB-linear as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html"> + <link rel="match" href="srgb-linear-gradient-ref.html"> + <style> + .test { + width: 480px; + height: 50px; + background: linear-gradient(to right in srgb-linear, rgb(255, 0, 0), rgb(0, 255, 0)); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/xyz-gradient-ref.html b/testing/web-platform/tests/css/css-images/gradient/xyz-gradient-ref.html new file mode 100644 index 0000000000..a435bbfd58 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/xyz-gradient-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>XYZ gradient interpolation</title> + <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Test XYZ as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html"> + <style> + .test { + width: 480px; + height: 50px; + background: url("resources/red-green-gradient-linear-colorspace.png"); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/xyz-gradient.html b/testing/web-platform/tests/css/css-images/gradient/xyz-gradient.html new file mode 100644 index 0000000000..74d6efe226 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/xyz-gradient.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>XYZ gradient interpolation</title> + <meta name="fuzzy" content="maxDifference=1-8;totalPixels=0-24000"> + <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Test XYZ as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html"> + <link rel="match" href="xyz-gradient-ref.html"> + <style> + .test { + width: 480px; + height: 50px; + background: linear-gradient(to right in xyz, rgb(255, 0, 0), rgb(0, 255, 0)); + } + </style> + </head> + <body> + <div class="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradients-with-border-ref.html b/testing/web-platform/tests/css/css-images/gradients-with-border-ref.html new file mode 100644 index 0000000000..32a2527af5 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradients-with-border-ref.html @@ -0,0 +1,50 @@ +<!doctype html> +<style> + .test { + width: 200px; + height: 100px; + margin-left: 90px; + border: solid 10px blue; + } + + .spacer { + float: left; + width: 90px; + height: 120px; + background-color: blue; + } + + .outer { + width: 200px; + height: 100px; + margin-left: 90px; + padding: 10px; + background-color: blue; + } + + #gradient1 { + width: 200px; + height: 100px; + background-image: linear-gradient(to right top, black 49%, white 50%); + } + + #gradient2 { + background-image: linear-gradient(to right top, black 49%, white 50%); + } + + #gradient3 { + background-image: radial-gradient(ellipse at 30% 30%, black 49%, white 50%); + } +</style> + +<div> + <div class="spacer"></div> + <div class="outer"> + <div id="gradient1"></div> + </div> +</div> +<div id="gradient2" class="test"></div> +<div> + <div class="spacer"></div> + <div id="gradient3" class="test"></div> +</div> diff --git a/testing/web-platform/tests/css/css-images/gradients-with-border.html b/testing/web-platform/tests/css/css-images/gradients-with-border.html new file mode 100644 index 0000000000..cfe751da6b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradients-with-border.html @@ -0,0 +1,41 @@ +<!doctype html> +<html> + +<head> + <meta charset="utf-8"> + <title>Gradients with borders</title> + <link rel="help" href="https://drafts.csswg.org/css-images-3/#gradients"> + <meta name="assert" content="Correct placement and rendering of gradients inside elements with borders."> + <link rel="match" href="gradients-with-border-ref.html"> + <meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-10955"> + <style> + .test { + width: 200px; + height: 100px; + border: solid 10px blue; + } + + #gradient1 { + border-left-width: 100px; + background-image: linear-gradient(to right top, black 49%, white 50%); + } + + #gradient2 { + margin-left: 90px; + background-image: linear-gradient(to right top, black 49%, white 50%); + } + + #gradient3 { + border-left-width: 100px; + background-image: radial-gradient(ellipse at 30% 30%, black 49%, white 50%); + } + </style> +</head> + +<body> + <div id="gradient1" class="test"></div> + <div id="gradient2" class="test"></div> + <div id="gradient3" class="test"></div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-images/gradients-with-transparent-ref.html b/testing/web-platform/tests/css/css-images/gradients-with-transparent-ref.html new file mode 100644 index 0000000000..9f52476b2a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradients-with-transparent-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Linear gradient with transparent reference</title> +<style> + .test { + width: 200px; + height: 100px; + margin-left: 90px; + } + .gradient { + background-image: linear-gradient(to left, blue 0%, blue 20%, rgba(0,0,255,0)); + } +</style> + +<body> + <p>Gradient using 'transparent'</p> + <div id="gradient1" class="test gradient"></div> + <br /> + <p>Gradient using rgba(0,0,255,0)</p> + <div id="gradient2" class="test gradient"></div> +</body> diff --git a/testing/web-platform/tests/css/css-images/gradients-with-transparent.html b/testing/web-platform/tests/css/css-images/gradients-with-transparent.html new file mode 100644 index 0000000000..204bc760bd --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradients-with-transparent.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Gradients with transparent</title> +<link rel="help" href="https://www.w3.org/TR/css3-images/#linear-gradients"> +<link rel="match" href="gradients-with-transparent-ref.html"> +<meta name="assert" content="The blue gradients to 'transparent' keyword, and rgba(0,0,0,0), match the gradient to rgba(0,0,255,0)"> +<style> + .test { + width: 200px; + height: 100px; + margin-left: 90px; + } + #gradient1 { + background-image: linear-gradient(to left, blue 0%, blue 20%, transparent); + } + #gradient2 { + background-image: linear-gradient(to left, blue 0%, blue 20%, rgba(0,0,0,0)); + } +</style> +<body> + <p>Gradient using 'transparent'</p> + <div id="gradient1" class="test"></div> + <br /> + <p>Gradient using rgba(0,0,255,0)</p> + <div id="gradient2" class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-images/idlharness.html b/testing/web-platform/tests/css/css-images/idlharness.html new file mode 100644 index 0000000000..c9bf69047e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/idlharness.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>css-images IDL tests</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/WebIDLParser.js"></script> +<script src="/resources/idlharness.js"></script> +<script> + 'use strict'; + + idl_test( + ['css-images-4'], + ['cssom'], + idl_array => { + // No objects, + } + ); +</script> diff --git a/testing/web-platform/tests/css/css-images/image-fit-001.xht b/testing/web-platform/tests/css/css-images/image-fit-001.xht new file mode 100644 index 0000000000..169d55c0f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-fit-001.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Object Fit - initial value</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="help" href="https://www.w3.org/TR/css-images-3/#the-object-fit"/> + <meta name="assert" content="The initial value of the 'object-fit' property is 'fill'."/> + <style type="text/css"><![CDATA[ + img { + background: red; + height: 100px; + width: 50px; + } + ]]></style> + </head> + <body> + <div>A green block appears below. There must be no red on the page.</div> + <div><img src="support/swatch-green.png" alt="Failed: image missing"/></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-fit-006.xht b/testing/web-platform/tests/css/css-images/image-fit-006.xht new file mode 100644 index 0000000000..43f306293e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-fit-006.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Object Fit - 'fill', explicit 'height'/'width'</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="help" href="https://www.w3.org/TR/css-images-3/#the-object-fit"/> + <meta name="assert" content="The 'fill' value of the 'object-fit' property does not affect the usual calculation of the used 'height' and 'width."/> + <meta name="assert" content="The 'fill' value of the 'image-scaling' property scales the content height and width independently so that the edges of the content just meet the edges of the box established by the used 'height' and 'width'."/> + <style type="text/css"><![CDATA[ + img { + border: 5px solid blue; + height: 50px; + width: 100px; + object-fit: fill; + background: red; + } + ]]></style> + </head> + <body> + <div>The image below should fill the blue border with no red between the border and the image.</div> + <div><img src="support/intrinsic-size.jpg" alt="Failed: image missing" /></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-image.html new file mode 100644 index 0000000000..866e945960 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-image.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation does apply to background-image</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-background-image-ref.html"> +<meta name=fuzzy content="0-3;0-50"> +<style> +div { width: 100px; height: 50px; background-image: url(support/exif-orientation-2-ur.jpg); } +.no-orient { image-orientation: none; } +</style> +<div></div> +<div class="no-orient"></div> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-position.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-position.html new file mode 100644 index 0000000000..d90035728b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-position.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation with background positions</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-background-position-ref.html"> +<meta name="fuzzy" content="0-5;0-50"> +<style> + .exif-2 { + position: absolute; + top: 10px; + left: 10px; + width: 50px; + height: 50PX; + background-color: grey; + background-image: url(support/exif-orientation-2-ur.jpg); + background-repeat: no-repeat; + background-position: -30px -20px; + } + + .exif-6 { + position: absolute; + top: 10px; + left: 70px; + width: 50px; + height: 50PX; + background-color: grey; + background-image: url(support/exif-orientation-6-ru.jpg); + background-repeat: no-repeat; + background-position: -20px -30px; + } + +</style> +</head> +<body> + <div class="exif-2"> + </div> + <div class="exif-6"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties-border-radius.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties-border-radius.html new file mode 100644 index 0000000000..d7ddabf966 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties-border-radius.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation with background properties</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-background-properties-border-radius-ref.html"> +<meta name=fuzzy content="0-3;0-331"> +<style> + div { + position: absolute; + width: 200px; + height: 200PX; + background-image: url(support/exif-orientation-5-lu.jpg); + background-repeat: no-repeat; + border-radius: 5px; + } + + .repeat { + background-repeat: repeat; + top: 20px; + left: 20px; + } + + .position { + background-position: bottom right; + top: 20px; + left: 240px; + } + + .cover { + background-size: cover; + top: 240px; + left: 20px; + } + + .contain { + background-size: contain; + top: 240px; + left: 240px; + } +</style> +</head> +<body> + <div class="repeat"> + </div> + <div class="position"> + </div> + <div class="cover"> + </div> + <div class="contain"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties.html new file mode 100644 index 0000000000..431fba1330 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-background-properties.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation with background properties</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-background-properties-ref.html"> +<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-313"> +<style> + div { + position: absolute; + width: 200px; + height: 200PX; + background-image: url(support/exif-orientation-5-lu.jpg); + background-repeat: no-repeat; + } + + .repeat { + background-repeat: repeat; + top: 20px; + left: 20px; + } + + .position { + background-position: bottom right; + top: 20px; + left: 240px; + } + + .cover { + background-size: cover; + top: 240px; + left: 20px; + } + + .contain { + background-size: contain; + top: 240px; + left: 240px; + } +</style> +</head> +<body> + <div class="repeat"> + </div> + <div class="position"> + </div> + <div class="cover"> + </div> + <div class="contain"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-border-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-border-image.html new file mode 100644 index 0000000000..29ff38cc48 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-border-image.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation does apply to border images</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-border-image-ref.html"> +<meta name="fuzzy" content="0-16;0-80"> +<style> +div { + width: 100px; + height: 50px; + border: 10px solid black; + border-image: url(support/exif-orientation-2-ur.jpg) 10; +} +.no-orient { image-orientation: none; } +</style> +<div></div> +<div class="no-orient"></div> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-cursor.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-cursor.html new file mode 100644 index 0000000000..00a80d46ba --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-cursor.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation does apply to cursor</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="flags" content="interact"> +<style> +div { width: 100px; height: 100px; border: solid blue; margin-left: 64px; } +.orient { cursor: url(support/cursor-8-llo.jpg) 33 0, default; } +.no-orient { cursor: url(support/cursor-8-llo.jpg) 64 33, default; image-orientation: none; } +</style> +<p>The test passes if</p> +<ul> + <li>when moved inside either of the blue boxes, the cursor is shown as a + black arrow on a white background, with the point of the arrow at the current + cursor location</li> + <li>in the first box, the cursor points up and to the right</li> + <li>in the second box, the cursor points down and to the right</li> +</ul> +<div class="orient"></div> +<div class="no-orient"></div> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-default.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-default.html new file mode 100644 index 0000000000..3fefbd073a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-default.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation defaults to from-image</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-default-ref.html"> +<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236"> +<style> + body { + overflow: hidden; + } + div { + display: inline-block; + width: 100px; + vertical-align: top; + } +</style> +</head> +<body> + <p>The images should rotate respecting their EXIF orientation because + no image-orientation property is given.</p> + <div> + <img src="support/exif-orientation-1-ul.jpg"/> + <br>Normal + </div> + <div> + <img src="support/exif-orientation-2-ur.jpg"/> + <br>Flipped horizontally + </div> + <div> + <img src="support/exif-orientation-3-lr.jpg"/> + <br>Rotated 180° + </div> + <div> + <img src="support/exif-orientation-4-lol.jpg"/> + <br>Flipped vertically + </div> + <div> + <img src="support/exif-orientation-5-lu.jpg"/> + <br>Rotated 90° CCW and flipped vertically + </div> + <div> + <img src="support/exif-orientation-6-ru.jpg"/> + <br>Rotated 90° CW + </div> + <div> + <img src="support/exif-orientation-7-rl.jpg"/> + <br>Rotated 90° CW and flipped vertically + </div> + <div> + <img src="support/exif-orientation-8-llo.jpg"/> + <br>Rotated 90° CCW + </div> + <div> + <img src="support/exif-orientation-9-u.jpg"/> + <br>Undefined (invalid value) + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-exif-png.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-exif-png.html new file mode 100644 index 0000000000..85d807e398 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-exif-png.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: late EXIF data is ignored</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#url-metadata"> +<link rel="match" href="reference/image-orientation-exif-png-ref.html"> +<img src="support/F-exif-early.png"> +<img src="support/F-exif-late.png"> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic1.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic1.html new file mode 100644 index 0000000000..b42b010d62 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic1.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: change from image-orientation: none to from-image with will-change: transform</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-from-image-ref.html"> +<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236"> +<style> + body { + overflow: hidden;} + img { + will-change: transform; + image-orientation: none; + } + div { + display: inline-block; + width: 100px; + vertical-align: top; + } +</style> +<script> + function runTest() { + for (var i = 1; i <= 9; i++) { + document.getElementById("img" + i).style.imageOrientation = "from-image"; + } + } +</script> +</head> +<body onload="runTest()"> + <p>The images should rotate respecting their EXIF orientation because + image-orientation: from-image is specified.</p> + <div> + <img id="img1" src="support/exif-orientation-1-ul.jpg"/> + <br>Normal + </div> + <div> + <img id="img2" src="support/exif-orientation-2-ur.jpg"/> + <br>Flipped horizontally + </div> + <div> + <img id="img3" src="support/exif-orientation-3-lr.jpg"/> + <br>Rotated 180° + </div> + <div> + <img id="img4" src="support/exif-orientation-4-lol.jpg"/> + <br>Flipped vertically + </div> + <div> + <img id="img5" src="support/exif-orientation-5-lu.jpg"/> + <br>Rotated 90° CCW and flipped vertically + </div> + <div> + <img id="img6" src="support/exif-orientation-6-ru.jpg"/> + <br>Rotated 90° CW + </div> + <div> + <img id="img7" src="support/exif-orientation-7-rl.jpg"/> + <br>Rotated 90° CW and flipped vertically + </div> + <div> + <img id="img8" src="support/exif-orientation-8-llo.jpg"/> + <br>Rotated 90° CCW + </div> + <div> + <img id="img9" src="support/exif-orientation-9-u.jpg"/> + <br>Undefined (invalid value) + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic2.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic2.html new file mode 100644 index 0000000000..39f23621a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited-dynamic2.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: change from image-orientation: from-image to none with will-change: transform</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-none-ref.html"> +<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-123"> +<style> + body { + overflow: hidden; + } + img { + will-change: transform; + image-orientation: from-image; + } + div { + display: inline-block; + width: 100px; + vertical-align: top; + } +</style> +<script> + function runTest() { + for (var i = 1; i <= 9; i++) { + document.getElementById("img" + i).style.imageOrientation = "none"; + } + } +</script> +</head> +<body onload="runTest()"> + <p>The images should not rotate respecting their EXIF orientation because + image-orientation: none is specified.</p> + <div> + <img id="img1" src="support/exif-orientation-1-ul.jpg"/> + </div> + <div> + <img id="img2" src="support/exif-orientation-2-ur.jpg"/> + </div> + <div> + <img id="img3" src="support/exif-orientation-3-lr.jpg"/> + </div> + <div> + <img id="img4" src="support/exif-orientation-4-lol.jpg"/> + </div> + <div> + <img id="img5" src="support/exif-orientation-5-lu.jpg"/> + </div> + <div> + <img id="img6" src="support/exif-orientation-6-ru.jpg"/> + </div> + <div> + <img id="img7" src="support/exif-orientation-7-rl.jpg"/> + </div> + <div> + <img id="img8" src="support/exif-orientation-8-llo.jpg"/> + </div> + <div> + <img id="img9" src="support/exif-orientation-9-u.jpg"/> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited.html new file mode 100644 index 0000000000..4e5032779d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-composited.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: from-image with will-change: transform</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-from-image-ref.html"> +<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236"> +<style> + body { + overflow: hidden; + image-orientation: from-image; + } + img { + will-change: transform; + } + div { + display: inline-block; + width: 100px; + vertical-align: top; + } +</style> +</head> +<body> + <p>The images should rotate respecting their EXIF orientation because + image-orientation: from-image is specified.</p> + <div> + <img src="support/exif-orientation-1-ul.jpg"/> + <br>Normal + </div> + <div> + <img src="support/exif-orientation-2-ur.jpg"/> + <br>Flipped horizontally + </div> + <div> + <img src="support/exif-orientation-3-lr.jpg"/> + <br>Rotated 180° + </div> + <div> + <img src="support/exif-orientation-4-lol.jpg"/> + <br>Flipped vertically + </div> + <div> + <img src="support/exif-orientation-5-lu.jpg"/> + <br>Rotated 90° CCW and flipped vertically + </div> + <div> + <img src="support/exif-orientation-6-ru.jpg"/> + <br>Rotated 90° CW + </div> + <div> + <img src="support/exif-orientation-7-rl.jpg"/> + <br>Rotated 90° CW and flipped vertically + </div> + <div> + <img src="support/exif-orientation-8-llo.jpg"/> + <br>Rotated 90° CCW + </div> + <div> + <img src="support/exif-orientation-9-u.jpg"/> + <br>Undefined (invalid value) + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-computed-style.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-computed-style.html new file mode 100644 index 0000000000..a8ded7c226 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-computed-style.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation:none computed style</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + body { + overflow: hidden; + image-orientation: from-image; + } + div { + display: inline-block; + width: 100px; + vertical-align: top; + } +</style> +<script> +function run_tests() { + test(function() { + for (var i = 1; i <= 4; i++) { + var el = document.getElementById("img" + i); + var computedStyle = window.getComputedStyle(el); + assert_equals(computedStyle.width, "100px"); + assert_equals(computedStyle.height, "50px"); + assert_equals(computedStyle.imageOrientation, "from-image"); + } + for (var i = 5; i <= 8; i++) { + var el = document.getElementById("img" + i); + var computedStyle = window.getComputedStyle(el); + assert_equals(computedStyle.width, "50px"); + assert_equals(computedStyle.height, "100px"); + assert_equals(computedStyle.imageOrientation, "from-image"); + } + var el = document.getElementById("img9"); + var computedStyle = window.getComputedStyle(el); + assert_equals(computedStyle.width, "100px"); + assert_equals(computedStyle.height, "50px"); + assert_equals(computedStyle.imageOrientation, "from-image"); + }, "image-orientation:from-image computed style reports correct values"); +} +</script> +</head> +<body onload="run_tests()"> + <div><img id="img1" src="support/exif-orientation-1-ul.jpg"/></div> + <div><img id="img2" src="support/exif-orientation-2-ur.jpg"/></div> + <div><img id="img3" src="support/exif-orientation-3-lr.jpg"/></div> + <div><img id="img4" src="support/exif-orientation-4-lol.jpg"/></div> + <div><img id="img5" src="support/exif-orientation-5-lu.jpg"/></div> + <div><img id="img6" src="support/exif-orientation-6-ru.jpg"/></div> + <div><img id="img7" src="support/exif-orientation-7-rl.jpg"/></div> + <div><img id="img8" src="support/exif-orientation-8-llo.jpg"/></div> + <div><img id="img9" src="support/exif-orientation-9-u.jpg"/></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-content-images.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-content-images.html new file mode 100644 index 0000000000..a5be8c2277 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-content-images.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: from-image for content images</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-from-image-content-images-ref.html"> +<meta name=fuzzy content="0-5;0-250"> +<style> + div.image { + display: inline-block; + } + div.container { + display: inline-block; + width: 100px; + vertical-align: top; + image-orientation: from-image; + } + img { + width: 100px; + height: 100px; + background-repeat: no-repeat; + } + body { + overflow: hidden; + } +</style> +</head> +<body> + <p>The images should rotate respecting their EXIF orientation because + image-orientation: from-image is specified.</p> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-1-ul.jpg)"></div> + <br>Normal + </div> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-2-ur.jpg)"></div> + <br>Flipped horizontally + </div> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-3-lr.jpg)"></div> + <br>Rotated 180° + </div> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-4-lol.jpg)"></div> + <br>Flipped vertically + </div> + <br> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-5-lu.jpg)"></div> + <br>Rotated 90° CCW and flipped vertically + </div> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-6-ru.jpg)"></div> + <br>Rotated 90° CW + </div> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-7-rl.jpg)"></div> + <br>Rotated 90° CW and flipped vertically + </div> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-8-llo.jpg)"></div> + <br>Rotated 90° CCW + </div> + <br> + <div class="container"> + <img style="background-image: url(support/exif-orientation-5-lu.jpg)"></img> + <br>Rotated 90° CCW and flipped vertically + </div> + <div class="container"> + <img style="background-image: url(support/exif-orientation-6-ru.jpg)"></img> + <br>Rotated 90° CW + </div> + <div class="container"> + <img style="background-image: url(support/exif-orientation-7-rl.jpg)"></img> + <br>Rotated 90° CW and flipped vertically + </div> + <div class="container"> + <img style="background-image: url(support/exif-orientation-8-llo.jpg)"></img> + <br>Rotated 90° CCW + </div> + <br> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-9-u.jpg)"></div> + <br>Undefined (invalid value) + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic1.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic1.html new file mode 100644 index 0000000000..d97492b7f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic1.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: change from image-orientation: none to from-image</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-from-image-ref.html"> +<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236"> +<style> + body { + overflow: hidden; + } + img { + image-orientation: none; + } + div { + display: inline-block; + width: 100px; + vertical-align: top; + } +</style> +<script> + function runTest() { + for (var i = 1; i <= 9; i++) { + document.getElementById("img" + i).style.imageOrientation = "from-image"; + } + } +</script> +</head> +<body onload="runTest()"> + <p>The images should rotate respecting their EXIF orientation because + image-orientation: from-image is specified.</p> + <div> + <img id="img1" src="support/exif-orientation-1-ul.jpg"/> + <br>Normal + </div> + <div> + <img id="img2" src="support/exif-orientation-2-ur.jpg"/> + <br>Flipped horizontally + </div> + <div> + <img id="img3" src="support/exif-orientation-3-lr.jpg"/> + <br>Rotated 180° + </div> + <div> + <img id="img4" src="support/exif-orientation-4-lol.jpg"/> + <br>Flipped vertically + </div> + <div> + <img id="img5" src="support/exif-orientation-5-lu.jpg"/> + <br>Rotated 90° CCW and flipped vertically + </div> + <div> + <img id="img6" src="support/exif-orientation-6-ru.jpg"/> + <br>Rotated 90° CW + </div> + <div> + <img id="img7" src="support/exif-orientation-7-rl.jpg"/> + <br>Rotated 90° CW and flipped vertically + </div> + <div> + <img id="img8" src="support/exif-orientation-8-llo.jpg"/> + <br>Rotated 90° CCW + </div> + <div> + <img id="img9" src="support/exif-orientation-9-u.jpg"/> + <br>Undefined (invalid value) + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic2.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic2.html new file mode 100644 index 0000000000..ee4c3ff1fb --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-dynamic2.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: change from image-orientation: from-image to none</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-none-ref.html"> +<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-123"> +<style> + body { + overflow: hidden; + } + img { + image-orientation: from-image; + } + div { + display: inline-block; + width: 100px; + vertical-align: top; + } +</style> +<script> + function runTest() { + for (var i = 1; i <= 9; i++) { + document.getElementById("img" + i).style.imageOrientation = "none"; + } + } +</script> +</head> +<body onload="runTest()"> + <p>The images should not rotate respecting their EXIF orientation because + image-orientation: none is specified.</p> + <div> + <img id="img1" src="support/exif-orientation-1-ul.jpg"/> + </div> + <div> + <img id="img2" src="support/exif-orientation-2-ur.jpg"/> + </div> + <div> + <img id="img3" src="support/exif-orientation-3-lr.jpg"/> + </div> + <div> + <img id="img4" src="support/exif-orientation-4-lol.jpg"/> + </div> + <div> + <img id="img5" src="support/exif-orientation-5-lu.jpg"/> + </div> + <div> + <img id="img6" src="support/exif-orientation-6-ru.jpg"/> + </div> + <div> + <img id="img7" src="support/exif-orientation-7-rl.jpg"/> + </div> + <div> + <img id="img8" src="support/exif-orientation-8-llo.jpg"/> + </div> + <div> + <img id="img9" src="support/exif-orientation-9-u.jpg"/> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-embedded-content.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-embedded-content.html new file mode 100644 index 0000000000..a07db17a5d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image-embedded-content.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: from-image in embedded content</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-from-image-embedded-content-ref.html"> +<meta name=fuzzy content="0-5;0-200"> +<style> + iframe { + display: inline-block; + width: 120px; + height: 110px; + vertical-align: top; + image-orientation: from-image; + } + embed { + object-fit: none; + object-position: top left; + image-orientation: from-image; + } + object { + object-fit: none; + object-position: top left; + image-orientation: from-image; + } +</style> +</head> +<body> + <p>The images should rotate respecting their EXIF orientation because image + documents always respect the orientation, regardless of the image-orientation + property.</p> + <iframe src="support/exif-orientation-1-ul.jpg" frameborder=0></iframe> + <embed type="image/jpeg" src="support/exif-orientation-2-ur.jpg" width="120" height="110px"> + <object type="image/jpeg" data="support/exif-orientation-3-lr.jpg" width="120" height="110px"></object> + <iframe src="support/exif-orientation-4-lol.jpg" frameborder=0></iframe> + <br> + <iframe src="support/exif-orientation-5-lu.jpg" frameborder=0></iframe> + <embed type="image/jpeg" src="support/exif-orientation-6-ru.jpg" width="120" height="110px"> + <object type="image/jpeg" data="support/exif-orientation-7-rl.jpg" width="120" height="110px"></object> + <iframe src="support/exif-orientation-8-llo.jpg" frameborder=0></iframe> + <br> + <iframe src="support/exif-orientation-9-u.jpg" frameborder=0></iframe> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image.html new file mode 100644 index 0000000000..00d87fc406 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-from-image.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: from-image</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-from-image-ref.html"> +<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236"> +<style> + body { + overflow: hidden; + image-orientation: from-image; + } + div { + display: inline-block; + width: 100px; + vertical-align: top; + } +</style> +</head> +<body> + <p>The images should rotate respecting their EXIF orientation because + image-orientation: from-image is specified.</p> + <div> + <img src="support/exif-orientation-1-ul.jpg"/> + <br>Normal + </div> + <div> + <img src="support/exif-orientation-2-ur.jpg"/> + <br>Flipped horizontally + </div> + <div> + <img src="support/exif-orientation-3-lr.jpg"/> + <br>Rotated 180° + </div> + <div> + <img src="support/exif-orientation-4-lol.jpg"/> + <br>Flipped vertically + </div> + <div> + <img src="support/exif-orientation-5-lu.jpg"/> + <br>Rotated 90° CCW and flipped vertically + </div> + <div> + <img src="support/exif-orientation-6-ru.jpg"/> + <br>Rotated 90° CW + </div> + <div> + <img src="support/exif-orientation-7-rl.jpg"/> + <br>Rotated 90° CW and flipped vertically + </div> + <div> + <img src="support/exif-orientation-8-llo.jpg"/> + <br>Rotated 90° CCW + </div> + <div> + <img src="support/exif-orientation-9-u.jpg"/> + <br>Undefined (invalid value) + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-iframe.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-iframe.html new file mode 100644 index 0000000000..69cfb5ceae --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-iframe.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation does not apply to iframe contents</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-iframe-ref.html"> +<style> +.no-orient { image-orientation: none; } +</style> +<iframe src="support/exif-orientation-2-ur.jpg"></iframe> +<iframe src="support/exif-orientation-2-ur.jpg" class="no-orient"></iframe> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-img-object-fit.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-img-object-fit.html new file mode 100644 index 0000000000..5551eb9384 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-img-object-fit.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: from-image</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-img-object-fit-ref.html"> +<meta name=fuzzy content="0-5;0-375"> +<style> + body { + overflow: hidden; + image-orientation: from-image; + } + img { + position: absolute; + vertical-align: top; + } + .cover { + object-fit: cover; + top: 10px; + } + .contain { + object-fit: contain; + top: 150px; + } + .wide { + width: 100px; + height: 50px; + left: 10px; + } + .tall { + width: 50px; + height: 100px; + left: 150px; + } +</style> +</head> +<body> + <img class="cover wide" src="support/exif-orientation-5-lu.jpg"/> + <img class="cover tall" src="support/exif-orientation-5-lu.jpg"/> + <img class="contain wide" src="support/exif-orientation-5-lu.jpg"/> + <img class="contain tall" src="support/exif-orientation-5-lu.jpg"/> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-list-style-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-list-style-image.html new file mode 100644 index 0000000000..ac735626db --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-list-style-image.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation does apply to list-style-image</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-list-style-image-ref.html"> +<meta name=fuzzy content="0-3;0-50"> +<style> +ul { margin-left: 100px; list-style-image: url(support/exif-orientation-2-ur.jpg); } +.no-orient { image-orientation: none; } +</style> +<ul><li> </li></ul> +<ul class="no-orient"><li> </li></ul> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-mask-image.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-mask-image.html new file mode 100644 index 0000000000..7bae0cf4dc --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-mask-image.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation does not apply to mask-image</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-mask-image-ref.html"> +<meta name=fuzzy content="0-2;0-26"> +<style> +div { + width: 100px; + height: 50px; + background: blue; + mask-image: url(support/exif-orientation-2-ur.jpg); + mask-mode: luminance; +} +.no-orient { image-orientation: none; } +</style> +<div></div> +<div class="no-orient"></div> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-computed-style.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-computed-style.html new file mode 100644 index 0000000000..49919288b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-computed-style.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: none computed style</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + body { + overflow: hidden; + image-orientation: none; + } + div { + display: inline-block; + width: 100px; + vertical-align: top; + } +</style> +<script> +function run_tests() { + test(function() { + for (var i = 1; i <= 9; i++) { + var el = document.getElementById("img" + i); + var computedStyle = window.getComputedStyle(el); + assert_equals(computedStyle.width, "100px"); + assert_equals(computedStyle.height, "50px"); + assert_equals(computedStyle.imageOrientation, "none"); + } + }, "image-orientation:none computed style reports correct values"); + +} +</script> +</head> +<body onload="run_tests()"> + <div><img id="img1" src="support/exif-orientation-1-ul.jpg"/></div> + <div><img id="img2" src="support/exif-orientation-2-ur.jpg"/></div> + <div><img id="img3" src="support/exif-orientation-3-lr.jpg"/></div> + <div><img id="img4" src="support/exif-orientation-4-lol.jpg"/></div> + <div><img id="img5" src="support/exif-orientation-5-lu.jpg"/></div> + <div><img id="img6" src="support/exif-orientation-6-ru.jpg"/></div> + <div><img id="img7" src="support/exif-orientation-7-rl.jpg"/></div> + <div><img id="img8" src="support/exif-orientation-8-llo.jpg"/></div> + <div><img id="img9" src="support/exif-orientation-9-u.jpg"/></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-content-images.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-content-images.html new file mode 100644 index 0000000000..ed1657505c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-content-images.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: none for content images</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-none-content-images-ref.html"> +<meta name=fuzzy content="0-5;0-150"> +<style> + div.image { + display: inline-block; + } + div.container { + display: inline-block; + width: 100px; + vertical-align: top; + image-orientation: none; + } + img { + width: 100px; + height: 100px; + background-repeat: no-repeat; + } + body { + overflow: hidden; + } +</style> +</head> +<body> + <p>The images should not rotate respecting their EXIF orientation because + image-orientation: none is specified.</p> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-1-ul.jpg)"></div> + </div> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-2-ur.jpg)"></div> + </div> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-3-lr.jpg)"></div> + </div> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-4-lol.jpg)"></div> + </div> + <br> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-5-lu.jpg)"></div> + </div> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-6-ru.jpg)"></div> + </div> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-7-rl.jpg)"></div> + </div> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-8-llo.jpg)"></div> + </div> + <br> + <div class="container"> + <img style="background-image: url(support/exif-orientation-5-lu.jpg)"></img> + </div> + <div class="container"> + <img style="background-image: url(support/exif-orientation-6-ru.jpg)"></img> + </div> + <div class="container"> + <img style="background-image: url(support/exif-orientation-7-rl.jpg)"></img> + </div> + <div class="container"> + <img style="background-image: url(support/exif-orientation-8-llo.jpg)"></img> + </div> + <br> + <div class="container"> + <div class="image" style="content: url(support/exif-orientation-9-u.jpg)"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-canvas.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-canvas.html new file mode 100644 index 0000000000..9753e9ab37 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-canvas.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: none</title> +<script src=/common/get-host-info.sub.js></script> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165"> +<link rel="match" href="reference/image-orientation-none-cross-origin-canvas-ref.html"> +<style> + img {display: none} + canvas { + width: 20px; + height: 20px; + margin: 10px; + } +</style> +<script> + const src1 = 'support/exif-orientation-1-ul.jpg'; + const src2 = 'support/exif-orientation-3-lr.jpg'; + function toCors(src) { + return src.replace(new URL(src).origin, get_host_info().HTTP_REMOTE_ORIGIN) + } + function createImage({cors, src, orientation, shouldBeRotated}) { + const img = document.createElement('img'); + img.src = src + if (cors) + img.src = toCors(img.src) + img.style.imageOrientation = orientation + img.style.display = 'none' + img.dataset.shouldBeRotated = shouldBeRotated + document.body.appendChild(img) + return img + } + + window.onload = () => { + const images = [ + createImage({cors: true, src: src1, orientation: 'from-image', shouldBeRotated: false}), + createImage({cors: true, src: src1, orientation: 'none', shouldBeRotated: false}), + createImage({cors: true, src: src2, orientation: 'from-image', shouldBeRotated: true}), + createImage({cors: true, src: src2, orientation: 'none', shouldBeRotated: true}), + createImage({cors: false, src: src1, orientation: 'from-image', shouldBeRotated: false}), + createImage({cors: false, src: src1, orientation: 'none', shouldBeRotated: false}), + createImage({cors: false, src: src2, orientation: 'from-image', shouldBeRotated: true}), + createImage({cors: false, src: src2, orientation: 'none', shouldBeRotated: false}), + ] + + const dimension = 1 + + images.forEach(image => { + const canvas = document.createElement('canvas') + canvas.width = canvas.height = dimension + // The source of image-orientation preference for canvas drawImage + // is currently not standardized. + // See https://github.com/w3c/csswg-drafts/issues/4666 + canvas.style.imageOrientation = image.style.imageOrientation + document.body.appendChild(canvas) + const ctx = canvas.getContext('2d') + const sx = image.dataset.shouldBeRotated === 'true' ? image.width * .8 : 0 + const sy = image.dataset.shouldBeRotated === 'true' ? image.height * .8 : 0 + ctx.drawImage(image, sx, sy, 1, 1, 0, 0, dimension, dimension) + }) + } + +</script> +</head> +<body> + <p>You should see 8 green rectangles, no red.</p> +</body> +<script> + [src1, src2].forEach(src => { + const img = document.createElement('img') + img.src = src + const imgCors = document.createElement('img') + imgCors.src = src + imgCors.src = toCors(imgCors.src) + document.body.appendChild(img) + document.body.appendChild(imgCors) + }) +</script> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-svg.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-svg.html new file mode 100644 index 0000000000..4fc9474edf --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin-svg.html @@ -0,0 +1,180 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>CSS Images: image-orientation, CORS detection for SVG content</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165"> +<link rel="match" href="reference/image-orientation-none-cross-origin-svg-ref.html"> +<script src="/common/get-host-info.sub.js"></script> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<style> + .image { + width: 40px; + height: 20px; + position: fixed; + } +</style> +<script> + function toCors(src) { + return src.replace(new URL(src).origin, get_host_info().HTTP_REMOTE_ORIGIN) + } + + window.onload = () => { + const images = [ + { + id_image: "cors_from_image", + id_foreign: "cors_from_foreign", + cors: true, + orientation: 'from-image', + shouldBeRotated: true, + left: '10px' + }, + { + id_image: "cors_none_image", + id_foreign: "cors_none_foreign", + cors: true, + orientation: 'none', + shouldBeRotated: true, + left: '60px' + }, + { + id_image: "same_from_image", + id_foreign: "same_from_foreign", + cors: false, + orientation: 'from-image', + shouldBeRotated: true, + left: '110px' + }, + { + id_image: "same_none_image", + id_foreign: "same_none_foreign", + cors: false, + orientation: 'none', + shouldBeRotated: false, + left: '160px' + }, + ]; + + images.forEach(data => { + if (data.cors) { + image_src = document.getElementById("cors_img"); + image = document.getElementById(data.id_image); + image.setAttribute("href", image_src.src); + foreign = document.getElementById(data.id_foreign); + foreign.src = image_src.src; + } else { + image_src = document.getElementById("same_img"); + image = document.getElementById(data.id_image); + image.setAttribute("href", image_src.src); + foreign = document.getElementById(data.id_foreign); + foreign.src = image_src.src; + } + + const canvas_svg_image = document.createElement('canvas'); + canvas_svg_image.className = "image"; + canvas_svg_image.width = canvas_svg_image.height = 1; + canvas_svg_image.style.left = data.left; + canvas_svg_image.style.top = "140px"; + // The source of image-orientation preference for canvas drawImage + // is currently not standardized. + // See https://github.com/w3c/csswg-drafts/issues/4666 + canvas_svg_image.style.imageOrientation = data.orientation; + document.body.appendChild(canvas_svg_image); + ctx = canvas_svg_image.getContext('2d'); + sx = data.shouldBeRotated ? 80 : 0; + sy = data.shouldBeRotated ? 40 : 0; + ctx.drawImage(image, sx, sy, 1, 1, 0, 0, 1, 1); + + const canvas_svg_foreign = document.createElement('canvas'); + canvas_svg_foreign.className = "image"; + canvas_svg_foreign.width = canvas_svg_foreign.height = 1; + canvas_svg_foreign.style.left = data.left; + canvas_svg_foreign.style.top = "170px"; + canvas_svg_foreign.style.imageOrientation = data.orientation; + document.body.appendChild(canvas_svg_foreign); + ctx = canvas_svg_foreign.getContext('2d'); + sx = data.shouldBeRotated ? 80 : 0; + sy = data.shouldBeRotated ? 40 : 0; + ctx.drawImage(foreign, sx, sy, 1, 1, 0, 0, 1, 1); + }) + waitForAtLeastOneFrame().then(() => { takeScreenshot() }); + } + +</script> +</head> +<body> + <svg class="image" id="svg_cors_from" style="left: 10px; top: 50px; image-orientation: from-image;"> + <image id="cors_from_image" href="support/exif-orientation-3-lr.jpg" X="-57" Y="-27"></image> + </svg> + <!-- This should be functionally identical to a plain <img> element. We test it here to verify + that SVG foreign object correctly tracks the security origin for the image. --> + <svg class="image" style="left: 10px; top: 80px; image-orientation: from-image;"> + <foreignObject x="-57" y="-27" width="100" height="50"> + <img id="cors_from_foreign" src="support/exif-orientation-3-lr.jpg"></img> + </foreignObject> + </svg> + <!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can + never be cross origin. This just tests that we don't crash or do other strange things. --> + <img class="image" id="img_cors_from" src="support/svg-with-image-rotated.svg" style="left: 10px; top: 110px; image-orientation: from-image;"/> + + <svg class="image" style="left: 60px; top: 50px; image-orientation: none;"> + <image id="cors_none_image" href="support/exif-orientation-3-lr.jpg" X="-57" Y="-27"></image> + </svg> + <!-- This should be functionally identical to a plain <img> element. We test it here to verify + that SVG foreign object correctly tracks the security origin for the image. --> + <svg class="image" style="left: 60px; top: 80px; image-orientation: none;"> + <foreignObject x="-57" y="-27" width="100" height="50"> + <img id="cors_none_foreign" src="support/exif-orientation-3-lr.jpg"></img> + </foreignObject> + </svg> + <!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can + never be cross origin. This just tests that we don't crash or do other strange things. --> + <img class="image" id="img_cors_none" src="support/svg-with-image-rotated.svg" style="left: 60px; top: 110px; image-orientation: none;"/> + + <svg class="image" style="left: 110px; top: 50px; image-orientation: from-image;"> + <image id="same_from_image" href="support/exif-orientation-3-lr.jpg" X="-57" Y="-27"></image> + </svg> + <!-- This should be functionally identical to a plain <img> element. We test it here to verify + that SVG foreign object correctly tracks the security origin for the image. --> + <svg class="image" style="left: 110px; top: 80px; image-orientation: from-image;"> + <foreignObject x="-57" y="-27" width="100" height="50"> + <img id="same_from_foreign" src="support/exif-orientation-3-lr.jpg"></img> + </foreignObject> + </svg> + <!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can + never be cross origin. This just tests that we don't crash or do other strange things. --> + <img class="image" id="img_same_from" src="support/svg-with-image-rotated.svg" style="left: 110px; top: 110px; image-orientation: from-image;"/> + + <svg class="image" style="left: 160px; top: 50px; image-orientation: none;"> + <image id="same_none_image" href="support/exif-orientation-3-lr.jpg" X="0" Y="0"></image> + </svg> + <!-- This should be functionally identical to a plain <img> element. We test it here to verify + that SVG foreign object correctly tracks the security origin for the image. --> + <svg class="image" style="left: 160px; top: 80px; image-orientation: none;"> + <foreignObject x="0" y="0" width="100" height="50"> + <img id="same_none_foreign" src="support/exif-orientation-3-lr.jpg"></img> + </foreignObject> + </svg> + <!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can + never be cross origin. This just tests that we don't crash or do other strange things. --> + <img class="image" id="img_same_none" src="support/svg-with-image-rotated.svg" style="left: 160px; top: 110px; image-orientation: none;"/> + + <!-- This is the easiest way to get a cross origin url for SVG <image> --> + <script> + const img = document.createElement('img') + img.src = "support/exif-orientation-3-lr.jpg" + img.id = "same_img"; + img.style.display = "none"; + document.body.appendChild(img) + const imgCors = document.createElement('img') + imgCors.src = img.src + imgCors.src = toCors(imgCors.src) + imgCors.id = "cors_img"; + imgCors.style.display = "none"; + document.body.appendChild(imgCors) + </script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin.html new file mode 100644 index 0000000000..ec139d4e22 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-cross-origin.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: none</title> +<script src=/common/get-host-info.sub.js></script> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165"> +<link rel="match" href="reference/image-orientation-none-cross-origin-ref.html"> +<style> + body { + overflow: hidden; + image-orientation: none; + } + div { + display: inline-block; + width: 100px; + vertical-align: top; + } +</style> +</head> +<body> + <p>The following images should not be identical.</p> + <p>The image should not rotate respecting their EXIF orientation because + image-orientation: none is specified and the request is same origin.</p> + <div><img src="support/exif-orientation-3-lr.jpg"/></div> + + <p>This image should rotate respecting their EXIF orientation because + image-orientation: none should be effectively ignored for opaque (cross-origin) images.</p> + <div><img id="corsImage" src="support/exif-orientation-3-lr.jpg"/></div> + + <p>The image should not rotate respecting their EXIF orientation because + image-orientation: none is specified and the request is CORS anonymous.</p> + <div><img id="corsAnonymousImg" crossorigin="anonymous" src="support/exif-orientation-3-lr.jpg"/></div> + + <p>The image should not rotate respecting their EXIF orientation because + image-orientation: none is specified and the request is CORS + use-credentials.</p> + <div><img id="corsUseCredsImg" crossorigin="use-credentials" src="support/exif-orientation-3-lr.jpg"/></div> + + <p>The image should not rotate respecting their EXIF orientation because + image-orientation: none is specified and the image source is a blob.</p> + <div><img id="blobImage"/></div> + + <p>The image should not rotate respecting their EXIF orientation because + image-orientation: none is specified and the image source is a data url.</p> + <div><img id="dataImage"/></div> +</body> +<script> + const testImage = 'support/exif-orientation-3-lr.jpg'; + let sPendingImagesToLoad = 5; + + function pendingImageLoaded() { + if (!--sPendingImagesToLoad) { + document.documentElement.removeAttribute('class'); + } + } + + const img = document.getElementById('corsImage') + img.onload = pendingImageLoaded; + img.src = img.src.replace(new URL(img.src).origin, get_host_info().HTTP_REMOTE_ORIGIN) + + const corsAnonImg = document.getElementById('corsAnonymousImg') + corsAnonImg.onload = pendingImageLoaded; + corsAnonImg.src = corsAnonImg.src.replace(new URL(corsAnonImg.src).origin, + get_host_info().HTTP_REMOTE_ORIGIN) + + "?pipe=header(Access-Control-Allow-Origin,*)"; + + const corsUseCredsImg = document.getElementById('corsUseCredsImg') + corsUseCredsImg.onload = pendingImageLoaded; + corsUseCredsImg.src = corsUseCredsImg.src.replace(new URL(corsUseCredsImg.src).origin, + get_host_info().HTTP_REMOTE_ORIGIN) + + "?pipe=header(Access-Control-Allow-Credentials,true)" + + "|header(Access-Control-Allow-Origin," + location.origin + ")"; + + const blobImg = document.getElementById('blobImage'); + fetch(testImage).then((resp) => { + return resp.blob(); + }).then((blob) => { + blobImg.onload = pendingImageLoaded; + blobImg.src = URL.createObjectURL(blob); + }); + + const dataImg = document.getElementById('dataImage'); + fetch(testImage).then((resp) => { + return resp.blob(); + }).then((blob) => { + const reader = new FileReader(); + + reader.addEventListener("load", () => { + dataImg.onload = pendingImageLoaded; + dataImg.src = reader.result; + }); + + reader.readAsDataURL(blob); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-image-document.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-image-document.html new file mode 100644 index 0000000000..05dd66e1e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none-image-document.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: none in image documents</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-none-image-document-ref.html"> +<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-236"> +<style> + iframe { + display: inline-block; + margin-right: 20px; + margin-bottom: 10px; + width: 120px; + height: 110px; + vertical-align: top; + image-orientation: none; + } +</style> +</head> +<body> + <p>The images should rotate respecting their EXIF orientation because image + documents always respect the orientation, regardless of the image-orientation + property.</p> + <iframe src="support/exif-orientation-1-ul.jpg" frameborder=0></iframe> + <iframe src="support/exif-orientation-2-ur.jpg" frameborder=0></iframe> + <iframe src="support/exif-orientation-3-lr.jpg" frameborder=0></iframe> + <iframe src="support/exif-orientation-4-lol.jpg" frameborder=0></iframe> + <br> + <iframe src="support/exif-orientation-5-lu.jpg" frameborder=0></iframe> + <iframe src="support/exif-orientation-6-ru.jpg" frameborder=0></iframe> + <iframe src="support/exif-orientation-7-rl.jpg" frameborder=0></iframe> + <iframe src="support/exif-orientation-8-llo.jpg" frameborder=0></iframe> + <br> + <iframe src="support/exif-orientation-9-u.jpg" frameborder=0></iframe> +</body> +</html> + diff --git a/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none.html b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none.html new file mode 100644 index 0000000000..d689b5af06 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/image-orientation-none.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: none</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/image-orientation-none-ref.html"> +<meta name="fuzzy" content="maxDifference=0-100; totalPixels=0-123"> +<style> + body { + overflow: hidden; + image-orientation: none; + } + div { + display: inline-block; + width: 100px; + vertical-align: top; + } +</style> +</head> +<body> + <p>The images should not rotate respecting their EXIF orientation because + image-orientation: none is specified.</p> + <div><img src="support/exif-orientation-1-ul.jpg"/></div> + <div><img src="support/exif-orientation-2-ur.jpg"/></div> + <div><img src="support/exif-orientation-3-lr.jpg"/></div> + <div><img src="support/exif-orientation-4-lol.jpg"/></div> + <div><img src="support/exif-orientation-5-lu.jpg"/></div> + <div><img src="support/exif-orientation-6-ru.jpg"/></div> + <div><img src="support/exif-orientation-7-rl.jpg"/></div> + <div><img src="support/exif-orientation-8-llo.jpg"/></div> + <div><img src="support/exif-orientation-9-u.jpg"/></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-image-ref.html new file mode 100644 index 0000000000..a3e2ece6e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-image-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +div { width: 100px; height: 50px; } +.orient { background-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); } +.no-orient { background-image: url(../support/exif-orientation-9-u.jpg); } +</style> +<div class="orient"></div> +<div class="no-orient"></div> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-position-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-position-ref.html new file mode 100644 index 0000000000..a19e535dab --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-position-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation with background positions reference</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<style> + .exif-2 { + position: absolute; + top: 10px; + left: 10px; + width: 50px; + height: 50PX; + background-color: grey; + background-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); + background-repeat: no-repeat; + background-position: -30px -20px; + } + + .exif-6 { + position: absolute; + top: 10px; + left: 70px; + width: 50px; + height: 50PX; + background-color: grey; + background-image: url(../support/exif-orientation-6-ru-pre-rotated.jpg); + background-repeat: no-repeat; + background-position: -20px -30px; + } + +</style> +</head> +<body> + <div class="exif-2"> + </div> + <div class="exif-6"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-border-radius-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-border-radius-ref.html new file mode 100644 index 0000000000..4a7e00c646 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-border-radius-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation with background properties reference</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<style> + div { + position: absolute; + width: 200px; + height: 200PX; + background-image: url(../support/exif-orientation-5-lu-pre-rotated.jpg); + background-repeat: no-repeat; + border-radius: 5px; + } + + .repeat { + background-repeat: repeat; + top: 20px; + left: 20px; + } + + .position { + background-position: bottom right; + top: 20px; + left: 240px; + } + + .cover { + background-size: cover; + top: 240px; + left: 20px; + } + + .contain { + background-size: contain; + top: 240px; + left: 240px; + } +</style> +</head> +<body> + <div class="repeat"> + </div> + <div class="position"> + </div> + <div class="cover"> + </div> + <div class="contain"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-ref.html new file mode 100644 index 0000000000..be5edf420b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-background-properties-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation with background properties reference</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<style> + div { + position: absolute; + width: 200px; + height: 200PX; + background-image: url(../support/exif-orientation-5-lu-pre-rotated.jpg); + background-repeat: no-repeat; + } + + .repeat { + background-repeat: repeat; + top: 20px; + left: 20px; + } + + .position { + background-position: bottom right; + top: 20px; + left: 240px; + } + + .cover { + background-size: cover; + top: 240px; + left: 20px; + } + + .contain { + background-size: contain; + top: 240px; + left: 240px; + } +</style> +</head> +<body> + <div class="repeat"> + </div> + <div class="position"> + </div> + <div class="cover"> + </div> + <div class="contain"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-border-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-border-image-ref.html new file mode 100644 index 0000000000..51aa8d0e46 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-border-image-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +div { + width: 100px; + height: 50px; + border: 10px solid black; +} +.orient { border-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg) 10; } +.no-orient { border-image: url(../support/exif-orientation-9-u.jpg) 10; } +</style> +<div class="orient"></div> +<div class="no-orient"></div> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-default-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-default-ref.html new file mode 100644 index 0000000000..a146af3657 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-default-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Images Module Level 3: image-orientation: from-image</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<style> + body { + overflow: hidden; + } + div { + display: inline-block; + width: 100px; + vertical-align: top; + } +</style> +</head> +<body> + <p>The images should rotate respecting their EXIF orientation because + no image-orientation property is given.</p> + <div> + <img src="../support/exif-orientation-1-ul-pre-rotated.jpg"> + <br>Normal + </div> + <div> + <img src="../support/exif-orientation-2-ur-pre-rotated.jpg"> + <br>Flipped horizontally + </div> + <div> + <img src="../support/exif-orientation-3-lr-pre-rotated.jpg"> + <br>Rotated 180° + </div> + <div> + <img src="../support/exif-orientation-4-lol-pre-rotated.jpg"> + <br>Flipped vertically + </div> + <div> + <img src="../support/exif-orientation-5-lu-pre-rotated.jpg"> + <br>Rotated 90° CCW and flipped vertically + </div> + <div> + <img src="../support/exif-orientation-6-ru-pre-rotated.jpg"> + <br>Rotated 90° CW + </div> + <div> + <img src="../support/exif-orientation-7-rl-pre-rotated.jpg"> + <br>Rotated 90° CW and flipped vertically + </div> + <div> + <img src="../support/exif-orientation-8-llo-pre-rotated.jpg"> + <br>Rotated 90° CCW + </div> + <div> + <img src="../support/exif-orientation-9-u-pre-rotated.jpg"> + <br>Undefined (invalid value) + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-exif-png-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-exif-png-ref.html new file mode 100644 index 0000000000..39e361d80c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-exif-png-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: late EXIF data is ignored (PNG)</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<img src="../support/F-rotated.png"> +<img src="../support/F-upright.png"> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-content-images-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-content-images-ref.html new file mode 100644 index 0000000000..c0d29909f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-content-images-ref.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Images Module Level 3: image-orientation: from-image for content images</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<style> + div.image { + display: inline-block; + } + div.container { + display: inline-block; + width: 100px; + vertical-align: top; + } + img { + width: 100px; + height: 100px; + background-repeat: no-repeat; + } + body { + overflow: hidden; + } +</style> +</head> +<body > + <p>The images should rotate respecting their EXIF orientation because + image-orientation: from-image is specified. + </p> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-1-ul-pre-rotated.jpg)"></div> + <br>Normal + </div> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-2-ur-pre-rotated.jpg)"></div> + <br>Flipped horizontally + </div> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-3-lr-pre-rotated.jpg)"></div> + <br>Rotated 180° + </div> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-4-lol-pre-rotated.jpg)"></div> + <br>Flipped vertically + </div> + <br> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-5-lu-pre-rotated.jpg)"></div> + <br>Rotated 90° CCW and flipped vertically + </div> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-6-ru-pre-rotated.jpg)"></div> + <br>Rotated 90° CW + </div> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-7-rl-pre-rotated.jpg)"></div> + <br>Rotated 90° CW and flipped vertically + </div> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-8-llo-pre-rotated.jpg)"></div> + <br>Rotated 90° CCW + </div> + <br> + <div class="container"> + <img style="background-image: url(../support/exif-orientation-5-lu-pre-rotated.jpg)"></img> + <br>Rotated 90° CCW and flipped vertically + </div> + <div class="container"> + <img style="background-image: url(../support/exif-orientation-6-ru-pre-rotated.jpg)"></img> + <br>Rotated 90° CW + </div> + <div class="container"> + <img style="background-image: url(../support/exif-orientation-7-rl-pre-rotated.jpg)"></img> + <br>Rotated 90° CW and flipped vertically + </div> + <div class="container"> + <img style="background-image: url(../support/exif-orientation-8-llo-pre-rotated.jpg)"></img> + <br>Rotated 90° CCW + </div> + <br> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-9-u-pre-rotated.jpg)"></div> + <br>Undefined (invalid value) + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-embedded-content-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-embedded-content-ref.html new file mode 100644 index 0000000000..343d0668d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-embedded-content-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: from-image in embedded content (reference)</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<style> + iframe { + display: inline-block; + width: 120px; + height: 110px; + vertical-align: top; + } + embed { + object-fit: none; + object-position: top left; + image-orientation: from-image; + } + object { + object-fit: none; + object-position: top left; + image-orientation: from-image; + } +</style> +</head> +<body> + <p>The images should rotate respecting their EXIF orientation because image + documents always respect the orientation, regardless of the image-orientation + property.</p> + <iframe src="../support/exif-orientation-1-ul-pre-rotated.jpg" frameborder=0></iframe> + <embed type="image/jpeg" src="../support/exif-orientation-2-ur-pre-rotated.jpg" width="120" height="110px"> + <object type="image/jpeg" data="../support/exif-orientation-3-lr-pre-rotated.jpg" width="120" height="110px"></object> + <iframe src="../support/exif-orientation-4-lol-pre-rotated.jpg" frameborder=0></iframe> + <br> + <iframe src="../support/exif-orientation-5-lu-pre-rotated.jpg" frameborder=0></iframe> + <embed type="image/jpeg" src="../support/exif-orientation-6-ru-pre-rotated.jpg" width="120" height="110px"> + <object type="image/jpeg" data="../support/exif-orientation-7-rl-pre-rotated.jpg" width="120" height="110px"></object> + <iframe src="../support/exif-orientation-8-llo-pre-rotated.jpg" frameborder=0></iframe> + <br> + <iframe src="../support/exif-orientation-9-u-pre-rotated.jpg" frameborder=0></iframe> +</body> +</html> + diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-ref.html new file mode 100644 index 0000000000..c569690967 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-from-image-ref.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: from-image</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<style> + body { + overflow: hidden; + } + div { + display: inline-block; + width: 100px; + vertical-align: top; + } +</style> +</head> +<body> + <p>The images should rotate respecting their EXIF orientation because + image-orientation: from-image is specified.</p> + <div> + <img src="../support/exif-orientation-1-ul-pre-rotated.jpg"> + <br>Normal + </div> + <div> + <img src="../support/exif-orientation-2-ur-pre-rotated.jpg"> + <br>Flipped horizontally + </div> + <div> + <img src="../support/exif-orientation-3-lr-pre-rotated.jpg"> + <br>Rotated 180° + </div> + <div> + <img src="../support/exif-orientation-4-lol-pre-rotated.jpg"> + <br>Flipped vertically + </div> + <div> + <img src="../support/exif-orientation-5-lu-pre-rotated.jpg"> + <br>Rotated 90° CCW and flipped vertically + </div> + <div> + <img src="../support/exif-orientation-6-ru-pre-rotated.jpg"> + <br>Rotated 90° CW + </div> + <div> + <img src="../support/exif-orientation-7-rl-pre-rotated.jpg"> + <br>Rotated 90° CW and flipped vertically + </div> + <div> + <img src="../support/exif-orientation-8-llo-pre-rotated.jpg"> + <br>Rotated 90° CCW + </div> + <div> + <img src="../support/exif-orientation-9-u-pre-rotated.jpg"> + <br>Undefined (invalid value) + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-iframe-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-iframe-ref.html new file mode 100644 index 0000000000..a9e9b3fbe3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-iframe-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<iframe src="../support/exif-orientation-2-ur.jpg"></iframe> +<iframe src="../support/exif-orientation-2-ur.jpg"></iframe> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-img-object-fit-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-img-object-fit-ref.html new file mode 100644 index 0000000000..0d84291e8a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-img-object-fit-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: from-image</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<style> + body { + overflow: hidden; + image-orientation: from-image; + } + img { + position: absolute; + vertical-align: top; + } + .cover { + object-fit: cover; + top: 10px; + } + .contain { + object-fit: contain; + top: 150px; + } + .wide { + width: 100px; + height: 50px; + left: 10px; + } + .tall { + width: 50px; + height: 100px; + left: 150px; + } +</style> +</head> +<body> + <img class="cover wide" src="../support/exif-orientation-5-lu-pre-rotated.jpg"/> + <img class="cover tall" src="../support/exif-orientation-5-lu-pre-rotated.jpg"/> + <img class="contain wide" src="../support/exif-orientation-5-lu-pre-rotated.jpg"/> + <img class="contain tall" src="../support/exif-orientation-5-lu-pre-rotated.jpg"/> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-list-style-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-list-style-image-ref.html new file mode 100644 index 0000000000..8dcef6a243 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-list-style-image-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +ul { margin-left: 100px; } +.orient { list-style-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); } +.no-orient { list-style-image: url(../support/exif-orientation-9-u.jpg); } +</style> +<ul class="orient"><li> </li></ul> +<ul class="no-orient"><li> </li></ul> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-mask-image-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-mask-image-ref.html new file mode 100644 index 0000000000..ba59303245 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-mask-image-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +div { + width: 100px; + height: 50px; + background: blue; + mask-mode: luminance; +} +.orient { mask-image: url(../support/exif-orientation-2-ur-pre-rotated.jpg); } +.no-orient { mask-image: url(../support/exif-orientation-9-u.jpg); } +</style> +<div class="orient"></div> +<div class="no-orient"></div> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-content-images-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-content-images-ref.html new file mode 100644 index 0000000000..5192f5c35a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-content-images-ref.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: none for content images</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<style> + div.image { + display: inline-block; + } + div.container { + display: inline-block; + width: 100px; + vertical-align: top; + } + img { + width: 100px; + height: 100px; + background-repeat: no-repeat; + } + body { + overflow: hidden; + } +</style> +</head> +<body> + <p>The images should not rotate respecting their EXIF orientation because + image-orientation: none is specified.</p> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div> + </div> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div> + </div> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div> + </div> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div> + </div> + <br> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div> + </div> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div> + </div> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div> + </div> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div> + </div> + <br> + <div class="container"> + <img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img> + </div> + <div class="container"> + <img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img> + </div> + <div class="container"> + <img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img> + </div> + <div class="container"> + <img style="background-image: url(../support/exif-orientation-1-ul.jpg)"></img> + </div> + <br> + <div class="container"> + <div class="image" style="content: url(../support/exif-orientation-1-ul.jpg)"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-canvas-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-canvas-ref.html new file mode 100644 index 0000000000..c82f135a09 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-canvas-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: none</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165"> +<style> + body { + overflow: hidden; + image-orientation: none; + } + img {display: none} + canvas { + width: 20px; + height: 20px; + margin: 10px; + } +</style> +<body> + <p>You should see 8 green rectangles, no red.</p> +</body> +<script> + const img = document.createElement('img') + img.src = '../support/exif-orientation-1-ul.jpg' + + document.body.appendChild(img) + + const dimension = 5 + window.onload = () => { + for (let i = 0; i < 8; ++i) { + const canvas = document.createElement('canvas') + canvas.width = canvas.height = dimension + const ctx = canvas.getContext('2d') + ctx.drawImage(img, 0, 0) + document.body.appendChild(canvas) + } + + } +</script> +</head> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-ref.html new file mode 100644 index 0000000000..a54aa3870f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165"> +<style> + body { + overflow: hidden; + image-orientation: none; + } + div { + display: inline-block; + width: 100px; + vertical-align: top; + } +</style> +</head> +<body> + <p>The following images should not be identical.</p> + <p>The image should not rotate respecting their EXIF orientation because + image-orientation: none is specified and the request is same origin.</p> + <div><img src="../support/exif-orientation-3-lr.jpg"/></div> + + <p>This image should rotate respecting their EXIF orientation because + image-orientation: none should be effectively ignored for opaque (cross-origin) images.</p> + <div><img src="../support/exif-orientation-3-lr.jpg" style="image-orientation: from-image" /></div> + + <p>The image should not rotate respecting their EXIF orientation because + image-orientation: none is specified and the request is CORS anonymous.</p> + <div><img src="../support/exif-orientation-3-lr.jpg"/></div> + + <p>The image should not rotate respecting their EXIF orientation because + image-orientation: none is specified and the request is CORS + use-credentials.</p> + <div><img src="../support/exif-orientation-3-lr.jpg"/></div> + + <p>The image should not rotate respecting their EXIF orientation because + image-orientation: none is specified and the image source is a blob.</p> + <div><img src="../support/exif-orientation-3-lr.jpg"/></div> + + <p>The image should not rotate respecting their EXIF orientation because + image-orientation: none is specified and the image source is a data url.</p> + <div><img src="../support/exif-orientation-3-lr.jpg"/></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-svg-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-svg-ref.html new file mode 100644 index 0000000000..e34a7087d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-cross-origin-svg-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images: image-orientation, CORS detection for SVG content, reference</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<style> + div { + background-image: url("../support/exif-orientation-1-ul.jpg"); + width: 40px; + height: 20px; + position: fixed; + } +</style> +</head> +<body> + <div style="left: 10px; top: 50px"></div> + <div style="left: 10px; top: 80px"></div> + <div style="left: 10px; top: 110px"></div> + <div style="left: 10px; top: 140px"></div> + <div style="left: 10px; top: 170px"></div> + + <div style="left: 60px; top: 50px"></div> + <div style="left: 60px; top: 80px"></div> + <div style="left: 60px; top: 110px"></div> + <div style="left: 60px; top: 140px"></div> + <div style="left: 60px; top: 170px"></div> + + <div style="left: 110px; top: 50px"></div> + <div style="left: 110px; top: 80px"></div> + <div style="left: 110px; top: 110px"></div> + <div style="left: 110px; top: 140px"></div> + <div style="left: 110px; top: 170px"></div> + + <div style="left: 160px; top: 50px"></div> + <div style="left: 160px; top: 80px"></div> + <div style="left: 160px; top: 110px"></div> + <div style="left: 160px; top: 140px"></div> + <div style="left: 160px; top: 170px"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-image-document-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-image-document-ref.html new file mode 100644 index 0000000000..90eaeaa3da --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-image-document-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: none in image documents</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<style> + iframe { + display: inline-block; + margin-right: 20px; + margin-bottom: 10px; + width: 120px; + height: 110px; + vertical-align: top; + } +</style> +</head> +<body> + <p>The images should rotate respecting their EXIF orientation because image + documents always respect the orientation, regardless of the image-orientation + property.</p> + <iframe src="../support/exif-orientation-1-ul-pre-rotated.jpg" frameborder=0></iframe> + <iframe src="../support/exif-orientation-2-ur-pre-rotated.jpg" frameborder=0></iframe> + <iframe src="../support/exif-orientation-3-lr-pre-rotated.jpg" frameborder=0></iframe> + <iframe src="../support/exif-orientation-4-lol-pre-rotated.jpg" frameborder=0></iframe> + <br> + <iframe src="../support/exif-orientation-5-lu-pre-rotated.jpg" frameborder=0></iframe> + <iframe src="../support/exif-orientation-6-ru-pre-rotated.jpg" frameborder=0></iframe> + <iframe src="../support/exif-orientation-7-rl-pre-rotated.jpg" frameborder=0></iframe> + <iframe src="../support/exif-orientation-8-llo-pre-rotated.jpg" frameborder=0></iframe> + <br> + <iframe src="../support/exif-orientation-9-u-pre-rotated.jpg" frameborder=0></iframe> +</body> +</html> + diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-ref.html new file mode 100644 index 0000000000..c4d140f153 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/image-orientation-none-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: image-orientation: none</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<style> + body { + overflow: hidden; + } + div { + display: inline-block; + width: 100px; + vertical-align: top; + } +</style> +</head> +<body> + <p>The images should not rotate respecting their EXIF orientation because + image-orientation: none is specified.</p> + <div><img src="../support/exif-orientation-1-ul.jpg"></div> + <div><img src="../support/exif-orientation-1-ul.jpg"></div> + <div><img src="../support/exif-orientation-1-ul.jpg"></div> + <div><img src="../support/exif-orientation-1-ul.jpg"></div> + <div><img src="../support/exif-orientation-1-ul.jpg"></div> + <div><img src="../support/exif-orientation-1-ul.jpg"></div> + <div><img src="../support/exif-orientation-1-ul.jpg"></div> + <div><img src="../support/exif-orientation-1-ul.jpg"></div> + <div><img src="../support/exif-orientation-1-ul.jpg"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-aspect-ratio-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-aspect-ratio-ref.html new file mode 100644 index 0000000000..728bfb202f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-aspect-ratio-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: svg image respects orientation</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +</head> +<body style="margin:0"> + <svg style="width: 600px; height: 600px"> + <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" x="0" y="0" width="150" height="150" preserveAspectRatio="xMinYMin meet"></image> + <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="200" y="0" width="150" height="150" preserveAspectRatio="xMidYMin meet"></image> + <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" x="400" y="0" width="150" height="150" preserveAspectRatio="xMaxYMin meet"></image> + <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="0" y="150" width="150" height="150" preserveAspectRatio="xMinYMid slice"></image> + <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" x="200" y="150" width="150" height="150" preserveAspectRatio="xMidYMid slice"></image> + <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="400" y="150" width="150" height="150" preserveAspectRatio="xMaxYMid slice"></image> + <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="0" y="300" width="150" height="150" preserveAspectRatio="xMinYMax meet"></image> + <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" x="200" y="300" width="150" height="150" preserveAspectRatio="xMidYMax meet"></image> + <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="400" y="300" width="150" height="150" preserveAspectRatio="xMaxYMax meet"></image> + <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" x="0" y="450" width="150" height="150" preserveAspectRatio="none"></image> + <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" x="200" y="450" width="150" height="150" preserveAspectRatio="none"></image> + </svg> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-none-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-none-ref.html new file mode 100644 index 0000000000..c7feb1dfee --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-none-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: svg image ignores orientation with image-orientation:none: Reference</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +</head> +<body> + <svg style="width: 500px; height: 650px;"> + <image xlink:href="../support/exif-orientation-1-ul.jpg" X="0" Y="0"></image> + <image xlink:href="../support/exif-orientation-1-ul.jpg" X="125" Y="0"></image> + <image xlink:href="../support/exif-orientation-1-ul.jpg" X="250" Y="0"></image> + <image xlink:href="../support/exif-orientation-1-ul.jpg" X="375" Y="0"></image> + <image xlink:href="../support/exif-orientation-1-ul.jpg" X="0" Y="125"></image> + <image xlink:href="../support/exif-orientation-1-ul.jpg" X="125" Y="125"></image> + <image xlink:href="../support/exif-orientation-1-ul.jpg" X="250" Y="125"></image> + <image xlink:href="../support/exif-orientation-1-ul.jpg" X="375" Y="125"></image> + <image xlink:href="../support/exif-orientation-1-ul.jpg" X="0" Y="250"></image> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-ref.html b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-ref.html new file mode 100644 index 0000000000..bd8310d4d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/reference/svg-image-orientation-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: svg image respects orientation</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +</head> +<body> + <svg style="width: 500px; height: 650px"> + <image xlink:href="../support/exif-orientation-1-ul-pre-rotated.jpg" X="0" Y="0"></image> + <image xlink:href="../support/exif-orientation-2-ur-pre-rotated.jpg" X="125" Y="0"></image> + <image xlink:href="../support/exif-orientation-3-lr-pre-rotated.jpg" X="250" Y="0"></image> + <image xlink:href="../support/exif-orientation-4-lol-pre-rotated.jpg" X="375" Y="0"></image> + <image xlink:href="../support/exif-orientation-5-lu-pre-rotated.jpg" X="0" Y="125"></image> + <image xlink:href="../support/exif-orientation-6-ru-pre-rotated.jpg" X="125" Y="125"></image> + <image xlink:href="../support/exif-orientation-7-rl-pre-rotated.jpg" X="250" Y="125"></image> + <image xlink:href="../support/exif-orientation-8-llo-pre-rotated.jpg" X="375" Y="125"></image> + <image xlink:href="../support/exif-orientation-9-u-pre-rotated.jpg" X="0" Y="250"></image> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-early.png b/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-early.png Binary files differnew file mode 100644 index 0000000000..6714cec825 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-early.png diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-late.png b/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-late.png Binary files differnew file mode 100644 index 0000000000..38f6defc58 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/F-exif-late.png diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/F-rotated.png b/testing/web-platform/tests/css/css-images/image-orientation/support/F-rotated.png Binary files differnew file mode 100644 index 0000000000..f515edd823 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/F-rotated.png diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/F-upright.png b/testing/web-platform/tests/css/css-images/image-orientation/support/F-upright.png Binary files differnew file mode 100644 index 0000000000..c44e72d0f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/F-upright.png diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/cursor-8-llo.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/cursor-8-llo.jpg Binary files differnew file mode 100644 index 0000000000..ef26ad4aaa --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/cursor-8-llo.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul-pre-rotated.jpg Binary files differnew file mode 100644 index 0000000000..33abbd152a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul-pre-rotated.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul.jpg Binary files differnew file mode 100644 index 0000000000..5125ede0bc --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-1-ul.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur-pre-rotated.jpg Binary files differnew file mode 100644 index 0000000000..03d33ddfc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur-pre-rotated.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur.jpg Binary files differnew file mode 100644 index 0000000000..20c4b791b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-2-ur.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr-pre-rotated.jpg Binary files differnew file mode 100644 index 0000000000..9e9cdc04a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr-pre-rotated.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg Binary files differnew file mode 100644 index 0000000000..818e573af4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol-pre-rotated.jpg Binary files differnew file mode 100644 index 0000000000..08f0f9123d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol-pre-rotated.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol.jpg Binary files differnew file mode 100644 index 0000000000..ec8caf84fe --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-4-lol.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu-pre-rotated.jpg Binary files differnew file mode 100644 index 0000000000..6f92942419 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu-pre-rotated.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu.jpg Binary files differnew file mode 100644 index 0000000000..06f0f66333 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-5-lu.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru-pre-rotated.jpg Binary files differnew file mode 100644 index 0000000000..4b9a33549e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru-pre-rotated.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru.jpg Binary files differnew file mode 100644 index 0000000000..08d03f0a53 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-6-ru.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl-pre-rotated.jpg Binary files differnew file mode 100644 index 0000000000..1838fcbcff --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl-pre-rotated.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg Binary files differnew file mode 100644 index 0000000000..28a9d07a22 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo-pre-rotated.jpg Binary files differnew file mode 100644 index 0000000000..08af29d4fa --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo-pre-rotated.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo.jpg Binary files differnew file mode 100644 index 0000000000..c396925e71 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-8-llo.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u-pre-rotated.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u-pre-rotated.jpg Binary files differnew file mode 100644 index 0000000000..5c579b392c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u-pre-rotated.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u.jpg b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u.jpg Binary files differnew file mode 100644 index 0000000000..7d41aead39 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/exif-orientation-9-u.jpg diff --git a/testing/web-platform/tests/css/css-images/image-orientation/support/svg-with-image-rotated.svg b/testing/web-platform/tests/css/css-images/image-orientation/support/svg-with-image-rotated.svg new file mode 100644 index 0000000000..e46581663c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/support/svg-with-image-rotated.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20"> + <image xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4QDGRXhpZgAASUkqAAgAAAAHABIBAwABAAAAAwAAABoBBQABAAAAYgAAABsBBQABAAAAagAAACgBAwABAAAAAgAAADEBAgANAAAAcgAAADIBAgAUAAAAgAAAAGmHBAABAAAAlAAAAAAAAABIAAAAAQAAAEgAAAABAAAAR0lNUCAyLjEwLjE0AAAyMDIwOjAyOjEzIDExOjMyOjIwAAMAAaADAAEAAAABAAAAAqAEAAEAAABkAAAAA6AEAAEAAAAyAAAAAAAAAP/bAEMAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/bAEMBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/CABEIADIAZAMBEQACEQEDEQH/xAAYAAEBAQEBAAAAAAAAAAAAAAAACAYJCv/EABgBAQEBAQEAAAAAAAAAAAAAAAAJCAoH/9oADAMBAAIQAxAAAAGK8r4nAAHcWfu4aX8p9LAAHmjqxNMAAdxZ+7hpfyn0sAAeaOrE0wAB3Fn7uGl/KfSwAB5Au6fIwAArSENod5l/RYAA58dafPIAAKNgDbzX5V0oAAJD6qOa8AAUbAG3mvyrpQAASH1Uc14AAo2ANvNflXSgAA//xAAeEAAABQUBAAAAAAAAAAAAAAAABAYVFgUHIDA1N//aAAgBAQABBQLKz/nWyz/nWyz/AJ1k4Hw4Hw4Hw4Hw4Hw4HwmVWqClEmixE0WImixE0WImixE0WOdB5Wyg8rZQeVl//8QAMBEAAAIECgsBAQAAAAAAAAAABQYAAgQHAwgVF1VWlJbT1AESEyAwNziFhrW2ERb/2gAIAQMBAT8B3nP8ui73b3onxXP8ui73b3onxXP8ui73b3onvyQFUYH2Jmw0kgKowPsTNhpJAVRgfYmbDSSAqjA+xM2GkkBVGB9iZsNJICqMD7EzYaRTSERhCL+QWtvJhTbmuF/qtq1NZdB2lohdmdTHBKbSHhmNeEX1INRSDU1ltOqooqro/FVdGhJtndVBJV1gPIpNs7qoJKusB5FJtndVBJV1gPIpNs7qoJKusB5FJtndVBJV1gPIpNs7qoJKusB5HfihdOzvfLPuDNxYoXTs73yz7gzcWKF07O98s+4M2/8A/8QALxEAAAIECwkBAQAAAAAAAAAABgcAAgMFBAgTFhdWV5aX1NUBIDA3OIWGtrcSEf/aAAgBAgEBPwHeO7meJ+y+vOnindzPE/ZfXnTxTu5nifsvrzp36CiRscKvD0I6QlBRI2OFXh6EdISgokbHCrw9COkJQUSNjhV4ehHSEoKJGxwq8PQjpCUFEjY4VeHoR0hI5hbF07IyZkQJ2gEFO+BMZnyMEgQWccFgrKUAQXatJNgwgLNkpKNV12q/5V2fpousut/Vltu1JiAipoVu86MmkxARU0K3edGTSYgIqaFbvOjJpMQEVNCt3nRk0mICKmhW7zoyaTEBFTQrd50ZPfjtdTpmeGfPgpxY7XU6Znhnz4KcWO11OmZ4Z8+Cm/8A/8QAKxAAAAMECAYDAAAAAAAAAAAAAgMEAAUGNAEgMDaUldLUEiGDhbS1ERMU/9oACAEBAAY/Aq0O929687WHe7e9edrDvdvevOvOq8SdradV4k7W06rxJ2tp1XiTtbTqvEna2nVeJO1siTpIkf6Ygv8AT9ZCd8PAkkHErPGLgLLUBAHiGIQhfFHMQqRU86aWvZEuevTdNeyJc9em6a9kS569N017Ilz16bpr2RLnr03TXsiXPXpuq6Xr+Sdapev5J1ql6/knV//EABcQAAMBAAAAAAAAAAAAAAAAAAEhUGH/2gAIAQEAAT8hm6aaGDBgwYMZeGBv3BW9CjNGDBgwYMYYY//aAAwDAQACAAMAAAAQAAAAAAAAAAAAAAAAAAADbbYSSSAAAAAAAAAAAAAAAAAAAH//xAAVEQEBAAAAAAAAAAAAAAAAAABQgf/aAAgBAwEBPxA1RRRy5cuXLmH8VsUvwlxG9+/fv373XXf/xAAVEQEBAAAAAAAAAAAAAAAAAABQgf/aAAgBAgEBPxA3DDB69evXr24QT7b2b5BGrFixYsWEkk//xAAVEAEBAAAAAAAAAAAAAAAAAABQAf/aAAgBAQABPxA3XXUGDBgwYOgVjhxRPtxEgYMGDBg8MMP/2Q==" x="-57" y="-27"></image> +</svg> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-aspect-ratio.html b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-aspect-ratio.html new file mode 100644 index 0000000000..d378dbfe54 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-aspect-ratio.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: svg image respects orientation and preserveAspectRatio</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/svg-image-orientation-aspect-ratio-ref.html"> +<meta name=fuzzy content="0-3;0-1432"> +</head> +<body style="margin:0"> + <svg style="width: 600px; height: 600px"> + <image xlink:href="support/exif-orientation-2-ur.jpg" x="0" y="0" width="150" height="150" preserveAspectRatio="xMinYMin meet"></image> + <image xlink:href="support/exif-orientation-8-llo.jpg" x="200" y="0" width="150" height="150" preserveAspectRatio="xMidYMin meet"></image> + <image xlink:href="support/exif-orientation-2-ur.jpg" x="400" y="0" width="150" height="150" preserveAspectRatio="xMaxYMin meet"></image> + <image xlink:href="support/exif-orientation-8-llo.jpg" x="0" y="150" width="150" height="150" preserveAspectRatio="xMinYMid slice"></image> + <image xlink:href="support/exif-orientation-2-ur.jpg" x="200" y="150" width="150" height="150" preserveAspectRatio="xMidYMid slice"></image> + <image xlink:href="support/exif-orientation-8-llo.jpg" x="400" y="150" width="150" height="150" preserveAspectRatio="xMaxYMid slice"></image> + <image xlink:href="support/exif-orientation-8-llo.jpg" x="0" y="300" width="150" height="150" preserveAspectRatio="xMinYMax meet"></image> + <image xlink:href="support/exif-orientation-2-ur.jpg" x="200" y="300" width="150" height="150" preserveAspectRatio="xMidYMax meet"></image> + <image xlink:href="support/exif-orientation-8-llo.jpg" x="400" y="300" width="150" height="150" preserveAspectRatio="xMaxYMax meet"></image> + <image xlink:href="support/exif-orientation-2-ur.jpg" x="0" y="450" width="150" height="150" preserveAspectRatio="none"></image> + <image xlink:href="support/exif-orientation-8-llo.jpg" x="200" y="450" width="150" height="150" preserveAspectRatio="none"></image> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-none.html b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-none.html new file mode 100644 index 0000000000..f585cdb76b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation-none.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: svg image ignores orientation with image-orientation:none</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/svg-image-orientation-none-ref.html"> +<meta name=fuzzy content="0-5;0-100"> +</head> +<body> + <svg style="width: 500px; height: 650px; image-orientation: none;"> + <image xlink:href="support/exif-orientation-1-ul.jpg" X="0" Y="0"></image> + <image xlink:href="support/exif-orientation-2-ur.jpg" X="125" Y="0"></image> + <image xlink:href="support/exif-orientation-3-lr.jpg" X="250" Y="0"></image> + <image xlink:href="support/exif-orientation-4-lol.jpg" X="375" Y="0"></image> + <image xlink:href="support/exif-orientation-5-lu.jpg" X="0" Y="125"></image> + <image xlink:href="support/exif-orientation-6-ru.jpg" X="125" Y="125"></image> + <image xlink:href="support/exif-orientation-7-rl.jpg" X="250" Y="125"></image> + <image xlink:href="support/exif-orientation-8-llo.jpg" X="375" Y="125"></image> + <image xlink:href="support/exif-orientation-9-u.jpg" X="0" Y="250"></image> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation.html b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation.html new file mode 100644 index 0000000000..758e900e91 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-orientation/svg-image-orientation.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: svg image respects orientation</title> +<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<link rel="match" href="reference/svg-image-orientation-ref.html"> +<meta name=fuzzy content="0-5;0-200"> +</head> +<body> + <svg style="width: 500px; height: 650px"> + <image xlink:href="support/exif-orientation-1-ul.jpg" X="0" Y="0"></image> + <image xlink:href="support/exif-orientation-2-ur.jpg" X="125" Y="0"></image> + <image xlink:href="support/exif-orientation-3-lr.jpg" X="250" Y="0"></image> + <image xlink:href="support/exif-orientation-4-lol.jpg" X="375" Y="0"></image> + <image xlink:href="support/exif-orientation-5-lu.jpg" X="0" Y="125"></image> + <image xlink:href="support/exif-orientation-6-ru.jpg" X="125" Y="125"></image> + <image xlink:href="support/exif-orientation-7-rl.jpg" X="250" Y="125"></image> + <image xlink:href="support/exif-orientation-8-llo.jpg" X="375" Y="125"></image> + <image xlink:href="support/exif-orientation-9-u.jpg" X="0" Y="250"></image> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/image-rendering-border-image-notref.html b/testing/web-platform/tests/css/css-images/image-rendering-border-image-notref.html new file mode 100644 index 0000000000..a7b06cf1bd --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-rendering-border-image-notref.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> +div { + width: 200px; + height: 150px; + background-color: black; + border: solid 4px; + border-image: url(support/small-border.png) 4 / 16px; +} +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-images/image-rendering-border-image.html b/testing/web-platform/tests/css/css-images/image-rendering-border-image.html new file mode 100644 index 0000000000..5f4c268d6b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-rendering-border-image.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>image-rendering applies to border-image</title> +<link rel=help href="https://drafts.csswg.org/css-images/#the-image-rendering"> +<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1716442"> +<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel=author href="https://mozilla.org" title="Mozilla"> +<link rel=mismatch href="image-rendering-border-image-notref.html"> +<style> +div { + width: 200px; + height: 150px; + background-color: black; + border: solid 4px; + border-image: url(support/small-border.png) 4 / 16px; + image-rendering: pixelated; +} +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering-2.html new file mode 100644 index 0000000000..b7c02fce25 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering-2.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Image set calc x rendering</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set calc x rendering"> +<style> + #test { + background-image: image-set( + url("/images/green.png") calc(0.5x * 2), + url("/images/red.png") 2x + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering.html new file mode 100644 index 0000000000..a5444fd769 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>Image set calc x rendering</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set calc x rendering"> +<style> + #test { + background-image: image-set(url("/images/green.png") calc(0.5x * 2)); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-computed.sub.html b/testing/web-platform/tests/css/css-images/image-set/image-set-computed.sub.html new file mode 100644 index 0000000000..6d54fd0d09 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-computed.sub.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<title>Image set computed value</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#serialization"> +<link rel="help" href="https://www.w3.org/TR/cssom-1/#serializing-css-values"> +<link rel="help" href="https://www.w3.org/TR/css-values-4/#canonical-unit"> +<link rel="help" href="https://www.w3.org/TR/css-values-4/#resolution"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<body> +<div id="target"></div> +<script> +function test_computed_value_variants(property, specified, computed) { + if (!computed) computed = specified; + test_computed_value(property, specified, computed); + test_computed_value(property, "-webkit-" + specified, computed); +} + +function test_calculated_resolution_units() { + test_computed_value_variants( + 'background-image', + "image-set(url('http://{{host}}/example.png') calc(1x * 2))", + 'image-set(url("http://{{host}}/example.png") 2dppx)' + ); + + test_computed_value_variants( + 'background-image', + "image-set(url('http://{{host}}/example.png') calc(6dppx / 3))", + 'image-set(url("http://{{host}}/example.png") 2dppx)' + ); + + test_computed_value_variants( + 'background-image', + "image-set(url('http://{{host}}/example.png') calc(100dpi - 4dpi))", + 'image-set(url("http://{{host}}/example.png") 1dppx)' + ); + + test_computed_value_variants( + 'background-image', + "image-set(url('http://{{host}}/example.png') calc(37dpcm + 0.79532dpcm))", + 'image-set(url("http://{{host}}/example.png") 1dppx)' + ); +} + +// The resolution unit is expected to be converted to the canonical unit 'dppx' +// for computed style. +test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) 1x)", 'image-set(url("http://{{host}}/example.png") 1dppx)'); +test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) 1x, 'http://{{host}}/example.png' 2x)", 'image-set(url("http://{{host}}/example.png") 1dppx, url("http://{{host}}/example.png") 2dppx)'); +test_computed_value_variants('background-image', 'image-set(url("http://{{host}}/example.png") 1dppx)'); +test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) 48dpi)", 'image-set(url("http://{{host}}/example.png") 0.5dppx)'); +test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) 2400dpcm, 'http://{{host}}/example.png' 2x)", 'image-set(url("http://{{host}}/example.png") 63.5dppx, url("http://{{host}}/example.png") 2dppx)'); +test_computed_value_variants('background-image', "image-set('http://{{host}}/example.jpeg' 240dpi, url(http://{{host}}/example.png) 3.5x)", 'image-set(url("http://{{host}}/example.jpeg") 2.5dppx, url("http://{{host}}/example.png") 3.5dppx)'); +test_computed_value_variants('background-image', "image-set(linear-gradient(black, white) 1x)", "image-set(linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255)) 1dppx)"); +test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) 1x type('image/png'))", 'image-set(url("http://{{host}}/example.png") 1dppx type("image/png"))'); +test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) type('image/png'))", 'image-set(url("http://{{host}}/example.png") 1dppx type("image/png"))'); +test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) type('image/png') 1x)", 'image-set(url("http://{{host}}/example.png") 1dppx type("image/png"))'); +test_computed_value_variants('content', "image-set(url('http://{{host}}/example.png') 192dpi, linear-gradient(black, white) 1x)", 'image-set(url("http://{{host}}/example.png") 2dppx, linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255)) 1dppx)'); + +// Unsupported type should still serialize. +test_computed_value_variants('background-image', 'image-set(url("http://{{host}}/example.png") type("image/unsupported"))', 'image-set(url("http://{{host}}/example.png") 1dppx type("image/unsupported"))'); +test_computed_value_variants('background-image', 'image-set(url("http://{{host}}/example.png") 2x type("image/unsupported"), url("http://{{host}}/example.png") 1x type("image/unsupported"))', 'image-set(url("http://{{host}}/example.png") 2dppx type("image/unsupported"), url("http://{{host}}/example.png") 1dppx type("image/unsupported"))'); + +test_calculated_resolution_units(); +</script> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-conic-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-conic-gradient-rendering.html new file mode 100644 index 0000000000..e4f426471a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-conic-gradient-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set conic-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-conic-gradient-rendering-ref.html"> +<meta name="assert" content="image-set conic-gradient rendering"> +<style> + #test { + background-image: image-set(conic-gradient(green, lightgreen) 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-content-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-content-rendering.html new file mode 100644 index 0000000000..aa6d1d6f1c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-content-rendering.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>Image set is supported in the content property</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="help" href="https://drafts.csswg.org/css-content/#content-property"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set content rendering"> +<style> + #test { + content: image-set(url("/images/green.png") 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-dpcm-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-dpcm-rendering.html new file mode 100644 index 0000000000..c9c4f50b5a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-dpcm-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set dpi rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set dpi rendering"> +<style> + #test { + background-image: image-set(url("/images/green.png") 37dpcm); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering-2.html new file mode 100644 index 0000000000..688c60a688 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering-2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set dpi rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set dpi rendering"> +<style> + #test { + background-image: image-set( + url("/images/green.png") 96dpi, + url("/images/red.png") 100dpi + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering.html new file mode 100644 index 0000000000..3288034d52 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set dpi rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set dpi rendering"> +<style> + #test { + background-image: image-set(url("/images/green.png") 96dpi); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-dppx-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-dppx-rendering.html new file mode 100644 index 0000000000..d111dfb7ff --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-dppx-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set dppx rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set dppx rendering"> +<style> + #test { + background-image: image-set(url("/images/green.png") 1dppx); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-empty-url-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-empty-url-rendering.html new file mode 100644 index 0000000000..f5b9992221 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-empty-url-rendering.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set empty url rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering when 2x url is empty"> +<style> + #test { + background-image: image-set( + url("/images/green.png") 1x, + url("") 2x + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-first-match-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-first-match-rendering.html new file mode 100644 index 0000000000..51d6aeeb24 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-first-match-rendering.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set type first match rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering picks first valid match"> +<style> + #test { + background-image: image-set( + url("/images/green.png") 1x, + url("/images/red.png") 1x + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-linear-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-linear-gradient-rendering.html new file mode 100644 index 0000000000..2fc31b95a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-linear-gradient-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set linear-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-linear-gradient-rendering-ref.html"> +<meta name="assert" content="image-set linear-gradient rendering"> +<style> + #test { + background-image: image-set(linear-gradient(green, lightgreen) 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering-2.html new file mode 100644 index 0000000000..c686b9a694 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering-2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set negative resolution rendering</title> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering with negative resolution"> +<style> + #test { + background-image: url("/images/green.png"); + background-image: image-set( + url("/images/red.png") -1x, + url("/images/red.png") 2x + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering.html new file mode 100644 index 0000000000..416b6929f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set negative resolution rendering</title> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering with negative resolution"> +<style> + #test { + background-image: url("/images/green.png"); + background-image: image-set(url("/images/red.png") -1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering-2.html new file mode 100644 index 0000000000..f588980be3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering-2.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set no resolution rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering with no resolution defined"> +<style> + #test { + background-image: image-set(url("/images/green.png"), url("/images/green.png")); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering.html new file mode 100644 index 0000000000..577728894d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set no resolution rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering with no resolution defined"> +<style> + #test { + background-image: image-set(url("/images/green.png")); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-no-url-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-no-url-rendering.html new file mode 100644 index 0000000000..f50ebb676a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-no-url-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set no url rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set without url functional notation rendering"> +<style> + #test { + background-image: image-set("/images/green.png" 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-parsing.html b/testing/web-platform/tests/css/css-images/image-set/image-set-parsing.html new file mode 100644 index 0000000000..fece0bef3a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-parsing.html @@ -0,0 +1,319 @@ +<!DOCTYPE html> +<title>Image set parsing</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam.j.rosenthal@gmail.com"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<meta name="assert" content="General image-set parsing follows CSS Images 4 rules."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<body> +<script> +function test_valid_value_variants(property, value, serializedValue) { + if (!serializedValue) serializedValue = value; + test_valid_value(property, value, serializedValue); + + // The '-webkit-' prefixed 'image-set' is expected to serialize to the same + // value as standard 'image-set'. + // https://drafts.csswg.org/css-images-4/#deprecated + // "Implementations must accept -webkit-image-set() as a parse-time alias of + // image-set(). (It’s a valid value, with identical arguments to image-set(), + // and is turned into image-set() during parsing.)" + test_valid_value(property, "-webkit-" + value, serializedValue); +} + +function test_invalid_value_variants(property, value) { + test_invalid_value(property, value); + test_invalid_value(property, "-webkit-" + value); +} + +function test_default_resolution_parsing() { + // Based on the spec, the resolution is optional and should default + // to 1x if not specified. + // This set of tests verify this expectation. + + // Test when the only image is missing it's resolution + test_valid_value_variants( + 'background-image', + 'image-set(url(foo))', + 'image-set(url("foo") 1x)' + ); + + // Test when the 1st of 2 images is missing it's resolution + test_valid_value_variants( + 'background-image', + 'image-set(url(foo), url(bar) 1x)', + 'image-set(url("foo") 1x, url("bar") 1x)' + ); + + // Test when the 2nd of 2 images is missing it's resolution + test_valid_value_variants( + 'background-image', + 'image-set(url(foo) 1x, url(bar))', + 'image-set(url("foo") 1x, url("bar") 1x)' + ); + + // Test when both images are missing their resolutions + test_valid_value_variants( + 'background-image', + 'image-set(url(foo), url(bar))', + 'image-set(url("foo") 1x, url("bar") 1x)' + ); + + // Test when the middle of 3 images is missing it's resolution + test_valid_value_variants( + 'background-image', + 'image-set(url(foo) 1x, url(bar), url(baz) 2x)', + 'image-set(url("foo") 1x, url("bar") 1x, url("baz") 2x)' + ); +} + +function test_resolution_units_parsing() { + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 1x)' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(2x * 3))', + 'image-set(url("example.png") calc(6dppx))' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 1dppx)' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(1dppx * 1))', + 'image-set(url("example.png") calc(1dppx))' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 1dpi)' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(96dpi * 2))', + 'image-set(url("example.png") calc(2dppx))' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 1dpcm)' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(1dpcm * 96/2.54))', + 'image-set(url("example.png") calc(1dppx))' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 1x, url("example.png") 2dppx, "example.png" 250dpi, "example.png" 1dpcm)', + 'image-set(url("example.png") 1x, url("example.png") 2dppx, url("example.png") 250dpi, url("example.png") 1dpcm)' + ); + test_valid_value_variants( + 'content', + 'image-set(url("example.png") 1dpi)' + ); + test_valid_value_variants( + 'content', + 'image-set(url("example.png") calc(1 * 96dpi))', + 'image-set(url("example.png") calc(1dppx))' + ); + + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") 1invalidResUnit)' + ); + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(3 * 4))' + ); + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(2 - 1))' + ); + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(2x - 1))' + ); + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(1 + 4dpi))' + ); +} + +function test_non_positive_resolutions_parsing() { + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 0x)' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 0dppx)' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 0dpi)' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 0dpcm)' + ); + + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") -1x)' + ); + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") -3dppx)' + ); + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") -96dpi)' + ); + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") -113dpcm)' + ); +} + +function test_gradient_images_parsing() { + test_valid_value_variants( + 'background-image', + "image-set(linear-gradient(black, white) 1x)" + ); + test_valid_value_variants( + 'background-image', + "image-set(repeating-linear-gradient(red, blue 25%) 1x)" + ); + test_valid_value_variants( + 'background-image', + "image-set(radial-gradient(black, white) 1x)" + ); + test_valid_value_variants( + 'background-image', + "image-set(repeating-radial-gradient(red, blue 25%) 1x)" + ); + test_valid_value_variants( + 'background-image', + "image-set(conic-gradient(black, white) 1x)" + ); + test_valid_value_variants( + 'background-image', + "image-set(repeating-conic-gradient(red, blue 25%) 1x)" + ); + test_valid_value_variants( + 'content', + 'image-set(linear-gradient(black, white) 1x, url("example.png") 4x)' + ); + test_valid_value_variants( + 'content', + 'image-set(url("example.png") 192dpi, linear-gradient(black, white) 1x)' + ); + + test_invalid_value_variants( + 'cursor', + "image-set(linear-gradient(black, white) 1x)" + ); + test_invalid_value_variants( + 'background-image', + "image-set(linear-gradient(red) 1x)" + ); +} + +function test_image_type_parsing() { + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 1x type("image/png"))' + ); + test_valid_value_variants( + 'background-image', + "image-set(url(example.png) type('image/png'))", + 'image-set(url("example.png") 1x type("image/png"))' + ); + test_valid_value_variants( + 'background-image', + "image-set(url(example.png) type('image/png') 1x)", + 'image-set(url("example.png") 1x type("image/png"))' + ); + test_valid_value_variants( + 'background-image', + "image-set(url(example.png) 1x type('image/jpeg'))", + 'image-set(url("example.png") 1x type("image/jpeg"))' + ); + + test_invalid_value_variants( + 'background-image', + "image-set(url(example.png) type(image/png))" + ); + test_invalid_value_variants( + 'background-image', + "image-set(url(example.png) type('image/png') type('image/png'))" + ); + test_invalid_value_variants( + 'background-image', + "image-set(url(example.png) type('image/png' 'image/png'))" + ); + test_invalid_value_variants( + 'background-image', + "image-set(url(example.png) type(url('image/png')))" + ); + test_invalid_value_variants( + 'background-image', + "image-set(url(example.png) 1xtype('image/png'))" + ); + test_invalid_value_variants( + 'background-image', + "image-set(type('image/png') url(example.png) 1x)" + ); +} + +function test_no_images_set_nesting() { + // Spec definition: + // "The image-set() function can not be nested inside of itself, + // either directly or indirectly (as an argument to another <image> type)." + + // Direct nesting + test_invalid_value_variants( + 'background-image', + "image-set(image-set(url(example.png)) 2x)" + ); + + // Indirect nesting + test_invalid_value_variants( + 'background-image', + "image-set(image(image-set(url(example.png)) 2x) 2x)" + ); +} + +function test_image_set_parsing() { + test_valid_value_variants('background-image', "image-set(url(example.png) 1x)", 'image-set(url("example.png") 1x)'); + test_valid_value_variants('background-image', "image-set('example.jpg' 1x)", 'image-set(url("example.jpg") 1x)'); + test_valid_value_variants('background-image', "image-set(url(example.png) 1x, 'example.png' 2x)", 'image-set(url("example.png") 1x, url("example.png") 2x)'); + test_valid_value_variants('background-image', "image-set(url(example.png) 1dpcm, 'example.png' 2x)", 'image-set(url("example.png") 1dpcm, url("example.png") 2x)'); + test_valid_value_variants('background-image', "image-set('example.jpeg' 222dpi, url(example.png) 3.5x)", 'image-set(url("example.jpeg") 222dpi, url("example.png") 3.5x)'); + test_valid_value_variants('background-image', 'image-set(url("example.png") 0x)'); + test_valid_value_variants('background-image', 'image-set(url("example.png") -20x)'); + + test_valid_value_variants('content', 'image-set(url("example.png") 1x)', 'image-set(url("example.png") 1x)'); + test_valid_value_variants('content', 'image-set(url("example.png") 1x, "example.png" 3x)', 'image-set(url("example.png") 1x, url("example.png") 3x)'); + test_valid_value_variants('border-image-source', 'image-set(url("example.png") 1x)', 'image-set(url("example.png") 1x)'); + test_valid_value_variants('border-image-source', 'image-set(url("example.png") 1x, "example.png" 3x)', 'image-set(url("example.png") 1x, url("example.png") 3x)'); + + test_invalid_value_variants('background-image', "image-set(none, url(example.png) 1x)"); + test_invalid_value_variants('background-image', "image-set()"); + test_invalid_value_variants('background-image', "image-set('example.jpeg' 92pid url(example.png) 1x)"); + test_invalid_value_variants('background-image', "image-set(url(example.png) 1x url(example.jpeg))"); + test_invalid_value_variants('background-image', "image-set(url(example.png) 1x 2x)"); + + test_default_resolution_parsing(); + test_resolution_units_parsing(); + test_non_positive_resolutions_parsing(); + test_gradient_images_parsing(); + test_image_type_parsing(); + test_no_images_set_nesting(); +} + +test_image_set_parsing(); +</script> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-radial-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-radial-gradient-rendering.html new file mode 100644 index 0000000000..b4e09ea351 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-radial-gradient-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set radial-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-radial-gradient-rendering-ref.html"> +<meta name="assert" content="image-set radial-gradient rendering"> +<style> + #test { + background-image: image-set(radial-gradient(green, lightgreen) 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-rendering-2.html new file mode 100644 index 0000000000..fa1749518f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-rendering-2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering"> +<style> + #test { + background-image: image-set( + url("/images/green.png") 1x, + url("/images/red.png") 2x + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-rendering.html new file mode 100644 index 0000000000..a105438cc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering"> +<style> + #test { + background-image: image-set(url("/images/green.png") 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-conic-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-conic-gradient-rendering.html new file mode 100644 index 0000000000..89060996f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-conic-gradient-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set repeating-conic-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-repeating-conic-gradient-rendering-ref.html"> +<meta name="assert" content="image-set repeating-conic-gradient rendering"> +<style> + #test { + background-image: image-set(repeating-conic-gradient(red, blue 25%) 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-linear-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-linear-gradient-rendering.html new file mode 100644 index 0000000000..a9cd6125a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-linear-gradient-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set repeating-linear-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-repeating-linear-gradient-rendering-ref.html"> +<meta name="assert" content="image-set repeating-linear-gradient rendering"> +<style> + #test { + background-image: image-set(repeating-linear-gradient(red, blue 25%) 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-radial-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-radial-gradient-rendering.html new file mode 100644 index 0000000000..ec8fd54421 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-radial-gradient-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set repeating-radial-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-repeating-radial-gradient-rendering-ref.html"> +<meta name="assert" content="image-set repeating-radial-gradient rendering"> +<style> + #test { + background-image: image-set(repeating-radial-gradient(red, blue 25%) 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001-ref.html b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001-ref.html new file mode 100644 index 0000000000..46c4d729ed --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001-ref.html @@ -0,0 +1,6 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> + body { margin: 0 } +</style> +<img srcset="/images/green.png 0.5x"> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001.html b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001.html new file mode 100644 index 0000000000..aaa750217d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>Image set resolution affects intrinsic size of the image</title> +<link rel="match" href="image-set-resolution-001-ref.html"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1705877"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<style> + body { margin: 0 } + div { + /* green.png is 100x50, should be 200x100 instead */ + content: -webkit-image-set(url('/images/green.png') 0.5x); + content: image-set(url('/images/green.png') 0.5x); + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-002.html b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-002.html new file mode 100644 index 0000000000..e5795e172f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-002.html @@ -0,0 +1,20 @@ +<!doctype html> +<title>Image set resolution affects intrinsic size of the image</title> +<link rel="match" href="image-set-resolution-001-ref.html"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1705877"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<style> + body { margin: 0 } + div { + /* green.png is 100x50, should be 200x100 instead */ + background-image: -webkit-image-set(url('/images/green.png') 0.5x); + background-image: image-set(url('/images/green.png') 0.5x); + background-repeat: no-repeat; + background-origin: 0 0; + width: 100vw; + height: 100vh; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-003.html b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-003.html new file mode 100644 index 0000000000..734ee05ecd --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-003.html @@ -0,0 +1,20 @@ +<!doctype html> +<title>Image set resolution affects intrinsic size of the image</title> +<link rel="match" href="image-set-resolution-001-ref.html"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1705877"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<style> + body { margin: 0 } + ul, li { margin: 0; padding: 0 } + li { + list-style-position: inside; + /* green.png is 100x50, should be 200x100 instead */ + list-style-image: -webkit-image-set(url('/images/green.png') 0.5x); + list-style-image: image-set(url('/images/green.png') 0.5x); + } +</style> +<ul> + <li></li> +</ul> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-first-match-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-first-match-rendering.html new file mode 100644 index 0000000000..eafe5bfb2c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-first-match-rendering.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set type first match rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering with type picks first valid match"> +<style> + #test { + background-image: image-set( + url("/images/green.png") 0.0001x type('image/png'), + url("/images/red.png") 0.0001x type('image/png') + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-2.html new file mode 100644 index 0000000000..23e90ea9e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set type rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering for images with same type but different resolutions"> +<style> + #test { + background-image: image-set( + url("/images/green.png") type('image/png') 1x, + url("/images/red.png") type('image/png') 2x + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-3.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-3.html new file mode 100644 index 0000000000..b47c4d82a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-3.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set type rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering with type before resolution"> +<style> + #test { + background-image: image-set(url("/images/green.png") type('image/png') 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering.html new file mode 100644 index 0000000000..069e2c867f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set type rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering with type"> +<style> + #test { + background-image: image-set(url("/images/green.png") 1x type('image/png')); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-skip-unsupported-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-skip-unsupported-rendering.html new file mode 100644 index 0000000000..4473e816bd --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-skip-unsupported-rendering.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set type skip unsupported rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering with type skips unsupported type"> +<style> + #test { + background-image: image-set( + url("/images/red.png") 1x type('image/unsupported'), + url("/images/green.png") 1x type('image/png') + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering-2.html new file mode 100644 index 0000000000..bebc32d87d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering-2.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>Image set type rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="/css/reference/blank.html"> +<meta name="assert" content="image-set rendering with all unsupported types"> +<!-- +Spec definition: +"An image-set() function contains a list of one or more <image-set-option>s, + and must select only one of them to determine what image it will represent: + First, remove any <image-set-option>s from the list that specify + an unknown or unsupported MIME type in their type() value." + +If all the values in the image set are of an unsupported type, +the set should be empty. + +"This has no effect on the validity of the image-set() function" +--> +<style> + #test { + background-image: url("/images/red.png"); + background-image: image-set( + url("/images/green.png") 1x type('image/unsupported'), + url("/images/green.png") 1x type('image/unsupported') + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering.html new file mode 100644 index 0000000000..486fcb3a8e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Image set type rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="/css/reference/blank.html"> +<meta name="assert" content="image-set rendering with unsupported type"> +<!-- +Spec definition: +"An image-set() function contains a list of one or more <image-set-option>s, + and must select only one of them to determine what image it will represent: + First, remove any <image-set-option>s from the list that specify + an unknown or unsupported MIME type in their type() value." + +If all the values in the image set are of an unsupported type, +the set should be empty. + +"This has no effect on the validity of the image-set() function" +--> +<style> + #test { + background-image: url("/images/red.png"); + background-image: image-set(url("/images/green.png") 1x type('image/unsupported')); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-unordered-res-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-unordered-res-rendering.html new file mode 100644 index 0000000000..2085b416b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-unordered-res-rendering.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set type unordered resolutions rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering when resolutions are unordered"> +<style> + #test { + background-image: image-set( + url("/images/red.png") 2x, + url("/images/green.png") 1x + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-conic-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-conic-gradient-rendering-ref.html new file mode 100644 index 0000000000..2a5133ee94 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-conic-gradient-rendering-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Image set conic-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<style> + #test { + width: 100px; + height: 100px; + background: conic-gradient(green, lightgreen); + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-linear-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-linear-gradient-rendering-ref.html new file mode 100644 index 0000000000..7f95f46eaf --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-linear-gradient-rendering-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Image set linear-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<style> + #test { + width: 100px; + height: 100px; + background: linear-gradient(green, lightgreen); + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-radial-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-radial-gradient-rendering-ref.html new file mode 100644 index 0000000000..3c49f87d91 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-radial-gradient-rendering-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Image set radial-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<style> + #test { + width: 100px; + height: 100px; + background: radial-gradient(green, lightgreen); + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-rendering-ref.html new file mode 100644 index 0000000000..8a56bbf4d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-rendering-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Image set rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<style> + #test { + width: 100px; + height: 100px; + background-color: lime; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-conic-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-conic-gradient-rendering-ref.html new file mode 100644 index 0000000000..02466664c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-conic-gradient-rendering-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Image set repeating-conic-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<style> + #test { + width: 100px; + height: 100px; + background: repeating-conic-gradient(red, blue 25%); + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-linear-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-linear-gradient-rendering-ref.html new file mode 100644 index 0000000000..e2915b1331 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-linear-gradient-rendering-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Image set repeating-linear-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<style> + #test { + width: 100px; + height: 100px; + background: repeating-linear-gradient(red, blue 25%); + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-radial-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-radial-gradient-rendering-ref.html new file mode 100644 index 0000000000..00035b3998 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-radial-gradient-rendering-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Image set repeating-radial-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<style> + #test { + width: 100px; + height: 100px; + background: repeating-radial-gradient(red, blue 25%); + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/infinite-radial-gradient-crash-ref.html b/testing/web-platform/tests/css/css-images/infinite-radial-gradient-crash-ref.html new file mode 100644 index 0000000000..a80236dcf7 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/infinite-radial-gradient-crash-ref.html @@ -0,0 +1,3 @@ +<!doctype html> +<p>You should see a 300x300px green square below and no crash.</p> +<div style="width:300px;height:300px;background:green"></div> diff --git a/testing/web-platform/tests/css/css-images/infinite-radial-gradient-refcrash.html b/testing/web-platform/tests/css/css-images/infinite-radial-gradient-refcrash.html new file mode 100644 index 0000000000..a3a1e7fb06 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/infinite-radial-gradient-refcrash.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>CSS Images Test: repeating-radial-gradient with huge size crashes Chrome</title> +<link rel="help" href="https://crbug.com/1009307"> +<link rel="match" href="infinite-radial-gradient-crash-ref.html"> +<style> + #crash { + background-image: repeating-radial-gradient(closest-corner circle at 9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999%, green, green); + width: 300px; + height: 300px; + } +</style> +<p>You should see a 300x300px green square below and no crash.</p> +<div id="crash"></div> diff --git a/testing/web-platform/tests/css/css-images/inheritance.html b/testing/web-platform/tests/css/css-images/inheritance.html new file mode 100644 index 0000000000..cf51ef3f7d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/inheritance.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Images properties</title> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#property-index"> +<meta name="assert" content="Properties inherit or not according to the spec."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> +<div id="target"></div> +</div> +<script> +assert_inherited('image-orientation', 'from-image', 'none'); +assert_inherited('image-rendering', 'auto', 'pixelated'); +assert_not_inherited('object-fit', 'fill', 'contain'); +assert_not_inherited('object-position', '50% 50%', '10px 20px'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/linear-gradient-1.html b/testing/web-platform/tests/css/css-images/linear-gradient-1.html new file mode 100644 index 0000000000..aa5a1310c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/linear-gradient-1.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Linear gradient with some inferred positions</title> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#coloring-gradient-line"> +<meta name="assert" content="Calculation of implicit gradient stops."> +<link rel="match" href="linear-gradient-ref.html"> +<style> + #gradient { + width: 400px; + height: 300px; + background-image: linear-gradient(to right, black 0%, red, gold); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/linear-gradient-2.html b/testing/web-platform/tests/css/css-images/linear-gradient-2.html new file mode 100644 index 0000000000..a9dca048b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/linear-gradient-2.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Linear gradient with all inferred positions</title> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#coloring-gradient-line"> +<meta name="assert" content="Calculation of implicit gradient stops."> +<link rel="match" href="linear-gradient-ref.html"> +<style> + #gradient { + width: 400px; + height: 300px; + background-image: linear-gradient(to right, black, red, gold); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/linear-gradient-ref.html b/testing/web-platform/tests/css/css-images/linear-gradient-ref.html new file mode 100644 index 0000000000..033f176779 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/linear-gradient-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<meta charset="utf-8"> +<style> + #gradient { + width: 400px; + height: 300px; + background-image: linear-gradient(to right, black 0%, red 50%, gold 100%); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic-2-ref.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic-2-ref.html new file mode 100644 index 0000000000..2ee92a11ee --- /dev/null +++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic-2-ref.html @@ -0,0 +1,3 @@ +<!doctype html> +<meta charset=utf-8> +<div style="background: conic-gradient(red 0%, red 25%, blue 25%, blue 75%, green 75%, green 100%); width: 100px; height: 100px;"><br></div> diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic-2.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic-2.html new file mode 100644 index 0000000000..f3171bf3fb --- /dev/null +++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic-2.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset=utf-8> +<title>Conic gradient with two position color stops</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax"> +<meta name="assert" content="Color stops with two positions are equivalent to two color stops with the same color"> +<link rel="match" href="multiple-position-color-stop-conic-2-ref.html"> +<div style="background-image: conic-gradient(red 0% 25%, blue 25% 75%, green 75% 100%); background-color: orange; width: 100px; height: 100px;"><br></div> diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic.html new file mode 100644 index 0000000000..8a7331d08f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-conic.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Conic gradient with a two position color stop</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax"> +<meta name="assert" content="A color stop with two positions create a hard transition"> +<link rel="match" href="reference/100x100-blue-green.html"> +<style> +#target { + width: 100px; + height: 100px; + background-color: red; + background-image: conic-gradient(green 0% 180deg, blue 180deg); +} +</style> +<div id="target"></div> diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2-ref.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2-ref.html new file mode 100644 index 0000000000..53ca212ad4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset=utf-8> +<body> + <div style="background: linear-gradient(to bottom, red 0%, red 25%, blue 25%, blue 75%, red 75%, red 100%); width: 100px; height: 100px;"><br></div> +</body> diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2.html new file mode 100644 index 0000000000..f33ae99c23 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear-2.html @@ -0,0 +1,9 @@ +<!doctype html> +<meta charset=utf-8> +<title>Linear gradient with a two position color stops</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax"> +<meta name="assert" content="Color stops with two positions are equivalent to two color stops with the same color"> +<link rel=match href=/css/css-images/multiple-position-color-stop-linear-2-ref.html> +<body> + <div style="background: linear-gradient(to bottom, red 0% 25%, blue 25% 75%, red 75% 100%); width: 100px; height: 100px;"><br></div> +</body> diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear.html new file mode 100644 index 0000000000..806845da43 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-linear.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Linear gradient with a two position color stop</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax"> +<meta name="assert" content="A color stop with two positions create a hard transition"> +<link rel="match" href="reference/100x100-blue-green.html"> +<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-3665"> +<style> +#target { + width: 100px; + height: 100px; + background-color: red; + background-image: linear-gradient(to right, blue 0% 50%, green 50%); +} +</style> +<div id="target"></div> diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2-ref.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2-ref.html new file mode 100644 index 0000000000..39850ad341 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset="utf-8"> +<body> + <div style="background: radial-gradient(red 0%, red 25%, blue 25%, blue 75%, red 75%, red 100%); width: 100px; height: 100px;"><br></div> +</body> diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2.html new file mode 100644 index 0000000000..339f5d4b33 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial-2.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Radial gradient with a two position color stops</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax"> +<meta name="assert" content="Color stops with two positions are equivalent to two color stops with the same color"> +<link rel="match" href=/css/css-images/multiple-position-color-stop-radial-2-ref.html> +<div style="background: radial-gradient(red 0% 25%, blue 25% 75%, red 75% 100%); width: 100px; height: 100px;"><br></div> diff --git a/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial.html b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial.html new file mode 100644 index 0000000000..4b4fd95c4e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/multiple-position-color-stop-radial.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Radial gradient with a two position color stop</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-stop-syntax"> +<meta name="assert" content="A color stop with two positions create a hard transition"> +<link rel="match" href="reference/100x100-blue-green.html"> +<style> +#target { + width: 100px; + height: 100px; + background-color: red; + background-image: radial-gradient(ellipse 50px 10000px at 0px 50px, blue 0% 50px, green 50px); +} +</style> +<div id="target"></div> diff --git a/testing/web-platform/tests/css/css-images/normalization-conic-2.html b/testing/web-platform/tests/css/css-images/normalization-conic-2.html new file mode 100644 index 0000000000..7f5c3954f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/normalization-conic-2.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Conic gradient stop normalization</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients"> +<meta name="assert" content="Rendering of conic-gradient with normalized color stops"> +<link rel="match" href="reference/100x100-blue.html"> +<style> + #gradient { + width: 100px; + height: 100px; + background-image: conic-gradient(blue 150%, red 150%); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/normalization-conic-degenerate.html b/testing/web-platform/tests/css/css-images/normalization-conic-degenerate.html new file mode 100644 index 0000000000..909fd54dcb --- /dev/null +++ b/testing/web-platform/tests/css/css-images/normalization-conic-degenerate.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Conic gradient stop normalization</title> +<link rel="help" href="https://www.w3.org/TR/css-images-3/#repeating-gradients"> +<meta name="assert" content="Rendering of repeating-conic-gradient w/ stops at the same place"> +<link rel="match" href="reference/100x100-blue.html"> +<style> + #gradient { + width: 100px; + height: 100px; + background-image: repeating-conic-gradient(orange 50%, blue 50%); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/normalization-conic.html b/testing/web-platform/tests/css/css-images/normalization-conic.html new file mode 100644 index 0000000000..9c5e82d71c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/normalization-conic.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Conic gradient stop normalization</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients"> +<meta name="assert" content="Rendering of conic-gradient with normalized color stops"> +<link rel="match" href="reference/100x100-blue.html"> +<style> + #gradient { + width: 100px; + height: 100px; + background-image: conic-gradient(green -50%, blue -50%); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/normalization-linear-2.html b/testing/web-platform/tests/css/css-images/normalization-linear-2.html new file mode 100644 index 0000000000..e3feeeb49a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/normalization-linear-2.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Linear gradient stop normalization</title> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#linear-gradients"> +<meta name="assert" content="Rendering of linear-gradient with normalized color stops"> +<link rel="match" href="reference/100x100-blue.html"> +<style> + #gradient { + width: 100px; + height: 100px; + background-image: linear-gradient(blue 150%, red 150%); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/normalization-linear-degenerate.html b/testing/web-platform/tests/css/css-images/normalization-linear-degenerate.html new file mode 100644 index 0000000000..26647290fb --- /dev/null +++ b/testing/web-platform/tests/css/css-images/normalization-linear-degenerate.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Linear gradient stop normalization</title> +<link rel="help" href="https://www.w3.org/TR/css-images-3/#repeating-gradients"> +<meta name="assert" content="Rendering of repeating-linear-gradient w/ stops at the same place"> +<link rel="match" href="reference/100x100-blue.html"> +<style> + #gradient { + width: 100px; + height: 100px; + background-image: repeating-linear-gradient(orange 50%, blue 50%); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/normalization-linear.html b/testing/web-platform/tests/css/css-images/normalization-linear.html new file mode 100644 index 0000000000..e46645631a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/normalization-linear.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Linear gradient stop normalization</title> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#linear-gradients"> +<meta name="assert" content="Rendering of linear-gradient with normalized color stops"> +<link rel="match" href="reference/100x100-blue.html"> +<style> + #gradient { + width: 100px; + height: 100px; + background-image: linear-gradient(green -50%, blue -50%); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/normalization-radial-2.html b/testing/web-platform/tests/css/css-images/normalization-radial-2.html new file mode 100644 index 0000000000..5ea50a5e03 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/normalization-radial-2.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Radial gradient stop normalization</title> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#radial-gradients"> +<meta name="assert" content="Rendering of radial-gradient with normalized color stops"> +<link rel="match" href="reference/100x100-blue.html"> +<style> + #gradient { + width: 100px; + height: 100px; + background-image: radial-gradient(blue 150%, red 150%); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/normalization-radial-degenerate.html b/testing/web-platform/tests/css/css-images/normalization-radial-degenerate.html new file mode 100644 index 0000000000..4fff3ac909 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/normalization-radial-degenerate.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Radial gradient stop normalization</title> +<link rel="help" href="https://www.w3.org/TR/css-images-3/#repeating-gradients"> +<meta name="assert" content="Rendering of repeating-radial-gradient w/ stops at the same place"> +<link rel="match" href="reference/100x100-blue.html"> +<style> + #gradient { + width: 100px; + height: 100px; + background-image: repeating-radial-gradient(orange 50%, blue 50%); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/normalization-radial.html b/testing/web-platform/tests/css/css-images/normalization-radial.html new file mode 100644 index 0000000000..6a510aa52f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/normalization-radial.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Radial gradient stop normalization</title> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#radial-gradients"> +<meta name="assert" content="Rendering of radial-gradient with normalized color stops"> +<link rel="match" href="reference/100x100-blue.html"> +<style> + #gradient { + width: 100px; + height: 100px; + background-image: linear-gradient(green -50%, blue -50%); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/object-fit-contain-png-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001-ref.html new file mode 100644 index 0000000000..b9f158093e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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/testing/web-platform/tests/css/css-images/object-fit-contain-png-001c.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001c.html new file mode 100644 index 0000000000..0f8195157e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001c.html @@ -0,0 +1,92 @@ +<!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"> + <meta name=fuzzy content="maxDifference=0-20;totalPixels=0-2000"> + <style type="text/css"> + canvas { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + image-rendering: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-png-001e.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001e.html new file mode 100644 index 0000000000..20a5f8ae56 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-png-001i.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001i.html new file mode 100644 index 0000000000..6605be2e1a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-png-001o.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001o.html new file mode 100644 index 0000000000..36761156bb --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-png-001p.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-001p.html new file mode 100644 index 0000000000..ac00ec44d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-png-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002-ref.html new file mode 100644 index 0000000000..804bde94c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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/testing/web-platform/tests/css/css-images/object-fit-contain-png-002c.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002c.html new file mode 100644 index 0000000000..14834316a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002c.html @@ -0,0 +1,92 @@ +<!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"> + <meta name=fuzzy content="maxDifference=0-20;totalPixels=0-2000"> + <style type="text/css"> + canvas { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + image-rendering: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-png-002e.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002e.html new file mode 100644 index 0000000000..6132fdc27d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-png-002i.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002i.html new file mode 100644 index 0000000000..222ac9e735 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-png-002o.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002o.html new file mode 100644 index 0000000000..6e0b555e57 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-png-002p.html b/testing/web-platform/tests/css/css-images/object-fit-contain-png-002p.html new file mode 100644 index 0000000000..97a150e582 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001-ref.html new file mode 100644 index 0000000000..84fa4d5ac1 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001e.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001e.html new file mode 100644 index 0000000000..a5dc815d03 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001i.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001i.html new file mode 100644 index 0000000000..d2011bd6df --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001o.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001o.html new file mode 100644 index 0000000000..7bb8c640f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001p.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-001p.html new file mode 100644 index 0000000000..f6a2b73bf3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002-ref.html new file mode 100644 index 0000000000..3a8a5b542d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002e.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002e.html new file mode 100644 index 0000000000..5d4197fb37 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002i.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002i.html new file mode 100644 index 0000000000..6d81d9b863 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002o.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002o.html new file mode 100644 index 0000000000..2d7b69ccc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002p.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-002p.html new file mode 100644 index 0000000000..74f43726ac --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003-ref.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003-ref.html new file mode 100644 index 0000000000..fde7f9fc97 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003e.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003e.html new file mode 100644 index 0000000000..9e4d758b05 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003i.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003i.html new file mode 100644 index 0000000000..52693ee214 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003o.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003o.html new file mode 100644 index 0000000000..b1ff0dddbe --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003p.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-003p.html new file mode 100644 index 0000000000..3d7d02a5f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004-ref.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004-ref.html new file mode 100644 index 0000000000..25e768080b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004e.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004e.html new file mode 100644 index 0000000000..1d86232bca --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004i.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004i.html new file mode 100644 index 0000000000..ff54f41faa --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004o.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004o.html new file mode 100644 index 0000000000..6a3015c882 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004p.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-004p.html new file mode 100644 index 0000000000..ec117017bf --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005-ref.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005-ref.html new file mode 100644 index 0000000000..c9089343c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005e.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005e.html new file mode 100644 index 0000000000..ce25d2781d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005i.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005i.html new file mode 100644 index 0000000000..10cef72c58 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005o.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005o.html new file mode 100644 index 0000000000..781133d064 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005p.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-005p.html new file mode 100644 index 0000000000..67f99138c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006-ref.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006-ref.html new file mode 100644 index 0000000000..21f9f2f29d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006e.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006e.html new file mode 100644 index 0000000000..850d0259a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006i.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006i.html new file mode 100644 index 0000000000..536e639ece --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006o.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006o.html new file mode 100644 index 0000000000..42d07664ae --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006p.html b/testing/web-platform/tests/css/css-images/object-fit-contain-svg-006p.html new file mode 100644 index 0000000000..6a39673f26 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-png-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001-ref.html new file mode 100644 index 0000000000..96a1ec64b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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/testing/web-platform/tests/css/css-images/object-fit-cover-png-001c.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001c.html new file mode 100644 index 0000000000..2a0071a01c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-png-001e.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001e.html new file mode 100644 index 0000000000..1091e01b7a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-png-001i.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001i.html new file mode 100644 index 0000000000..8db4683c27 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-png-001o.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001o.html new file mode 100644 index 0000000000..8e40b532ca --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-png-001p.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-001p.html new file mode 100644 index 0000000000..a75a977a37 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-png-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002-ref.html new file mode 100644 index 0000000000..9dc589abeb --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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/testing/web-platform/tests/css/css-images/object-fit-cover-png-002c.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002c.html new file mode 100644 index 0000000000..66836651fb --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-png-002e.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002e.html new file mode 100644 index 0000000000..8dab30ccfd --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-png-002i.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002i.html new file mode 100644 index 0000000000..1866fde155 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-png-002o.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002o.html new file mode 100644 index 0000000000..a36ddbfce8 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-png-002p.html b/testing/web-platform/tests/css/css-images/object-fit-cover-png-002p.html new file mode 100644 index 0000000000..36222054b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001-ref.html new file mode 100644 index 0000000000..b1539f9278 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001e.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001e.html new file mode 100644 index 0000000000..c787be471f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001i.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001i.html new file mode 100644 index 0000000000..972e20ac22 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001o.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001o.html new file mode 100644 index 0000000000..cf755657bc --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001p.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-001p.html new file mode 100644 index 0000000000..db899db1b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002-ref.html new file mode 100644 index 0000000000..86706084f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002e.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002e.html new file mode 100644 index 0000000000..b42eb0eb79 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002i.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002i.html new file mode 100644 index 0000000000..b79b532b73 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002o.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002o.html new file mode 100644 index 0000000000..e888bd0942 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002p.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-002p.html new file mode 100644 index 0000000000..65516da2ac --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003-ref.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003-ref.html new file mode 100644 index 0000000000..18aa362436 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003e.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003e.html new file mode 100644 index 0000000000..d24d53cfd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003i.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003i.html new file mode 100644 index 0000000000..92c7a975a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003o.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003o.html new file mode 100644 index 0000000000..66401ae1d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003p.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-003p.html new file mode 100644 index 0000000000..c726e733dc --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004-ref.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004-ref.html new file mode 100644 index 0000000000..cf0f747f22 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004e.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004e.html new file mode 100644 index 0000000000..f253fdba68 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004i.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004i.html new file mode 100644 index 0000000000..0c52eaa170 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004o.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004o.html new file mode 100644 index 0000000000..7bd2f8419e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004p.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-004p.html new file mode 100644 index 0000000000..da1c88c50b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005-ref.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005-ref.html new file mode 100644 index 0000000000..374b0ac7e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005e.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005e.html new file mode 100644 index 0000000000..4d14246481 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005i.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005i.html new file mode 100644 index 0000000000..9948ea7878 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005o.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005o.html new file mode 100644 index 0000000000..894b3e85aa --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005p.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-005p.html new file mode 100644 index 0000000000..210be382ae --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006-ref.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006-ref.html new file mode 100644 index 0000000000..2e0ecc7d09 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006e.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006e.html new file mode 100644 index 0000000000..d699f2bb30 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006i.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006i.html new file mode 100644 index 0000000000..f7c71eb895 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006o.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006o.html new file mode 100644 index 0000000000..f6b60a4cc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006p.html b/testing/web-platform/tests/css/css-images/object-fit-cover-svg-006p.html new file mode 100644 index 0000000000..08c9acfe35 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-001-ref.html new file mode 100644 index 0000000000..138f0acbf0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-001-ref.html @@ -0,0 +1,54 @@ +<!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> + div { + margin: 1px; + background: lime; + float: left; + } + + .square { + width: 24px; + height: 24px; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + </style> + </head> + <body> + <!-- Note: the specified heights here are just 1/2 the widths. --> + <div class="square"></div> + <div class="square" style="height: 12px"></div> + <br> + <div class="bigWide"></div> + <div class="bigWide" style="height: 24px"></div> + <br> + <div class="bigTall"></div> + <div class="bigTall" style="height: 16px"></div> + <br> + <div class="small"></div> + <div class="small" style="height: 4px"></div> + <br> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-001.html b/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-001.html new file mode 100644 index 0000000000..dafadf2e58 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-001.html @@ -0,0 +1,71 @@ +<!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' and 'cover' on object element whose aspect ratio dynamically changes</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="match" href="object-fit-dyn-aspect-ratio-001-ref.html"> + <style> + object { + margin: 1px; + float: left; + /* I'm just using 'object-position' for cosmetic reasons, so that the + painted areas are all snapped to top-left which makes reference case + more trivial. */ + object-position: top left; + } + .cov { object-fit: cover; } + .con { object-fit: contain; } + + .square { + width: 24px; + height: 24px; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + </style> + <script> + function go() { + for (let elem of document.getElementsByTagName("object")) { + var doc = elem.contentDocument; + /* These should all should select out a piece of the + bottom-right quadrant (the lime chunk): */ + doc.documentElement.setAttribute("viewBox", "8 4 8 4"); + } + } + </script> + </head> + <body onload="go()"> + <object data="support/colors-16x8-parDefault.svg" class="square cov"></object> + <object data="support/colors-16x8-parDefault.svg" class="square con"></object> + <br> + <object data="support/colors-16x8-parDefault.svg" class="bigWide cov"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigWide con"></object> + <br> + <object data="support/colors-16x8-parDefault.svg" class="bigTall cov"></object> + <object data="support/colors-16x8-parDefault.svg" class="bigTall con"></object> + <br> + <object data="support/colors-16x8-parDefault.svg" class="small cov"></object> + <object data="support/colors-16x8-parDefault.svg" class="small con"></object> + <br> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-002-ref.html new file mode 100644 index 0000000000..ddddccad32 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-002-ref.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 Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + div { + margin: 1px; + background: lime; + float: left; + } + + .square { + width: 24px; + height: 24px; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + </style> + </head> + <body> + <!-- Note: each inline-style specified width here is just using the final + viewBox aspect-ratio (1/2) times the element's specified height. This + is how wide the concrete object size[1] should end up, for the + testcase's "object-fit:contain" elements. + [1] https://drafts.csswg.org/css-images-3/#concrete-object-size --> + <div class="square"></div> + <div class="square" style="width: 12px"></div> + <br> + <div class="bigWide"></div> + <div class="bigWide" style="width: 16px"></div> + <br> + <div class="bigTall"></div> + <div class="bigTall" style="width: 24px"></div> + <br> + <div class="small"></div> + <div class="small" style="width: 4px"></div> + <br> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-002.html b/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-002.html new file mode 100644 index 0000000000..26ae89e479 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-fit-dyn-aspect-ratio-002.html @@ -0,0 +1,71 @@ +<!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' and 'cover' on object element whose aspect ratio dynamically changes</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="match" href="object-fit-dyn-aspect-ratio-002-ref.html"> + <style> + object { + margin: 1px; + float: left; + /* I'm just using 'object-position' for cosmetic reasons, so that the + painted areas are all snapped to top-left which makes reference case + more trivial. */ + object-position: top left; + } + .cov { object-fit: cover; } + .con { object-fit: contain; } + + .square { + width: 24px; + height: 24px; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + </style> + <script> + function go() { + for (let elem of document.getElementsByTagName("object")) { + var doc = elem.contentDocument; + /* These should all should select out a piece of the + bottom-right quadrant (the lime chunk): */ + doc.documentElement.setAttribute("viewBox", "4 8 4 8"); + } + } + </script> + </head> + <body onload="go()"> + <object data="support/colors-8x16-parDefault.svg" class="square cov"></object> + <object data="support/colors-8x16-parDefault.svg" class="square con"></object> + <br> + <object data="support/colors-8x16-parDefault.svg" class="bigWide cov"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigWide con"></object> + <br> + <object data="support/colors-8x16-parDefault.svg" class="bigTall cov"></object> + <object data="support/colors-8x16-parDefault.svg" class="bigTall con"></object> + <br> + <object data="support/colors-8x16-parDefault.svg" class="small cov"></object> + <object data="support/colors-8x16-parDefault.svg" class="small con"></object> + <br> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/object-fit-fill-png-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001-ref.html new file mode 100644 index 0000000000..19a03a19e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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/testing/web-platform/tests/css/css-images/object-fit-fill-png-001c.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001c.html new file mode 100644 index 0000000000..0e2a3883fe --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001c.html @@ -0,0 +1,92 @@ +<!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"> + <meta name=fuzzy content="maxDifference=0-20;totalPixels=0-3200"> + <style type="text/css"> + canvas { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + image-rendering: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-png-001e.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001e.html new file mode 100644 index 0000000000..08aa6b23fe --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-png-001i.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001i.html new file mode 100644 index 0000000000..90692c30cb --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-png-001o.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001o.html new file mode 100644 index 0000000000..b57528b125 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-png-001p.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-001p.html new file mode 100644 index 0000000000..1e30e7aef4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-png-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002-ref.html new file mode 100644 index 0000000000..b05469cf6e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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/testing/web-platform/tests/css/css-images/object-fit-fill-png-002c.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002c.html new file mode 100644 index 0000000000..43bcced9f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002c.html @@ -0,0 +1,92 @@ +<!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"> + <meta name=fuzzy content="maxDifference=0-20;totalPixels=0-3200"> + <style type="text/css"> + canvas { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + image-rendering: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-png-002e.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002e.html new file mode 100644 index 0000000000..d5903c2004 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-png-002i.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002i.html new file mode 100644 index 0000000000..b5abd3d800 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-png-002o.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002o.html new file mode 100644 index 0000000000..a8904f2a4e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-png-002p.html b/testing/web-platform/tests/css/css-images/object-fit-fill-png-002p.html new file mode 100644 index 0000000000..e0b44135ec --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001-ref.html new file mode 100644 index 0000000000..afb32785ad --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001e.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001e.html new file mode 100644 index 0000000000..008f8da98e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001i.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001i.html new file mode 100644 index 0000000000..43e5ae7e86 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001o.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001o.html new file mode 100644 index 0000000000..91e9554004 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001p.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-001p.html new file mode 100644 index 0000000000..d2ffffdb4a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002-ref.html new file mode 100644 index 0000000000..13c4d84030 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002e.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002e.html new file mode 100644 index 0000000000..38f3c10c1f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002i.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002i.html new file mode 100644 index 0000000000..2bbf505e48 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002o.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002o.html new file mode 100644 index 0000000000..8580cdb4cf --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002p.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-002p.html new file mode 100644 index 0000000000..4e1d61a140 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003-ref.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003-ref.html new file mode 100644 index 0000000000..ab27b3d717 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003e.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003e.html new file mode 100644 index 0000000000..37182514dc --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003i.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003i.html new file mode 100644 index 0000000000..54e55f4e84 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003o.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003o.html new file mode 100644 index 0000000000..1f640d990d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003p.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-003p.html new file mode 100644 index 0000000000..165f072bc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004-ref.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004-ref.html new file mode 100644 index 0000000000..70c9487960 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004e.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004e.html new file mode 100644 index 0000000000..3d36a3b97b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004i.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004i.html new file mode 100644 index 0000000000..cd83227eb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004o.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004o.html new file mode 100644 index 0000000000..10140225cf --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004p.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-004p.html new file mode 100644 index 0000000000..bd54333a4b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005-ref.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005-ref.html new file mode 100644 index 0000000000..c8e4ce1e7d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005e.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005e.html new file mode 100644 index 0000000000..c706c670e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005i.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005i.html new file mode 100644 index 0000000000..a12265f224 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005o.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005o.html new file mode 100644 index 0000000000..d25f0ecf1e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005p.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-005p.html new file mode 100644 index 0000000000..1bbd6a9b89 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006-ref.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006-ref.html new file mode 100644 index 0000000000..85883fe9dc --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006e.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006e.html new file mode 100644 index 0000000000..c741c7e658 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006i.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006i.html new file mode 100644 index 0000000000..6da7334e56 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006o.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006o.html new file mode 100644 index 0000000000..7d48d6f216 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006p.html b/testing/web-platform/tests/css/css-images/object-fit-fill-svg-006p.html new file mode 100644 index 0000000000..73b4f72089 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-png-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-001-ref.html new file mode 100644 index 0000000000..bd25ed754e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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/testing/web-platform/tests/css/css-images/object-fit-none-png-001c.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-001c.html new file mode 100644 index 0000000000..fe483baa96 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-png-001e.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-001e.html new file mode 100644 index 0000000000..91be966a40 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-png-001i.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-001i.html new file mode 100644 index 0000000000..39d7e475c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-png-001o.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-001o.html new file mode 100644 index 0000000000..f1d702a5c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-png-001p.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-001p.html new file mode 100644 index 0000000000..85edee9080 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-png-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-002-ref.html new file mode 100644 index 0000000000..8273d3b21e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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/testing/web-platform/tests/css/css-images/object-fit-none-png-002c.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-002c.html new file mode 100644 index 0000000000..09bc836d02 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-png-002e.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-002e.html new file mode 100644 index 0000000000..ce3e07e7df --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-png-002i.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-002i.html new file mode 100644 index 0000000000..1f33b5758a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-png-002o.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-002o.html new file mode 100644 index 0000000000..2b1083628e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-png-002p.html b/testing/web-platform/tests/css/css-images/object-fit-none-png-002p.html new file mode 100644 index 0000000000..656515ddeb --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-001-ref.html new file mode 100644 index 0000000000..3332452df7 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-none-svg-001e.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-001e.html new file mode 100644 index 0000000000..31365eea55 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-001i.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-001i.html new file mode 100644 index 0000000000..7c47f68f64 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-001o.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-001o.html new file mode 100644 index 0000000000..24aa6cc6e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-001p.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-001p.html new file mode 100644 index 0000000000..f2b3dc05c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-002-ref.html new file mode 100644 index 0000000000..0e48003ec0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-none-svg-002e.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-002e.html new file mode 100644 index 0000000000..68cd20a9e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-002i.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-002i.html new file mode 100644 index 0000000000..5fb1823d47 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-002o.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-002o.html new file mode 100644 index 0000000000..7d0ad60340 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-002p.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-002p.html new file mode 100644 index 0000000000..f383450dbd --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-003-ref.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-003-ref.html new file mode 100644 index 0000000000..33a01176fa --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-none-svg-003e.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-003e.html new file mode 100644 index 0000000000..4db5bcc86e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-003i.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-003i.html new file mode 100644 index 0000000000..132687ca8e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-003o.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-003o.html new file mode 100644 index 0000000000..775bbc6029 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-003p.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-003p.html new file mode 100644 index 0000000000..211e9132bd --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-004-ref.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-004-ref.html new file mode 100644 index 0000000000..757708cacc --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-none-svg-004e.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-004e.html new file mode 100644 index 0000000000..d998995ac9 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-004i.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-004i.html new file mode 100644 index 0000000000..6b5564a0f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-004o.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-004o.html new file mode 100644 index 0000000000..26c0dd837f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-004p.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-004p.html new file mode 100644 index 0000000000..2d8d8d5cb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-005-ref.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-005-ref.html new file mode 100644 index 0000000000..c8d70e4e0b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-none-svg-005e.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-005e.html new file mode 100644 index 0000000000..328a337d3f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-005i.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-005i.html new file mode 100644 index 0000000000..d452e38a0d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-005o.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-005o.html new file mode 100644 index 0000000000..7fd4e5b397 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-005p.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-005p.html new file mode 100644 index 0000000000..05aab2098f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-006-ref.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-006-ref.html new file mode 100644 index 0000000000..016ef69615 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-none-svg-006e.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-006e.html new file mode 100644 index 0000000000..a91251704d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-006i.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-006i.html new file mode 100644 index 0000000000..15bb00bebd --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-006o.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-006o.html new file mode 100644 index 0000000000..da2890aa01 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-none-svg-006p.html b/testing/web-platform/tests/css/css-images/object-fit-none-svg-006p.html new file mode 100644 index 0000000000..8b8b42135c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001-ref.html new file mode 100644 index 0000000000..abf3788be2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001c.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001c.html new file mode 100644 index 0000000000..5b8116ecbc --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001e.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001e.html new file mode 100644 index 0000000000..c2f587405f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001i.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001i.html new file mode 100644 index 0000000000..0fd1209245 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001o.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001o.html new file mode 100644 index 0000000000..bed477d048 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001p.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-001p.html new file mode 100644 index 0000000000..ff152315ff --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002-ref.html new file mode 100644 index 0000000000..3e516985f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002c.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002c.html new file mode 100644 index 0000000000..626f379f1c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002e.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002e.html new file mode 100644 index 0000000000..4190c5f1f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002i.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002i.html new file mode 100644 index 0000000000..dc3fcc2a41 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002o.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002o.html new file mode 100644 index 0000000000..f7dcca2ecc --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002p.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-png-002p.html new file mode 100644 index 0000000000..6d05ee0b25 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001-ref.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001-ref.html new file mode 100644 index 0000000000..1fad02c911 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001e.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001e.html new file mode 100644 index 0000000000..a6bc8d19f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001i.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001i.html new file mode 100644 index 0000000000..d331a9e559 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001o.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001o.html new file mode 100644 index 0000000000..88ba8171f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001p.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-001p.html new file mode 100644 index 0000000000..ab29b635cc --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002-ref.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002-ref.html new file mode 100644 index 0000000000..03d4f4c939 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002e.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002e.html new file mode 100644 index 0000000000..a0b7f1180c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002i.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002i.html new file mode 100644 index 0000000000..6d260fb16c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002o.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002o.html new file mode 100644 index 0000000000..d60a5a92a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002p.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-002p.html new file mode 100644 index 0000000000..8cca87a44d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003-ref.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003-ref.html new file mode 100644 index 0000000000..18883dc9a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003e.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003e.html new file mode 100644 index 0000000000..f4d7cf98b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003i.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003i.html new file mode 100644 index 0000000000..1841ec7506 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003o.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003o.html new file mode 100644 index 0000000000..31f73c3ba8 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003p.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-003p.html new file mode 100644 index 0000000000..ee3ff8e15d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004-ref.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004-ref.html new file mode 100644 index 0000000000..126b62ed34 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004e.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004e.html new file mode 100644 index 0000000000..3f83b62dce --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004i.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004i.html new file mode 100644 index 0000000000..ecc6337c23 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004o.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004o.html new file mode 100644 index 0000000000..9dad7088f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004p.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-004p.html new file mode 100644 index 0000000000..7993375e7d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005-ref.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005-ref.html new file mode 100644 index 0000000000..a107fb4641 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005e.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005e.html new file mode 100644 index 0000000000..2e813e7d2c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005i.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005i.html new file mode 100644 index 0000000000..a741f64331 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005o.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005o.html new file mode 100644 index 0000000000..808952b89a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005p.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-005p.html new file mode 100644 index 0000000000..f0b7632b84 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006-ref.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006-ref.html new file mode 100644 index 0000000000..4a06d37b5c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006e.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006e.html new file mode 100644 index 0000000000..15ce6d3d4d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006i.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006i.html new file mode 100644 index 0000000000..83c544ed13 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006o.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006o.html new file mode 100644 index 0000000000..00eae1ca34 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006p.html b/testing/web-platform/tests/css/css-images/object-fit-scale-down-svg-006p.html new file mode 100644 index 0000000000..f5e894034e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/object-position-png-001-ref.html b/testing/web-platform/tests/css/css-images/object-position-png-001-ref.html new file mode 100644 index 0000000000..1027cfc35c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-png-001c.html b/testing/web-platform/tests/css/css-images/object-position-png-001c.html new file mode 100644 index 0000000000..20ff1cb935 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-png-001e.html b/testing/web-platform/tests/css/css-images/object-position-png-001e.html new file mode 100644 index 0000000000..cdf35a1fc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-png-001i.html b/testing/web-platform/tests/css/css-images/object-position-png-001i.html new file mode 100644 index 0000000000..d3e2622b40 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-png-001o.html b/testing/web-platform/tests/css/css-images/object-position-png-001o.html new file mode 100644 index 0000000000..cdf0e0b530 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-png-001p.html b/testing/web-platform/tests/css/css-images/object-position-png-001p.html new file mode 100644 index 0000000000..8b80b9c5bf --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-png-002-ref.html b/testing/web-platform/tests/css/css-images/object-position-png-002-ref.html new file mode 100644 index 0000000000..bd14f9cfc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-png-002c.html b/testing/web-platform/tests/css/css-images/object-position-png-002c.html new file mode 100644 index 0000000000..5ad030ffb6 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-png-002e.html b/testing/web-platform/tests/css/css-images/object-position-png-002e.html new file mode 100644 index 0000000000..749948ae4c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-png-002i.html b/testing/web-platform/tests/css/css-images/object-position-png-002i.html new file mode 100644 index 0000000000..88b4a15001 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-png-002o.html b/testing/web-platform/tests/css/css-images/object-position-png-002o.html new file mode 100644 index 0000000000..0d507900f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-png-002p.html b/testing/web-platform/tests/css/css-images/object-position-png-002p.html new file mode 100644 index 0000000000..00ace782bc --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-svg-001-ref.html b/testing/web-platform/tests/css/css-images/object-position-svg-001-ref.html new file mode 100644 index 0000000000..61c386d88f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-svg-001e.html b/testing/web-platform/tests/css/css-images/object-position-svg-001e.html new file mode 100644 index 0000000000..05f226cd88 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-svg-001i.html b/testing/web-platform/tests/css/css-images/object-position-svg-001i.html new file mode 100644 index 0000000000..eecf0f4330 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-svg-001o.html b/testing/web-platform/tests/css/css-images/object-position-svg-001o.html new file mode 100644 index 0000000000..589999c91f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-svg-001p.html b/testing/web-platform/tests/css/css-images/object-position-svg-001p.html new file mode 100644 index 0000000000..8b0b468b2f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-svg-002-ref.html b/testing/web-platform/tests/css/css-images/object-position-svg-002-ref.html new file mode 100644 index 0000000000..d75e5edb7c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-svg-002e.html b/testing/web-platform/tests/css/css-images/object-position-svg-002e.html new file mode 100644 index 0000000000..0bde50d0ca --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-svg-002i.html b/testing/web-platform/tests/css/css-images/object-position-svg-002i.html new file mode 100644 index 0000000000..202b171c3a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-svg-002o.html b/testing/web-platform/tests/css/css-images/object-position-svg-002o.html new file mode 100644 index 0000000000..e05938167c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-position-svg-002p.html b/testing/web-platform/tests/css/css-images/object-position-svg-002p.html new file mode 100644 index 0000000000..3c6b7a3d40 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/object-view-box-contain-intrinsic-size-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-contain-intrinsic-size-ref.html new file mode 100644 index 0000000000..da77fd4001 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-contain-intrinsic-size-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box on an element with contain-intrinsic-size : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-fit: fill; + width: 100px; + height: 200px; + position: relative; + top: -100px; + left: -50px; + clip-path: inset(101px 0px 0px 51px); +} +</style> +<img class="default" src="support/exif-orientation-6-ru.jpg"></img> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-contain-intrinsic-size.html b/testing/web-platform/tests/css/css-images/object-view-box-contain-intrinsic-size.html new file mode 100644 index 0000000000..411aff11a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-contain-intrinsic-size.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box on an element with contain-intrinsic-size</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-contain-intrinsic-size-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + /* Paint the yellow box at the bottom right corner. The box should be sized + based on |contain-intrinsic-size| but the painted content is based on the + view box. */ + object-view-box: inset(50px 0px 0px 25px); + object-fit: fill; + contain: size; + contain-intrinsic-size: 50px 100px; + clip-path: inset(1px 0px 0px 1px); +} +</style> +<img class="default" src="support/exif-orientation-6-ru.jpg"></img> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-empty-bounds-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-empty-bounds-ref.html new file mode 100644 index 0000000000..9cc48196d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-empty-bounds-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with empty bounds : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-fit: fill; + background-color: black; +} +</style> +<img class="default" src="support/exif-orientation-6-ru.jpg"></img> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-empty-bounds.html b/testing/web-platform/tests/css/css-images/object-view-box-empty-bounds.html new file mode 100644 index 0000000000..b793182a9d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-empty-bounds.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with empty bounds</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-empty-bounds-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-view-box: inset(50px 0px 50px 0px); + object-fit: fill; + background-color: black; +} +</style> +<img class="default" src="support/exif-orientation-6-ru.jpg"></img> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-canvas-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-canvas-ref.html new file mode 100644 index 0000000000..821c2f333f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-canvas-ref.html @@ -0,0 +1,69 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:contain (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset { + position: relative; + top: -25px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_position { + position: relative; + top: -50px; +} + +.container_view_box_subset_with_scaling { + width: 100px; + height: 200px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_scaling { + position: relative; + top: 25px; + left: 25px; + width: 100px; + height: 200px; +} +</style> +<div class="container_view_box_subset"> + <canvas class="view_box_subset"></canvas> +</div> +<div class="container_view_box_subset_with_position"> + <canvas class="view_box_subset_with_position"></canvas> +</div> +<div class="container_view_box_subset_with_scaling"> + <canvas class="view_box_subset_with_scaling"></canvas> +</div> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-canvas.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-canvas.html new file mode 100644 index 0000000000..ad9b33db85 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-canvas.html @@ -0,0 +1,50 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:contain</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-contain-canvas-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + width: 50px; + height: 100px; + background-color: grey; + margin: 5px; +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + width: 50px; + height: 100px; + background-color: grey; + margin: 5px; + + object-position: 0% 0%; + background-color: grey; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + background-color: grey; + margin: 5px; + + width: 100px; + height: 200px; + object-position: 25px 125px; +} +</style> +<canvas class="view_box_subset"></canvas> +<canvas class="view_box_subset_with_position"></canvas> +<canvas class="view_box_subset_with_scaling"></canvas> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-img-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-img-ref.html new file mode 100644 index 0000000000..7a4ac607d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-img-ref.html @@ -0,0 +1,69 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:contain (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset { + position: relative; + top: -25px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_position { + position: relative; + top: -50px; +} + +.container_view_box_subset_with_scaling { + width: 100px; + height: 200px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_scaling { + position: relative; + top: 25px; + left: 25px; + width: 100px; + height: 200px; +} +</style> +<div class="container_view_box_subset"> + <img class="view_box_subset"></img> +</div> +<div class="container_view_box_subset_with_position"> + <img class="view_box_subset_with_position"></img> +</div> +<div class="container_view_box_subset_with_scaling"> + <img class="view_box_subset_with_scaling"></img> +</div> +</body> +<script> + populateElements("support/exif-orientation-6-ru.jpg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-img.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-img.html new file mode 100644 index 0000000000..d2e4c08a05 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-img.html @@ -0,0 +1,50 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:contain</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-contain-img-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + width: 50px; + height: 100px; + background-color: grey; + margin: 5px; +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + width: 50px; + height: 100px; + background-color: grey; + margin: 5px; + + object-position: 0% 0%; + background-color: grey; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + background-color: grey; + margin: 5px; + + width: 100px; + height: 200px; + object-position: 25px 125px; +} +</style> +<img class="view_box_subset"></img> +<img class="view_box_subset_with_position"></img> +<img class="view_box_subset_with_scaling"></img> +</body> +<script> + populateElements("support/exif-orientation-6-ru.jpg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-svg-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-svg-ref.html new file mode 100644 index 0000000000..b6fea8087b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-svg-ref.html @@ -0,0 +1,69 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:contain (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset { + position: relative; + top: -25px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_position { + position: relative; + top: -50px; +} + +.container_view_box_subset_with_scaling { + width: 100px; + height: 200px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_scaling { + position: relative; + top: 25px; + left: 25px; + width: 100px; + height: 200px; +} +</style> +<div class="container_view_box_subset"> + <img class="view_box_subset"></img> +</div> +<div class="container_view_box_subset_with_position"> + <img class="view_box_subset_with_position"></img> +</div> +<div class="container_view_box_subset_with_scaling"> + <img class="view_box_subset_with_scaling"></img> +</div> +</body> +<script> + populateElements("support/blue-green-red-yellow-50x100.svg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-svg.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-svg.html new file mode 100644 index 0000000000..cfe711fb10 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-svg.html @@ -0,0 +1,50 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:contain</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-contain-svg-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + width: 50px; + height: 100px; + background-color: grey; + margin: 5px; +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + width: 50px; + height: 100px; + background-color: grey; + margin: 5px; + + object-position: 0% 0%; + background-color: grey; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + background-color: grey; + margin: 5px; + + width: 100px; + height: 200px; + object-position: 25px 125px; +} +</style> +<img class="view_box_subset"></img> +<img class="view_box_subset_with_position"></img> +<img class="view_box_subset_with_scaling"></img> +</body> +<script> + populateElements("support/blue-green-red-yellow-50x100.svg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-video-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-video-ref.html new file mode 100644 index 0000000000..174c4d3bf9 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-video-ref.html @@ -0,0 +1,69 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:contain (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset { + position: relative; + top: -25px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_position { + position: relative; + top: -50px; +} + +.container_view_box_subset_with_scaling { + width: 100px; + height: 200px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_scaling { + position: relative; + top: 25px; + left: 25px; + width: 100px; + height: 200px; +} +</style> +<div class="container_view_box_subset"> + <video class="view_box_subset"></video> +</div> +<div class="container_view_box_subset_with_position"> + <video class="view_box_subset_with_position"></video> +</div> +<div class="container_view_box_subset_with_scaling"> + <video class="view_box_subset_with_scaling"></video> +</div> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-video.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-video.html new file mode 100644 index 0000000000..bd4184cc07 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-contain-video.html @@ -0,0 +1,50 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:contain</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-contain-video-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + width: 50px; + height: 100px; + background-color: grey; + margin: 5px; +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + width: 50px; + height: 100px; + background-color: grey; + margin: 5px; + + object-position: 0% 0%; + background-color: grey; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + background-color: grey; + margin: 5px; + + width: 100px; + height: 200px; + object-position: 25px 125px; +} +</style> +<video class="view_box_subset"></video> +<video class="view_box_subset_with_position"></video> +<video class="view_box_subset_with_scaling"></video> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-canvas-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-canvas-ref.html new file mode 100644 index 0000000000..558cfe8ee3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-canvas-ref.html @@ -0,0 +1,72 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:contain (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 40px; + height: 50px; + overflow: hidden; + display: inline-block; +} +.view_box_subset { + width: 50px; + height: 100px; + position: relative; + left: -5px; + top: -50px; +} + +.container_view_box_subset_with_position { + width: 40px; + height: 50px; + overflow: hidden; + display: inline-block; +} +.view_box_subset_with_position { + width: 50px; + height: 100px; + position: relative; + top: -50px; +} + +.container_view_box_subset_with_scaling { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset_with_scaling { + width: 100px; + height: 200px; + position: relative; + left: -25px; + top: -100px; +} +</style> +<div class="container_view_box_subset"> + <canvas class="view_box_subset"></canvas> +</div> +<div class="container_view_box_subset_with_position"> + <canvas class="view_box_subset_with_position"></canvas> +</div> +<div class="container_view_box_subset_with_scaling"> + <canvas class="view_box_subset_with_scaling"></canvas> +</div> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-canvas.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-canvas.html new file mode 100644 index 0000000000..38976c563a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-canvas.html @@ -0,0 +1,47 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:contain</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-cover-canvas-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + width: 40px; + height: 50px; + margin: 5px; +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + width: 40px; + height: 50px; + margin: 5px; + object-position: 0% 0%; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + margin: 5px; + width: 50px; + height: 100px; + /* The top row of pixels can have minor differences due to mismatch in order + of clipping and scaling operations */ + clip-path: inset(1px 0px 0px 0px); +} +</style> +</body> +<canvas class="view_box_subset"></canvas> +<canvas class="view_box_subset_with_position"></canvas> +<canvas class="view_box_subset_with_scaling"></canvas> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-img-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-img-ref.html new file mode 100644 index 0000000000..7e2bdc754d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-img-ref.html @@ -0,0 +1,72 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:contain (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 40px; + height: 50px; + overflow: hidden; + display: inline-block; +} +.view_box_subset { + width: 50px; + height: 100px; + position: relative; + left: -5px; + top: -50px; +} + +.container_view_box_subset_with_position { + width: 40px; + height: 50px; + overflow: hidden; + display: inline-block; +} +.view_box_subset_with_position { + width: 50px; + height: 100px; + position: relative; + top: -50px; +} + +.container_view_box_subset_with_scaling { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset_with_scaling { + width: 100px; + height: 200px; + position: relative; + left: -25px; + top: -100px; +} +</style> +<div class="container_view_box_subset"> + <img class="view_box_subset"></img> +</div> +<div class="container_view_box_subset_with_position"> + <img class="view_box_subset_with_position"></img> +</div> +<div class="container_view_box_subset_with_scaling"> + <img class="view_box_subset_with_scaling"></img> +</div> +</body> +<script> + populateElements("support/exif-orientation-6-ru.jpg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-img.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-img.html new file mode 100644 index 0000000000..1103788435 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-img.html @@ -0,0 +1,47 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:contain</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-cover-img-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + width: 40px; + height: 50px; + margin: 5px; +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + width: 40px; + height: 50px; + margin: 5px; + object-position: 0% 0%; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + margin: 5px; + width: 50px; + height: 100px; + /* The top row of pixels can have minor differences due to mismatch in order + of clipping and scaling operations */ + clip-path: inset(1px 0px 0px 0px); +} +</style> +</body> +<img class="view_box_subset"></img> +<img class="view_box_subset_with_position"></img> +<img class="view_box_subset_with_scaling"></img> +</body> +<script> + populateElements("support/exif-orientation-6-ru.jpg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-svg-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-svg-ref.html new file mode 100644 index 0000000000..e449c60f5e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-svg-ref.html @@ -0,0 +1,72 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:contain (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 40px; + height: 50px; + overflow: hidden; + display: inline-block; +} +.view_box_subset { + width: 50px; + height: 100px; + position: relative; + left: -5px; + top: -50px; +} + +.container_view_box_subset_with_position { + width: 40px; + height: 50px; + overflow: hidden; + display: inline-block; +} +.view_box_subset_with_position { + width: 50px; + height: 100px; + position: relative; + top: -50px; +} + +.container_view_box_subset_with_scaling { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset_with_scaling { + width: 100px; + height: 200px; + position: relative; + left: -25px; + top: -100px; +} +</style> +<div class="container_view_box_subset"> + <img class="view_box_subset"></img> +</div> +<div class="container_view_box_subset_with_position"> + <img class="view_box_subset_with_position"></img> +</div> +<div class="container_view_box_subset_with_scaling"> + <img class="view_box_subset_with_scaling"></img> +</div> +</body> +<script> + populateElements("support/blue-green-red-yellow-50x100.svg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-svg.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-svg.html new file mode 100644 index 0000000000..4efe28574c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-svg.html @@ -0,0 +1,47 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:contain</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-cover-svg-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + width: 40px; + height: 50px; + margin: 5px; +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + width: 40px; + height: 50px; + margin: 5px; + object-position: 0% 0%; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + margin: 5px; + width: 50px; + height: 100px; + /* The top row of pixels can have minor differences due to mismatch in order + of clipping and scaling operations */ + clip-path: inset(1px 0px 0px 0px); +} +</style> +</body> +<img class="view_box_subset"></img> +<img class="view_box_subset_with_position"></img> +<img class="view_box_subset_with_scaling"></img> +</body> +<script> + populateElements("support/blue-green-red-yellow-50x100.svg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-video-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-video-ref.html new file mode 100644 index 0000000000..5f67394f61 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-video-ref.html @@ -0,0 +1,72 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:contain (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 40px; + height: 50px; + overflow: hidden; + display: inline-block; +} +.view_box_subset { + width: 50px; + height: 100px; + position: relative; + left: -5px; + top: -50px; +} + +.container_view_box_subset_with_position { + width: 40px; + height: 50px; + overflow: hidden; + display: inline-block; +} +.view_box_subset_with_position { + width: 50px; + height: 100px; + position: relative; + top: -50px; +} + +.container_view_box_subset_with_scaling { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset_with_scaling { + width: 100px; + height: 200px; + position: relative; + left: -25px; + top: -100px; +} +</style> +<div class="container_view_box_subset"> + <video class="view_box_subset"></video> +</div> +<div class="container_view_box_subset_with_position"> + <video class="view_box_subset_with_position"></video> +</div> +<div class="container_view_box_subset_with_scaling"> + <video class="view_box_subset_with_scaling"></video> +</div> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-video.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-video.html new file mode 100644 index 0000000000..bc519a68fc --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-cover-video.html @@ -0,0 +1,47 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:contain</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-cover-video-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + width: 40px; + height: 50px; + margin: 5px; +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + width: 40px; + height: 50px; + margin: 5px; + object-position: 0% 0%; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + margin: 5px; + width: 50px; + height: 100px; + /* The top row of pixels can have minor differences due to mismatch in order + of clipping and scaling operations */ + clip-path: inset(1px 0px 0px 0px); +} +</style> +</body> +<video class="view_box_subset"></video> +<video class="view_box_subset_with_position"></video> +<video class="view_box_subset_with_scaling"></video> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-canvas-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-canvas-ref.html new file mode 100644 index 0000000000..be3b221400 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-canvas-ref.html @@ -0,0 +1,143 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:fill (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 50px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset { + position: relative; + top: -50px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 50px; + overflow: hidden; + background-color: grey; + display: inline-block; +} +.view_box_subset_with_position { + position: relative; + top: -40px; + left: 10px; +} + +.container_view_box_subset_with_scaling { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset_with_scaling { + position: relative; + top: -100px; + width: 50px; + height: 200px; +} + +.container_view_box_superset { + width: 100px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} + +.container_view_box_superset_with_position { + width: 100px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_superset_with_position { + position: relative; + top: 10px; + left: 10px; +} + +.container_view_box_superset_with_scaling { + width: 50px; + height: 50px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_superset_with_scaling { + width: 25px; + height: 50px; + object-fit: fill; +} + +.container_view_box_intersection { + width: 25px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; + clip-path: inset(0px 0px 1px 0px); +} +.view_box_intersection { + width: 50px; + height: 100px; + position: relative; + top: 50px; +} + +.container_view_box_no_intersection { + width: 25px; + height: 50px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +</style> +<div class="container_view_box_subset"> + <canvas class="view_box_subset"></canvas> +</div> +<div class="container_view_box_subset_with_position"> + <canvas class="view_box_subset_with_position"></canvas> +</div> +<div class="container_view_box_subset_with_scaling"> + <canvas class="view_box_subset_with_scaling"></canvas> +</div> + +<div class="container_view_box_superset"> + <canvas></canvas> +</div> +<div class="container_view_box_superset_with_position"> + <canvas class="view_box_superset_with_position"></canvas> +</div> +<div class="container_view_box_superset_with_scaling"> + <canvas class="view_box_superset_with_scaling"></canvas> +</div> + +<div class="container_view_box_intersection"> + <canvas class="view_box_intersection"></canvas> +</div> + +<div class="container_view_box_no_intersection"> +</div> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-canvas.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-canvas.html new file mode 100644 index 0000000000..4341564195 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-canvas.html @@ -0,0 +1,95 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:fill</title> +<script src="support/testHelper.js"></script> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-fill-canvas-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +/* The test uses clip-path to avoid comparing edges with minor pixel differences + due to differences in scaling on highdpi devices */ + +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + clip-path: inset(1px 0px 0px 0px); +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + object-position: 10px 10px; + background-color: grey; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + width: 50px; + height: 100px; + + /* The top row of pixels can have minor differences due to difference in order + of clipping and scaling operations */ + clip-path: inset(1px 0px 0px 0px); +} + +.view_box_superset { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; +} + +.view_box_superset_with_position { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + object-position: 10px 10px; +} + +.view_box_superset_with_scaling { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + width: 50px; + height: 50px; +} + +.view_box_intersection { + object-view-box: inset(-50px 25px 50px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + clip-path: inset(0px 0px 1px 0px); +} + +.view_box_no_intersection { + object-view-box: inset(-50px 25px 100px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; +} +</style> +<canvas class="view_box_subset"></canvas> +<canvas class="view_box_subset_with_position"></canvas> +<canvas class="view_box_subset_with_scaling"></canvas> + +<canvas class="view_box_superset"></canvas> +<canvas class="view_box_superset_with_position"></canvas> +<canvas class="view_box_superset_with_scaling"></canvas> + +<canvas class="view_box_intersection"></canvas> + +<canvas class="view_box_no_intersection"></canvas> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-img-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-img-ref.html new file mode 100644 index 0000000000..32c97c8312 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-img-ref.html @@ -0,0 +1,143 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:fill (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 50px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset { + position: relative; + top: -50px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 50px; + overflow: hidden; + background-color: grey; + display: inline-block; +} +.view_box_subset_with_position { + position: relative; + top: -40px; + left: 10px; +} + +.container_view_box_subset_with_scaling { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset_with_scaling { + position: relative; + top: -100px; + width: 50px; + height: 200px; +} + +.container_view_box_superset { + width: 100px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} + +.container_view_box_superset_with_position { + width: 100px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_superset_with_position { + position: relative; + top: 10px; + left: 10px; +} + +.container_view_box_superset_with_scaling { + width: 50px; + height: 50px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_superset_with_scaling { + width: 25px; + height: 50px; + object-fit: fill; +} + +.container_view_box_intersection { + width: 25px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; + clip-path: inset(0px 0px 1px 0px); +} +.view_box_intersection { + width: 50px; + height: 100px; + position: relative; + top: 50px; +} + +.container_view_box_no_intersection { + width: 25px; + height: 50px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +</style> +<div class="container_view_box_subset"> + <img class="view_box_subset"></img> +</div> +<div class="container_view_box_subset_with_position"> + <img class="view_box_subset_with_position"></img> +</div> +<div class="container_view_box_subset_with_scaling"> + <img class="view_box_subset_with_scaling"></img> +</div> + +<div class="container_view_box_superset"> + <img></img> +</div> +<div class="container_view_box_superset_with_position"> + <img class="view_box_superset_with_position"></img> +</div> +<div class="container_view_box_superset_with_scaling"> + <img class="view_box_superset_with_scaling"></img> +</div> + +<div class="container_view_box_intersection"> + <img class="view_box_intersection"></img> +</div> + +<div class="container_view_box_no_intersection"> +</div> +</body> +<script> + populateElements("support/exif-orientation-6-ru.jpg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-img.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-img.html new file mode 100644 index 0000000000..c9d938bfa3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-img.html @@ -0,0 +1,95 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:fill</title> +<script src="support/testHelper.js"></script> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-fill-img-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +/* The test uses clip-path to avoid comparing edges with minor pixel differences + due to differences in scaling on highdpi devices */ + +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + clip-path: inset(1px 0px 0px 0px); +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + object-position: 10px 10px; + background-color: grey; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + width: 50px; + height: 100px; + + /* The top row of pixels can have minor differences due to difference in order + of clipping and scaling operations */ + clip-path: inset(1px 0px 0px 0px); +} + +.view_box_superset { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; +} + +.view_box_superset_with_position { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + object-position: 10px 10px; +} + +.view_box_superset_with_scaling { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + width: 50px; + height: 50px; +} + +.view_box_intersection { + object-view-box: inset(-50px 25px 50px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + clip-path: inset(0px 0px 1px 0px); +} + +.view_box_no_intersection { + object-view-box: inset(-50px 25px 100px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; +} +</style> +<img class="view_box_subset"></img> +<img class="view_box_subset_with_position"></img> +<img class="view_box_subset_with_scaling"></img> + +<img class="view_box_superset"></img> +<img class="view_box_superset_with_position"></img> +<img class="view_box_superset_with_scaling"></img> + +<img class="view_box_intersection"></img> + +<img class="view_box_no_intersection"></img> +</body> +<script> + populateElements("support/exif-orientation-6-ru.jpg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-svg-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-svg-ref.html new file mode 100644 index 0000000000..74c98d6fd3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-svg-ref.html @@ -0,0 +1,143 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:fill (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 50px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset { + position: relative; + top: -50px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 50px; + overflow: hidden; + background-color: grey; + display: inline-block; +} +.view_box_subset_with_position { + position: relative; + top: -40px; + left: 10px; +} + +.container_view_box_subset_with_scaling { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset_with_scaling { + position: relative; + top: -100px; + width: 50px; + height: 200px; +} + +.container_view_box_superset { + width: 100px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} + +.container_view_box_superset_with_position { + width: 100px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_superset_with_position { + position: relative; + top: 10px; + left: 10px; +} + +.container_view_box_superset_with_scaling { + width: 50px; + height: 50px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_superset_with_scaling { + width: 25px; + height: 50px; + object-fit: fill; +} + +.container_view_box_intersection { + width: 25px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; + clip-path: inset(0px 0px 1px 0px); +} +.view_box_intersection { + width: 50px; + height: 100px; + position: relative; + top: 50px; +} + +.container_view_box_no_intersection { + width: 25px; + height: 50px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +</style> +<div class="container_view_box_subset"> + <img class="view_box_subset"></img> +</div> +<div class="container_view_box_subset_with_position"> + <img class="view_box_subset_with_position"></img> +</div> +<div class="container_view_box_subset_with_scaling"> + <img class="view_box_subset_with_scaling"></img> +</div> + +<div class="container_view_box_superset"> + <img></img> +</div> +<div class="container_view_box_superset_with_position"> + <img class="view_box_superset_with_position"></img> +</div> +<div class="container_view_box_superset_with_scaling"> + <img class="view_box_superset_with_scaling"></img> +</div> + +<div class="container_view_box_intersection"> + <img class="view_box_intersection"></img> +</div> + +<div class="container_view_box_no_intersection"> +</div> +</body> +<script> + populateElements("support/blue-green-red-yellow-50x100.svg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-svg.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-svg.html new file mode 100644 index 0000000000..38c54e9618 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-svg.html @@ -0,0 +1,95 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:fill</title> +<script src="support/testHelper.js"></script> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-fill-svg-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +/* The test uses clip-path to avoid comparing edges with minor pixel differences + due to differences in scaling on highdpi devices */ + +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + clip-path: inset(1px 0px 0px 0px); +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + object-position: 10px 10px; + background-color: grey; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + width: 50px; + height: 100px; + + /* The top row of pixels can have minor differences due to difference in order + of clipping and scaling operations */ + clip-path: inset(1px 0px 0px 0px); +} + +.view_box_superset { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; +} + +.view_box_superset_with_position { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + object-position: 10px 10px; +} + +.view_box_superset_with_scaling { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + width: 50px; + height: 50px; +} + +.view_box_intersection { + object-view-box: inset(-50px 25px 50px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + clip-path: inset(0px 0px 1px 0px); +} + +.view_box_no_intersection { + object-view-box: inset(-50px 25px 100px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; +} +</style> +<img class="view_box_subset"></img> +<img class="view_box_subset_with_position"></img> +<img class="view_box_subset_with_scaling"></img> + +<img class="view_box_superset"></img> +<img class="view_box_superset_with_position"></img> +<img class="view_box_superset_with_scaling"></img> + +<img class="view_box_intersection"></img> + +<img class="view_box_no_intersection"></img> +</body> +<script> + populateElements("support/blue-green-red-yellow-50x100.svg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-video-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-video-ref.html new file mode 100644 index 0000000000..eb46dde087 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-video-ref.html @@ -0,0 +1,143 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:fill (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 50px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset { + position: relative; + top: -50px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 50px; + overflow: hidden; + background-color: grey; + display: inline-block; +} +.view_box_subset_with_position { + position: relative; + top: -40px; + left: 10px; +} + +.container_view_box_subset_with_scaling { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset_with_scaling { + position: relative; + top: -100px; + width: 50px; + height: 200px; +} + +.container_view_box_superset { + width: 100px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} + +.container_view_box_superset_with_position { + width: 100px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_superset_with_position { + position: relative; + top: 10px; + left: 10px; +} + +.container_view_box_superset_with_scaling { + width: 50px; + height: 50px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_superset_with_scaling { + width: 25px; + height: 50px; + object-fit: fill; +} + +.container_view_box_intersection { + width: 25px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; + clip-path: inset(0px 0px 1px 0px); +} +.view_box_intersection { + width: 50px; + height: 100px; + position: relative; + top: 50px; +} + +.container_view_box_no_intersection { + width: 25px; + height: 50px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +</style> +<div class="container_view_box_subset"> + <video class="view_box_subset"></video> +</div> +<div class="container_view_box_subset_with_position"> + <video class="view_box_subset_with_position"></video> +</div> +<div class="container_view_box_subset_with_scaling"> + <video class="view_box_subset_with_scaling"></video> +</div> + +<div class="container_view_box_superset"> + <video></video> +</div> +<div class="container_view_box_superset_with_position"> + <video class="view_box_superset_with_position"></video> +</div> +<div class="container_view_box_superset_with_scaling"> + <video class="view_box_superset_with_scaling"></video> +</div> + +<div class="container_view_box_intersection"> + <video class="view_box_intersection"></video> +</div> + +<div class="container_view_box_no_intersection"> +</div> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-video.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-video.html new file mode 100644 index 0000000000..c9f91b6e46 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-fill-video.html @@ -0,0 +1,95 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:fill</title> +<script src="support/testHelper.js"></script> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-fill-video-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +/* The test uses clip-path to avoid comparing edges with minor pixel differences + due to differences in scaling on highdpi devices */ + +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + clip-path: inset(1px 0px 0px 0px); +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + object-position: 10px 10px; + background-color: grey; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + width: 50px; + height: 100px; + + /* The top row of pixels can have minor differences due to difference in order + of clipping and scaling operations */ + clip-path: inset(1px 0px 0px 0px); +} + +.view_box_superset { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; +} + +.view_box_superset_with_position { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + object-position: 10px 10px; +} + +.view_box_superset_with_scaling { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + width: 50px; + height: 50px; +} + +.view_box_intersection { + object-view-box: inset(-50px 25px 50px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + clip-path: inset(0px 0px 1px 0px); +} + +.view_box_no_intersection { + object-view-box: inset(-50px 25px 100px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; +} +</style> +<video class="view_box_subset"></video> +<video class="view_box_subset_with_position"></video> +<video class="view_box_subset_with_scaling"></video> + +<video class="view_box_superset"></video> +<video class="view_box_superset_with_position"></video> +<video class="view_box_superset_with_scaling"></video> + +<video class="view_box_intersection"></video> + +<video class="view_box_no_intersection"></video> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-none-canvas-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-canvas-ref.html new file mode 100644 index 0000000000..afb695bf34 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-canvas-ref.html @@ -0,0 +1,52 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:none (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset { + position: relative; + top: -25px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_position { + position: relative; + top: -40px; + left: 10px; +} +</style> +<div class="container_view_box_subset"> + <canvas class="view_box_subset"></canvas> +</div> +<div class="container_view_box_subset_with_position"> + <canvas class="view_box_subset_with_position"></canvas> +</div> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-none-canvas.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-canvas.html new file mode 100644 index 0000000000..6fe8c16efe --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-canvas.html @@ -0,0 +1,37 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:none</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-none-canvas-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + width: 50px; + height: 100px; + object-view-box: inset(50px 0px 0px 0px); + object-fit: none; + background-color: grey; + margin: 5px; +} + +.view_box_subset_with_position { + width: 50px; + height: 100px; + object-view-box: inset(50px 0px 0px 0px); + object-fit: none; + background-color: grey; + margin: 5px; + object-position: 10px 10px; +} +</style> +</body> +<canvas class="view_box_subset"></canvas> +<canvas class="view_box_subset_with_position"></canvas> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-none-img-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-img-ref.html new file mode 100644 index 0000000000..74d5fc737f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-img-ref.html @@ -0,0 +1,52 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:none (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset { + position: relative; + top: -25px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_position { + position: relative; + top: -40px; + left: 10px; +} +</style> +<div class="container_view_box_subset"> + <img class="view_box_subset"></img> +</div> +<div class="container_view_box_subset_with_position"> + <img class="view_box_subset_with_position"></img> +</div> +</body> +<script> + populateElements("support/exif-orientation-6-ru.jpg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-none-img.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-img.html new file mode 100644 index 0000000000..f4a7412297 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-img.html @@ -0,0 +1,37 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:none</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-none-img-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + width: 50px; + height: 100px; + object-view-box: inset(50px 0px 0px 0px); + object-fit: none; + background-color: grey; + margin: 5px; +} + +.view_box_subset_with_position { + width: 50px; + height: 100px; + object-view-box: inset(50px 0px 0px 0px); + object-fit: none; + background-color: grey; + margin: 5px; + object-position: 10px 10px; +} +</style> +</body> +<img class="view_box_subset"></img> +<img class="view_box_subset_with_position"></img> +</body> +<script> + populateElements("support/exif-orientation-6-ru.jpg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-none-svg-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-svg-ref.html new file mode 100644 index 0000000000..da14fa024d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-svg-ref.html @@ -0,0 +1,52 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:none (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset { + position: relative; + top: -25px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_position { + position: relative; + top: -40px; + left: 10px; +} +</style> +<div class="container_view_box_subset"> + <img class="view_box_subset"></img> +</div> +<div class="container_view_box_subset_with_position"> + <img class="view_box_subset_with_position"></img> +</div> +</body> +<script> + populateElements("support/blue-green-red-yellow-50x100.svg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-none-svg.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-svg.html new file mode 100644 index 0000000000..c103692165 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-svg.html @@ -0,0 +1,37 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:none</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-none-svg-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + width: 50px; + height: 100px; + object-view-box: inset(50px 0px 0px 0px); + object-fit: none; + background-color: grey; + margin: 5px; +} + +.view_box_subset_with_position { + width: 50px; + height: 100px; + object-view-box: inset(50px 0px 0px 0px); + object-fit: none; + background-color: grey; + margin: 5px; + object-position: 10px 10px; +} +</style> +</body> +<img class="view_box_subset"></img> +<img class="view_box_subset_with_position"></img> +</body> +<script> + populateElements("support/blue-green-red-yellow-50x100.svg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-none-video-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-video-ref.html new file mode 100644 index 0000000000..f10e1c18d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-video-ref.html @@ -0,0 +1,52 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:none (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset { + position: relative; + top: -25px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_position { + position: relative; + top: -40px; + left: 10px; +} +</style> +<div class="container_view_box_subset"> + <video class="view_box_subset"></video> +</div> +<div class="container_view_box_subset_with_position"> + <video class="view_box_subset_with_position"></video> +</div> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-fit-none-video.html b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-video.html new file mode 100644 index 0000000000..34b08572e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-fit-none-video.html @@ -0,0 +1,37 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:none</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-none-video-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + width: 50px; + height: 100px; + object-view-box: inset(50px 0px 0px 0px); + object-fit: none; + background-color: grey; + margin: 5px; +} + +.view_box_subset_with_position { + width: 50px; + height: 100px; + object-view-box: inset(50px 0px 0px 0px); + object-fit: none; + background-color: grey; + margin: 5px; + object-position: 10px 10px; +} +</style> +</body> +<video class="view_box_subset"></video> +<video class="view_box_subset_with_position"></video> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-iframe-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-iframe-ref.html new file mode 100644 index 0000000000..e014e10381 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-iframe-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with an svg with no intrinsic size : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-fit: fill; +} +</style> +<iframe class="default" src="support/blue-green-red-yellow-50x100.svg"></iframe> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-iframe.html b/testing/web-platform/tests/css/css-images/object-view-box-iframe.html new file mode 100644 index 0000000000..a144a8ff31 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-iframe.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box on an iframe should be no-op</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-iframe-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; +} +</style> +<iframe src="support/blue-green-red-yellow-50x100.svg"></iframe> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-negative-bounds-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-negative-bounds-ref.html new file mode 100644 index 0000000000..3b4eaac30e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-negative-bounds-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with a negative size : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-fit: fill; + background-color: black; +} +</style> +<img class="default" src="support/exif-orientation-6-ru.jpg"></img> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-negative-bounds.html b/testing/web-platform/tests/css/css-images/object-view-box-negative-bounds.html new file mode 100644 index 0000000000..34dd6075b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-negative-bounds.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with a negative size</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-negative-bounds-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-view-box: inset(50px 0px 100px 0px); + object-fit: fill; + background-color: black; +} +</style> +<img class="default" src="support/exif-orientation-6-ru.jpg"></img> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-parsing.html b/testing/web-platform/tests/css/css-images/object-view-box-parsing.html new file mode 100644 index 0000000000..da17b7936f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-parsing.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS object-view-box: computed values</title> +<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<div id=target></div> +<script> +test_valid_value('object-view-box', 'inset(10%)'); +test_valid_value('object-view-box', 'inset(10px 20px 30px 40px)'); +test_valid_value('object-view-box', 'rect(1px 10% 100px 50%)'); +test_valid_value('object-view-box', 'rect(auto auto auto auto)'); +test_valid_value('object-view-box', 'rect(auto 5px auto 10%)'); +test_valid_value('object-view-box', 'xywh(1px 10% 100px 50%)'); + +test_invalid_value('object-view-box', 'circle(10px)'); +test_invalid_value('object-view-box', 'ellipse(10px 20px)'); +test_invalid_value('object-view-box', 'polygon(10px 20px 30px)'); +test_invalid_value('object-view-box', 'path("M20,80 L50,20")'); +test_invalid_value('object-view-box', 'blah'); +test_invalid_value('object-view-box', 'xywh(1px 10%)'); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-property-changed-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-property-changed-ref.html new file mode 100644 index 0000000000..8974dfd663 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-property-changed-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<title>Changing CSS object-view-box should trigger relayout : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +div { + margin: 5px; +} + +.container_view_box_subset { + width: 50px; + height: 50px; + overflow: clip; + display: inline-block; +} +.view_box_subset { + position: relative; + top: -50px; +} +</style> +<div class="container_view_box_subset"> + <img class="view_box_subset" src="support/exif-orientation-6-ru.jpg"></img> +</div> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-property-changed.html b/testing/web-platform/tests/css/css-images/object-view-box-property-changed.html new file mode 100644 index 0000000000..2574558ea1 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-property-changed.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>Changing CSS object-view-box should trigger relayout</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-property-changed-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> + +<style> +.view_box_subset { + object-fit: fill; + margin: 5px; +} +</style> + +<body> +<img class="view_box_subset" src="support/exif-orientation-6-ru.jpg"></img> +</body> + +<script> +async function runTest(image) { + // Wait for at least one frame to ensure changing object-view-box triggers a + // relayout. + await waitForAtLeastOneFrame(); + image.style.objectViewBox = "inset(50px 0px 0px 0px)"; + await waitForAtLeastOneFrame(); + requestAnimationFrame(takeScreenshot); +} + +let image = document.getElementsByTagName("img")[0]; +image.onload = runTest(image); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-rect-auto-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-rect-auto-ref.html new file mode 100644 index 0000000000..54e90777fa --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-rect-auto-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box on an element with rect() auto : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> + +<style> +.default { + object-fit: fill; +} +</style> +<img class="default" src="support/exif-orientation-6-ru.jpg"></img> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-rect-auto.html b/testing/web-platform/tests/css/css-images/object-view-box-rect-auto.html new file mode 100644 index 0000000000..97f18c781a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-rect-auto.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box on an element with rect() auto</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-rect-auto-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-view-box: rect(auto auto auto auto); + object-fit: fill; +} +</style> +<img class="default" src="support/exif-orientation-6-ru.jpg"></img> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-rect-percentage-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-rect-percentage-ref.html new file mode 100644 index 0000000000..3d413fb5ce --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-rect-percentage-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box on an element with rect() percent values : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> + +<style> +.container { + width: 25px; + height: 50px; + overflow: hidden; +} +.default { + position: relative; + top: -50px; + left: -25px; +} +</style> +<div class="container"> + <img class="default" src="support/exif-orientation-6-ru.jpg"></img> +</div> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-rect-percentage.html b/testing/web-platform/tests/css/css-images/object-view-box-rect-percentage.html new file mode 100644 index 0000000000..45f05938d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-rect-percentage.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box on an element with rect() percent values</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-rect-percentage-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-view-box: rect(50% 100% 100% 50%); + object-fit: fill; +} +</style> +<img class="default" src="support/exif-orientation-6-ru.jpg"></img> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-rect-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-rect-ref.html new file mode 100644 index 0000000000..b27a5b8f83 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-rect-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box on an element with rect() : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.container { + width: 25px; + height: 50px; + overflow: hidden; +} +.default { + position: relative; + top: -50px; + left: -25px; +} +</style> +<div class="container"> + <img class="default" src="support/exif-orientation-6-ru.jpg"></img> +</div> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-rect.html b/testing/web-platform/tests/css/css-images/object-view-box-rect.html new file mode 100644 index 0000000000..2a0a8d307b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-rect.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box on an element with rect()</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-rect-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-view-box: rect(50px 50px 100px 25px); + object-fit: fill; +} +</style> +<img class="default" src="support/exif-orientation-6-ru.jpg"></img> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-same-size-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-same-size-ref.html new file mode 100644 index 0000000000..9e237a82b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-same-size-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with same size as intrinsic size : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-fit: fill; + background-color: black; +} +</style> +<img class="default" src="support/exif-orientation-6-ru.jpg"></img> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-same-size.html b/testing/web-platform/tests/css/css-images/object-view-box-same-size.html new file mode 100644 index 0000000000..0daa360155 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-same-size.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with same size as intrinsic size</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-negative-bounds-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-view-box: inset(0px 0px 0px 0px); + object-fit: fill; + background-color: black; +} +</style> +<img class="default" src="support/exif-orientation-6-ru.jpg"></img> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-size-containment-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-size-containment-ref.html new file mode 100644 index 0000000000..24097c6883 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-size-containment-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box on an element with size containment : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-fit: fill; + width: 50px; + height: 200px; + position: relative; + top: -100px; + clip-path: inset(101px 0px 0px 0px); +} +</style> +<img class="default" src="support/exif-orientation-6-ru.jpg"></img> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-size-containment.html b/testing/web-platform/tests/css/css-images/object-view-box-size-containment.html new file mode 100644 index 0000000000..c58e6735bf --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-size-containment.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box on an element with size containment</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-size-containment-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + contain: size; + width: 50px; + height: 100px; + clip-path: inset(1px 0px 0px 0px); +} +</style> +<img class="default" src="support/exif-orientation-6-ru.jpg"></img> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-svg-img-no-size-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-svg-img-no-size-ref.html new file mode 100644 index 0000000000..ca1ea59e27 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-svg-img-no-size-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with an svg with no intrinsic size : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-fit: fill; +} +</style> +<img class="default" src="support/blue-green-red-yellow-no-size.svg"></img> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-svg-img-no-size.html b/testing/web-platform/tests/css/css-images/object-view-box-svg-img-no-size.html new file mode 100644 index 0000000000..1d1c97a6e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-svg-img-no-size.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with an svg with no intrinsic size</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-svg-img-no-size-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + background-color: black; +} +</style> +<img class="default" src="support/blue-green-red-yellow-no-size.svg"></img> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-transition-mutation.html b/testing/web-platform/tests/css/css-images/object-view-box-transition-mutation.html new file mode 100644 index 0000000000..1542afad01 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-transition-mutation.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Unrelated mutation does not affect object-view-box transition</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id=element> +</div> +<style> + #element { + object-view-box: inset(0px); + transition: object-view-box 100s -50s linear; + } +</style> +<script> + test((t) => { + // Ensure a before-style for element. + getComputedStyle(element).objectViewBox; + // Trigger a transition from inset(0px) to inset(20px). + element.style.objectViewBox = 'inset(20px)'; + assert_equals(getComputedStyle(element).objectViewBox, 'inset(10px)', 'before mutation'); + // Now do a style mutation that's unrelated to the computed value + // of object-view-box, and check again. + element.style.setProperty('--x', '1'); + assert_equals(getComputedStyle(element).objectViewBox, 'inset(10px)', 'after mutation'); + }, 'Unrelated mutation does not affect object-view-box transition'); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-canvas-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-canvas-ref.html new file mode 100644 index 0000000000..d9942ed535 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-canvas-ref.html @@ -0,0 +1,31 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with vertical writing mode : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +html { + writing-mode: vertical-lr; +} +.container_view_box_subset { + width: 50px; + height: 75px; + overflow: hidden; + display: inline-block; +} +.view_box_subset { + position: relative; + top: -25px; +} +</style> +<div class="container_view_box_subset"> + <canvas class="view_box_subset"></canvas> +</div> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-canvas.html b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-canvas.html new file mode 100644 index 0000000000..8e0aaea274 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-canvas.html @@ -0,0 +1,25 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with vertical writing mode</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-writing-mode-canvas-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +html { + writing-mode: vertical-lr; +} +.view_box_subset { + object-view-box: inset(25px 0px 0px 0px); + object-fit: fill; + background-color: black; +} +</style> +<canvas class="view_box_subset"></canvas> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-img-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-img-ref.html new file mode 100644 index 0000000000..9bcdb8ba0b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-img-ref.html @@ -0,0 +1,31 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with vertical writing mode : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +html { + writing-mode: vertical-lr; +} +.container_view_box_subset { + width: 50px; + height: 75px; + overflow: hidden; + display: inline-block; +} +.view_box_subset { + position: relative; + top: -25px; +} +</style> +<div class="container_view_box_subset"> + <img class="view_box_subset"></img> +</div> +</body> +<script> + populateElements("support/exif-orientation-6-ru.jpg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-img.html b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-img.html new file mode 100644 index 0000000000..547a2ed331 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-img.html @@ -0,0 +1,25 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with vertical writing mode</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-writing-mode-img-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +html { + writing-mode: vertical-lr; +} +.view_box_subset { + object-view-box: inset(25px 0px 0px 0px); + object-fit: fill; + background-color: black; +} +</style> +<img class="view_box_subset"></img> +</body> +<script> + populateElements("support/exif-orientation-6-ru.jpg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-svg-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-svg-ref.html new file mode 100644 index 0000000000..c350dcfe5f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-svg-ref.html @@ -0,0 +1,31 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with vertical writing mode : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +html { + writing-mode: vertical-lr; +} +.container_view_box_subset { + width: 50px; + height: 75px; + overflow: hidden; + display: inline-block; +} +.view_box_subset { + position: relative; + top: -25px; +} +</style> +<div class="container_view_box_subset"> + <img class="view_box_subset"></img> +</div> +</body> +<script> + populateElements("support/blue-green-red-yellow-50x100.svg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-svg.html b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-svg.html new file mode 100644 index 0000000000..5d90bb6026 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-svg.html @@ -0,0 +1,25 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with vertical writing mode</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-writing-mode-svg-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +html { + writing-mode: vertical-lr; +} +.view_box_subset { + object-view-box: inset(25px 0px 0px 0px); + object-fit: fill; + background-color: black; +} +</style> +<img class="view_box_subset"></img> +</body> +<script> + populateElements("support/blue-green-red-yellow-50x100.svg"); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-video-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-video-ref.html new file mode 100644 index 0000000000..f42fe0162b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-video-ref.html @@ -0,0 +1,31 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with vertical writing mode : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +html { + writing-mode: vertical-lr; +} +.container_view_box_subset { + width: 50px; + height: 75px; + overflow: hidden; + display: inline-block; +} +.view_box_subset { + position: relative; + top: -25px; +} +</style> +<div class="container_view_box_subset"> + <video class="view_box_subset"></video> +</div> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-video.html b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-video.html new file mode 100644 index 0000000000..0dd2e79dae --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-writing-mode-video.html @@ -0,0 +1,25 @@ +<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update --> +<!DOCTYPE html> +<html> +<title>CSS object-view-box with vertical writing mode</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-writing-mode-video-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +html { + writing-mode: vertical-lr; +} +.view_box_subset { + object-view-box: inset(25px 0px 0px 0px); + object-fit: fill; + background-color: black; +} +</style> +<video class="view_box_subset"></video> +</body> +<script> + populateElements(""); +</script> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-xywh-percentage-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-xywh-percentage-ref.html new file mode 100644 index 0000000000..23d2e06316 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-xywh-percentage-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box on an element with xywh() with percentage values : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> + +<style> +.container { + width: 25px; + height: 50px; + overflow: hidden; +} +.default { + position: relative; + top: -50px; + left: -25px; +} +</style> +<div class="container"> + <img class="default" src="support/exif-orientation-6-ru.jpg"></img> +</div> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-xywh-percentage.html b/testing/web-platform/tests/css/css-images/object-view-box-xywh-percentage.html new file mode 100644 index 0000000000..0f1d59343e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-xywh-percentage.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box on an element with xywh() with percentage values</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-xywh-percentage-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-view-box: xywh(50% 50% 50% 50%); + object-fit: fill; +} +</style> +<img class="default" src="support/exif-orientation-6-ru.jpg"></img> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-xywh-ref.html b/testing/web-platform/tests/css/css-images/object-view-box-xywh-ref.html new file mode 100644 index 0000000000..85ca9d368a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-xywh-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box on an element with xywh() : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.container { + width: 25px; + height: 50px; + overflow: hidden; +} +.default { + position: relative; + top: -50px; + left: -25px; +} +</style> +<div class="container"> + <img class="default" src="support/exif-orientation-6-ru.jpg"></img> +</div> diff --git a/testing/web-platform/tests/css/css-images/object-view-box-xywh.html b/testing/web-platform/tests/css/css-images/object-view-box-xywh.html new file mode 100644 index 0000000000..258ff6f083 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/object-view-box-xywh.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box on an element with xywh()</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-xywh-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<style> +.default { + object-view-box: xywh(25px 50px 25px 50px); + object-fit: fill; +} +</style> +<img class="default" src="support/exif-orientation-6-ru.jpg"></img> diff --git a/testing/web-platform/tests/css/css-images/out-of-range-color-stop-conic.html b/testing/web-platform/tests/css/css-images/out-of-range-color-stop-conic.html new file mode 100644 index 0000000000..be0c73a3ba --- /dev/null +++ b/testing/web-platform/tests/css/css-images/out-of-range-color-stop-conic.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Conic gradient with out-of-range stops</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients"> +<meta name="assert" content="Rendering of conic-gradient with stops positioned outside of [0, 1]"> +<link rel="match" href="reference/200x200-blue-black-green-red.html"> +<style> + #gradient { + width: 200px; + height: 200px; + background-image: conic-gradient(orange -50% -25%, black -25% 25%, red 25% 50%, green 50% 75%, blue 75% 125%, purple 125% 150%); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-computed.html b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-computed.html new file mode 100644 index 0000000000..9593a59777 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-computed.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 4: parsing gradients with color interpolation methods</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#gradients"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#color-interpolation-method"> +<meta name="assert" content="gradients supports the addition of color-interpolation-method to the grammar"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<div id="computedStyleTarget"></div> +<script> + +const LINEAR_GRADIENT_SPECIFIERS = [ + { input: '30deg' }, + { input: 'to right bottom' }, +]; + +const RADIAL_GRADIENT_SPECIFIERS = [ + { input: '50px' }, + { input: 'ellipse 50% 40em', output: '50% 40em' }, + { input: 'at right center' }, +]; + +const CONIC_GRADIENT_SPECIFIERS = [ + { input: 'from 30deg' }, + { input: 'at left 10px top 50em' }, +]; + +const legacy_stops = "red, blue" +const non_legacy_stops = "color(srgb 1 0 0), blue" + +// getComputedStyle can return different values than input +function get_computed_style_value_for_stops(stops) { + const div = document.getElementById("computedStyleTarget"); + computedColors = []; + stops.split(",").forEach(stop => { + div.style["color"] = stop; + computedColors.push(getComputedStyle(div)["color"]); + }); + return computedColors.join(", "); +} +const legacy_stops_computed_style = get_computed_style_value_for_stops(legacy_stops); +const non_legacy_stops_computed_style = get_computed_style_value_for_stops(non_legacy_stops); + +function test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, stops, computed_stops) +{ + for (const specifier of specifiers) { + const input = specifier.input + const output = specifier.output ? specifier.output : specifier.input + test_computed_value(`background-image`, `${gradientFunction}(${input}, ${stops})`, `${gradientFunction}(${output}, ${computed_stops})`) + } +} + +function test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers, stops, computed_stops) { + const resultForNoSpecifierCase = (colorInterpolationMethodResult == "") ? "" : `in ${colorInterpolationMethodResult}, ` + test_computed_value(`background-image`, `${gradientFunction}(in ${colorInterpolationMethod}, ${stops})`, `${gradientFunction}(${resultForNoSpecifierCase}${computed_stops})`) + + for (const specifier of specifiers) { + const input = specifier.input + const output = specifier.output ? specifier.output : specifier.input + const result = colorInterpolationMethodResult == "" ? ", " : ` in ${colorInterpolationMethodResult}, ` + test_computed_value(`background-image`, `${gradientFunction}(${input} in ${colorInterpolationMethod}, ${stops})`, `${gradientFunction}(${output}${result}${computed_stops})`) + test_computed_value(`background-image`, `${gradientFunction}(in ${colorInterpolationMethod} ${input}, ${stops})`, `${gradientFunction}(${output}${result}${computed_stops})`) + } +} + +function test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers, stops, computed_stops) { + const colorInterpolationMethodResultForLegacyStops = (colorInterpolationMethodResult == "srgb") ? "" : colorInterpolationMethodResult; + test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResultForLegacyStops, specifiers, legacy_stops, legacy_stops_computed_style); + + const colorInterpolationMethodResultForNonLegacyStops = (colorInterpolationMethodResult == "oklab") ? "" : colorInterpolationMethodResult; + test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResultForNonLegacyStops, specifiers, non_legacy_stops, non_legacy_stops_computed_style); +} + +function test_each_interpolation_method(gradientFunction, specifiers) { + test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, legacy_stops, legacy_stops_computed_style); + test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, non_legacy_stops, non_legacy_stops_computed_style); + + for (const colorSpace of [ "lab", "oklab", "srgb", "srgb-linear", "xyz", "xyz-d50", "xyz-d65" ]) { + const colorInterpolationMethod = colorSpace + const colorInterpolationMethodResult = colorSpace == "xyz" ? "xyz-d65" : colorInterpolationMethod + + test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers) + } + + for (const colorSpace of [ "hsl", "hwb", "lch", "oklch" ]) { + for (const hueInterpolationMethod of [ "", " shorter hue", " longer hue", " increasing hue", " decreasing hue" ]) { + const colorInterpolationMethod = `${colorSpace}${hueInterpolationMethod}` + const colorInterpolationMethodResult = hueInterpolationMethod == " shorter hue" ? colorSpace : colorInterpolationMethod + + test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers) + } + } +} + +test_each_interpolation_method("linear-gradient", LINEAR_GRADIENT_SPECIFIERS) +test_each_interpolation_method("radial-gradient", RADIAL_GRADIENT_SPECIFIERS) +test_each_interpolation_method("conic-gradient", CONIC_GRADIENT_SPECIFIERS) + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-invalid.html b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-invalid.html new file mode 100644 index 0000000000..336a387e3c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-invalid.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 4: parsing invalid gradients with color interpolation methods</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#gradients"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#color-interpolation-method"> +<meta name="assert" content="gradients supports the addition of color-interpolation-method to the grammar"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> + +function test_each_interpolation_method(gradientFunction) { + test_invalid_value(`background-image`, `${gradientFunction}(, red, blue)`) + + for (const colorSpace of [ "lab", "oklab", "srgb", "srgb-linear", "xyz", "xyz-d50", "xyz-d65" ]) { + const colorInterpolationMethod = colorSpace + + test_invalid_value(`background-image`, `${gradientFunction}(red, blue, ${colorInterpolationMethod})`) // interpolation method after color stops + test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} ${colorSpace}, red, blue)`) // duplicated color space + test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} shorter hue, red, blue)`) // invalid color space for hue modifier + } + + for (const colorSpace of [ "hsl", "hwb", "lch", "oklch" ]) { + test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} foo hue, red, blue)`) // invalid hue method + test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} hue, red, blue)`) // missing interpolation method + test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} ${colorSpace}, red, blue)`) // duplicated color space + + for (const hueInterpolationMethod of [ "shorter", "longer", "increasing", "decreasing", "specified" ]) { + test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} ${hueInterpolationMethod}, red, blue)`) // missing 'hue' keyword + test_invalid_value(`background-image`, `${gradientFunction}(${hueInterpolationMethod} hue ${colorSpace}, red, blue)`) // hue method before color space + test_invalid_value(`background-image`, `${gradientFunction}(red, blue, ${colorSpace} ${hueInterpolationMethod} hue)`) // interpolation method after color stops + } + } +} + +test_each_interpolation_method("linear-gradient") +test_each_interpolation_method("radial-gradient") +test_each_interpolation_method("conic-gradient") +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-valid.html b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-valid.html new file mode 100644 index 0000000000..8bb6b1caff --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-valid.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 4: parsing gradients with color interpolation methods</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#gradients"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#color-interpolation-method"> +<meta name="assert" content="gradients supports the addition of color-interpolation-method to the grammar"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> + +const LINEAR_GRADIENT_SPECIFIERS = [ + { input: '30deg' }, + { input: 'to right bottom' }, +]; + +const RADIAL_GRADIENT_SPECIFIERS = [ + { input: '50px' }, + { input: 'ellipse 50% 40em', output: '50% 40em' }, + { input: 'at right center' }, +]; + +const CONIC_GRADIENT_SPECIFIERS = [ + { input: 'from 30deg' }, + { input: 'at left 10px top 50em' }, +]; + +const legacy_stops = "red, blue" +const legacy_stops_with_hint = "red, 50%, blue" +const non_legacy_stops = "color(srgb 1 0 0), blue" + +function test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, stops) +{ + for (const specifier of specifiers) { + const input = specifier.input + const output = specifier.output ? specifier.output : specifier.input + test_valid_value(`background-image`, `${gradientFunction}(${input}, ${stops})`, `${gradientFunction}(${output}, ${stops})`) + } +} + +function test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers, stops) { + const resultForNoSpecifierCase = (colorInterpolationMethodResult == "") ? "" : `in ${colorInterpolationMethodResult}, ` + test_valid_value(`background-image`, `${gradientFunction}(in ${colorInterpolationMethod}, ${stops})`, `${gradientFunction}(${resultForNoSpecifierCase}${stops})`) + + for (const specifier of specifiers) { + const input = specifier.input + const output = specifier.output ? specifier.output : specifier.input + const result = colorInterpolationMethodResult == "" ? ", " : ` in ${colorInterpolationMethodResult}, ` + test_valid_value(`background-image`, `${gradientFunction}(${input} in ${colorInterpolationMethod}, ${stops})`, `${gradientFunction}(${output}${result}${stops})`) + test_valid_value(`background-image`, `${gradientFunction}(in ${colorInterpolationMethod} ${input}, ${stops})`, `${gradientFunction}(${output}${result}${stops})`) + } +} + +function test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers, stops) { + const colorInterpolationMethodResultForLegacyStops = (colorInterpolationMethodResult == "srgb") ? "" : colorInterpolationMethodResult; + test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResultForLegacyStops, specifiers, legacy_stops) + test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResultForLegacyStops, specifiers, legacy_stops_with_hint) + + const colorInterpolationMethodResultForNonLegacyStops = (colorInterpolationMethodResult == "oklab") ? "" : colorInterpolationMethodResult; + test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResultForNonLegacyStops, specifiers, non_legacy_stops) +} + +function test_each_interpolation_method(gradientFunction, specifiers) { + test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, legacy_stops) + test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, legacy_stops_with_hint) + test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, non_legacy_stops) + + for (const colorSpace of [ "lab", "oklab", "srgb", "srgb-linear", "xyz", "xyz-d50", "xyz-d65" ]) { + const colorInterpolationMethod = colorSpace + const colorInterpolationMethodResult = colorSpace == "xyz" ? "xyz-d65" : colorInterpolationMethod + + test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers) + } + + for (const colorSpace of [ "hsl", "hwb", "lch", "oklch" ]) { + for (const hueInterpolationMethod of [ "", " shorter hue", " longer hue", " increasing hue", " decreasing hue" ]) { + const colorInterpolationMethod = `${colorSpace}${hueInterpolationMethod}` + const colorInterpolationMethodResult = hueInterpolationMethod == " shorter hue" ? colorSpace : colorInterpolationMethod + + test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers) + } + } +} + +test_each_interpolation_method("linear-gradient", LINEAR_GRADIENT_SPECIFIERS) +test_each_interpolation_method("radial-gradient", RADIAL_GRADIENT_SPECIFIERS) +test_each_interpolation_method("conic-gradient", CONIC_GRADIENT_SPECIFIERS) + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/gradient-position-invalid.html b/testing/web-platform/tests/css/css-images/parsing/gradient-position-invalid.html new file mode 100644 index 0000000000..63ac09fc17 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/gradient-position-invalid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: parsing gradients with invalid position values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-values-4/#typedef-position"> +<meta name="assert" content="gradient positions support only the '<position>' grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("background-image", "radial-gradient(at top 0px, red, blue)"); + +// The following were supported in an earlier version of the spec. +// https://github.com/w3c/csswg-drafts/issues/2140 +// Deprecated in Blink with support to be removed in M68, around July 2018. +test_invalid_value("background-image", "radial-gradient(at center left 1px, red, blue)"); +test_invalid_value("background-image", "radial-gradient(at center top 2px, red, blue)"); +test_invalid_value("background-image", "radial-gradient(at right 3% center, red, blue)"); +test_invalid_value("background-image", "radial-gradient(at left 4px top, red, blue)"); +test_invalid_value("background-image", "radial-gradient(at right top 5px, red, blue)"); +test_invalid_value("background-image", "radial-gradient(at bottom 6% center, red, blue)"); +test_invalid_value("background-image", "radial-gradient(at bottom 7% left, red, blue)"); +test_invalid_value("background-image", "radial-gradient(at bottom right 8%, red, blue)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/gradient-position-valid.html b/testing/web-platform/tests/css/css-images/parsing/gradient-position-valid.html new file mode 100644 index 0000000000..d2e3ff072b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/gradient-position-valid.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: parsing gradients with valid position values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-values-4/#typedef-position"> +<meta name="assert" content="gradient positions support the full '<position>' grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// Where two values are shown, the first serialization is being used by Blink/Firefox/WebKit and the second by Edge. +// Where three values are shown, the first is used by Blink/Webkit, the second by Edge and the third by Firefox. + +test_valid_value("background-image", "radial-gradient(at 10%, red, blue)", ["radial-gradient(at 10% center, red, blue)", "radial-gradient(at 10%, red, blue)"]); +test_valid_value("background-image", "radial-gradient(at 20% 30px, red, blue)"); +test_valid_value("background-image", "radial-gradient(at 30px center, red, blue)", ["radial-gradient(at 30px center, red, blue)", "radial-gradient(at 30px, red, blue)"]); +test_valid_value("background-image", "radial-gradient(at 40px top, red, blue)"); +test_valid_value("background-image", "radial-gradient(at bottom 10% right 20%, red, blue)", "radial-gradient(at right 20% bottom 10%, red, blue)"); +test_valid_value("background-image", "radial-gradient(at bottom right, red, blue)", "radial-gradient(at right bottom, red, blue)"); +test_valid_value("background-image", "radial-gradient(at center, red, blue)", ["radial-gradient(at center center, red, blue)", "radial-gradient(at center, red, blue)", "radial-gradient(red, blue)"]); +test_valid_value("background-image", "radial-gradient(at center 50px, red, blue)"); +test_valid_value("background-image", "radial-gradient(at center bottom, red, blue)", ["radial-gradient(at center bottom, red, blue)", "radial-gradient(at bottom, red, blue)"]); +test_valid_value("background-image", "radial-gradient(at center center, red, blue)", ["radial-gradient(at center center, red, blue)", "radial-gradient(at center, red, blue)", "radial-gradient(red, blue)"]); +test_valid_value("background-image", "radial-gradient(at center left, red, blue)", ["radial-gradient(at left center, red, blue)", "radial-gradient(at left, red, blue)"]); +test_valid_value("background-image", "radial-gradient(at left, red, blue)", ["radial-gradient(at left center, red, blue)", "radial-gradient(at left, red, blue)"]); +test_valid_value("background-image", "radial-gradient(at left bottom, red, blue)"); +test_valid_value("background-image", "radial-gradient(at left center, red, blue)", ["radial-gradient(at left center, red, blue)", "radial-gradient(at left, red, blue)"]); +test_valid_value("background-image", "radial-gradient(at right 40%, red, blue)"); +test_valid_value("background-image", "radial-gradient(at right 30% top 60px, red, blue)"); +test_valid_value("background-image", "radial-gradient(at top, red, blue)", ["radial-gradient(at center top, red, blue)", "radial-gradient(at top, red, blue)"]); +test_valid_value("background-image", "radial-gradient(at top center, red, blue)", ["radial-gradient(at center top, red, blue)", "radial-gradient(at top, red, blue)"]); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/image-orientation-computed.html b/testing/web-platform/tests/css/css-images/parsing/image-orientation-computed.html new file mode 100644 index 0000000000..23a27a3393 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/image-orientation-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images: getComputedStyle().imageOrientation</title> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<meta name="assert" content="image-orientation computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("image-orientation", "from-image"); +test_computed_value("image-orientation", "none"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/image-orientation-invalid.html b/testing/web-platform/tests/css/css-images/parsing/image-orientation-invalid.html new file mode 100644 index 0000000000..72e32eba1d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/image-orientation-invalid.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: parsing image-orientation with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<meta name="assert" content="image-orientation supports only the grammar 'from-image | none'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("image-orientation", "auto"); +test_invalid_value("image-orientation", "0"); +test_invalid_value("image-orientation", "0 flip"); +test_invalid_value("image-orientation", "0deg from-image"); +test_invalid_value("image-orientation", "flip 0deg"); +test_invalid_value("image-orientation", "flip from-image"); +test_invalid_value("image-orientation", "from-image 0deg"); +test_invalid_value("image-orientation", "from-image flip"); + +// An older version of the spec allowed [ <angle> | <angle>? flip ] values, +// so test that we no longer support them. +test_invalid_value("image-orientation", "30deg"); +test_invalid_value("image-orientation", "flip"); +test_invalid_value("image-orientation", "0deg flip"); +test_invalid_value("image-orientation", "-1.25turn flip"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/image-orientation-valid.html b/testing/web-platform/tests/css/css-images/parsing/image-orientation-valid.html new file mode 100644 index 0000000000..e40517bdc8 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/image-orientation-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: parsing image-orientation with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation"> +<meta name="assert" content="image-orientation supports the full grammar 'from-image | none'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("image-orientation", "from-image"); +test_valid_value("image-orientation", "none"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/image-rendering-computed.html b/testing/web-platform/tests/css/css-images/parsing/image-rendering-computed.html new file mode 100644 index 0000000000..f682a795d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/image-rendering-computed.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images: getComputedStyle().imageRendering</title> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-rendering"> +<meta name="assert" content="image-rendering computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("image-rendering", "auto"); +test_computed_value("image-rendering", "smooth"); +test_computed_value("image-rendering", "high-quality"); +test_computed_value("image-rendering", "crisp-edges"); +test_computed_value("image-rendering", "pixelated"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/image-rendering-invalid.html b/testing/web-platform/tests/css/css-images/parsing/image-rendering-invalid.html new file mode 100644 index 0000000000..febb0555ec --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/image-rendering-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: parsing image-rendering with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-rendering"> +<meta name="assert" content="image-rendering supports only the grammar 'auto | smooth | high-quality | crisp-edges | pixelated'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("image-rendering", "none"); +test_invalid_value("image-rendering", "high-quality crisp-edges"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/image-rendering-valid.html b/testing/web-platform/tests/css/css-images/parsing/image-rendering-valid.html new file mode 100644 index 0000000000..bf06b6f798 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/image-rendering-valid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: parsing image-rendering with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-rendering"> +<meta name="assert" content="image-rendering supports the full grammar 'auto | smooth | high-quality | crisp-edges | pixelated'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("image-rendering", "auto"); +test_valid_value("image-rendering", "smooth"); +test_valid_value("image-rendering", "high-quality"); +test_valid_value("image-rendering", "crisp-edges"); +test_valid_value("image-rendering", "pixelated"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/image-resolution-invalid.html b/testing/web-platform/tests/css/css-images/parsing/image-resolution-invalid.html new file mode 100644 index 0000000000..bc92a7b501 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/image-resolution-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 4: parsing image-resolution with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution"> +<meta name="assert" content="image-resolution supports only the grammar '[ from-image || <resolution> ] && snap?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("image-resolution", "auto"); +test_invalid_value("image-resolution", "100%"); +test_invalid_value("image-resolution", "2"); +test_invalid_value("image-resolution", "3dpi snap from-image"); +test_invalid_value("image-resolution", "from-image snap 4dppx"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/image-resolution-valid.html b/testing/web-platform/tests/css/css-images/parsing/image-resolution-valid.html new file mode 100644 index 0000000000..e04d1120ee --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/image-resolution-valid.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 4: parsing image-resolution with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution"> +<meta name="assert" content="image-resolution supports the full grammar '[ from-image || <resolution> ] && snap?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> + + + +test_valid_value("image-resolution", "1dpi"); +test_valid_value("image-resolution", "2dpcm from-image"); +test_valid_value("image-resolution", "3dppx from-image snap"); +test_valid_value("image-resolution", "4dpi snap"); +test_valid_value("image-resolution", "from-image"); +test_valid_value("image-resolution", "from-image 5dpcm"); +test_valid_value("image-resolution", "from-image 6dppx snap"); +test_valid_value("image-resolution", "from-image snap"); +test_valid_value("image-resolution", "snap 7.5dpi"); +test_valid_value("image-resolution", "snap -8dpcm from-image"); +test_valid_value("image-resolution", "snap from-image"); +test_valid_value("image-resolution", "snap from-image 0dppx"); + + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/object-fit-computed.html b/testing/web-platform/tests/css/css-images/parsing/object-fit-computed.html new file mode 100644 index 0000000000..5d8b7c1f88 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/object-fit-computed.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images: getComputedStyle().objectFit</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit"> +<meta name="assert" content="object-fit computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("object-fit", "contain"); +test_computed_value("object-fit", "cover"); +test_computed_value("object-fit", "cover scale-down"); +test_computed_value("object-fit", "fill"); +test_computed_value("object-fit", "none"); +test_computed_value("object-fit", "scale-down"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/object-fit-invalid.html b/testing/web-platform/tests/css/css-images/parsing/object-fit-invalid.html new file mode 100644 index 0000000000..f76460f56d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/object-fit-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 4: parsing object-fit with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit"> +<meta name="assert" content="object-fit supports only the grammar 'fill | none | [contain | cover] || scale-down'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("object-fit", "auto"); +test_invalid_value("object-fit", "contain cover"); +test_invalid_value("object-fit", "fill scale-down"); +test_invalid_value("object-fit", "contain fill"); +test_invalid_value("object-fit", "cover none"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/object-fit-valid.html b/testing/web-platform/tests/css/css-images/parsing/object-fit-valid.html new file mode 100644 index 0000000000..f890562428 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/object-fit-valid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 4: parsing object-fit with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit"> +<meta name="assert" content="object-fit supports the full grammar 'fill | none | [contain | cover] || scale-down'."> +<meta name="assert" content="'scale-down' is equivalent to 'contain scale-down'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("object-fit", "contain"); +test_valid_value("object-fit", "contain scale-down", "scale-down"); +test_valid_value("object-fit", "cover"); +test_valid_value("object-fit", "cover scale-down"); +test_valid_value("object-fit", "fill"); +test_valid_value("object-fit", "none"); +test_valid_value("object-fit", "scale-down"); +test_valid_value("object-fit", "scale-down contain", "scale-down"); +test_valid_value("object-fit", "scale-down cover", "cover scale-down"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/object-position-computed.html b/testing/web-platform/tests/css/css-images/parsing/object-position-computed.html new file mode 100644 index 0000000000..97489149e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/object-position-computed.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3 Test: getComputedStyle().objectPosition</title> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-object-position"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("object-position", "10% center", "10% 50%"); +test_computed_value("object-position", "right 30% top 60px", "70% 60px"); +test_computed_value("object-position", "-20% -30px"); +test_computed_value("object-position", "30px center", "30px 50%"); +test_computed_value("object-position", "40px top", "40px 0%"); +test_computed_value("object-position", "right 20% bottom 10%", "80% 90%"); +test_computed_value("object-position", "right bottom", "100% 100%"); +test_computed_value("object-position", "center 50px", "50% 50px"); +test_computed_value("object-position", "center bottom", "50% 100%"); +test_computed_value("object-position", "left center", "0% 50%"); +test_computed_value("object-position", "left bottom", "0% 100%"); +test_computed_value("object-position", "right 40%", "100% 40%"); +test_computed_value("object-position", "center top", "50% 0%"); +test_computed_value("object-position", "center", "50% 50%"); +test_computed_value("object-position", "center center", "50% 50%"); +test_computed_value("object-position", "right 20px bottom 10px", "calc(100% - 20px) calc(100% - 10px)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/object-position-invalid.html b/testing/web-platform/tests/css/css-images/parsing/object-position-invalid.html new file mode 100644 index 0000000000..320f1a07c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/object-position-invalid.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: parsing object-position with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-object-position"> +<meta name="assert" content="object-position supports only the '<position>' grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("object-position", "auto"); +test_invalid_value("object-position", "1px 2px 3px"); +test_invalid_value("object-position", "left right"); +test_invalid_value("object-position", "bottom 10%"); +test_invalid_value("object-position", "bottom 10% top 20%"); + +// The following were supported in an earlier version of the spec. +// https://github.com/w3c/csswg-drafts/issues/2140 +// Deprecated in Blink with support to be removed in M68, around July 2018. +test_invalid_value("object-position", "center left 1px"); +test_invalid_value("object-position", "center top 2px"); +test_invalid_value("object-position", "right 3% center"); +test_invalid_value("object-position", "left 4px top"); +test_invalid_value("object-position", "right top 5px"); +test_invalid_value("object-position", "bottom 6% center"); +test_invalid_value("object-position", "bottom 7% left"); +test_invalid_value("object-position", "bottom right 8%"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/parsing/object-position-valid.html b/testing/web-platform/tests/css/css-images/parsing/object-position-valid.html new file mode 100644 index 0000000000..90178c6602 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/parsing/object-position-valid.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Images Module Level 3: parsing object-position with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-object-position"> +<meta name="assert" content="object-position supports the full '<position>' grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// First serialization is being returned by Blink/Firefox/WebKit, second by Edge. +test_valid_value("object-position", "10%", ["10% center", "10% 50%"]); +test_valid_value("object-position", "right 30% top 60px"); // "calc(70%) 60px" in Edge. +test_valid_value("object-position", "-20% -30px"); +test_valid_value("object-position", "30px center", ["30px center", "30px 50%"]); +test_valid_value("object-position", "40px top", ["40px top", "40px 0%"]); +test_valid_value("object-position", "bottom 10% right 20%", "right 20% bottom 10%"); // "calc(80%) calc(90%)" in Edge. +test_valid_value("object-position", "bottom right", ["right bottom", "100% 100%"]); +test_valid_value("object-position", "center 50px", ["center 50px", "50% 50px"]); +test_valid_value("object-position", "center bottom", ["center bottom", "50% 100%"]); +test_valid_value("object-position", "center left", ["left center", "0% 50%"]); +test_valid_value("object-position", "left", ["left center", "0% 50%"]); +test_valid_value("object-position", "left bottom", ["left bottom", "0% 100%"]); +test_valid_value("object-position", "left center", ["left center", "0% 50%"]); +test_valid_value("object-position", "right 40%", ["right 40%", "100% 40%"]); +test_valid_value("object-position", "top", ["center top", "50% 0%"]); +test_valid_value("object-position", "top center", ["center top", "50% 0%"]); + +// ["center center"] in Blink and Firefox, "center" in WebKit, "50% 50%" in Edge. +test_valid_value("object-position", "center", ["center center", "center", "50% 50%"]); +test_valid_value("object-position", "center center", ["center center", "center", "50% 50%"]); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/radial-gradient-transition-hint-crash.html b/testing/web-platform/tests/css/css-images/radial-gradient-transition-hint-crash.html new file mode 100644 index 0000000000..51519a1936 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/radial-gradient-transition-hint-crash.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>Color transition hint between values that are far apart</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#radial-gradients"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#color-transition-hint"> +<div style="width:400px;height:400px;"></div> +<style> +div { + background-image: radial-gradient(green -1540359700%, 0px, darkgrey 2%); +} +</style> +PASS if no crash diff --git a/testing/web-platform/tests/css/css-images/reference/100x100-blue-green.html b/testing/web-platform/tests/css/css-images/reference/100x100-blue-green.html new file mode 100644 index 0000000000..e4f35c3e43 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/reference/100x100-blue-green.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 50px; height: 100px; background-color: green; border-left: 50px solid blue"></div> diff --git a/testing/web-platform/tests/css/css-images/reference/100x100-blue.html b/testing/web-platform/tests/css/css-images/reference/100x100-blue.html new file mode 100644 index 0000000000..60015b014d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/reference/100x100-blue.html @@ -0,0 +1,2 @@ +<!doctype html> +<div style="width: 100px;height: 100px;background-color: blue;"></div> diff --git a/testing/web-platform/tests/css/css-images/reference/200x200-blue-black-green-red.html b/testing/web-platform/tests/css/css-images/reference/200x200-blue-black-green-red.html new file mode 100644 index 0000000000..04322b066c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/reference/200x200-blue-black-green-red.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset="utf-8"> +<style> + #box { + width: 200px; + height: 200px; + } + #top { + border-left: 100px solid blue; + border-right: 100px solid black; + height: 100px; + } + #bottom { + border-left: 100px solid green; + border-right: 100px solid red; + height: 100px; + } +</style> +<div id="box"> + <div id="top"></div> + <div id="bottom"></div> +</div> diff --git a/testing/web-platform/tests/css/css-images/repeating-conic-gradient-ref.html b/testing/web-platform/tests/css/css-images/repeating-conic-gradient-ref.html new file mode 100644 index 0000000000..0271bc3018 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/repeating-conic-gradient-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<meta charset="utf-8"> +<style> + #gradient { + width: 200px; + height: 200px; + background-image: conic-gradient(black 25%, white 0 50%, black 0 75%, white 0); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/repeating-conic-gradient.html b/testing/web-platform/tests/css/css-images/repeating-conic-gradient.html new file mode 100644 index 0000000000..9a9587f29f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/repeating-conic-gradient.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Repeating conic gradient</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#conic-gradients"> +<meta name="assert" content="Rendering of repeating-conic-gradient"> +<link rel="match" href="repeating-conic-gradient-ref.html"> +<meta name="fuzzy" content="maxDifference=0-47; totalPixels=0-40000"> +<style> + #gradient { + width: 200px; + height: 200px; + background-color: red; + background-image: repeating-conic-gradient(black 0 25%, white 25% 50%); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/support/1x1-green.gif b/testing/web-platform/tests/css/css-images/support/1x1-green.gif Binary files differnew file mode 100644 index 0000000000..e023d92c7a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/1x1-green.gif diff --git a/testing/web-platform/tests/css/css-images/support/1x1-green.png b/testing/web-platform/tests/css/css-images/support/1x1-green.png Binary files differnew file mode 100644 index 0000000000..b98ca0ba0a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/1x1-green.png diff --git a/testing/web-platform/tests/css/css-images/support/1x1-green.svg b/testing/web-platform/tests/css/css-images/support/1x1-green.svg new file mode 100644 index 0000000000..0bfe4661a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/1x1-green.svg @@ -0,0 +1,366 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [ + <!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/"> + <!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/"> + <!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/"> + <!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/"> + <!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/"> + <!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/"> + <!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/"> + <!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/"> +]> +<svg version="1.0" id="レイヤー_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1.003px" height="1.062px" + viewBox="0 0 1.003 1.062" enable-background="new 0 0 1.003 1.062" xml:space="preserve"> +<switch> + <foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1"> + <i:pgfRef xlink:href="#adobe_illustrator_pgf"> + </i:pgfRef> + </foreignObject> + <g i:extraneous="self"> + + <image overflow="visible" width="1" height="1" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAABGdBTUEAAK/INwWK6QAAAANQTFRF +AIAAnPmlkQAAAApJREFUeNpjYAAAAAIAAeUn3vwAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdl +UmVhZHlxyWU8AAAAAElFTkSuQmCC" transform="matrix(1 0 0 1.375 0.0015 -0.313)"> + </image> + </g> +</switch> +<i:pgf id="adobe_illustrator_pgf"> + <![CDATA[ + eJzlvVlzMsu6JnauHcF/AAkEiKmKGTQyIwlJCDShCRVQkhAIUBWstb7tiA57rwvbV/aNwxEOX7k7 ++sTpbvumL9x2dNg/5vOJ7p/RmVlzUZmVBXx9+nTvtZcWUFk5vPnmO+X7ZPo8zXakMJj2+Egiyrhd +Pl9J4Ln5VMi70a/uk/F4Ic4F+FOgFXSz6SgDChVOsl254C0viMPpJI8eoYdV+HbgKc2mnp/S8cRT +OhV3w2+1p3SC4YLuQBAUuh7Oxzwoxv7BRt4Fnp9EZ5P3oNI+qLDMzcHzOMMmYkwuxiZB/fk4rL7E +TX7jRHH4Fx62mcgmwG/F6WIyGE7ei9M/8u4I684mGTf8C5/Vhy1eNBZgojkmk2FTsFw0G8+ybtDz +XDyehb/Eo3EmwYIXy9P+4oufzJvCtM+LYmk6ngpi3l36wU3c59w7eMK5O/x4PP3dXRxz/ZELkCXV +rQ7HPKDAFzd3s3FIj8IJG+8WF8Px4GLx1eMBbdLZOPw50UVV3oigLlAt/Ax/znRPvsAvbX4+Bx0G +DcJBt2pFfTfAj+ifwOPPP//Vz7/+m59//b9//vnfw89//tuff/2/fv75tz///NfPQbkVYTr74oSR +KI88x2aNA09k4LjZaDbHsNIr1/zXbAwmAJErnstEU+5knAF/dZ/lkmC4ElETTDqaBGR1J5OpaCKV +S7oTTCqagq2x8UQG/SS9oxGW/23I/553X0wnvES9gjBvSzObTDKM9Fd60lqMeeFmMpyDYaThTzmJ +fOfTAT8G5dX3q2MOUQ39w2p/pQLXnPDOzwFHTMeLOeLbrNICmJ4G94OHc8xKDVzO+Mn19Bb1McIC +2kmUAsNLJrLuNODJeDrnzqSy7nhaagj8l00k1MZZ7a/UBqwR1qc0lAFz2wSzfSkM34eTvNzNTLcm +DAcaB2Ti7qz0B40kmtX9m1P+lboMRj+f8xN5CIDzSuc6TmKi523QYmUyKE2/4BSIcPHwoGnAXePp +u/RM/YyegNcXM6n36HsXzFZTGE5gna4L9CTbbY4X4FFNmC5mJ5O3qSsgSQ/QG4F3Sw/Bwkdflf9G +ueEsSHz7lu8DAQPYYeC+7H2CL+DVJ7A43+GfpzibBP9lH+GXe/CNfUok00/xOPsUTyRBSfVt+4bK +/BtYsVo/pV9hxTWpKSDFwH//kNtNqe3+pv5BHQD/vYR/SspboK7K5Dd+PJ3xbm4ycN9xwsy+O80x +N+EEN/rd0BulEVT/Av75YWhOJQ65S43hb6ARDkwhRV8Am84AJdErqIipX4QCukcUDXHzDyBH+clA +NIx5oZtsdZAfdIOUqrNvu92Hi0ZwF4WF+OG+nk7Hui6w6RtQZeov+s6gJm/tOyFXjOqF1f6j6koT +vTC5nEhTY9UhJjGDf17UBaFMkNPeAbn9n0XPQGlyrwpqh97/S+tNiRuPh+8CN/sY9nEdOpXbi6vt +KY3P4Z/iKr2U2nWyBn989abjofhl6Nqtnov+a7lFWH+TE+bD/phv/xDn/Bc197orgyFQUBipSizT +/p2b9z8aw57ACUOeKODg7L8NJwMgUtqL4ZxXWwAGwAwaxe72Bzfj0TDmH1VUsq1WmOoCc0Cv8CMR +siWQk55AM27+Y8yLrtjZZPr7BH1x513QXv3vfv75P//869/9/PNfApP1OeiOXXBfvDvsirWHwOjk +laKM+9LF6Awp1n3PgR9aLmDqACuUzUD7J5PLxJEhBCzXHDDBoplcLgeseOm1+4JLsQDBlx/gyyn4 +8Al++t3NMu5z9+Mz4x6An+9bLtTAwBVDatG953LHgFEA/ovGBIigjciWLE1uDCwuHvW+2XPQXxtr +HhHi/i8uO6O/2Xc1i2o3ld44mbbGUJxbzdUSNVDBVfiEZaRH0lKD1fyN/DOoyPQjpnK5z4ozAfxF +zuXrxpTvgIXgt2EfWvmc8EP6fn/euAAOg+XDPXfgj6/xBDyOgNUnDHuLOQ9skTAsWhAE7j9OFRuo +X1eq/wH8ToGfSGXi7tgJoIz6FP6Z/4CrHz4N7EzE7m+cIO6BRdkGtU/ejUV/48YLpSz8XcSUm4AF +LRWTeyIavv0jpU5viCIILAVxABGB13SByGBPIX3p8D/sGCfAEacY33jaH/EDmrEpJTc0/WuOniWO +nmpeh1xvzNMwvu1M/mNa6PnfqJc6LPoPzMVweP2FOJ9+/cNKsl/Hh3mRg7YS1HlAdNCy4y9fF6Av +/wl15R+cLF/8nBuAKVq3H7k1+7E9kG0iGi7XFZZp0OK5sTtQHPP8oMG/zW+1mhm5YzDCXBB4roBi +PVYvXk9nuvf04t4kGTLZXCLK5JisO5PJMFGWyeWkippTYPzB4QZQJFgKmBq7UR6KszH345wTRvLI +f/71f4fGMbSS/zf04X9wQ/19Mxn2wbgVWmiqV+10s9CS64bxcV28XOtLix9fT1tSP1C/mlNxCIeC +nsal16WAe1wNr1O/z6odKgKf1R04EYHN3ZtywgD4JdxirLMXVO5RSiDqWs1Ca/j+oZ8/M/ETaaX4 +jBsMVOJKPfjixJGpU+JsOjeV4oDfLP2UUaT0YDaMSj8l5V/607GgMlzhxF1YzKfuFgfcZxivNdUI +vALWrTClezQBFsV0MXe/S74woehQnMI9DHcPRgHBRC8VzrlnwPUV3OLwazFGm05G9QJLzAVuIs44 +sBb7P0Cbw4FbVLvI6spxMu3dfbgpIT1PxZPA28OVccdBz5SZsC2K9sgoywqKxZVOpRIpfElW1wHb +oroO2JZVO4D259SSimsm7eC19XTUzV9T4EVe+I13X/N/zFEAhOsNx8O5JUcXp3Og5g0iKZJiGLPI +0EWi4c5KF6w9Dn6pjqdT4ZabDMUPwCCovFRNNplgo+kkk3ZnE3BjM5XM2NYJFxcM3fMlfjyu/DFX +Zagin/Bv3A7FoTTI9pyby0PJsjnUB9adyQHx4awPQODqh6NWlU06rkqisb62dEYhDqyXujYrQmdy +KaVntISGSsgZnTWFcTIZ8H+0+f50MnD2TnUoiDbNIGbCTyfuNXU4m2ICtcK1eUCtaYkFMhlWqYyW +BSTbYZkD9Kufcb9J+5dAKs8UOTD9jRdmMPQjkl/oj4czIIKgYfwHEEHvQJ4rqkiTVoY3BKRyIr+h +nUJ3jwND7StG0+P//2/+j3//t//07//8H//+//nnz8tGA5JVarAJbZK6q2rNSIjN3ZqSjitCSRKZ +57z4oWo8pHrc2p60rCyNb1wu5jOg9sjvMNo4lzrX4CbvC+6ddzenM0VzBqSkDZ1dOCqcVBfjsfKu +nN0BnkovJOKZdIYkzmqamiCKvaKl5rEs2lK0SUoliGW5yxnXV9VEMkUsW+X6fGHyPubtSkOuNRfO +YvsBt/YBGYEhOtdYaYWFBwWAYgkqTM/avtTnxjayBuZPyLTEDwIRSC9XCWUhefRFk6lsJkmSjzr+ +IPESKqvxiG1RCh5B5Qw8Ek/HWVxn4cB0fU1lc1mWUNTIzoSCFB2FxQz9tBnS25vIK1yC5WOoK0vT +hTJPCWydsKBmmsXx3azD5IrppM5DdjEazuai16qzqjfV0zpJzE3mQzfwHTgbGQ8s//FwwrvFuTAd +KSEXxqbwHBiSirsBBtOfCgN+sOwAuWMX07nhsTLj7dta5asH/CckfGUKas+AsO8PxSX3Ab41ASpD +dT2S2gO0e2JBFvBIyb0yEQK28/62XPyek2V5RNfb8nU5aB5BdTqZay3q64Xu1xkvTKz68oe8g2xZ +XWPa17lNysMGoJLiip6UFXX6FI/DTd20lKmTZpRMHbij+sezTgPBrCU3cAoJytTIRdCBhOxTgOyj +ElvPQai+EjQPSrJ50NKbB0tFL2XGaeO4zFDqWmUvvZ2BikgME5NSkdxFvYHBmopemqwcZxRj3ZVm +m55ksLANzaQa6YgmlbWlmrGYNdmkMnR0k+vDm4c592SqmY/u4QSZhzDMYhUAWV7/GoljWpg39jnt +RWfAkBKAQWXq1FIx2C43HpNLiaPhrAeGODIqb3MxgQcjEXnYPYFcEvjhmgQJLNuu5vKKA+9gRMor +WkBcdt4hoU+nPZh94IbUpSJ03KK1/lcU1MXr/QSrMoqb0P/6QaCfruB0/mFHv95w/sXB8gbjOhtN +MUlFG+pfmb1/jaI9GI6Yvr1Fe8hXMmnupeIoIddc3GqIxsoXIg9McxT6UOWERUoFYb4hb/BoLgxh +z6V2xfk4OpBCjWjOFZrZsBN8TS6vhZVp3pkNvmAm74S6U7MBdeXSZpD6htW0z2aCXIwwFaCM3Lps +6wHRbTXBoNzvw4GiNDM5bKkPnfFkzSug0BCmg0fHwCqkKjifzmx7J5UUtMYJfZTK6tk08PPP/+Xn +n//i55//+udf/z8prP7zz7/7+dd/9vPP/wl+/W//9u//z//13/2/f0eeGFj3RK+flpvvmyiJL2RL +SKmqqc5WJlRmKrYsTWApFBkmy5EBLw7fJxaRZUup2oPpWCKF+J2+Dc2OnrWYFiVBRq0HDNOxPOqx +EIVrlFyiP50ANTWHWwME6sCSqmLuQfSEzIdxy9LCIAq8DYi4WI51mAu+AZPlYyr8RXazMKVm8mYL +iRdQq+9RIvPJZeRNb5bBlhKhd67UZVvuN/IYxf5s3P+BZxWpTH9iDlmay8yHY/3GCGZ8YJ7G3Mye +DnI5Qt+RMuMncIN2gO89KiVCD4mKc1FxSXZrC4PmHcDycwhDkvsbjaew6hqIfWi0GmURQVfblOkL +05lNEWhhDoERZVMMxjkRPou4LqRG4e5MjxNER+aMpncoX1D1D2V5wU4FGswlOzVoKDzXUdmurK4b +Vjz5NplHB2Oy+JPKzIS36YQk+2AxcdFT1mbCar5EMNDf+DFhRkVgpUJzmlhkwr9z2pY8phD0iYCt +K5I5CJYDqmdCrmvMwto4NcpkTXgxKn5wwIvhCVSChfg5DOZMQN/UibGszVgqYyXz/5hFDfF9FF23 +KiWYzf44ruS7uSSmnKwRtSiUFX9p5aTQFrkkUHHEJmE4jTO49piC01mfIGFQAZEw46jAYKF4IjZb +JqY3ydYG8EZFo6rAlnpbTPoEBpHKyKERhUls9AN6h5tMlPwG60gAKmXnNQDXUxMbgVNuxk0ksKcb +cBYLPgJPfWDjs0HvVWf1Gb3tglJQ52/rwy4pbSeoOfyDHzd54Y1XChr2paRIVE3gBtDWQog1aaOK +tDUlvdSAIZ2CIL2Edu7NLxlbkmI3TpuS3rJvy+k+mD7mieAR0DcWZ5w56CTHPdtAekugyiVqt7nf ++HPgIA5nY75gjJGogamljZsJZ+7HUpGP6e/14UCd/6UIioZUMCbEQwpIifKQUMozVwz+rv8FRmUK +7dLJSTZV5iEfwlpDh6nXTOjothdjYqHzSOjoY56An+LJ/at8Qn1wpX5CD/YSR9fzYvktVxvVt1sH +XPmN6RyqT+Ohg1b6wxP07LOe6NZd1uXzhD8+055IbGfuCe6f1zzB17eoJ7TItz3h8w== + ]]> + <![CDATA[ + +7InwpzHmViyHQC9Of1idwu9CupIylMKXko1ouaZoDfLsExHKL3VnjyFy5frm+p+JfmJnrp8oAMN +URDiIucJPQROPaHa96EnMGCinkj76NYTyUYY2JFrT6TYSTKxg05AbeUqKcbFc9B8eZQ8unw9TBSz +iWz6If31sB95rU4zdwlmgJ66fOg5U+/yJUE48iyKr+eL80I93b/M70yGu7XU/Py4/FC9bR/H5kw1 +/3xZnuZe25ECGhoz2OmU1UZnMrUPOklpkMWpeIE+gXmR6Q0HlCwPmdj9KGMqhKgsPHGPyWiikV2E +DmueHW0Y0ZiYrcUXndce+Fobyy1rle6J9y6f8Bwsn0uUh13RhgbeDT0kt+L5XfAiO9FNBGr0+SZd +xjaaukqMBK1R41j2xFfh+Xt+g2m01Eu3uEjcslExe8fiGq2Decn5CiPrse5v7Yh+73Rm1aiweI16 +Az1v68mqUabKHO1rjYJW9M2mt73ZvbecdaPJzhNTvS5eWY50qzrL+y6H5y2rRgEn17anDcxY09v+ +00byHDerN8JTP34KGw0uk3frLuFLzf3gteTU5Vua1bz3UG606febZjV5namNUaPy+tQ3+iw83/Za +Vo26fODdfDd1M3iPoWbNjb5Eri+wjWZib22/daP7nqAg5kMiahTymGmszcxL8v6jEbZqVPQfdlhM +o6mPoL/I16waBesFzGqHqeaYC0sCb1XfM97WV/zSqlGm+vxcxTSa3vaNJucl1KjLtzTWZIdjauHX +W+tGa0zBzwcyHUvyzrfDR3KjnUhAa9TlQ8vm6CJ58CSNtfI0qhoafdhnGpkICxvdXWq0zk+VlZqZ +mUfaeHzgUKNQvxiaRWPNjAbVF1yjZeZ89zln3ejJd/74U7homRoFraBm23v+hNVYUaNnfDvBYBp9 +jDDtbnDLutGzOn/x+BAMgFVpNdZb/+Qd22j740qWvxaN1pjbs9m+qVHQitRsI+G7qR7vH1g3Ojvd +wjZ6261tzXGNXjJ3R2dlqCutxnp+WOm+XD0/Wzb6fDk6wTb62UkNqqZGVY2cfMoyz+I4Yt3oxefs +6zKXTVg22j2JTLCNCr52yINsGKuxdm6YyvDr1LLR7EVky3P8HKmARvPf5kWz6Ga6cqO9RBA1ilqR +dU3wocHtokbj/sNA3dDoU4N53c0XYKPhJU3T/fzeYU+716DRA2FJvU13DsCqlJqdH4VMY/UARR+U +Gi122BOjKAwL4s2hBzYaXZZJJxFlpKU5ahRoMbXZ0F59Ky01esSeRUyiMDxLXryiRhPefOnM2KhX +ELjeBDbKmEcqFHigXxT+PfWY5W/qM1+UG81fRU2qfGvKv15L6o3numljl+o3Oy/TvPbUpJFT9c4V ++3WLe/uDqb/6FtinQPCWd6yeImkJ5mAnVPLJzz/5jGmG0lm2q/RbHGXNTycfW/fYp5nmSf7J5cM+ +z8Z3W6/4px/cix/7tBDfeehrT5dsmEZochTHvt3oXb7tYZ9ebvV7daunsn7Zqe/fiNLzN/93zvT2 +TWi49yk/Zbfy5qe90/YE+/S2HBoJCsUsnt/5ejEP/ulTOX+Affrqe8l4tadLFPucN2d17Nuj23jx +Cvv0a1Q9fLF6KvEYGNDVXgr3tu80njy8xz7tT3rtBu7pjmfn5GkXT7GdSuG8x2OfnsaPtljc04In +7g3msRRL1ZnKwa4y6nxgz/Q0dH0lHslPS9F909Pr19puweopoljqY9d7pJjDy29/7B49HF/qnybD +LdnjS3ivQqXIbokZ+B9LsvR69Y31rlm1m1KkpeZ36aRgfO4FTDYqeSKnuY7kXII/Ufhb1RMut0rw +zx0QdTmv6kFLEkZuj2sVNb0vbMX9B82IrA9Yn15HHG4n/MiHROsKuma61RQ7z078wJG8XyBnB7T3 +tq+2tx0bHvSCQLZtVYAFC9ydiEFc6xsN7cffrzCNpre3b2bjR+tGk50HrVGk9/XNAiX0yWIbZapv +F21so1Bh9q0alazxgX6sybZX12j2otjWNTrY2dnWGhW3P/iW2mjCRN7Db+/Xo6b3a2PDWIMdbKOA +vAdxbKPIc7BqVNYv0Hd4UcZqarTzjB/pVlVM4huFnoNO7ydMBIa+w4d1o/ueKKnRht+qUdkaRxYJ +hsBAkwKL5Nowq3xOaR59kiciWHoYfFmVc/nMJV8WXxPbGtPb3y+V+0vbcqkPxHdQjsnyoghG/VQI +qREibekCoRH4gtRp6cJlh9WFIAuXnfaxacXHhtv5sPbH5TucBQbXsqsPpRIk6+EsuD9TawygKg5z +de8n6sNhrvZYBoKLq8CWEwbBBJs/rPjkP+HzKape9cWUBrT+gKEdzKQ+GMJ8SOgVYx982af+aemt +bWOMDhQuS63U9AN+PT1SunzTBF93oKhb7CrUkWx+WRzrRtDcMRJQT3cgYU5TPukPZMk7cqeANM6d +ELrUXfgB656H4/4j5kSL10gREl1oEBE9/rwontkRHf6ROy/55Bbj83tQEeRXLo1QGx/6IzMIfv7a +W+T5c6HJ21ZHuGsV+pSYCpi+NyvOnxbrk2ZwSsWhOmLhmWHK7hY/q6gqRSMT2Z1ErL0IlrM0krvo +OKv29G2/cvB0l/1KifLANHrYyMqZxosPuVON7sZ5sSWWUfQEl0XPS8U4sQmd3nc4G5WnE0FPQJVV +DATckUQPblW+VFQC6/qj7024Epb+yLSTgq7LtOtEzKtSL7itVyWK5lkOrbNFHprLPDiroSWObq/P +CUNDf2pnO7DfLauOuHygK+UQVh3pRsU3ozvy7C8xewW0cjvFDsjls5otqwFBV/Be1wd1Ger5/DW4 +Azp3XzZNk8pjnfCM5bz++jqEgWRhrMgCrXGopz+moQOFd1RORiEh68pYvMq3qAqufUNlxnW3u7zu +uKrVuiOvOmjDWPSW27pfEJlzmw3fsGH45zGk22tYYgsgFwOVM9lOJk0o/AMmVAtiL/MGGJ9JBuqr +ugT6Re2UrmdgLPOaZc8Oaz0RN8hjhp/fxDQrTJtdPcWMUxJanpJBzU7HYUSP2opWfJQVsYrJZDNa +WYxaYWDNPM4VHsMoJtr5rUGa1MnWk8tnZT8tz++gZpTTFsQ6n2pq19QlnSdegyHSU0ynLltybyi7 +ZDTojLpSnTwa5TECXj7RsLCz+Q0zOPERDQua+QNjkYhVa36tXZlSVXtiqko3L44rMyoUUr+UyBWh +sg7ZiXFGMRu7zskgu8IGKWaUaI4pNtMz2mtGWHJc54d4IWTldSHrwtI6rjtxBS0VdLx4/+GxkWM6 +A9t6Vc6Ptja2Kov3315njrJFMovEY3W44dJYjzqdrR1sb3T2GJE6h6Kqlm3DCMuGoTIWC7HgdJoO +Rc3FM3XE5aPoitIRGymA74hqW8KuGGxLZzRROrK07HUUs/INQxgV9V6HoetHB55h/lv1kuQgd0ur +Mf4s9qK6cDb4dAI5vuKgATmosWzDAFvQ40h8WGZ7SV1SzA4154quUxZd2qYQAC4fjWH1PPeR1bKN +ANBJ/hMnAoA8Pr9pfCrFnBPdzlLQ8ayURYCz5T9P4Jbg3drjg5I/UJ6zlWexRhvrxPrkgPc/ElbM +IHt8TollvcRxC1zJU7IklsMlbiCWcYG7fAlvbhQzLvFT8xK3dNLso0uAZ7foIiSkWMKpOSRr7o0S +koWehY0F/3VqtOAxTjEpJKtIfjA4/7phklOY03BuNTRgXdgHOJSOnC6Mapk6vKFf+4APvuPrD8is +U3UxWFyUzmqa4NZwx1Hcx0K/AMLYxfpMogATr4G0SVNxsk4UGCINRlP6eGE2pQEf6HShIUKCbQBj +Sp+ZTWkc7Vw+AlPlr3xkZqCNLwAJc3ST8dvHbW0sYWloJjW40nrJXwVX5HMdJ58tqT/baPQyn8/O +zHpPnX2qCKfGO0aVRyMAjHmwkMmPbnypdQXAmUnRSXrfijD2tiygjknR4fSQy6dZs1hVBzer/Pr8 +DTgq8BsNM6BVZ8weXBp6CfQnio9503HEfRu2QqfvbLXdfRvFWynWC0W8FVaGWXwOZDJcNGtvUqBZ +01SekquwWj1GRxJfi8RjhHocr0CrWly+tXcqUD1kveei1nxSZYYdQmolKksYY1gcAgrCAaO9WUJJ +rivuMBiwCXJlpflG1A2sKh51vMeHJeUnv0smpcvCACVKNHEUXJJo4shm+85Fa0mUAGGOv1eUaJoW +u7/ZnES7MUk0fUaEY4l2QyvRSJYSjEtvQKKBWXNpXV6rHrJEc9HXs4ZEU3xkVM/6Eg3UYrUbpEbh +wsWAuo8Ts1w5xgkjedCXV9rGoS52YbBS5EQvJQsR+DxLsXH4m5MNWELOFdwEj65rmZXAKr+cu3wr +itnlym49NPv7NGKWIvvBSszoM4fhcr7FetPUpjSaNWNSE1bC2NezbNpjazHEYE31rJECoa8FONQU +O+/29dgmHrnMAWZCZU5j1Yb8MZM2BCMMmbUh+C1Ca99b6UKdx1cCHn0LmyJAa9/fWelCo8dHrw3v +sPa9lS4kx2BhZU7t++U5ffqG/v662hDOGlkX0mkxWA+tfU/SYqiete17VIuFLrTIhbOth5AbgdGF +WAnz9O1IG5J1IZyXWnd5pxj+5jgdyXr0+QDjwsemDMlTWhoGVgh1Bax5AseiJyZm/Po1dO/c0sXG ++UFlTlY3cW3fw1YoVjeN2O4K2AVusfdK9IjAXEapbF7D7umSxwcoehuj4wiqLiGO0EWuEhTLC++k +gcUVWVJLpWjMaTwZ56TFi/cDbHqelLnmWo7WYsdfiuJ3AciLyyra0xM3lW0Lq4J7N7h5cZRQDypL +ePfOGpuIkACKZZyZGOrOwDInF++7NJa+VBlmsXdMuVLmGKwhm9F6u8LUJRqOcOGJJS1dTZ8dps4n +lp6FPAfSySzvnsjkqusJ375UPJFC4gXi5iou32YwdGQEHRzLJjB0ZAQdaGUjGDoygm4JLbgiho6M +oINnd2wCQxciIugkTl4fQ0dG0ElowfUxdFaNagg6C7TgShg6MoJOQaOvi6EjI+g0hN16GDoygk7L +7VkPQ0dG0EnW+EoYOkNCMgEH1PRXjTu8Vm6v3q7DI7DIqS4uB52yS9zexRrn+iwCMG9V6qRTYoip +vBzptaUTzv59LBu1PX7qbPb4yuYQkxM66TkZIst2DQxrkWl20AtQgfA++VurLuH3+EiVkfOwlseH +wYzYI+eox7cUuVqN6LBLMXKXXA46RY5ckdfLiqA5R7JGyh2t0CaDEII6nfAcK1rVvSS6ZBBy2Bgb +NNb5yHqM2frxqk5El+5JyLqxBbvRp4Jg/X0w504ixri5miGVYO8l2YHd8A61HvdqS5gudl+X2g1R +OZkWoUWTgsWad2wQwi7+bZf0RCMeuCrW6dX8Skq3t5fYopgIE8QUi+M7p0Qd2gfOAKlcPsJuNkXg +zLSJNsrOTGES8O6N4Fof2iTDYYDZhQtytlRUGh0OzC7D2AmOb0GLOLFFgfXs8C/bhg== + ]]> + <![CDATA[ + oBUemoYHwejxL3Sd+tjGzd+xFUCThOOzyYGn3jcZ1IwRTCvMOzWOLyvYYWKUqrSoNamy1RCiFsgU +UBkWJON8kCaOX49idogZRxSzhYk6oZjpMARnlZmwM8X7TsRwTq+M9SGiZ+hs2aWYrwViSFvsNng5 +e2mB2RcDVYzIZ4lsx1/jLyz880qUznXzVgcki1UeLIWz916ndfZ0MdilKowCglyFVQXLWQT4mcbD +wmyAcuYZWsrphcFbhtYNs15hEOBmv/ZtyWHK57cnhjk2jkfJYdQbznIBA9JWOe58GKN7RbAj8+JS +Kn+gPDeRfAljZbQj8bAoWztD3031NGAr+JGj8A4eETXf3pA9dmK14rUuuXwOVvznCfWKN+YhmXns +xGF4h4Aci5n8Spvwx+rIOKVLLpsjZmCn4k4iMpZdQjEliECjXc52XUraIeyo6eQsImPykowRmehy +RObrdMWIjJnHTtePyAA72Gvy4ywkDJ3bkPDmozu0ERklOooRM6frR2RABQFCdocDGJpdRIbiPCUw +5+tGZFDexeli7eQhiEBLYsmiP+POljD4iIwNOMeUbwlBenTwHIosCXhJCIOMZRPGiohDpTOWE0c3 +oW3TmJ1jEmdnzjMZMDlXQMlQQUftzw0DQ8sHbHJ6aYZGkbLnsuPQoxsfPrpECx9DrRBODqPG1RGT +ZjXrwhZXt0buuqzFIGHSKyaImKhjFQK15GQMuM6ctt5c3keFv9me10e1p7gCHs7KF7tvbxoPt5nz +x+zwcHQ8ti4eTsVZGBBxK+MsMHg4pxmqq+HhlrxXqZ4N4+GIaMGN4eFss6GUd9bCw0ln3NlANdbG +w+lz4DVE3KbxcMR52RgeznqPj25bB+LY1kfWQ/W2mZxIWVeufaKFDsdmkRPpeO2Lo4RzM2ApE3I5 +QWIlzBOoJWw3+5T10OBIUC3q/r51PRtAcsFMBpOXZNikcZTxjMB1uLC3OQeeLuPZ/727lPHs/w7b ++S+Uy/B2RQ/aGLesdWYbS00GVamLkFaOYZdhZ0ZOTaayxiG98f4iLaNt6DRgCPAr45cPtfeK6ll1 ++RiQXJT5Dfa9MR8JbHuaFi7NevlIYMJpaEochhCXDoaXY1gQfObAoSYiUtmtDRAQHiy8MUQqt9XF +g0idIlK5rZ45ZEDhhJoRqXebQKQ+fW8GkQrr2QQiFeLF1kekwlo2gUiF9ZCOgdbZyRT4rTvioak2 +SUYSxUzLMGKxDO/XiWsZJAwEw/0SKJyFFvsFUDjas6DXg8KZV+X9L4HCrelXUkLhVL8SI1I3A4VT +ca8KGO6XQOHUVhQw3JppdxD4tGwYalkEeiir/YnwpaUECdKJ8C47ZxcM0sYtotix0VGM6qQu+wAy +rMocnFzZhlk6ZJi0uWBxqoYZxEaTVEs6JhiIcpihild69uBmc5eeLI/DkbJuqHNQtdULb40LW7Un +zwC6IPPw8qM2vuW6Ll95e7CoVHPe45fq9WGzchyb+0vV66NMp/xQ7VyXHyrCcaGevj4tFaP9UqkY +O4OXELRnijLyjY1UlCNORiyWy0fAne17HvG4s+xVvqlnL+N1cXv9y3NDTq++2dTHrm/fM8Xhzu5J +YLdBDNsomH14rbY+5m1AY8FrtTlco6+ERmuRnGFVmtFY+ZCoNmoGu8GrptVbDU0AsK0AAWEnLF5Z +/Z2txkZD+3tfOIRdenv7O714wl0X90hA2AECf5EQdtPra2yjOw3+Y4BH2PGk+/iu7vGNVi4ea1jy +eieJvS72Pr7O1dKsguUqN48+yXyepyy3h+7htS+ZfGrQlQs2pXKy6mykdVG4+NLSrS7G5kgLKXZs +k3JrZcGGJkt7RM2d6TrQHv09VnYZquaoCf4eq29Tl2xyrgiQOrvkVFPO1YZvkrPqErCTN3yTnNXU +OYrCPZapUyTJ+TBlihtHDAYm4SozbeeSeO8bFT9NbZOnYc4V3b1vdpeNkMenRuBhp5wwJ6lL9veM +0BLdNmWaer3U+DklnXQxTyssHcxS2yyazgpLt1ochoSms/IDUKR3o2g6q6FRng/jAE1nNTTXxtF0 +2BzFjaLpiEiujaHpbKLWG0LTWWHpVjghxAZNZ4WlW1EjE9B0Vvs0aFVuFE2HQXBvGE1nlVRgeb7l +Wmg6O8zIZtB0Vlg6LO51ZTSdFZaOsCu6IprOShmpN+RuDE1n1aVlNMe6aDrd/KnSHndjzupoOqv5 +c/k2jaazqsq4w7sJNJ0Vlg6LGVkZTbcexWjRdFQUWxtNZ4WlW4liRDSdFZaOiLFaCU1nZXlaY6vX +QdNZYenM/v76aDqr3RKXfZqjQzSdVQXmE0HXR9NZzbPNzsgKaLrlGeqaT57cAJqO5FdiyeEYTbdM +jK4tst45ms5qQMtnEGGM0vo6DqBOjlnsuH6eODu6CQejkzIiSNdUUgOfvvHAWSvrYr376uisi3Xv +q9PoRGNd0NFpHvJTcITLLu4FMZm2hoUdC0h28gnFTbR0U2d9UR0p055wu5zdFbSmLuGQKaBTjq5d +JnUJ7r5thk7k6KcLo0GMHtEReyqaPKKENzezudhc6yHyK+0uulsPszbKnRDzYahNcrtr7qzuGcGR +f/Vr7nSxC/xFdw6QgdbX3DnMT17xmjsLFOfyRXeOolSHFtfcrRRRdHzNHTrpyO6iu9WwSrqoELLG +7S66Wz3ZY3a2gXOuEkc3LE36IQ3O4mzt07q1fbHZGUUKsO3QDoL4XAUHF9QZLe9Vcq0RkG6NY/hV +GJ05o9k6U8X2gjrrJA5HqDSIMMSnHTpIIoO0QQa0PSdT4onqr9t+M54IHplqPBuKpOoI+z215hcF +sMs2Ox0wlQ2cwkE2FKiMKrxOkQ0FqqLL6CYnNiPJtxHk4/p3TKJabqc2s09ZD5XKc/ls63G4Aq1q +kW+aWBHLvtwl67MFKW9gNwNr28tJE+C3zZ0KCCtzDPvCZnSD3tIIM73uwpJS2q/EH9Ro7UiSgAy7 +y/78/Y20K7r+2QBwk3AjyBTzuccOgAxW2LcGhfigAjLsFpqe9df+Da39bod8XNGcMNVCzuqkr2cT +pwRI9Ti9rdoiuwPVg79cy1mu6o3FDq8DKIPFMgxZLMPb5Qj8isvQyQ13JHwlvONuM3gilKmyofQK +/A13jqzxlW+4W0I+bmIZLt1wt/pNeU7wRMSb8lZfhvpawCK0P59/EzfcqRKG7pCcFW+4oz3VHKKf +Vj+aSpNjT98bA9aCqoxmjsXZg9TA2qdvWq+adNczoPfat6RDfOF52LX2OVeoHhu5SZNzhepZC88p +yTFUDx6Q5mRUllhY2eNzeKMXvC4Pv0W1DGJCcoy4DPOB8NIyzAdsJsK0CEn3vhGWoUMQE0LYvdhc +D7bkaxNAapaxU+N5fXQZNrAyKoS66rZDmYyFMeUDNKuSAsSEKDahOFKLwq+8xzrw1n4lRnB1hRVB +TJZRhXui/+3cMIzKutJoGnY25J8B/clqq3JtjGtPJOMZLc+BJyHCVjqaynJeOpu77rGDNmDtsdU0 +NkxPJJ9P5eymvBgFxtUqdUF/esPyocarYFy1LlGjnkkYVzkCBCeikbFuT7uXByLe6gfX5RFbKsZO +78rb/Gm7fBRqXx9MX0Np8KnWlLB990/VQdx/uFWWFA8K7epix/InAwjv4kiJKFoh4sTt205TH6oy +3sOWLz12MHi4oCUID505jO5hy7P6sZpunGN2zzGNpre9mVbwGQfCe0KN6qw+I/ZvlsA3Wtt+uME2 +6j/pRd9N0DRowcqoriABmtZM4fFwoj+zo90jmDBhHIOBo8exhkY3X3RHvHGOwyP/mOrZftPUKFr7 +CsoxeVF+xWH/uoRGa940vtHa1faDLnJlhuEZoJXmRlsk5N/ZralRJJNV7F/lpmqcVS98GlY/yRDM +xe5BjKpcosQYJAyuJPO6my9Q1BjKT+cVTU2CMXeSy9kd6naNheosEdwnVdER0yb1Jx4AsqaCxv2g +8mYuIUBr/4AMbVqKkODRP5jEKvUWM+pbvkpOTomXN7osbmZp7oibySXXwrn4m1loI0ll+0tQtExI +Gzq17e5uoEalOUutIgDAljI0LU83peMnB1lapNwehLpzcgw/tktoz8JRnhYJdYfL0tLbY3RExx94 +43C9TAl5WnJvlnJjja416ObhriastJu/NuBKgLpPLLcLHcVgXyorBrcsKNaJ2KTC0O5ba+HldXZ5 +Xiq0J9ES4mMbOTCuIu/yrLlJ/FKhiCy7qFCA6x5CK52ktyGvZfmsOGMchqIyY9KIxRYrV8ViZp1J +mOoGfWSuuqnDTiHgTjuFhny0kX0gABCLcBT+5ZV8/hgxaGeMqiS/lxIIRlmBbI+4nKDb7vGnnNGc +EWGAAtqlxFMDycye+Brwoxz+nAMtGgs9C9tOkWLHtta4wVIa5fDJ+mQo4PL8jbx2+H16KKDdnTe6 ++ZPWC55Y9kAdGmZANj+sDHOzsXPOsrpFx3i/mJPKTFplPYrZYnmcUIyQQOB4kMs7l2tQrJF8wvRr +CS5s2OF1jAKkdWat7kqjRwHSYgDxp2rQoABpMYCW9yNTowBpMYCGUwKwLhC2CkoMIHZfjAoFSIsB +pLkjFY8CpMUA4nIV6FCAtBhAe4wVCQXoyEdeGQVIiwFEPjIeBXgs9Wd5VM4u5VvvRjbaqbO5LWtD +l/LBs6HEOfZYgA1dyqdG4X7ppXyWcmzjl/Lp85RWZAGKS/mMUbhfdSmfppF/5aV8K99f6ehSPsL+ +PuxUmmA7o97YnQ0VlaXlZu71MzKp+Va/FZFcS/f6kUPOhLOhHN3rR5RTp5s4Gwre67d+nhLNvX4U +Z0Nt4F4/8q1+9GdDke/1c4Cv3BQWYulWPxwnO73XT+2N5a1+Zs9i1Xv9nKNsVrnXz5ojlFv9rDNV +nN/rRx4axf2VVPf62cUtN3OvH/lWP93tDGvd60eXobruvX4qHNESKavPhVvnXj/y6jV6Savf60dW +dJb22Ar3+lmkKOlu9VOsi5Xh7vK9fhRx/g3c60ebBb3evX4qHNHyVr+V7uNzDMDF3Me37lW2plv9 +iPcmOLjXj5xOZns+P+W9fuQNFV1UYa17/ciempxrzax7r5+hX0u3+mFwr47v9SPv07g2dK+ftbGs +xWGIuAfqe/3sUGkbwz0QbvUz2pY0uAfre/0cr/2V7vUzZ/Ybb/Vb6z4+/HVyzu7jo77Xj3yr3ybQ +HPBeP7yXC3d1XSoXrXevHzmxVclVMOMenN7rRz7Pw3wvz6r3+pkgV6ZFaIEYWuleP1o5tt69fnbW ++Gbu9SMnaTi7j2/V5WO+j28D12JanLO8yukNy5kahKv45FY2c6+fhZdgPlFnA/f6kW/12wwq7d7m +XC1dRsRa9/qRzZxlZP1q9/qRb/Vb4z4+Byhc0n18GwDDy7f6beQ+PlsUrn3OlcW9fo7B8FpMab17 +/Zb3l/S3+ulaWeteP/0yXL7VTy/H1rnXj5zopLNg17rXj+y2Gyi2McyT+VY/p3FLIw== + ]]> + <![CDATA[ + xah8dxq/kvJeP/KtfggBsYF7/bQuWXGE5WnzK9zrpyGr7LGiq9/rZyUKNHVC0MiO7vUjkxLaY5u4 +10+lmCWGdSmiuOK9fivbMI7u9SMDJtGO1Qbu9SMDYvX5luvc60dWDrroqEk9xCxstAeScri8wR5h +arBhDmsfSycqot/woV1y4r0CW0S+GAQuGvhJookWwzo8mOl8Ntlkk5sKGEgQnWpkYWKXfFoXubow ++KINURDi4ocHqJVTT+jxwsvE7kcZqQjEU3m854cnUSYw8cT6j7NkQvg4rR6On3NXN7uByFfQX/wu +MvX3i8L296KY9jxxA2D1gc+vx97s3qKyc3753Up9jzqPmVQ02c+eV++jZ1HBk2rUkq/F1ujmaNA+ +T999XPMXqe/bAP/mvSsEk+XPrevW2Sg/3r+f8keByXc38+0TjifpC8/dxZHfmwjU0i6f7+3x5CS4 ++Nh+TE6f+DyaWoTsPLy5bt96oqGXY0/8/fs2tJ/wHzPV4lmRqb71T5laeqclCK+5gCBm707E7Zd0 +T0z1HpsqEPA6dBCL3EUTjdwWoJgMe/uMCeLTdA/+um0tQxT7CPVh76HRzRX6VzOobNUrIOF9kotX +1rdbOG6cImIhUrl8GrEQOcCA5zuCkPB60FhxI/0IcH6+uX37cH3onQix6k48+b7YHg88A4gkPVWg +oZ5FeJa8eEV6/3yCMImeQvX62sd4+QH4rTk1RiZnpuUDhtYs6SBz2ta+bmhArGlekkaJ9HMw1uMu +G2eDj/TTOdtv3vTOd2Hq3O23QjbpWswAGxplIESx83K81/AIqK+Fr2lDLJzd3XVDldv7OvwE3m2O +o6iV7bDkrh+mOgLyiJjYPACzDLpzScLGUlG/8okNoIgwGGlmAr5mdhGaFwiSkxn4ehBGX4FuehTA +11JU2ROPpaqxaiV+ngXV1plQOexbVAP1kxM27P/oKh09C+of5Oac+iCkf9AI9dUHEe0BlJYvGV59 +FNO/Myu9qw9Y3YNa8RuiBi529b/dBHpK4Yuw/sF7cuDyqY+iECz0xda9xwwU9V62Hqkm4AMWSJjp +iK0fteDXK33dvfcQpOxVWCrS92byskwCAg4yTZHtRw5YxGNXMamB/tEJJNuVXG3/6gZVC6Gq+9uQ +3iGIGUbqxhsPRpLQqr/WESYePDreg63swW3sVnEcfd8tNPtvDZevfHbiaWuMpgb7S0aH1HQSYjEe +rFf3rWq0qk+O89vVeNU4UGsspuZNL197fsi+F9oL77DyMGgycFSsxr/x58XLcWnIxVgm1nkB0lJh +r+ukbujlo4zKLHcRRMB4+aoENdtdTGH7O1B37xneuXbHymZs6g5pzSn8lFA/JeG8wCoqe19p8MOD +XGO3jyb+Iaa8/cCon3TcBtNdh0pvHhL6B+WRt9IffeeY2OgzpY3lQbo2k2GC3iwTH7d9lXAuCBY2 +c+vVh2BeA/JOqTQg7Y8cV5ejcIep56h+vSR2gpeQrM/gT+cuAD+x6qe4VjKxc/6ehL8lLXpzVX29 +7ZTKoWywWq2c32ZlXTn/SjF8L5+WJEw04d3ff612g48PdmpZVuVFYK2FKrJhoUhQTfyLgbvKx9Xh +/tdzsnNf2Xb5XmrB+t64tS8w5oMG5Ik4/ZJFGOiFtFy5rdMgWj5KkdtvyLBRSDtIgicRPo2pLPeE +xpIRkBREeGQEHDZIwXYS1Q2dk295QlPHEQQMh8njwHoK38pClm9m9iXT9u0m/2g8dVbdD3l7OX4y +zyp8AOVmzEJkhiRpqXT5WRbMh6UI7GEg/iz2RsXx1qRqlpaABTK39dLrqDAATuOsKK+sWj4IiX6O +zCpAnSwr0Q7IyCyYtfdLSUYiwQTEY0qWi0j8eY+BL1Y+3Z8yoJ5LBnYgmPDuvReUum/i8DdIu5AJ ++l3Su2FAs+msMCYQ3VOtWhVfqbfC5mlP8OIh5wn1o8fwT9ETjlcvpK/B/Yu8J3z7cuKJxPwtT+hq +awc+bXsihcQh/DPwhM/v656gIIQ9Yc+rH5pxtzq/ckcK8/HNgxBUsj4J8195qn6rBh8SYccV7rUy +Op58x16Pb/2tTuF67zNQPnlMnwKJFtg63j+qRlUz51szumAOiW8aNjoL1I2WhtUdAbR3/308rQud +ajdc3y5cvu83CtflpLf8diW20PJx+UTPs7/MDHyTsiAcPGwjMyFe7l8erdbyVfltZ7adT5TKPTDw +fhcNF8y+/YDBcCcCqLGdNPtskIvglq5fOpVAPpjhfAKXXkSTRGBeGLE8KV42j5+r5VTqlZbUSstP +OYqWZavP1DYT73d3j/eePrrlaOtVKL0dTHpYoluRPFEQPGVz3sWv57HDm+5uxeRDytKyhm5bP/2S +j7qodnWXryeK2UQ2vZ1vtI7zFX5YHAUCV5V6c8gefxdihfLJ11CslsdsEa1EdDt2eQgUU2sOV6U/ +mqwXvtaZaStqA11JQ++j/BVyREKHix2P84EDXelk6JiB2zGadpv85hhNHfjR3uGO6iMDJcvEuO+I +uT+0YnTXv73vCX/PGlCMNqDTewYeRAQoPNuecPAY+GKe4G4x7IlkIy+e4HAMhOvk6gm+zcDiR7BT +XoPyp2MB41J3+Zwu9lWYD0oYqe1b/vj27OCk2p1feyqv6csP6sW+soTZsGyTLVg6UtMPFzIavPE9 +u0COPpj93XdxKe1utUnGjlk+gerw5tZbdr7aaNeay7e2WKcQ6tI+sjMt7lyHo7OhNq9QTCaLQy22 +4nDl9eKc1I6GK+/yYBit6N+MoUbQYqaVJa2rtXnM0l5bTa7MkOek3622CuSVilEmXrkrdi4K4Rlz +XOhfXVTLR6HUaSE8zfvLD9X5c6Gefr04frue7VWE595latx78ZYXXPPyOCbMvcXXi3i7mttOHVZz +3tYArMrn0+363uL9MFyMJoXbuP9ot2aKhSkHcsXQwVZSvEZxD1+Bf53eFiuh4cNH4fr2Ttjjc8II +jN7zkfmutxoVjvOD2a88DLY+EOV1c+CbPpeghRAHTip7Yghe0rbs9QI74vsJzkAXarHSyxOdOSFe +yKeOOW0UcnL6Ll6ORvfvgER/Zo/3TkctB43qjQis9QT8l3UNRwrrST3l7BeoMk3MQAtWsp9WoTct +tZG0XNlm3JCltCElqnji69oPZOtBOUlvI8YyVr4Cm38N1ULviYMOZJqahD389n411pz4JbqT9Yu5 ++ccVYwDA33egVdAxnaeKm3LQMis1GAZChxksYd90u0DC0Xsm/9w8zwHlkT4Gf/aLQFFsX6Cv+/uR ++T7QILUGUDztxnFsfnRWqKduokDd3LbBV6aa35mW8+XtQZr5JfrFTgCAeSEL3NXcVZO4dfkcCNyV +W5bnRW57VioVR/7JUzma8YtWqhWrWP/j6hdrzSZbffSkdjBcIGFm3pCUqyCL3l8ajFH1CxDrkUkk +O8ZGBpw3v3fmLT+Va7WDEdQv5cS3o5l2bkJBye9Uvzpncenetw2FwbAtL6E4fwm3AR5zsrxWHK6t +HFuDx7ThAv3iZHmtuLiMcox2kp0uLioe05bXiosLrBd1ecHtto4+B8yYQIpeDJdbcRjSu/CEHgLH +ntA4WfWEu4NT+NXvCX98PsMI3gXcN9mDob1LT/D1DXgWcEulAksmPJHTXOeXhP6AHNtwtN3KuHFt +PE6xfpx/VWddjvOv6amu6COvEaewGjhohcKiXNeJQWdBrxp+pW7eQQx25bD/QWsD8TEKjod74stt +b3Di0bTbeq9kV+IXxmDtvTcpPgaWVKC+WnxsMhOq10fJe+SQVHNbi4zJV7HyVLRWaNe5P1Aaeh6D +tEpGn9cX2h+m7+SsjXtuvoLPyvr5eekj88zbxGA16fYdkrPwUl93j9c7bZihkJcTPx2bGEet3SfI +YzefL1SGHPpU7XrAp72wFB/SBUFJ3IZO0DWze6HaHY13q4Ux90mxutEnUEuoKnoOnpXkVO5bd7UC +ylT5lRMv25a/eOJ1uzy/cOLRtAP98msnHk071Pu/dOLRtMtndf66iUfTLvkvv3Di0WTLSK5fN/Fo +2l2+XzzxZv2yyYmXDfv5UUjBvGMyqNTse5h1rbtYQzeCoIGV2Jn+tVFu15xpnzJ7EVp2szH3Gem4 +0EG7MlAM4/6OvimkSffP7jRNGi9d95J6bDX6dfs7vThXqnj1matY9JrfOht05yF+qhsB+s1z0PlS +vdMb0708aM47+nDwTmpaNVeROHnUqmhLzCBDiQBFUPKblB5d7frjwa9iBkIHAkDy117eGcgJQflX +7ntX/m20FYK5eSk1c2+w5CDBMaP7idSLeHaP73Y5xBbgQRSm/TankrSU7ugxYBzCAXnp7n21DHf1 +KGt6b3xzATu6BR90jLckBbR5ufdMYxXlviSh2HlUV+VHoOdtPbHcVrIGs/ONUik6VSi28MBGPRIp +k+LjjrKu0NVMuW2tN0bMSC8+VYhwnNARwbfveVWIkIwhIqi9GenO3EWX3EgkKIttlQRPKEKiEmHx +eKkSwXRVVNhEBCsSJI6vAgGZBNzRpUkjowM9kTQJPmlEkKcEQwR9dg57Ksq8XwyeqSSoP0e3Pm8Q +CVw+jROs+EA6x0xi4szlSCZCfMHqSdC/PMfxgV+JXUj9jr9fWbMSsQodL5IqgFoMU4V0GdAafZAu +6FBsmFVWBEz2rYVo+4By4Zaq0LPkSsOQzpFWeUi9+cvBMKDUiTrqA1ov+ioS3twotg5TWXElpBh9 +FQFJ71usbvLa1p2qEdDzpYMqtAr0XLmahAlofGmsgoYjpJhSQM+X2Cr0fTCTUuNKq+lU1v5RfjRR +qtj1mavQ8eUqjB1ApwE75EtTFRpXYukAxkJUehpfMvVyu6fe+zYxlgtqzMdUr4tqXzvPZh4LUvEY +YVRBrOQz8hixCgyP0fC5xGNBjcdWW/FBsuRTeIxchY7HVlmuQT2PrTgMHI89GXmM1AsKjezxl5+u +5Ari4ouxgl2jRl6FErsaV5L7oGrk5V5gZR9tH4waeZUVv0vDlarYQhrZLLh219XIu3KYXfkKeWye +P9V+SHjzpTPJP+M/eWit1sNmCHHkNPcAN08e4JZJ3RO+DIaRpw3B8AMJsCM5gMqVjLp4ckiC5+yW +2D0ZZVPtqvjK5lTBlbVnbPj9/RC5sDLkc7QVRe8Cnv6aQ5RNTEIy8Vw3gD6B2YdH4sEuB6X23vzf +0K+uh+Sv+QC0POsR+WsjKVfxdpOfK2CoE0YFoz4zdW6ek7t5mAmiBy6fhFvSjeDwIKS9w3Le0oHy +oBTRHsSLDzdHyoOTmPZADzk6vGR1rbzIQbLawa5a/EXfcq0U1j3QtVw7iUKODwEh9BRCwCYgSz4X +4EGLlXBORzeeBVwvzWOt7i46Vwv8VkUwWcjzfBHZ5TBQkIXuYxYw8aUAilzGYANh0MC3F3y9QdXu +SpMTaz4mYuftEfSCrkMINaAAQQc7UeCadhoaYV6VVlDI5yFSjnH7O/n3if+mul9Jfg== + ]]> + <![CDATA[ + mmIXEOJ/tXSqTbyRQ+cqTEpr12MIQAVPs1e5bK167OevyyeDA498FgEYwT2r4jnjeijruLsts1KH +S6qD5PSs1LtEYLew7IT3bmIyi/fuGbbXOAnCeek9sjIesPcSP8ydAOcy1uMSyqdBElWBphGsjRaq +MYLODwFf72Pyu6NHRvn0wqq96cX9Rw3g8cn9GQ0SukcvnkQXAiHP4q/n3z4F9PmV1u368i/Bt9JH +unpZHGe3s7roymF1MUZxHQVBCE8FlD5LZ2koB68wsfl9VG20L7PF/IVha+xxAHziWOXTIK6VA+Kv +BcY3/0yaegPG8pGa31Z3g4d7mdvI1nn19dyXQ1IpsdMVM8xpLQSxf89pOYBxz0j7nsZNCL8snQpZ +5EgGFeBlc6rixO9HkggDjP8iSlJpuNXcUaWSqAiSqOT9yEsqlZRMI8Dsx/BrPsTWvZ+HknxVAZzg +jVsGRRTrUXQoBjy3PIrYlK29ROExTfUY5kCuOqPCmHd0h2sdpiBWdH74zYaZyasKp9yVZTIbLvlm +cpcPj8MSCFOiMhBSTKp3BveAzqJGrDojoyYVcaUIq9MjeXaBxELjQ2O5CKHFJ6HHwTCgEL6IwLtC +BLY2y0MlcxFT4Z08kFQDEUkqrW6Zz4GwUvK4xX9y6Mpkc0l3Ns3G3bHWYswLl8LwfThxh117rljh +hGVvJoNpVeD5a/6PeXnaX3zxk7k7744V2qWTk2yqzPenAx4Uh518zagSIiIPQmZr/TEfhmiiBAUv +v+Vqo/p264ArvzGdQ3PGgn92/Q0TE+ouH1SXPpiE8ChBOgN1MQy/dqRQiwQvtjxsAgmj3e0yLxQX +ldB5486EY0dRllxQGLMuXz0+q2XLD5XrdOXueDHP74w/a3tHbDZaDH7ttEvPJ+Ny5fE1xKEDGaGO +NpwHpKKbVZCyFbrZ5ZPwzQedj5uDrW/mQIduVmHRktV2WLtDzm9Ax0GVl/y+LHsu+YnMffejSLxb +H4QR7ktW6PA+CiTZJMgu4IKtKLInlROrtv3yMMD6kiDO6vqSDnqQWDl1HJG+Pou8dAKEivc+g4cL +vRxrpy/oO2pcMvoHJZ96BMOZ/giG8A07UB9EjYc/vB+86eDM2jsR78mHemhDUMYqN7bU0yUu9KdL +gPWjHhhwEdE/mOWlYxkuVJT/BSOfAJFupDStv7bOh0k7tlp/bZ0vuXJKnF7S1uopZcpRZZreptT+ +5vpc+BrJloAjOwCYc6tZAo7sAEixlSwBR3aAPv3MkSXgyA6AmxErWQKO7ABoZkNLgHwijrJ1kscp +AknUl4KN6XXp5vS9w3R2vprM7Xv5HaWS6QIs8gacNBEHHclxAYuhgGTkrrJw2zO5CITAysfeJAPa +sTfqSTV+pNqh3xOSzIYgWvF6z6czjcqi8NjzjCYU+mlh5EnGnxf7J7Hh/TwqWQzDcD6ETr0APknl +1OokNHhRxe3FmWlW4aMb+ewJxVGS3STE2MBDUrp8Jh/GAAQlHMuZpvgHmocEOfmwwajmh+lEnLR6 +ssOuOj5oXj0VFPOjFJZ+g4eaIm9I8oGAQfaJTpeAR+HI0lJft3YiDs0BXcpWI3GjcUfeIF57q5G8 +0eja0FYjeaPRsOG1xlYjeaNRCnytv9VI3mhcdWPFvNVI3mhEG14b2GokbzTKm6prbzVSb0astdVI +3mh0+Taz1UjmAyjHNrHVSI7FweDqJrYayRuN62136sPtpPVA2u50stVI3mhcNbhq3mokL2vMduea +WzrmjUZ1u3PNrUZyBebtzlW3GskbjRLF1t9qpN/uXGerkbzRiN/udLbVSN5olLc7195qJHMlzVYU +zVYjWeXppeU6W43kjUYLHltpq5FcgX67c52tRvJGI/125zpbOvJ259pbjeSNRqrtToqtRrvtzs1s +Na613Um91UjeaFxvu1PPlaslIDnbaiRvNK683WnaaiRvNEre6/pbjXLgAbPRqB2Out5WI3mjEUYU +N7HVSN5ohBtem9hqJG80qptEK201Qmc9SHHOLBgL7qTZ0ObOmQV+Je6k2Q2eM+vyrVcj3TmzYL3g +Tprd4DmzLvxJsxs8Zxa0gjtpdoPnzLrwJ81u8JxZlw970uzSObPwIPjVAoMuZ6HBFQODEGrqIDS4 +YmBQO0yYKjS4YmBQ3binCw1SBAb/yaELSEe4zditTAb6LUaXzwd+afPzxQwWSHWL/Ptw0uB+8IKL +dUv/MOAf+DeTc7PxrDueSoEvKfhro+cK/PzzX/386z/7+Sf4/791s0F3Y+LydWMFYV4e9ufD6YQT +frjz8Kf788bNSdmddxte6YJX9twB0DemC14CJYJwl7ML+tt1Me4C+Pf+dxcjdwN8+QG+nIIPn+Cn +390s4z53Pz4z7gEs2JLGUB2O+bxuOC1OnIPxBGI3Ii+IMf6dEz+GAgf+nY64vyxifVH8/T0y58V5 +rD+dzIVhbzGfgoLz+e9v3fl09GMK32FzmVxMXMxmU2EeY/9gI+8Cz0+is8l7EPar5oqV+d+Gfb5V +K7rvL1yPCuWiiUzKHWGiOSaTYVPubDIejTMJ1v0sE/f+g6asNAnSP1l3Qv7GuJPgH/AMzCMaapmb +c3l32nV/8l/9zX/zN2hy4U8utH8A6AG+y9S4sJ6mABNl0P+C7lgbkGLy7g4Ui4U+YJfWdM7BoroJ +ahTVahHPRCKgI03unb8WODAJgutd5H7j3dxkAt/lZ+CJG5BNBOTl3eLH9Hf4C3hFKQ46fFl1/QcR +k0mN + ]]> +</i:pgf> +</svg> diff --git a/testing/web-platform/tests/css/css-images/support/1x1-lime.png b/testing/web-platform/tests/css/css-images/support/1x1-lime.png Binary files differnew file mode 100644 index 0000000000..cb397fb090 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/1x1-lime.png diff --git a/testing/web-platform/tests/css/css-images/support/1x1-maroon.png b/testing/web-platform/tests/css/css-images/support/1x1-maroon.png Binary files differnew file mode 100644 index 0000000000..3f86b07219 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/1x1-maroon.png diff --git a/testing/web-platform/tests/css/css-images/support/1x1-navy.png b/testing/web-platform/tests/css/css-images/support/1x1-navy.png Binary files differnew file mode 100644 index 0000000000..9b9a03955b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/1x1-navy.png diff --git a/testing/web-platform/tests/css/css-images/support/1x1-red.png b/testing/web-platform/tests/css/css-images/support/1x1-red.png Binary files differnew file mode 100644 index 0000000000..6bd73ac101 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/1x1-red.png diff --git a/testing/web-platform/tests/css/css-images/support/1x1-white.png b/testing/web-platform/tests/css/css-images/support/1x1-white.png Binary files differnew file mode 100644 index 0000000000..dd43faec54 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/1x1-white.png diff --git a/testing/web-platform/tests/css/css-images/support/60x60-gg-rr.png b/testing/web-platform/tests/css/css-images/support/60x60-gg-rr.png Binary files differnew file mode 100644 index 0000000000..84f5b2a4f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/60x60-gg-rr.png diff --git a/testing/web-platform/tests/css/css-images/support/60x60-green.png b/testing/web-platform/tests/css/css-images/support/60x60-green.png Binary files differnew file mode 100644 index 0000000000..b3c8cf3eb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/60x60-green.png diff --git a/testing/web-platform/tests/css/css-images/support/a-green.css b/testing/web-platform/tests/css/css-images/support/a-green.css new file mode 100644 index 0000000000..b0dbb071d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/testing/web-platform/tests/css/css-images/support/b-green.css b/testing/web-platform/tests/css/css-images/support/b-green.css new file mode 100644 index 0000000000..a0473f5ca2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/b-green.css @@ -0,0 +1 @@ +.b { color: green; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-images/support/blue-green-red-yellow-50x100.svg b/testing/web-platform/tests/css/css-images/support/blue-green-red-yellow-50x100.svg new file mode 100644 index 0000000000..325c39362c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/blue-green-red-yellow-50x100.svg @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" + width="50px" height="100px" viewBox="0 0 50 100"> + <rect x="0" y="0" width="25px" height="50px" style="fill: blue"/> + <rect x="25px" y="0" width="25px" height="50px" style="fill: green"/> + <rect x="0" y="50px" width="25px" height="50px" style="fill: red"/> + <rect x="25px" y="50px" width="25px" height="50px" style="fill: yellow"/> +</svg> diff --git a/testing/web-platform/tests/css/css-images/support/blue-green-red-yellow-no-size.svg b/testing/web-platform/tests/css/css-images/support/blue-green-red-yellow-no-size.svg new file mode 100644 index 0000000000..0e0f955c29 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/blue-green-red-yellow-no-size.svg @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"> + <rect width="100%" height="100%" fill="grey"/> + <rect x="0" y="0" width="25px" height="50px" style="fill: blue"/> + <rect x="25px" y="0" width="25px" height="50px" style="fill: green"/> + <rect x="0" y="50px" width="25px" height="50px" style="fill: red"/> + <rect x="25px" y="50px" width="25px" height="50px" style="fill: yellow"/> +</svg> diff --git a/testing/web-platform/tests/css/css-images/support/c-red.css b/testing/web-platform/tests/css/css-images/support/c-red.css new file mode 100644 index 0000000000..d4ba5c64e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/c-red.css @@ -0,0 +1 @@ +.c { color: red; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-images/support/cat.png b/testing/web-platform/tests/css/css-images/support/cat.png Binary files differnew file mode 100644 index 0000000000..85dd732481 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/cat.png diff --git a/testing/web-platform/tests/css/css-images/support/colors-16x8-noSize.svg b/testing/web-platform/tests/css/css-images/support/colors-16x8-noSize.svg new file mode 100644 index 0000000000..db715d875e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/support/colors-16x8-parDefault.svg b/testing/web-platform/tests/css/css-images/support/colors-16x8-parDefault.svg new file mode 100644 index 0000000000..1b0bca0737 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/support/colors-16x8.png b/testing/web-platform/tests/css/css-images/support/colors-16x8.png Binary files differnew file mode 100644 index 0000000000..bd23845871 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/colors-16x8.png diff --git a/testing/web-platform/tests/css/css-images/support/colors-16x8.svg b/testing/web-platform/tests/css/css-images/support/colors-16x8.svg new file mode 100644 index 0000000000..08e3659402 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/support/colors-8x16-noSize.svg b/testing/web-platform/tests/css/css-images/support/colors-8x16-noSize.svg new file mode 100644 index 0000000000..e741537b93 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/support/colors-8x16-parDefault.svg b/testing/web-platform/tests/css/css-images/support/colors-8x16-parDefault.svg new file mode 100644 index 0000000000..ec8c59dcbd --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/support/colors-8x16.png b/testing/web-platform/tests/css/css-images/support/colors-8x16.png Binary files differnew file mode 100644 index 0000000000..596fdb389d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/colors-8x16.png diff --git a/testing/web-platform/tests/css/css-images/support/colors-8x16.svg b/testing/web-platform/tests/css/css-images/support/colors-8x16.svg new file mode 100644 index 0000000000..c336e3af1b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/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/testing/web-platform/tests/css/css-images/support/exif-orientation-6-ru.jpg b/testing/web-platform/tests/css/css-images/support/exif-orientation-6-ru.jpg Binary files differnew file mode 100644 index 0000000000..08d03f0a53 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/exif-orientation-6-ru.jpg diff --git a/testing/web-platform/tests/css/css-images/support/import-green.css b/testing/web-platform/tests/css/css-images/support/import-green.css new file mode 100644 index 0000000000..537104e663 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/import-green.css @@ -0,0 +1 @@ +.import { color: green; } diff --git a/testing/web-platform/tests/css/css-images/support/import-red.css b/testing/web-platform/tests/css/css-images/support/import-red.css new file mode 100644 index 0000000000..9945ef4711 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/import-red.css @@ -0,0 +1 @@ +.import { color: red; } diff --git a/testing/web-platform/tests/css/css-images/support/intrinsic-size.jpg b/testing/web-platform/tests/css/css-images/support/intrinsic-size.jpg Binary files differnew file mode 100644 index 0000000000..b634fd1821 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/intrinsic-size.jpg diff --git a/testing/web-platform/tests/css/css-images/support/intrinsic-size.png b/testing/web-platform/tests/css/css-images/support/intrinsic-size.png Binary files differnew file mode 100644 index 0000000000..833e6e36cd --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/intrinsic-size.png diff --git a/testing/web-platform/tests/css/css-images/support/pattern-grg-rgr-grg.png b/testing/web-platform/tests/css/css-images/support/pattern-grg-rgr-grg.png Binary files differnew file mode 100644 index 0000000000..6fcfeb4883 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/pattern-grg-rgr-grg.png diff --git a/testing/web-platform/tests/css/css-images/support/pattern-grg-rrg-rgg.png b/testing/web-platform/tests/css/css-images/support/pattern-grg-rrg-rgg.png Binary files differnew file mode 100644 index 0000000000..fcf4f3fd7d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/pattern-grg-rrg-rgg.png diff --git a/testing/web-platform/tests/css/css-images/support/pattern-rgr-grg-rgr.png b/testing/web-platform/tests/css/css-images/support/pattern-rgr-grg-rgr.png Binary files differnew file mode 100644 index 0000000000..db8ed5cf7b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/pattern-rgr-grg-rgr.png diff --git a/testing/web-platform/tests/css/css-images/support/pattern-tr.png b/testing/web-platform/tests/css/css-images/support/pattern-tr.png Binary files differnew file mode 100644 index 0000000000..8b4b25364e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/pattern-tr.png diff --git a/testing/web-platform/tests/css/css-images/support/ruler-h-50%.png b/testing/web-platform/tests/css/css-images/support/ruler-h-50%.png Binary files differnew file mode 100644 index 0000000000..cf2eea6b43 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/ruler-h-50%.png diff --git a/testing/web-platform/tests/css/css-images/support/ruler-h-50px.png b/testing/web-platform/tests/css/css-images/support/ruler-h-50px.png Binary files differnew file mode 100644 index 0000000000..9f46583665 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/ruler-h-50px.png diff --git a/testing/web-platform/tests/css/css-images/support/ruler-v-100px.png b/testing/web-platform/tests/css/css-images/support/ruler-v-100px.png Binary files differnew file mode 100644 index 0000000000..a837eca222 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/ruler-v-100px.png diff --git a/testing/web-platform/tests/css/css-images/support/ruler-v-50px.png b/testing/web-platform/tests/css/css-images/support/ruler-v-50px.png Binary files differnew file mode 100644 index 0000000000..8414102802 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/ruler-v-50px.png diff --git a/testing/web-platform/tests/css/css-images/support/small-border.png b/testing/web-platform/tests/css/css-images/support/small-border.png Binary files differnew file mode 100644 index 0000000000..0e978c5922 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/small-border.png diff --git a/testing/web-platform/tests/css/css-images/support/square-purple.png b/testing/web-platform/tests/css/css-images/support/square-purple.png Binary files differnew file mode 100644 index 0000000000..0f522d7872 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/square-purple.png diff --git a/testing/web-platform/tests/css/css-images/support/square-teal.png b/testing/web-platform/tests/css/css-images/support/square-teal.png Binary files differnew file mode 100644 index 0000000000..e567f51b91 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/square-teal.png diff --git a/testing/web-platform/tests/css/css-images/support/square-white.png b/testing/web-platform/tests/css/css-images/support/square-white.png Binary files differnew file mode 100644 index 0000000000..5853cbb238 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/square-white.png diff --git a/testing/web-platform/tests/css/css-images/support/support/swatch-green.png b/testing/web-platform/tests/css/css-images/support/support/swatch-green.png Binary files differnew file mode 100644 index 0000000000..1caf25c992 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/support/swatch-green.png diff --git a/testing/web-platform/tests/css/css-images/support/support/swatch-red.png b/testing/web-platform/tests/css/css-images/support/support/swatch-red.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/support/swatch-red.png diff --git a/testing/web-platform/tests/css/css-images/support/swatch-blue.png b/testing/web-platform/tests/css/css-images/support/swatch-blue.png Binary files differnew file mode 100644 index 0000000000..bf2759634d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/swatch-blue.png diff --git a/testing/web-platform/tests/css/css-images/support/swatch-green.png b/testing/web-platform/tests/css/css-images/support/swatch-green.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/swatch-green.png diff --git a/testing/web-platform/tests/css/css-images/support/swatch-lime.png b/testing/web-platform/tests/css/css-images/support/swatch-lime.png Binary files differnew file mode 100644 index 0000000000..55fd7fdaed --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/swatch-lime.png diff --git a/testing/web-platform/tests/css/css-images/support/swatch-orange.png b/testing/web-platform/tests/css/css-images/support/swatch-orange.png Binary files differnew file mode 100644 index 0000000000..d3cd498b52 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/swatch-orange.png diff --git a/testing/web-platform/tests/css/css-images/support/swatch-red.png b/testing/web-platform/tests/css/css-images/support/swatch-red.png Binary files differnew file mode 100644 index 0000000000..1caf25c992 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/swatch-red.png diff --git a/testing/web-platform/tests/css/css-images/support/swatch-white.png b/testing/web-platform/tests/css/css-images/support/swatch-white.png Binary files differnew file mode 100644 index 0000000000..1a7d4323d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/swatch-white.png diff --git a/testing/web-platform/tests/css/css-images/support/swatch-yellow.png b/testing/web-platform/tests/css/css-images/support/swatch-yellow.png Binary files differnew file mode 100644 index 0000000000..1591aa0e2e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/swatch-yellow.png diff --git a/testing/web-platform/tests/css/css-images/support/test-bl.png b/testing/web-platform/tests/css/css-images/support/test-bl.png Binary files differnew file mode 100644 index 0000000000..904e24e996 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/test-bl.png diff --git a/testing/web-platform/tests/css/css-images/support/test-br.png b/testing/web-platform/tests/css/css-images/support/test-br.png Binary files differnew file mode 100644 index 0000000000..f413ff5c1a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/test-br.png diff --git a/testing/web-platform/tests/css/css-images/support/test-inner-half-size.png b/testing/web-platform/tests/css/css-images/support/test-inner-half-size.png Binary files differnew file mode 100644 index 0000000000..e473bf80ef --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/test-inner-half-size.png diff --git a/testing/web-platform/tests/css/css-images/support/test-outer.png b/testing/web-platform/tests/css/css-images/support/test-outer.png Binary files differnew file mode 100644 index 0000000000..82eeace7fc --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/test-outer.png diff --git a/testing/web-platform/tests/css/css-images/support/test-tl.png b/testing/web-platform/tests/css/css-images/support/test-tl.png Binary files differnew file mode 100644 index 0000000000..f6ac0ef7e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/test-tl.png diff --git a/testing/web-platform/tests/css/css-images/support/test-tr.png b/testing/web-platform/tests/css/css-images/support/test-tr.png Binary files differnew file mode 100644 index 0000000000..59843ae54b --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/test-tr.png diff --git a/testing/web-platform/tests/css/css-images/support/testHelper.js b/testing/web-platform/tests/css/css-images/support/testHelper.js new file mode 100644 index 0000000000..e2806336e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/support/testHelper.js @@ -0,0 +1,30 @@ +function paintCanvases() { + for (let canvas of document.getElementsByTagName("canvas")) { + canvas.width = 50; + canvas.height = 100; + + let ctx = canvas.getContext("2d"); + ctx.fillStyle = 'blue'; + ctx.fillRect(0, 0, 25, 50); + + ctx.fillStyle = 'green'; + ctx.fillRect(25, 0, 25, 50); + + ctx.fillStyle = 'red'; + ctx.fillRect(0, 50, 25, 50); + + ctx.fillStyle = 'yellow'; + ctx.fillRect(25, 50, 50, 50); + } +} + +function populateElements(imageSource) { + let images = document.getElementsByTagName("img"); + for (var i = 0; i < images.length; i++) + images[i].src = imageSource; + + paintCanvases(); + + for (let video of document.getElementsByTagName("video")) + video.poster = "support/exif-orientation-6-ru.jpg"; +} diff --git a/testing/web-platform/tests/css/css-images/tiled-conic-gradients-ref.html b/testing/web-platform/tests/css/css-images/tiled-conic-gradients-ref.html new file mode 100644 index 0000000000..95a4122bc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tiled-conic-gradients-ref.html @@ -0,0 +1,29 @@ +<!doctype html> +<meta charset="utf-8"> +<style> + .bar { + width: 200px; + height: 40px; + } + .box { + display: inline-block; + width: 40px; + height: 40px; + background-image: conic-gradient(black 0 25%, white 0 50%, black 0 75%, white 0); + } +</style> +<div class="bar"> + <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> +</div> +<div class="bar"> + <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> +</div> +<div class="bar"> + <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> +</div> +<div class="bar"> + <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> +</div> +<div class="bar"> + <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> +</div> diff --git a/testing/web-platform/tests/css/css-images/tiled-conic-gradients.html b/testing/web-platform/tests/css/css-images/tiled-conic-gradients.html new file mode 100644 index 0000000000..22f9f4b6ba --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tiled-conic-gradients.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Checkerboard using conic gradients</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-size"> +<meta name="assert" content="Gradients are correctly repeated."> +<link rel="match" href="tiled-conic-gradients-ref.html"> +<style> + #gradient { + width: 200px; + height: 200px; + background-color: red; + background-size: 20% 20%; + background-image: conic-gradient(black 0 25%, white 0 50%, black 0 75%, white 0); + } +</style> +<div id="gradient"></div> diff --git a/testing/web-platform/tests/css/css-images/tiled-gradients-ref.html b/testing/web-platform/tests/css/css-images/tiled-gradients-ref.html new file mode 100644 index 0000000000..a6fa41214e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tiled-gradients-ref.html @@ -0,0 +1,29 @@ +<!doctype html> +<html> + <head> + <meta charset="utf-8"> + <style> + .bar { + width: 400px; + height: 100px; + } + .box { + display: inline-block; + width: 100px; + height: 100px; + border: 0px; + background-image: linear-gradient(to bottom left, red 50%, transparent 50%); + } + + </style> + </head> + <body> + <div class="bar"> + <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> + </div> + <div class="bar"> + <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-images/tiled-gradients.html b/testing/web-platform/tests/css/css-images/tiled-gradients.html new file mode 100644 index 0000000000..fdafa1fe99 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tiled-gradients.html @@ -0,0 +1,23 @@ +<!doctype html> +<html> + <head> + <meta charset="utf-8"> + <title>Eight Red Triangles on White Ground (with gradients)</title> + <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-size"> + <meta name="assert" content="Gradients are correctly repeated."> + <meta name="fuzzy" content="0-255; 0-564"> + <link rel="match" href="tiled-gradients-ref.html"> + <style> + #gradient { + width: 400px; + height: 200px; + background-size: 25% 50%; + background-image: linear-gradient(to bottom left, red 50%, transparent 50%); + } + </style> + </head> + <body> + <div id="gradient"></div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-images/tiled-radial-gradients-ref.html b/testing/web-platform/tests/css/css-images/tiled-radial-gradients-ref.html new file mode 100644 index 0000000000..30046e4f2c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tiled-radial-gradients-ref.html @@ -0,0 +1,40 @@ +<!doctype html> +<html> + <head> + <meta charset="utf-8"> + <style> + body { + margin: 0px; + } + + #outer { + position: absolute; + width: 600px; + height: 200px; + background-color: aquamarine; + } + + #left, #right { + position: absolute; + width: 300px; + height: 200px; + background-image: radial-gradient(closest-side, red 40%, transparent 40%) + + } + #left { + left: 80px; + } + + #right { + left: 380px; + } + </style> + </head> + <body> + <div id="outer"> + <div id="left"></div> + <div id="right"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-images/tiled-radial-gradients.html b/testing/web-platform/tests/css/css-images/tiled-radial-gradients.html new file mode 100644 index 0000000000..f644a6e294 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tiled-radial-gradients.html @@ -0,0 +1,30 @@ +<!doctype html> +<html> + <head> + <meta charset="utf-8"> + <title>Two Ellipses with Custom Placement (with gradients)</title> + <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-size"> + <meta name="assert" content="Gradients are correctly repeated."> + <link rel="match" href="tiled-radial-gradients-ref.html"> + <meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-8009"> + <style> + body { + margin: 0px; + } + #gradient { + position: absolute; + width: 600px; + height: 200px; + left: 0px; + margin: 0px; + background-color: aquamarine; + background-image: radial-gradient(closest-side, red 40%, transparent 40%); + background-size: 300px 200px; + background-position: 80px 0px; + } + </style> + </head> + <body> + <div id="gradient"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/tools/generate-object-fit-and-position-canvas-tests.sh b/testing/web-platform/tests/css/css-images/tools/generate-object-fit-and-position-canvas-tests.sh new file mode 100644 index 0000000000..aeeee5284c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/generate-object-fit-and-position-canvas-tests.sh @@ -0,0 +1,71 @@ +#!/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 the parent directory. + +# 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/testing/web-platform/tests/css/css-images/tools/generate-object-fit-png-tests.sh b/testing/web-platform/tests/css/css-images/tools/generate-object-fit-png-tests.sh new file mode 100644 index 0000000000..af20d0212a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/generate-object-fit-png-tests.sh @@ -0,0 +1,108 @@ +#!/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 title to the top of our reftest manifest: +echo "# 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/testing/web-platform/tests/css/css-images/tools/generate-object-fit-svg-tests.sh b/testing/web-platform/tests/css/css-images/tools/generate-object-fit-svg-tests.sh new file mode 100644 index 0000000000..c4d51877e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/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/testing/web-platform/tests/css/css-images/tools/generate-object-position-png-tests.sh b/testing/web-platform/tests/css/css-images/tools/generate-object-position-png-tests.sh new file mode 100644 index 0000000000..4763fabf7f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/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/testing/web-platform/tests/css/css-images/tools/generate-object-position-svg-tests.sh b/testing/web-platform/tests/css/css-images/tools/generate-object-position-svg-tests.sh new file mode 100644 index 0000000000..e00385a474 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/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/testing/web-platform/tests/css/css-images/tools/generate_object_view_box_tests.py b/testing/web-platform/tests/css/css-images/tools/generate_object_view_box_tests.py new file mode 100644 index 0000000000..452e87bab1 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/generate_object_view_box_tests.py @@ -0,0 +1,63 @@ +import os +import sys + +HERE = os.path.abspath(os.path.dirname(__file__)) + +def generate_file(source, destination, tag, name, image_source): + with open(os.path.join(HERE, source)) as file: + lines = file.read() + + replaced_lines = lines.replace('__TAG__', + tag).replace('__NAME__', name).replace( + '__IMAGE_SOURCE__', image_source) + replaced_lines = '<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->\n' + replaced_lines + with open(os.path.join(HERE, destination), "w") as new_file: + new_file.write(replaced_lines) + + +def generate_for_object_fit(object_fit): + names = ['img', 'svg', 'canvas', 'video'] + tags = ['img', 'img', 'canvas', 'video'] + image_sources = [ + 'support/exif-orientation-6-ru.jpg', + 'support/blue-green-red-yellow-50x100.svg', '', '' + ] + + for i in range(len(names)): + source = f'object-view-box-fit-{object_fit}-template.html' + destination = f'../object-view-box-fit-{object_fit}-{names[i]}.html' + generate_file(source, destination, tags[i], names[i], image_sources[i]) + + source = f'object-view-box-fit-{object_fit}-ref-template.html' + destination = f'../object-view-box-fit-{object_fit}-{names[i]}-ref.html' + generate_file(source, destination, tags[i], names[i], image_sources[i]) + + +def generate_for_writing_mode(): + names = ['img', 'svg', 'canvas', 'video'] + tags = ['img', 'img', 'canvas', 'video'] + image_sources = [ + 'support/exif-orientation-6-ru.jpg', + 'support/blue-green-red-yellow-50x100.svg', '', '' + ] + + for i in range(len(names)): + source = 'object-view-box-writing-mode-template.html' + destination = f'../object-view-box-writing-mode-{names[i]}.html' + generate_file(source, destination, tags[i], names[i], image_sources[i]) + + source = 'object-view-box-writing-mode-ref-template.html' + destination = f'../object-view-box-writing-mode-{names[i]}-ref.html' + generate_file(source, destination, tags[i], names[i], image_sources[i]) + + +def main(): + object_fit_types = ['fill', 'cover', 'contain', 'none'] + for object_fit in object_fit_types: + generate_for_object_fit(object_fit) + + generate_for_writing_mode() + + +if __name__ == '__main__': + sys.exit(main()) diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-ref-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-ref-template.html new file mode 100644 index 0000000000..2f11249570 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-ref-template.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:contain (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset { + position: relative; + top: -25px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_position { + position: relative; + top: -50px; +} + +.container_view_box_subset_with_scaling { + width: 100px; + height: 200px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_scaling { + position: relative; + top: 25px; + left: 25px; + width: 100px; + height: 200px; +} +</style> +<div class="container_view_box_subset"> + <__TAG__ class="view_box_subset"></__TAG__> +</div> +<div class="container_view_box_subset_with_position"> + <__TAG__ class="view_box_subset_with_position"></__TAG__> +</div> +<div class="container_view_box_subset_with_scaling"> + <__TAG__ class="view_box_subset_with_scaling"></__TAG__> +</div> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-template.html new file mode 100644 index 0000000000..f874e65b88 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-template.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:contain</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-contain-__NAME__-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + width: 50px; + height: 100px; + background-color: grey; + margin: 5px; +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + width: 50px; + height: 100px; + background-color: grey; + margin: 5px; + + object-position: 0% 0%; + background-color: grey; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + background-color: grey; + margin: 5px; + + width: 100px; + height: 200px; + object-position: 25px 125px; +} +</style> +<__TAG__ class="view_box_subset"></__TAG__> +<__TAG__ class="view_box_subset_with_position"></__TAG__> +<__TAG__ class="view_box_subset_with_scaling"></__TAG__> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-ref-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-ref-template.html new file mode 100644 index 0000000000..2e830c0bae --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-ref-template.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:contain (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 40px; + height: 50px; + overflow: hidden; + display: inline-block; +} +.view_box_subset { + width: 50px; + height: 100px; + position: relative; + left: -5px; + top: -50px; +} + +.container_view_box_subset_with_position { + width: 40px; + height: 50px; + overflow: hidden; + display: inline-block; +} +.view_box_subset_with_position { + width: 50px; + height: 100px; + position: relative; + top: -50px; +} + +.container_view_box_subset_with_scaling { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset_with_scaling { + width: 100px; + height: 200px; + position: relative; + left: -25px; + top: -100px; +} +</style> +<div class="container_view_box_subset"> + <__TAG__ class="view_box_subset"></__TAG__> +</div> +<div class="container_view_box_subset_with_position"> + <__TAG__ class="view_box_subset_with_position"></__TAG__> +</div> +<div class="container_view_box_subset_with_scaling"> + <__TAG__ class="view_box_subset_with_scaling"></__TAG__> +</div> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-template.html new file mode 100644 index 0000000000..85664a20b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-template.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:contain</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-cover-__NAME__-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + width: 40px; + height: 50px; + margin: 5px; +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + width: 40px; + height: 50px; + margin: 5px; + object-position: 0% 0%; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + margin: 5px; + width: 50px; + height: 100px; + /* The top row of pixels can have minor differences due to mismatch in order + of clipping and scaling operations */ + clip-path: inset(1px 0px 0px 0px); +} +</style> +</body> +<__TAG__ class="view_box_subset"></__TAG__> +<__TAG__ class="view_box_subset_with_position"></__TAG__> +<__TAG__ class="view_box_subset_with_scaling"></__TAG__> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-ref-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-ref-template.html new file mode 100644 index 0000000000..574e291286 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-ref-template.html @@ -0,0 +1,142 @@ +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:fill (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 50px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset { + position: relative; + top: -50px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 50px; + overflow: hidden; + background-color: grey; + display: inline-block; +} +.view_box_subset_with_position { + position: relative; + top: -40px; + left: 10px; +} + +.container_view_box_subset_with_scaling { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset_with_scaling { + position: relative; + top: -100px; + width: 50px; + height: 200px; +} + +.container_view_box_superset { + width: 100px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} + +.container_view_box_superset_with_position { + width: 100px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_superset_with_position { + position: relative; + top: 10px; + left: 10px; +} + +.container_view_box_superset_with_scaling { + width: 50px; + height: 50px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_superset_with_scaling { + width: 25px; + height: 50px; + object-fit: fill; +} + +.container_view_box_intersection { + width: 25px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; + clip-path: inset(0px 0px 1px 0px); +} +.view_box_intersection { + width: 50px; + height: 100px; + position: relative; + top: 50px; +} + +.container_view_box_no_intersection { + width: 25px; + height: 50px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +</style> +<div class="container_view_box_subset"> + <__TAG__ class="view_box_subset"></__TAG__> +</div> +<div class="container_view_box_subset_with_position"> + <__TAG__ class="view_box_subset_with_position"></__TAG__> +</div> +<div class="container_view_box_subset_with_scaling"> + <__TAG__ class="view_box_subset_with_scaling"></__TAG__> +</div> + +<div class="container_view_box_superset"> + <__TAG__></__TAG__> +</div> +<div class="container_view_box_superset_with_position"> + <__TAG__ class="view_box_superset_with_position"></__TAG__> +</div> +<div class="container_view_box_superset_with_scaling"> + <__TAG__ class="view_box_superset_with_scaling"></__TAG__> +</div> + +<div class="container_view_box_intersection"> + <__TAG__ class="view_box_intersection"></__TAG__> +</div> + +<div class="container_view_box_no_intersection"> +</div> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-template.html new file mode 100644 index 0000000000..ee2d83e8f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-template.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:fill</title> +<script src="support/testHelper.js"></script> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-fill-__NAME__-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +/* The test uses clip-path to avoid comparing edges with minor pixel differences + due to differences in scaling on highdpi devices */ + +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + clip-path: inset(1px 0px 0px 0px); +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + object-position: 10px 10px; + background-color: grey; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + width: 50px; + height: 100px; + + /* The top row of pixels can have minor differences due to difference in order + of clipping and scaling operations */ + clip-path: inset(1px 0px 0px 0px); +} + +.view_box_superset { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; +} + +.view_box_superset_with_position { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + object-position: 10px 10px; +} + +.view_box_superset_with_scaling { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + width: 50px; + height: 50px; +} + +.view_box_intersection { + object-view-box: inset(-50px 25px 50px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + clip-path: inset(0px 0px 1px 0px); +} + +.view_box_no_intersection { + object-view-box: inset(-50px 25px 100px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; +} +</style> +<__TAG__ class="view_box_subset"></__TAG__> +<__TAG__ class="view_box_subset_with_position"></__TAG__> +<__TAG__ class="view_box_subset_with_scaling"></__TAG__> + +<__TAG__ class="view_box_superset"></__TAG__> +<__TAG__ class="view_box_superset_with_position"></__TAG__> +<__TAG__ class="view_box_superset_with_scaling"></__TAG__> + +<__TAG__ class="view_box_intersection"></__TAG__> + +<__TAG__ class="view_box_no_intersection"></__TAG__> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-ref-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-ref-template.html new file mode 100644 index 0000000000..861d9230a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-ref-template.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:none (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset { + position: relative; + top: -25px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_position { + position: relative; + top: -40px; + left: 10px; +} +</style> +<div class="container_view_box_subset"> + <__TAG__ class="view_box_subset"></__TAG__> +</div> +<div class="container_view_box_subset_with_position"> + <__TAG__ class="view_box_subset_with_position"></__TAG__> +</div> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-template.html new file mode 100644 index 0000000000..ab0c083d21 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-template.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:none</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-none-__NAME__-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + width: 50px; + height: 100px; + object-view-box: inset(50px 0px 0px 0px); + object-fit: none; + background-color: grey; + margin: 5px; +} + +.view_box_subset_with_position { + width: 50px; + height: 100px; + object-view-box: inset(50px 0px 0px 0px); + object-fit: none; + background-color: grey; + margin: 5px; + object-position: 10px 10px; +} +</style> +</body> +<__TAG__ class="view_box_subset"></__TAG__> +<__TAG__ class="view_box_subset_with_position"></__TAG__> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-ref-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-ref-template.html new file mode 100644 index 0000000000..764ba985fd --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-ref-template.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with vertical writing mode : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +html { + writing-mode: vertical-lr; +} +.container_view_box_subset { + width: 50px; + height: 75px; + overflow: hidden; + display: inline-block; +} +.view_box_subset { + position: relative; + top: -25px; +} +</style> +<div class="container_view_box_subset"> + <__TAG__ class="view_box_subset"></__TAG__> +</div> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-template.html new file mode 100644 index 0000000000..a8c1189a96 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-template.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with vertical writing mode</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-writing-mode-__NAME__-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +html { + writing-mode: vertical-lr; +} +.view_box_subset { + object-view-box: inset(25px 0px 0px 0px); + object-fit: fill; + background-color: black; +} +</style> +<__TAG__ class="view_box_subset"></__TAG__> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/template-object-fit-ref.html b/testing/web-platform/tests/css/css-images/tools/template-object-fit-ref.html new file mode 100644 index 0000000000..068c74b4e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/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: 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/testing/web-platform/tests/css/css-images/tools/template-object-fit-test.html b/testing/web-platform/tests/css/css-images/tools/template-object-fit-test.html new file mode 100644 index 0000000000..8ec4664db9 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/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: 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 left 50% } + .cr { object-position: top 50% 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/testing/web-platform/tests/css/css-images/tools/template-object-position-ref.html b/testing/web-platform/tests/css/css-images/tools/template-object-position-ref.html new file mode 100644 index 0000000000..19661f41f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/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/testing/web-platform/tests/css/css-images/tools/template-object-position-test.html b/testing/web-platform/tests/css/css-images/tools/template-object-position-test.html new file mode 100644 index 0000000000..fb4b3ad3c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/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> |
