Update web-platform-tests to revision b'6275bd0cf6fcfbfb531d371666602ddf4ca6dbf6'

This commit is contained in:
WPT Sync Bot 2022-12-16 01:28:46 +00:00
parent 2a45f247c4
commit afd92e9e80
214 changed files with 6026 additions and 531 deletions

View file

@ -1,11 +0,0 @@
<!doctype html>
<title>CSS Test Reference</title>
<style>
.test {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="test" style="content: url('/images/green.png')" ></div>

View file

@ -1,16 +1,15 @@
<!doctype html>
<!DOCTYPE html>
<title>Image set is supported in the content property</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="help" href="https://drafts.csswg.org/css-content/#content-property">
<link rel="match" href="image-set-content-rendering-ref.html">
<link rel="match" href="reference/image-set-content-rendering-ref.html">
<meta name="assert" content="image-set content rendering">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
.test {
display: inline-block;
width: 100px;
height: 100px;
background: red;
#test {
content: image-set(url("/images/green.png") 1x);
}
</style>
<div class="test" style="content: image-set(url() 2x, url('/images/green.png') 100dpi)" ></div>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>Image set dpi rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set dpi rendering">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: image-set(
url("/images/green.png") 96dpi,
url("/images/red.png") 100dpi
);
}
</style>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<title>Image set dpi rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set dpi rendering">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: image-set(url("/images/green.png") 96dpi);
}
</style>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<title>Image set dppx rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set dppx rendering">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: image-set(url("/images/green.png") 1dppx);
}
</style>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>Image set empty url rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set rendering when 2x url is empty">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: image-set(
url("/images/green.png") 1x,
url("") 2x
);
}
</style>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>Image set type first match rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set rendering picks first valid match">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: image-set(
url("/images/green.png") 1x,
url("/images/red.png") 1x
);
}
</style>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<title>Image set invalid resolution rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set rendering when resolution is invalid">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: url("/images/green.png");
background-image: image-set(
url("/images/red.png") 0x,
url("/images/red.png") 2x
);
}
</style>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<title>Image set invalid resolution rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set rendering when resolution is invalid">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: url("/images/green.png");
background-image: image-set(url("/images/red.png") 0x);
}
</style>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<title>Image set linear-gradient rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-linear-gradient-rendering-ref.html">
<meta name="assert" content="image-set linear-gradient rendering">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: image-set(linear-gradient(green, lightgreen) 1x);
}
</style>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<title>Image set no resolution rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set rendering with no resolution defined">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: image-set(url("/images/green.png"));
}
</style>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<title>Image set no url rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set without url functional notation rendering">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: image-set("/images/green.png" 1x);
}
</style>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<title>Image set radial-gradient rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-radial-gradient-rendering-ref.html">
<meta name="assert" content="image-set radial-gradient rendering">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: image-set(radial-gradient(green, lightgreen) 1x);
}
</style>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>Image set rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set rendering">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: image-set(
url("/images/green.png") 1x,
url("/images/red.png") 2x
);
}
</style>

View file

@ -1,44 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Image set rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<meta name="assert" content="image-set rendering">
<style>
.test {
display: inline-block;
width: 100px;
height: 100px;
}
main {
width: 500px;
}
</style>
</head>
<body>
<p>All images below should be lime or a lime-green gradient when devicePixelRatio is 1 - no red!.</p>
<main>
<div class="test" style="background-image: url(/images/green.png)"></div>
<div class="test" style="background-image: linear-gradient(green, lightgreen)"></div>
<div class="test" style="background-image: url('/images/green.png')" ></div>
<div class="test" style="background-image: radial-gradient(green, lightgreen)" ></div>
<div class="test" style="background-image: linear-gradient(green, lightgreen)" ></div>
<div class="test" style="background-image: url('/images/green.png')" ></div>
<div class="test" style="background-image: url('/images/green.png')" ></div>
<div class="test" style="background-image: url('/images/green.png')" ></div>
<div class="test" style="background-image: url('/images/green.png')"></div>
<div class="test" style="background-color: lime"></div>
<div class="test" style="background-color: lime"></div>
<div class="test" style="background-color: lime"></div>
<div class="test" style="background-image: url(/images/green.png)"></div>
<div class="test" style="background-image: url(/images/green.png)"></div>
<div class="test" style="background-image: url(/images/green.png)"></div>
<div class="test" style="background-image: url(/images/red.png)"></div>
<div class="test" style="background-image: url(/images/green.png)"></div>
<div class="test" style="background-image: url(/images/red.png)"></div>
<div class="test" style="background-image: url(/images/green.png)"></div>
</main>
</body>
</html>

View file

@ -1,46 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Image set rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<meta name="assert" content="image-set rendering">
<link rel="match" href="image-set-rendering-ref.html">
<style>
.test {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
main {
width: 500px;
}
</style>
</head>
<body>
<p>All images below should be lime or a lime-green gradient when devicePixelRatio is 1 - no red!.</p>
<main>
<div class="test" style="background-image: image-set('/images/green.png' 1x)"></div>
<div class="test" style="background-image: image-set('/images/red.png' 20dpi, linear-gradient(green, lightgreen) 2x)"></div>
<div class="test" style="background-image: image-set(url('/images/green.png') 1x, url('/images/red.png') 2x)" ></div>
<div class="test" style="background-image: image-set(radial-gradient(green, lightgreen) 1x, linear-gradient(yellow, red) 2x)" ></div>
<div class="test" style="background-image: image-set(linear-gradient(green, lightgreen) 96dpi, '/images/red.png' 100dpi)" ></div>
<div class="test" style="background-image: image-set(radial-gradient(red, yellow) 1.3x, url('/images/green.png') 100dpi, linear-gradient(red, yellow) 2.5x)" ></div>
<div class="test" style="background-image: image-set('/images/red.png' 2x, url('/images/green.png') 1x, url('/images/yellow.png') 300dpi)" ></div>
<div class="test" style="background-color: red; background-image: image-set('' 2x, url('/images/green.png') 1x)" ></div>
<div class="test" style="background-image: image-set('/images/green.png' 1x)"></div>
<div class="test" style="background-color: red; background-image: image-set('/images/green.png')" ></div>
<div class="test" style="background-color: lime; background-image: image-set('/images/red.png' 0x)" ></div>
<div class="test" style="background-color: lime; background-image: image-set('/images/red.png' 0x, url('/images/red.png') 2x)" ></div>
<div class="test" style="background-image: image-set('/images/green.png' type('image/png') 1x)"></div>
<div class="test" style="background-image: image-set('/images/green.png' 1x type('image/png'))"></div>
<div class="test" style="background-image: image-set('/images/green.png' type('image/png'))"></div>
<div class="test" style="background-image: image-set('/images/red.png' type('image/png'), '/images/green.png' type('image/png'))"></div>
<div class="test" style="background-image: image-set('/images/red.png' type('image/unsupported'), '/images/green.png' type('image/png'))"></div>
<div class="test" style="background-image: image-set('/images/red.png' type('image/unsupported'), '/images/green.png' type('image/unsupported'))"></div>
<div class="test" style="background-image: image-set('/images/red.png' 2x type('image/png'), '/images/green.png' 1x type('image/png'))"></div>
</main>
</body>
</html>
<title>Image set rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set rendering">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: image-set(url("/images/green.png") 1x);
}
</style>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>Image set type first match rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set rendering with type picks first valid match">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: image-set(
url("/images/green.png") 1x type('image/png'),
url("/images/red.png") 1x type('image/png')
);
}
</style>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>Image set type rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set rendering for images with same type but different resolutions">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: image-set(
url("/images/green.png") type('image/png') 1x,
url("/images/red.png") type('image/png') 2x
);
}
</style>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<title>Image set type rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set rendering with type before resolution">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: image-set(url("/images/green.png") type('image/png') 1x);
}
</style>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<title>Image set type rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set rendering with type">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: image-set(url("/images/green.png") 1x type('image/png'));
}
</style>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>Image set type skip unsupported rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set rendering with type skips unsupported type">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: image-set(
url("/images/red.png") 1x type('image/unsupported'),
url("/images/green.png") 1x type('image/png')
);
}
</style>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<title>Image set type rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set rendering with all unsupported types">
<!--
Spec definition:
"An image-set() function contains a list of one or more <image-set-option>s,
and must select only one of them to determine what image it will represent:
First, remove any <image-set-option>s from the list that specify
an unknown or unsupported MIME type in their type() value."
If all the values in the image set are of an unsupported type,
the set should be empty.
-->
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: url("/images/green.png");
background-image: image-set(
url("/images/red.png") 1x type('image/unsupported'),
url("/images/red.png") 1x type('image/unsupported')
);
}
</style>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<title>Image set type rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set rendering with unsupported type">
<!--
Spec definition:
"An image-set() function contains a list of one or more <image-set-option>s,
and must select only one of them to determine what image it will represent:
First, remove any <image-set-option>s from the list that specify
an unknown or unsupported MIME type in their type() value."
If all the values in the image set are of an unsupported type,
the set should be empty.
-->
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: url("/images/green.png");
background-image: image-set(url("/images/red.png") 1x type('image/unsupported'));
}
</style>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>Image set type unordered resolutions rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<link rel="match" href="reference/image-set-rendering-ref.html">
<meta name="assert" content="image-set rendering when resolutions are unordered">
<script src="resources/image-set-rendering-helper.js"></script>
<style>
#test {
background-image: image-set(
url("/images/red.png") 2x,
url("/images/green.png") 1x
);
}
</style>

View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<title>Image set is supported in the content property</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<style>
#test {
content: url("/images/green.png");
}
</style>
<script src="../resources/image-set-rendering-helper.js"></script>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<title>Image set linear-gradient rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<style>
#test {
background-image: linear-gradient(green, lightgreen);
}
</style>
<script src="../resources/image-set-rendering-helper.js"></script>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<title>Image set radial-gradient rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<style>
#test {
background-image: radial-gradient(green, lightgreen);
}
</style>
<script src="../resources/image-set-rendering-helper.js"></script>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<title>Image set rendering</title>
<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org">
<style>
#test {
background-image: url("/images/green.png");
}
</style>
<script src="../resources/image-set-rendering-helper.js"></script>

View file

@ -0,0 +1,27 @@
function setupTest() {
createPassingNotice();
createTestDiv();
}
function createPassingNotice() {
const notice = document.createElement('p');
notice.textContent =
'Test passes if the image below is green when devicePixelRatio is 1, not red.';
document.body.appendChild(notice);
}
function createTestDiv() {
const testDiv = document.createElement('div');
testDiv.id = 'test';
testDiv.style.width = '100px';
testDiv.style.height = '100px';
testDiv.style.backgroundColor = 'red';
document.body.appendChild(testDiv);
}
window.onload = setupTest;