Bug 1564660 [wpt PR 17442] - [css-images] Radii are clamped non-negative, a=testonly

ewilligers · jgraham · commit 8d5782bfb70b · 2019-07-24T13:31:47.000+01:00
Automatic update from web-platform-tests [css-images] Radii are clamped non-negative (#17442) Compute colors and lengths in background-image getComputedStyle w3c/csswg-drafts#4042 Test that radii like calc(-0.5em + 10px) are clamped to be non-negative. https://drafts.csswg.org/css-images/#radial-gradients -- wpt-commits: b93cbfae1eb9e2a1248fb2d835ac7a7b1dc649cd wpt-pr: 17442
diff --git a/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-computed.sub.html b/testing/web-platform/tests/css/css-backgrounds/parsing/background-image-computed.sub.html
@@ -5,17 +5,31 @@
 <title>CSS Backgrounds and Borders: getComputedValue().backgroundImage</title>
 <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-image">
 <meta name="assert" content="background-image computed value is as specified.">
+<meta name="assert" content="Colors and lengths are computed, with radii clamped.">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
 </head>
 <body>
+<!-- target is used by test_computed_value -->
 <div id="target"></div>
 <script>
 test_computed_value("background-image", "none");
 
 test_computed_value("background-image", 'url("http://{{host}}/")');
 test_computed_value("background-image", 'none, url("http://{{host}}/")');
+
+test_computed_value('background-image', 'linear-gradient(to left bottom, red, blue)', 'linear-gradient(to left bottom, rgb(255, 0, 0), rgb(0, 0, 255))');
+
+test_computed_value('background-image', 'radial-gradient(10px at 20px 30px, rgb(255, 0, 0), rgb(0, 0, 255))');
+test_computed_value('background-image', 'radial-gradient(circle calc(-0.5em + 10px) at calc(-1em + 10px) calc(-2em + 10px), red, blue)', 'radial-gradient(0px at -30px -70px, rgb(255, 0, 0), rgb(0, 0, 255))');
+test_computed_value('background-image', 'radial-gradient(ellipse calc(-0.5em + 10px) calc(0.5em + 10px) at 20px 30px, red, blue)', 'radial-gradient(0px 30px at 20px 30px, rgb(255, 0, 0), rgb(0, 0, 255))');
+test_computed_value('background-image', 'radial-gradient(ellipse calc(0.5em + 10px) calc(-0.5em + 10px) at 20px 30px, red, blue)', 'radial-gradient(30px 0px at 20px 30px, rgb(255, 0, 0), rgb(0, 0, 255))');
 </script>
 </body>
 </html>
