Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-images/image-set
parent: Initial commit. (diff)
download: firefox-upstream.tar.xz
firefox-upstream.zip
34 files changed, 603 insertions, 0 deletions
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..4239eaa09e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-computed.sub.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Image set computed value</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#serialization">
+<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);
+}
+
+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)');
+</script>
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..f0622a8950
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-content-rendering.html
@@ -0,0 +1,15 @@
+<!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-content-rendering-ref.html">
+<meta name="assert" content="image-set content rendering">
+<script src="resources/image-set-rendering-helper.js"></script>
+<style>
+  #test {
+    content: image-set(url("/images/green.png") 1x);
+  }
+</style>
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..d7bd02e767
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering-2.html
@@ -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>
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..be18e85ffb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-dpi-rendering.html
@@ -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>
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..1fc2f8c85d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-dppx-rendering.html
@@ -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>
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..0286d7372f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-empty-url-rendering.html
@@ -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>
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..4d5b9d7d9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-first-match-rendering.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-invalid-resolution-rendering-2.html b/testing/web-platform/tests/css/css-images/image-set/image-set-invalid-resolution-rendering-2.html
new file mode 100644
index 0000000000..88917e1e3f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-invalid-resolution-rendering-2.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-images/image-set/image-set-invalid-resolution-rendering.html b/testing/web-platform/tests/css/css-images/image-set/image-set-invalid-resolution-rendering.html
new file mode 100644
index 0000000000..0cdcf6018e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-invalid-resolution-rendering.html
@@ -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>
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..62f41a743f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-linear-gradient-rendering.html
@@ -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>
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..2cb98bb9c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering-2.html
@@ -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"), url("/images/green.png"));
+  }
+</style>
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..927d4c67f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-no-res-rendering.html
@@ -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>
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..7af722d7c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-no-url-rendering.html
@@ -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>
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..b9b335a287
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-parsing.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<title>Image set parsing</title>
+<link rel="author" title="Noam Rosenthal" href="mailto:noam.j.rosenthal@gmail.com">
+<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);
+  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() {
+  // 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)'
+  );
+}
+
+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(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") 1dppx)');
+test_valid_value_variants('background-image', 'image-set(url("example.png") 1dpi)');
+test_valid_value_variants('background-image', 'image-set(url("example.png") 1dpcm)');
+test_valid_value_variants('background-image', "image-set(url(example.png) 1dpcm, 'example.png' 2x)", 'image-set(url("example.png") 1dpcm, url("example.png") 2x)');
+test_valid_value_variants('background-image', "image-set('example.jpeg' 222dpi, url(example.png) 3.5x)", 'image-set(url("example.jpeg") 222dpi, url("example.png") 3.5x)');
+test_valid_value_variants('background-image', "image-set(linear-gradient(black, white) 1x)");
+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('content', "image-set(linear-gradient(black, white) 1x, 'example.png' 4x)", '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('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(url(example.png) 0x)");
+test_invalid_value_variants('background-image', "image-set(url(example.png) -20x)");
+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) 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) 1xtype('image/png'))");
+test_invalid_value_variants('background-image', "image-set(type('image/png') url(example.png) 1x)");
+test_invalid_value_variants('cursor', "image-set(linear-gradient(black, white) 1x)");
+
+test_default_resolution();
+</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..7bf950a403
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-radial-gradient-rendering.html
@@ -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>
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..a6724553d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-rendering-2.html
@@ -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>
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..ce4a900403
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-rendering.html
@@ -0,0 +1,13 @@
+<!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);
+  }
+</style>
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..1283d22d1f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-first-match-rendering.html
@@ -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>
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..897118acd6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-2.html
@@ -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>
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..51dbe2c922
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering-3.html
@@ -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>
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..16055dbccf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-rendering.html
@@ -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>
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..e555633cdd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-skip-unsupported-rendering.html
@@ -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>
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..3f9fcd27d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering-2.html
@@ -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>
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..6e9e56a4eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-type-unsupported-rendering.html
@@ -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>
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..c1063b74df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/image-set-unordered-res-rendering.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-images/image-set/reference/image-set-content-rendering-ref.html b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-content-rendering-ref.html
new file mode 100644
index 0000000000..c1ef6d4531
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-content-rendering-ref.html
@@ -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>
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..272bab9c58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-linear-gradient-rendering-ref.html
@@ -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>
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..f5545af5e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-radial-gradient-rendering-ref.html
@@ -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>
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..2ca6b3352d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/reference/image-set-rendering-ref.html
@@ -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>
diff --git a/testing/web-platform/tests/css/css-images/image-set/resources/image-set-rendering-helper.js b/testing/web-platform/tests/css/css-images/image-set/resources/image-set-rendering-helper.js
new file mode 100644
index 0000000000..5045679b4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/image-set/resources/image-set-rendering-helper.js
@@ -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);
+}
+
+document.addEventListener("DOMContentLoaded", setupTest);
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-images/image-set
parent	Initial commit. (diff)
download	firefox-upstream.tar.xz firefox-upstream.zip