mirror of
https://github.com/servo/servo.git
synced 2025-08-12 08:55:32 +01:00
Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'
This commit is contained in:
WPT Sync Bot
parent
ace9b32b1c
commit
df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
|
|
@ -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-expected.html">
|
||||
<style>
|
||||
.test {
|
||||
width: 480px;
|
||||
height: 50px;
|
||||
background: linear-gradient(to right, rgb(255, 0, 0), color(srgb 0 255 0));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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-expected.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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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-expected.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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -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>
|
||||
|
|
@ -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-expected.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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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-expected.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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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-expected.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>
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<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="10;100">
|
||||
<meta name=fuzzy content="0-3;0-331">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<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="10;100">
|
||||
<meta name=fuzzy content="0-2;0-313">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<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="1;22">
|
||||
<meta name=fuzzy content="0-2;0-26">
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
<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">
|
||||
<meta name=fuzzy content="10;100">
|
||||
<style>
|
||||
img {display: none}
|
||||
canvas {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<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">
|
||||
<meta name=fuzzy content="10;100">
|
||||
<script src="/common/get-host-info.sub.js"></script>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/rendering-utils.js"></script>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
<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">
|
||||
<meta name=fuzzy content="10;100">
|
||||
<style>
|
||||
body {
|
||||
overflow: hidden;
|
||||
|
|
@ -33,5 +32,16 @@
|
|||
const img = document.getElementById('corsImage')
|
||||
img.src = img.src.replace(new URL(img.src).origin, get_host_info().HTTP_REMOTE_ORIGIN)
|
||||
</script>
|
||||
<p>The image should not rotate respecting their EXIF orientation because
|
||||
image-orientation: none is specified.</p>
|
||||
<div><img id="blobImage" src="support/exif-orientation-3-lr.jpg"/></div>
|
||||
<script>
|
||||
fetch(img.src).then((resp) {
|
||||
return blob;
|
||||
}).then((blob) => {
|
||||
const img = document.getElementById('blobImage')
|
||||
img.src = blob;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<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">
|
||||
<meta name=fuzzy content="10;100">
|
||||
<style>
|
||||
body {
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<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">
|
||||
<meta name=fuzzy content="10;100">
|
||||
<style>
|
||||
body {
|
||||
overflow: hidden;
|
||||
|
|
@ -26,5 +25,9 @@
|
|||
<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.</p>
|
||||
<div><img src="../support/exif-orientation-3-lr.jpg"/></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<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="10;100">
|
||||
<meta name=fuzzy content="0-3;0-1432">
|
||||
</head>
|
||||
<body style="margin:0">
|
||||
<svg style="width: 600px; height: 600px">
|
||||
|
|
@ -23,4 +23,4 @@
|
|||
<image xlink:href="support/exif-orientation-8-llo.jpg" x="200" y="450" width="150" height="150" preserveAspectRatio="none"></image>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 4: image-resolution set manually</title>
|
||||
<link rel="author" title="Mike Bremford" href="http://bfo.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
|
||||
<link rel="match" href="../reference/100x100-blue.html">
|
||||
<style>
|
||||
img {
|
||||
image-resolution: 14.4dpi;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<img src="../support/swatch-blue.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 4: image-resolution scaling up from image</title>
|
||||
<link rel="author" title="Mike Bremford" href="http://bfo.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
|
||||
<link rel="match" href="../reference/100x100-blue.html">
|
||||
<style>
|
||||
img {
|
||||
image-resolution: from-image;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<img src="support/swatch-blue-48dpi.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 4: image-resolution scaling down from image</title>
|
||||
<link rel="author" title="Mike Bremford" href="http://bfo.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
|
||||
<link rel="match" href="../reference/100x100-blue.html">
|
||||
<style>
|
||||
img {
|
||||
image-resolution: from-image;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<img src="support/swatch-blue-192dpi.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 4: units in filters are not affected by manual image-resolution</title>
|
||||
<link rel="author" title="Mike Bremford" href="http://bfo.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
|
||||
<link rel="match" href="reference/100x100-blue-blur4px.html">
|
||||
<style>
|
||||
img {
|
||||
image-resolution: 14.4dpi;
|
||||
filter: blur(4px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<img src="../support/swatch-blue.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 4: units in filters are not affected by image-resolution</title>
|
||||
<link rel="author" title="Mike Bremford" href="http://bfo.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
|
||||
<link rel="match" href="reference/100x100-blue-blur4px.html">
|
||||
<style>
|
||||
img {
|
||||
image-resolution: from-image;
|
||||
filter: blur(4px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<img src="support/swatch-blue-48dpi.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 4: units in filters are not affected by image-resolution</title>
|
||||
<link rel="author" title="Mike Bremford" href="http://bfo.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
|
||||
<link rel="match" href="reference/100x100-blue-blur4px.html">
|
||||
<style>
|
||||
img {
|
||||
image-resolution: from-image;
|
||||
filter: blur(4px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<img src="support/swatch-blue-192dpi.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 4: image-resolution scaling from image with animorphic aspect ratio</title>
|
||||
<link rel="author" title="Mike Bremford" href="http://bfo.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
|
||||
<link rel="match" href="../reference/100x100-blue.html">
|
||||
<style>
|
||||
img {
|
||||
image-resolution: from-image;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<img src="support/swatch-blue-48x192dpi.png" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 4: image-resolution set manually applies to background images</title>
|
||||
<link rel="author" title="Mike Bremford" href="http://bfo.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
|
||||
<link rel="match" href="../reference/100x100-blue.html">
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
image-resolution: 14.4dpi;
|
||||
background: url("../support/swatch-blue.png") top left no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 4: image-resolution from images applies to background images</title>
|
||||
<link rel="author" title="Mike Bremford" href="http://bfo.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
|
||||
<link rel="match" href="../reference/100x100-blue.html">
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
image-resolution: from-image;
|
||||
background: url("support/swatch-blue-48dpi.png") top left no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 4: image-resolution set manually applies to background images and filters are unaffected</title>
|
||||
<link rel="author" title="Mike Bremford" href="http://bfo.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
|
||||
<link rel="match" href="reference/100x100-blue-blur4px.html">
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
image-resolution: 14.4dpi;
|
||||
background: url("../support/swatch-blue.png") top left no-repeat;
|
||||
filter: blur(4px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Images Module Level 4: image-resolution set manually applies to background images and filters are unaffected</title>
|
||||
<link rel="author" title="Mike Bremford" href="http://bfo.com/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
|
||||
<link rel="match" href="reference/100x100-blue-blur4px.html">
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
/* Not exactly an image-resolution test, but confirming that background-size is applied before filter */
|
||||
background: url("../support/swatch-blue.png") top left / 100px 100px no-repeat;
|
||||
filter: blur(4px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
<!doctype html>
|
||||
<div style="width: 100px;height: 100px;background-color: blue;filter:blur(4px)"></div>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
|
|
@ -3,6 +3,7 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue