diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-images/image-set')
48 files changed, 1117 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-images/image-set/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-images/image-set/WEB_FEATURES.yml new file mode 100644 index 0000000000..91070c242e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/WEB_FEATURES.yml @@ -0,0 +1,3 @@ +features: +- name: image-set + files: "**" diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-all-options-invalid.html b/testing/web-platform/tests/css/css-images/image-set/image-set-all-options-invalid.html new file mode 100644 index 0000000000..14d3d0b6e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-all-options-invalid.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>image-set() is an invalid image if all options are invalid</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#invalid-image"> +<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-source"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<style> + #target { + width: 100px; + height: 100px; + box-sizing: border-box; + background-color: red; + border: 50px solid green; + border-image: 1 / 10px image-set(url('data:image/png;base64,') type('image/unknown')); + } +</style> +<p>Test passes if there is a filled green square.</p> +<div id="target"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering-2.html new file mode 100644 index 0000000000..b7c02fce25 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering-2.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Image set calc x rendering</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set calc x rendering"> +<style> + #test { + background-image: image-set( + url("/images/green.png") calc(0.5x * 2), + url("/images/red.png") 2x + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering.html new file mode 100644 index 0000000000..a5444fd769 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-calc-x-rendering.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>Image set calc x rendering</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set calc x rendering"> +<style> + #test { + background-image: image-set(url("/images/green.png") calc(0.5x * 2)); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-computed.sub.html b/testing/web-platform/tests/css/css-images/image-set/image-set-computed.sub.html new file mode 100644 index 0000000000..532e48e6e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-computed.sub.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<title>Image set computed value</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#serialization"> +<link rel="help" href="https://www.w3.org/TR/cssom-1/#serializing-css-values"> +<link rel="help" href="https://www.w3.org/TR/css-values-4/#canonical-unit"> +<link rel="help" href="https://www.w3.org/TR/css-values-4/#resolution"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<body> +<div id="target"></div> +<script> +function test_computed_value_variants(property, specified, computed) { + if (!computed) computed = specified; + test_computed_value(property, specified, computed); + test_computed_value(property, "-webkit-" + specified, computed); +} + +function test_calculated_resolution_units() { + test_computed_value_variants( + 'background-image', + "image-set(url('http://{{host}}/example.png') calc(1x * 2))", + 'image-set(url("http://{{host}}/example.png") 2dppx)' + ); + + test_computed_value_variants( + 'background-image', + "image-set(url('http://{{host}}/example.png') calc(6dppx / 3))", + 'image-set(url("http://{{host}}/example.png") 2dppx)' + ); + + test_computed_value_variants( + 'background-image', + "image-set(url('http://{{host}}/example.png') calc(100dpi - 4dpi))", + 'image-set(url("http://{{host}}/example.png") 1dppx)' + ); + + test_computed_value_variants( + 'background-image', + "image-set(url('http://{{host}}/example.png') calc(37dpcm + 0.79532dpcm))", + [ + 'image-set(url("http://{{host}}/example.png") 1dppx)', + 'image-set(url("http://{{host}}/example.png") 1.000001dppx)' + ] + ); + + test_computed_value_variants( + 'background-image', + "image-set(url('http://{{host}}/example.png') calc(-1 * 1x))", + 'image-set(url("http://{{host}}/example.png") 0dppx)' + ); +} + +// The resolution unit is expected to be converted to the canonical unit 'dppx' +// for computed style. +test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) 1x)", 'image-set(url("http://{{host}}/example.png") 1dppx)'); +test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) 1x, 'http://{{host}}/example.png' 2x)", 'image-set(url("http://{{host}}/example.png") 1dppx, url("http://{{host}}/example.png") 2dppx)'); +test_computed_value_variants('background-image', 'image-set(url("http://{{host}}/example.png") 1dppx)'); +test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) 48dpi)", 'image-set(url("http://{{host}}/example.png") 0.5dppx)'); +test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) 2400dpcm, 'http://{{host}}/example.png' 2x)", 'image-set(url("http://{{host}}/example.png") 63.5dppx, url("http://{{host}}/example.png") 2dppx)'); +test_computed_value_variants('background-image', "image-set('http://{{host}}/example.jpeg' 240dpi, url(http://{{host}}/example.png) 3.5x)", 'image-set(url("http://{{host}}/example.jpeg") 2.5dppx, url("http://{{host}}/example.png") 3.5dppx)'); +test_computed_value_variants('background-image', "image-set(linear-gradient(black, white) 1x)", "image-set(linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255)) 1dppx)"); +test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) 1x type('image/png'))", 'image-set(url("http://{{host}}/example.png") 1dppx type("image/png"))'); +test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) type('image/png'))", 'image-set(url("http://{{host}}/example.png") 1dppx type("image/png"))'); +test_computed_value_variants('background-image', "image-set(url(http://{{host}}/example.png) type('image/png') 1x)", 'image-set(url("http://{{host}}/example.png") 1dppx type("image/png"))'); +test_computed_value_variants('content', "image-set(url('http://{{host}}/example.png') 192dpi, linear-gradient(black, white) 1x)", 'image-set(url("http://{{host}}/example.png") 2dppx, linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255)) 1dppx)'); + +// Unsupported type should still serialize. +test_computed_value_variants('background-image', 'image-set(url("http://{{host}}/example.png") type("image/unsupported"))', 'image-set(url("http://{{host}}/example.png") 1dppx type("image/unsupported"))'); +test_computed_value_variants('background-image', 'image-set(url("http://{{host}}/example.png") 2x type("image/unsupported"), url("http://{{host}}/example.png") 1x type("image/unsupported"))', 'image-set(url("http://{{host}}/example.png") 2dppx type("image/unsupported"), url("http://{{host}}/example.png") 1dppx type("image/unsupported"))'); + +test_calculated_resolution_units(); +</script> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-conic-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-conic-gradient-rendering.html new file mode 100644 index 0000000000..e4f426471a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-conic-gradient-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set conic-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-conic-gradient-rendering-ref.html"> +<meta name="assert" content="image-set conic-gradient rendering"> +<style> + #test { + background-image: image-set(conic-gradient(green, lightgreen) 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-content-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-content-rendering.html new file mode 100644 index 0000000000..aa6d1d6f1c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-content-rendering.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>Image set is supported in the content property</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="help" href="https://drafts.csswg.org/css-content/#content-property"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set content rendering"> +<style> + #test { + content: image-set(url("/images/green.png") 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-dpcm-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-dpcm-rendering.html new file mode 100644 index 0000000000..c9c4f50b5a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-dpcm-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set dpi rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set dpi rendering"> +<style> + #test { + background-image: image-set(url("/images/green.png") 37dpcm); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering-2.html new file mode 100644 index 0000000000..688c60a688 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering-2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set dpi rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set dpi rendering"> +<style> + #test { + background-image: image-set( + url("/images/green.png") 96dpi, + url("/images/red.png") 100dpi + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering.html new file mode 100644 index 0000000000..3288034d52 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set dpi rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set dpi rendering"> +<style> + #test { + background-image: image-set(url("/images/green.png") 96dpi); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-dppx-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-dppx-rendering.html new file mode 100644 index 0000000000..d111dfb7ff --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-dppx-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set dppx rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set dppx rendering"> +<style> + #test { + background-image: image-set(url("/images/green.png") 1dppx); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-empty-url-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-empty-url-rendering.html new file mode 100644 index 0000000000..f5b9992221 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-empty-url-rendering.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set empty url rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering when 2x url is empty"> +<style> + #test { + background-image: image-set( + url("/images/green.png") 1x, + url("") 2x + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-first-match-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-first-match-rendering.html new file mode 100644 index 0000000000..51d6aeeb24 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-first-match-rendering.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set type first match rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering picks first valid match"> +<style> + #test { + background-image: image-set( + url("/images/green.png") 1x, + url("/images/red.png") 1x + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-linear-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-linear-gradient-rendering.html new file mode 100644 index 0000000000..2fc31b95a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-linear-gradient-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set linear-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-linear-gradient-rendering-ref.html"> +<meta name="assert" content="image-set linear-gradient rendering"> +<style> + #test { + background-image: image-set(linear-gradient(green, lightgreen) 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering-2.html new file mode 100644 index 0000000000..c686b9a694 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering-2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set negative resolution rendering</title> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering with negative resolution"> +<style> + #test { + background-image: url("/images/green.png"); + background-image: image-set( + url("/images/red.png") -1x, + url("/images/red.png") 2x + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering-3.html b/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering-3.html new file mode 100644 index 0000000000..78eec0f2c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering-3.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Image set negative resolution rendering</title> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="/css/reference/blank.html"> +<meta name="assert" content="image-set rendering with negative resolution"> +<style> + #test { + background-image: url("/images/red.png"); + background-image: image-set(url("/images/red.png") calc(-1 * 1x)); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering.html new file mode 100644 index 0000000000..416b6929f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-negative-resolution-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set negative resolution rendering</title> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering with negative resolution"> +<style> + #test { + background-image: url("/images/green.png"); + background-image: image-set(url("/images/red.png") -1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering-2.html new file mode 100644 index 0000000000..f588980be3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering-2.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set no resolution rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering with no resolution defined"> +<style> + #test { + background-image: image-set(url("/images/green.png"), url("/images/green.png")); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering.html new file mode 100644 index 0000000000..577728894d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set no resolution rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering with no resolution defined"> +<style> + #test { + background-image: image-set(url("/images/green.png")); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-no-url-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-no-url-rendering.html new file mode 100644 index 0000000000..f50ebb676a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-no-url-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set no url rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set without url functional notation rendering"> +<style> + #test { + background-image: image-set("/images/green.png" 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-parsing.html b/testing/web-platform/tests/css/css-images/image-set/image-set-parsing.html new file mode 100644 index 0000000000..801cb828c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-parsing.html @@ -0,0 +1,328 @@ +<!DOCTYPE html> +<title>Image set parsing</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam.j.rosenthal@gmail.com"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<meta name="assert" content="General image-set parsing follows CSS Images 4 rules."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<body> +<script> +function test_valid_value_variants(property, value, serializedValue) { + if (!serializedValue) serializedValue = value; + test_valid_value(property, value, serializedValue); + + // The '-webkit-' prefixed 'image-set' is expected to serialize to the same + // value as standard 'image-set'. + // https://drafts.csswg.org/css-images-4/#deprecated + // "Implementations must accept -webkit-image-set() as a parse-time alias of + // image-set(). (It’s a valid value, with identical arguments to image-set(), + // and is turned into image-set() during parsing.)" + test_valid_value(property, "-webkit-" + value, serializedValue); +} + +function test_invalid_value_variants(property, value) { + test_invalid_value(property, value); + test_invalid_value(property, "-webkit-" + value); +} + +function test_default_resolution_parsing() { + // Based on the spec, the resolution is optional and should default + // to 1x if not specified. + // This set of tests verify this expectation. + + // Test when the only image is missing it's resolution + test_valid_value_variants( + 'background-image', + 'image-set(url(foo))', + 'image-set(url("foo") 1x)' + ); + + // Test when the 1st of 2 images is missing it's resolution + test_valid_value_variants( + 'background-image', + 'image-set(url(foo), url(bar) 1x)', + 'image-set(url("foo") 1x, url("bar") 1x)' + ); + + // Test when the 2nd of 2 images is missing it's resolution + test_valid_value_variants( + 'background-image', + 'image-set(url(foo) 1x, url(bar))', + 'image-set(url("foo") 1x, url("bar") 1x)' + ); + + // Test when both images are missing their resolutions + test_valid_value_variants( + 'background-image', + 'image-set(url(foo), url(bar))', + 'image-set(url("foo") 1x, url("bar") 1x)' + ); + + // Test when the middle of 3 images is missing it's resolution + test_valid_value_variants( + 'background-image', + 'image-set(url(foo) 1x, url(bar), url(baz) 2x)', + 'image-set(url("foo") 1x, url("bar") 1x, url("baz") 2x)' + ); +} + +function test_resolution_units_parsing() { + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 1x)' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(2x * 3))', + 'image-set(url("example.png") calc(6dppx))' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 1dppx)' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(1dppx * 1))', + 'image-set(url("example.png") calc(1dppx))' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 1dpi)' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(96dpi * 2))', + 'image-set(url("example.png") calc(2dppx))' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 1dpcm)' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(1dpcm * 96/2.54))', + 'image-set(url("example.png") calc(1dppx))' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 1x, url("example.png") 2dppx, "example.png" 250dpi, "example.png" 1dpcm)', + 'image-set(url("example.png") 1x, url("example.png") 2dppx, url("example.png") 250dpi, url("example.png") 1dpcm)' + ); + test_valid_value_variants( + 'content', + 'image-set(url("example.png") 1dpi)' + ); + test_valid_value_variants( + 'content', + 'image-set(url("example.png") calc(1 * 96dpi))', + 'image-set(url("example.png") calc(1dppx))' + ); + + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") 1invalidResUnit)' + ); + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(3 * 4))' + ); + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(2 - 1))' + ); + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(2x - 1))' + ); + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(1 + 4dpi))' + ); +} + +function test_non_positive_resolutions_parsing() { + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 0x)' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 0dppx)' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 0dpi)' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 0dpcm)' + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(-1 * 1x))', + 'image-set(url("example.png") calc(-1dppx))', + ); + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") calc(1x + -1x))', + 'image-set(url("example.png") calc(0dppx))', + ); + + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") -1x)' + ); + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") -3dppx)' + ); + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") -96dpi)' + ); + test_invalid_value_variants( + 'background-image', + 'image-set(url("example.png") -113dpcm)' + ); +} + +function test_gradient_images_parsing() { + test_valid_value_variants( + 'background-image', + "image-set(linear-gradient(black, white) 1x)" + ); + test_valid_value_variants( + 'background-image', + "image-set(repeating-linear-gradient(red, blue 25%) 1x)" + ); + test_valid_value_variants( + 'background-image', + "image-set(radial-gradient(black, white) 1x)" + ); + test_valid_value_variants( + 'background-image', + "image-set(repeating-radial-gradient(red, blue 25%) 1x)" + ); + test_valid_value_variants( + 'background-image', + "image-set(conic-gradient(black, white) 1x)" + ); + test_valid_value_variants( + 'background-image', + "image-set(repeating-conic-gradient(red, blue 25%) 1x)" + ); + test_valid_value_variants( + 'content', + 'image-set(linear-gradient(black, white) 1x, url("example.png") 4x)' + ); + test_valid_value_variants( + 'content', + 'image-set(url("example.png") 192dpi, linear-gradient(black, white) 1x)' + ); + + test_invalid_value_variants( + 'cursor', + "image-set(linear-gradient(black, white) 1x)" + ); + test_invalid_value_variants( + 'background-image', + "image-set(linear-gradient(red) 1x)" + ); +} + +function test_image_type_parsing() { + test_valid_value_variants( + 'background-image', + 'image-set(url("example.png") 1x type("image/png"))' + ); + test_valid_value_variants( + 'background-image', + "image-set(url(example.png) type('image/png'))", + 'image-set(url("example.png") 1x type("image/png"))' + ); + test_valid_value_variants( + 'background-image', + "image-set(url(example.png) type('image/png') 1x)", + 'image-set(url("example.png") 1x type("image/png"))' + ); + test_valid_value_variants( + 'background-image', + "image-set(url(example.png) 1x type('image/jpeg'))", + 'image-set(url("example.png") 1x type("image/jpeg"))' + ); + + test_invalid_value_variants( + 'background-image', + "image-set(url(example.png) type(image/png))" + ); + test_invalid_value_variants( + 'background-image', + "image-set(url(example.png) type('image/png') type('image/png'))" + ); + test_invalid_value_variants( + 'background-image', + "image-set(url(example.png) type('image/png' 'image/png'))" + ); + test_invalid_value_variants( + 'background-image', + "image-set(url(example.png) type(url('image/png')))" + ); + test_invalid_value_variants( + 'background-image', + "image-set(url(example.png) 1xtype('image/png'))" + ); + test_invalid_value_variants( + 'background-image', + "image-set(type('image/png') url(example.png) 1x)" + ); +} + +function test_no_images_set_nesting() { + // Spec definition: + // "The image-set() function can not be nested inside of itself, + // either directly or indirectly (as an argument to another <image> type)." + + // Direct nesting + test_invalid_value_variants( + 'background-image', + "image-set(image-set(url(example.png)) 2x)" + ); + + // Indirect nesting + test_invalid_value_variants( + 'background-image', + "image-set(image(image-set(url(example.png)) 2x) 2x)" + ); +} + +function test_image_set_parsing() { + test_valid_value_variants('background-image', "image-set(url(example.png) 1x)", 'image-set(url("example.png") 1x)'); + test_valid_value_variants('background-image', "image-set('example.jpg' 1x)", 'image-set(url("example.jpg") 1x)'); + test_valid_value_variants('background-image', "image-set(url(example.png) 1x, 'example.png' 2x)", 'image-set(url("example.png") 1x, url("example.png") 2x)'); + test_valid_value_variants('background-image', "image-set(url(example.png) 1dpcm, 'example.png' 2x)", 'image-set(url("example.png") 1dpcm, url("example.png") 2x)'); + test_valid_value_variants('background-image', "image-set('example.jpeg' 222dpi, url(example.png) 3.5x)", 'image-set(url("example.jpeg") 222dpi, url("example.png") 3.5x)'); + + test_valid_value_variants('content', 'image-set(url("example.png") 1x)', 'image-set(url("example.png") 1x)'); + test_valid_value_variants('content', 'image-set(url("example.png") 1x, "example.png" 3x)', 'image-set(url("example.png") 1x, url("example.png") 3x)'); + test_valid_value_variants('border-image-source', 'image-set(url("example.png") 1x)', 'image-set(url("example.png") 1x)'); + test_valid_value_variants('border-image-source', 'image-set(url("example.png") 1x, "example.png" 3x)', 'image-set(url("example.png") 1x, url("example.png") 3x)'); + + test_invalid_value_variants('background-image', 'image-set(url("example.png") -20x)'); + test_invalid_value_variants('background-image', "image-set(none, url(example.png) 1x)"); + test_invalid_value_variants('background-image', "image-set()"); + test_invalid_value_variants('background-image', "image-set('example.jpeg' 92pid url(example.png) 1x)"); + test_invalid_value_variants('background-image', "image-set(url(example.png) 1x url(example.jpeg))"); + test_invalid_value_variants('background-image', "image-set(url(example.png) 1x 2x)"); + + test_default_resolution_parsing(); + test_resolution_units_parsing(); + test_non_positive_resolutions_parsing(); + test_gradient_images_parsing(); + test_image_type_parsing(); + test_no_images_set_nesting(); +} + +test_image_set_parsing(); +</script> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-radial-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-radial-gradient-rendering.html new file mode 100644 index 0000000000..b4e09ea351 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-radial-gradient-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set radial-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-radial-gradient-rendering-ref.html"> +<meta name="assert" content="image-set radial-gradient rendering"> +<style> + #test { + background-image: image-set(radial-gradient(green, lightgreen) 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-rendering-2.html new file mode 100644 index 0000000000..fa1749518f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-rendering-2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering"> +<style> + #test { + background-image: image-set( + url("/images/green.png") 1x, + url("/images/red.png") 2x + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-rendering.html new file mode 100644 index 0000000000..a105438cc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering"> +<style> + #test { + background-image: image-set(url("/images/green.png") 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-conic-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-conic-gradient-rendering.html new file mode 100644 index 0000000000..89060996f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-conic-gradient-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set repeating-conic-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-repeating-conic-gradient-rendering-ref.html"> +<meta name="assert" content="image-set repeating-conic-gradient rendering"> +<style> + #test { + background-image: image-set(repeating-conic-gradient(red, blue 25%) 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-linear-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-linear-gradient-rendering.html new file mode 100644 index 0000000000..a9cd6125a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-linear-gradient-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set repeating-linear-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-repeating-linear-gradient-rendering-ref.html"> +<meta name="assert" content="image-set repeating-linear-gradient rendering"> +<style> + #test { + background-image: image-set(repeating-linear-gradient(red, blue 25%) 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-radial-gradient-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-radial-gradient-rendering.html new file mode 100644 index 0000000000..ec8fd54421 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-repeating-radial-gradient-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set repeating-radial-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-repeating-radial-gradient-rendering-ref.html"> +<meta name="assert" content="image-set repeating-radial-gradient rendering"> +<style> + #test { + background-image: image-set(repeating-radial-gradient(red, blue 25%) 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001-ref.html b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001-ref.html new file mode 100644 index 0000000000..46c4d729ed --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001-ref.html @@ -0,0 +1,6 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> + body { margin: 0 } +</style> +<img srcset="/images/green.png 0.5x"> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001.html b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001.html new file mode 100644 index 0000000000..aaa750217d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-001.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>Image set resolution affects intrinsic size of the image</title> +<link rel="match" href="image-set-resolution-001-ref.html"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1705877"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<style> + body { margin: 0 } + div { + /* green.png is 100x50, should be 200x100 instead */ + content: -webkit-image-set(url('/images/green.png') 0.5x); + content: image-set(url('/images/green.png') 0.5x); + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-002.html b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-002.html new file mode 100644 index 0000000000..e5795e172f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-002.html @@ -0,0 +1,20 @@ +<!doctype html> +<title>Image set resolution affects intrinsic size of the image</title> +<link rel="match" href="image-set-resolution-001-ref.html"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1705877"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<style> + body { margin: 0 } + div { + /* green.png is 100x50, should be 200x100 instead */ + background-image: -webkit-image-set(url('/images/green.png') 0.5x); + background-image: image-set(url('/images/green.png') 0.5x); + background-repeat: no-repeat; + background-origin: 0 0; + width: 100vw; + height: 100vh; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-003.html b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-003.html new file mode 100644 index 0000000000..734ee05ecd --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-resolution-003.html @@ -0,0 +1,20 @@ +<!doctype html> +<title>Image set resolution affects intrinsic size of the image</title> +<link rel="match" href="image-set-resolution-001-ref.html"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1705877"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<style> + body { margin: 0 } + ul, li { margin: 0; padding: 0 } + li { + list-style-position: inside; + /* green.png is 100x50, should be 200x100 instead */ + list-style-image: -webkit-image-set(url('/images/green.png') 0.5x); + list-style-image: image-set(url('/images/green.png') 0.5x); + } +</style> +<ul> + <li></li> +</ul> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-first-match-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-first-match-rendering.html new file mode 100644 index 0000000000..eafe5bfb2c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-first-match-rendering.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set type first match rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering with type picks first valid match"> +<style> + #test { + background-image: image-set( + url("/images/green.png") 0.0001x type('image/png'), + url("/images/red.png") 0.0001x type('image/png') + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-2.html new file mode 100644 index 0000000000..23e90ea9e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set type rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering for images with same type but different resolutions"> +<style> + #test { + background-image: image-set( + url("/images/green.png") type('image/png') 1x, + url("/images/red.png") type('image/png') 2x + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-3.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-3.html new file mode 100644 index 0000000000..b47c4d82a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-3.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set type rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering with type before resolution"> +<style> + #test { + background-image: image-set(url("/images/green.png") type('image/png') 1x); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering.html new file mode 100644 index 0000000000..069e2c867f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Image set type rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering with type"> +<style> + #test { + background-image: image-set(url("/images/green.png") 1x type('image/png')); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-skip-unsupported-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-skip-unsupported-rendering.html new file mode 100644 index 0000000000..4473e816bd --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-skip-unsupported-rendering.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set type skip unsupported rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering with type skips unsupported type"> +<style> + #test { + background-image: image-set( + url("/images/red.png") 1x type('image/unsupported'), + url("/images/green.png") 1x type('image/png') + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering-2.html new file mode 100644 index 0000000000..bebc32d87d --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering-2.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>Image set type rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="/css/reference/blank.html"> +<meta name="assert" content="image-set rendering with all unsupported types"> +<!-- +Spec definition: +"An image-set() function contains a list of one or more <image-set-option>s, + and must select only one of them to determine what image it will represent: + First, remove any <image-set-option>s from the list that specify + an unknown or unsupported MIME type in their type() value." + +If all the values in the image set are of an unsupported type, +the set should be empty. + +"This has no effect on the validity of the image-set() function" +--> +<style> + #test { + background-image: url("/images/red.png"); + background-image: image-set( + url("/images/green.png") 1x type('image/unsupported'), + url("/images/green.png") 1x type('image/unsupported') + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering.html new file mode 100644 index 0000000000..486fcb3a8e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Image set type rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="/css/reference/blank.html"> +<meta name="assert" content="image-set rendering with unsupported type"> +<!-- +Spec definition: +"An image-set() function contains a list of one or more <image-set-option>s, + and must select only one of them to determine what image it will represent: + First, remove any <image-set-option>s from the list that specify + an unknown or unsupported MIME type in their type() value." + +If all the values in the image set are of an unsupported type, +the set should be empty. + +"This has no effect on the validity of the image-set() function" +--> +<style> + #test { + background-image: url("/images/red.png"); + background-image: image-set(url("/images/green.png") 1x type('image/unsupported')); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-unordered-res-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-unordered-res-rendering.html new file mode 100644 index 0000000000..2085b416b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-unordered-res-rendering.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Image set type unordered resolutions rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="reference/image-set-rendering-ref.html"> +<meta name="assert" content="image-set rendering when resolutions are unordered"> +<style> + #test { + background-image: image-set( + url("/images/red.png") 2x, + url("/images/green.png") 1x + ); + width: 100px; + height: 100px; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-zero-resolution-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-zero-resolution-rendering-2.html new file mode 100644 index 0000000000..ae1c765049 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-zero-resolution-rendering-2.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="/css/reference/blank.html"> +<meta name="assert" content="image-set rendering with zero resolution"> +<style> +#test { + background-image: url("/images/red.png"); + background-image: image-set(url("/images/red.png") calc(0dppx * -1)); + width: 100px; + height: 100px; +} +</style> +<div id="test"></div> + diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-zero-resolution-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-zero-resolution-rendering.html new file mode 100644 index 0000000000..0da39b7581 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/image-set-zero-resolution-rendering.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation"> +<link rel="match" href="/css/reference/blank.html"> +<meta name="assert" content="image-set rendering with zero resolution"> +<style> +#test { + background-image: url("/images/red.png"); + background-image: image-set(url("/images/red.png") 0x); + width: 100px; + height: 100px; +} +</style> +<div id="test"></div> + diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-conic-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-conic-gradient-rendering-ref.html new file mode 100644 index 0000000000..2a5133ee94 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-conic-gradient-rendering-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Image set conic-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<style> + #test { + width: 100px; + height: 100px; + background: conic-gradient(green, lightgreen); + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-linear-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-linear-gradient-rendering-ref.html new file mode 100644 index 0000000000..7f95f46eaf --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-linear-gradient-rendering-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Image set linear-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<style> + #test { + width: 100px; + height: 100px; + background: linear-gradient(green, lightgreen); + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-radial-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-radial-gradient-rendering-ref.html new file mode 100644 index 0000000000..3c49f87d91 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-radial-gradient-rendering-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Image set radial-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<style> + #test { + width: 100px; + height: 100px; + background: radial-gradient(green, lightgreen); + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-rendering-ref.html new file mode 100644 index 0000000000..8a56bbf4d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-rendering-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Image set rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<style> + #test { + width: 100px; + height: 100px; + background-color: lime; + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-conic-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-conic-gradient-rendering-ref.html new file mode 100644 index 0000000000..02466664c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-conic-gradient-rendering-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Image set repeating-conic-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<style> + #test { + width: 100px; + height: 100px; + background: repeating-conic-gradient(red, blue 25%); + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-linear-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-linear-gradient-rendering-ref.html new file mode 100644 index 0000000000..e2915b1331 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-linear-gradient-rendering-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Image set repeating-linear-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<style> + #test { + width: 100px; + height: 100px; + background: repeating-linear-gradient(red, blue 25%); + } +</style> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-radial-gradient-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-radial-gradient-rendering-ref.html new file mode 100644 index 0000000000..00035b3998 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-repeating-radial-gradient-rendering-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Image set repeating-radial-gradient rendering</title> +<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org"> +<link rel="author" title="Traian Captan" href="mailto:tcaptan@chromium.org"> +<style> + #test { + width: 100px; + height: 100px; + background: repeating-radial-gradient(red, blue 25%); + } +</style> +<div id="test"></div> |