Add support for non-positive resolutions to image-set

This change was triggered by the recently added wpt tests that started failing after auto import: third_party/blink/web_tests/external/wpt/css/css-images/image-set/image-set-zero-resolution-rendering.html third_party/blink/web_tests/external/wpt/css/css-images/image-set/image-set-zero-resolution-rendering-2.html Currently the spec does not restrict the range for resolution, thus non-positive resolutions are valid and should not be rejected at parse time. The current consensus is to parse the non-positive resolutions, but treat them as unsupported options for rendering purposes. With this change, image-set will match resolution parsing with media queries. An issue has been opend for the spec to define the valid argument range for resolution: w3c/csswg-drafts#8532 R=futhark, pdr Change-Id: I7b329519168f3c088f5c9ee8614931b0ead7a4df
web-platform-tests · Mar 7, 2023 · 1f541b8 · 1f541b8
1 parent 5d5a731
commit 1f541b8
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 22 deletions.
diff --git a/...mage-set-zero-resolution-rendering-2.html → ...-set-negative-resolution-rendering-2.html b/...mage-set-zero-resolution-rendering-2.html → ...-set-negative-resolution-rendering-2.html
@@ -1,15 +1,14 @@
 <!DOCTYPE html>
-<title>Image set invalid resolution rendering</title>
-<link rel="author" title="Noam Rosenthal" href="mailto:noam@webkit.org">
+<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 zero resolution">
+<meta name="assert" content="image-set rendering with negative resolution">
 <style>
   #test {
     background-image: url("/images/red.png");
     background-image: image-set(
-      url("/images/green.png") 0x,
+      url("/images/red.png") -1x,
       url("/images/green.png") 2x
     );
     width: 100px;

diff --git a/css/css-images/image-set/image-set-negative-resolution-rendering.html b/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="/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/green.png") -1x);
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div id="test"></div>
diff --git a/css/css-images/image-set/image-set-parsing.html b/css/css-images/image-set/image-set-parsing.html
@@ -142,6 +142,42 @@
   );
 }
 
+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") -1x)'
+  );
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url("example.png") -3dppx)'
+  );
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url("example.png") -96dpi)'
+  );
+  test_valid_value_variants(
+    'background-image',
+    'image-set(url("example.png") -113dpcm)'
+  );
+}
+
 function test_gradient_images_parsing() {
   test_valid_value_variants(
     'background-image',
@@ -257,14 +293,13 @@
 
   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) 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();

diff --git a/css/css-images/image-set/image-set-zero-resolution-rendering.html b/css/css-images/image-set/image-set-zero-resolution-rendering.html