Added default resolution support in css image-set

Currently, if the resolution of an image-set value is missing, parsing fails. Based on the spec, the resolution is optional and should default to 1x if not specified. Spec definition: "A <resolution> (optional). This is used to help the UA decide which <image-set-option> to choose. If the image reference is for a raster image, it also specifies the image’s natural resolution, overriding any other source of data that might supply a natural resolution. If not specified, it behaves as 1x for the purpose of selecting which <image-set-option> to use. It also defaults the image’s natural resolution to 1x, but if some other source of data supplies a natural resolution, that resolution must be honored instead." https://w3c.github.io/csswg-drafts/css-images-4/#image-set-notation R=masonf, pdr Fixed: 1400898 Change-Id: I6d15966d88307cfdfa6ce00e9fca3a64fcfceea5 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4112418 Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: Traian Captan <tcaptan@chromium.org> Cr-Commit-Position: refs/heads/main@{#1084682}
web-platform-tests · Dec 17, 2022 · bb137cf · bb137cf
1 parent 9ce4a64
commit bb137cf
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 0 deletions.
diff --git a/css/css-images/image-set/image-set-no-res-rendering-2.html b/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/css/css-images/image-set/image-set-parsing.html b/css/css-images/image-set/image-set-parsing.html
@@ -19,6 +19,47 @@
   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)');
@@ -45,4 +86,6 @@
 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>