Add calc() resolution parsing support

R=xiaochengh, futhark, pdr Bug: 983613 Change-Id: I53be579cca601cddbd87981cebe08a62b914b79c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4330619 Commit-Queue: Traian Captan <[email protected]> Reviewed-by: Xiaocheng Hu <[email protected]> Cr-Commit-Position: refs/heads/main@{#1121484}
web-platform-tests · Mar 28, 2023 · dbc697f · dbc697f
1 parent 4548f5b
commit dbc697f
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 0 deletions.
diff --git a/css/css-contain/container-queries/at-container-parsing.html b/css/css-contain/container-queries/at-container-parsing.html
@@ -136,6 +136,7 @@
   test_condition_unknown('(asdf)');
   test_condition_unknown('(resolution > 100dpi)');
   test_condition_unknown('(resolution: 150dpi)');
+  test_condition_unknown('(resolution: calc(2x))');
   test_condition_unknown('(color)');
   test_condition_unknown('(min-color: 1)');
   test_condition_unknown('(color-index >= 1)');

diff --git a/css/css-images/image-set/image-set-calc-x-rendering-2.html b/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/css/css-images/image-set/image-set-calc-x-rendering.html b/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/css/css-images/image-set/image-set-computed.sub.html b/css/css-images/image-set/image-set-computed.sub.html
@@ -16,6 +16,32 @@
   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)'
+  );
+}
+
 // 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)');
@@ -33,4 +59,6 @@
 // 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/css/mediaqueries/match-media-parsing.html b/css/mediaqueries/match-media-parsing.html
@@ -16,12 +16,20 @@
 
 function test_resolution_parsing() {
     test_parsing("(min-resolution: 1x)");
+    test_parsing("(min-resolution: calc(1x))", "(min-resolution: calc(1dppx))");
     test_parsing("(resolution: 2x)");
+    test_parsing("(resolution: calc(2x))", "(resolution: calc(2dppx))");
     test_parsing("(max-resolution: 7x)");
+    test_parsing("(max-resolution: calc(7x))", "(max-resolution: calc(7dppx))");
 
     test_parsing("(resolution: 2dppx)");
     test_parsing("(resolution: 600dpi)");
     test_parsing("(resolution: 77dpcm)");
+
+    test_parsing("(resolution: calc(1x + 2x))", "(resolution: calc(3dppx))");
+    test_parsing("(resolution: calc(5x - 2x))", "(resolution: calc(3dppx))");
+    test_parsing("(resolution: calc(1x * 3))", "(resolution: calc(3dppx))");
+    test_parsing("(resolution: calc(6x / 2))", "(resolution: calc(3dppx))");
 }
 
 test_parsing("", "");

diff --git a/css/mediaqueries/mq-calc-resolution.html b/css/mediaqueries/mq-calc-resolution.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>Test: support for calc resolution in Media Queries</title>
+<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="calc resolution can be used in Media Queries">
+<style>
+  #test {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+  }
+
+  @media (resolution >= calc(2x - 96dpi)){
+    #test {
+      background-color: green;
+    }
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="test"></div>
diff --git a/css/mediaqueries/test_media_queries.html b/css/mediaqueries/test_media_queries.html
@@ -466,6 +466,7 @@
       expression_should_be_known(feature + ": -3dpi");
       expression_should_be_known(feature + ": 0dppx");
       expression_should_be_known(feature + ": 0x");
+      expression_should_be_known(feature + ": calc(6x / 2)");
     }
 
     // Find the resolution using max-resolution