mirror of
https://github.com/servo/servo.git
synced 2025-08-12 08:55:32 +01:00
Update web-platform-tests to revision b'6275bd0cf6fcfbfb531d371666602ddf4ca6dbf6'
This commit is contained in:
parent
2a45f247c4
commit
afd92e9e80
214 changed files with 6026 additions and 531 deletions
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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;
|
Loading…
Add table
Add a link
Reference in a new issue