The infinity and NaN length value must be clamped before consumed

This patch is the second patch of css calc infinity and NaN implementation project and included clamping the infinity and NaN to finite for <Length> and <Length-Percentage>. More details are 4th section in [2]. The Spec: [1] Design docs: [2] Feature Status: [3] Intent to prototype: [4] [1] https://drafts.csswg.org/css-values/#calc-type-checking [2] https://bit.ly/349gXjq [3] https://chromestatus.com/feature/5657825571241984 [4] https://groups.google.com/a/chromium.org/g/blink-dev/c/4cT9dMkzVXE/m/aCT8B6PDAwAJ Bug: 1133390 Change-Id: I4e8e488ea9173a82357907ebb5623619c576bd22 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2661135 Reviewed-by: Mason Freed <masonfreed@chromium.org> Reviewed-by: Xiaocheng Hu <xiaochengh@chromium.org> Commit-Queue: Seokho Song <0xdevssh@gmail.com> Cr-Commit-Position: refs/heads/master@{#857195}
web-platform-tests · Feb 24, 2021 · 7d5bfa2 · 7d5bfa2
1 parent 5600492
commit 7d5bfa2
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 0 deletions.
diff --git a/css/css-values/calc-infinity-nan-computed.html b/css/css-values/calc-infinity-nan-computed.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Infinity and NaN: calc() computed value.</title>
+<link rel="author" title="Seokho Song"  href="mailto:0xdevssh@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-values/#calc-type-checking">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+const APPROX_INFINITY = 3.35544e+07;
+const APPROX_NEGATIVE_INFINITY = -APPROX_INFINITY;
+
+// For <length>
+test_computed_value_greater_or_lower_than("width", "calc(NaN * 1px)", APPROX_INFINITY);
+test_computed_value_greater_or_lower_than("width", "calc(infinity * 1px)", APPROX_INFINITY);
+test_computed_value_greater_or_lower_than("width", "calc(infinity * 1cm)", APPROX_INFINITY);
+test_computed_value_greater_or_lower_than("width", "calc(NaN * 1rem)", APPROX_INFINITY);
+
+test_computed_value_greater_or_lower_than("width", "calc(infinity * 1px - infinity * 1%)", APPROX_INFINITY);
+test_computed_value_greater_or_lower_than("width", "calc(infinity * 1px + infinity * 1%)", APPROX_INFINITY);
+test_computed_value_greater_or_lower_than("width", "calc(min(NaN * 1px, infinity * 1px) + max(infinity * 1px, -infinity * 1px))", APPROX_INFINITY);
+test_computed_value_greater_or_lower_than("width", "calc(infinity * 1px - max(infinity * 1%, 0%))", APPROX_INFINITY);
+
+test_computed_value_greater_or_lower_than("width", "calc(max(infinity * 1px, 10px))", APPROX_INFINITY);
+
+test_computed_value_greater_or_lower_than("margin-left", "calc(-infinity * 1px)", APPROX_NEGATIVE_INFINITY);
+test_computed_value_greater_or_lower_than("margin-left", "calc(min(1px, -infinity * 1%))", APPROX_NEGATIVE_INFINITY);
+
+test_computed_value_greater_or_lower_than("margin-left", "calc(-infinity * 1%)", APPROX_NEGATIVE_INFINITY);
+test_computed_value_greater_or_lower_than("margin-left", "calc(max(10000px, 0px) + min(-infinity * 1px, infinity * 1px))", APPROX_NEGATIVE_INFINITY);
+
+test_computed_value_greater_or_lower_than("margin-left", "calc(-infinity * 1px - infinity * 1px)", APPROX_NEGATIVE_INFINITY);
+test_computed_value_greater_or_lower_than("margin-left", "calc(min(-infinity * 1px, 10px))", APPROX_NEGATIVE_INFINITY);
+
+// ----------------
+
+</script>
+</body>
+</html>
diff --git a/css/support/computed-testcommon.js b/css/support/computed-testcommon.js
@@ -36,6 +36,23 @@ function test_computed_value(property, specified, computed, titleExtra) {
   }, `Property ${property} value '${specified}'${titleExtra ? ' ' + titleExtra : ''}`);
 }
 
+function test_computed_value_greater_or_lower_than(property, specified, expected, titleExtra) {
+    test(() => {
+      const target = document.getElementById('target');
+      assert_true(property in getComputedStyle(target), property + " doesn't seem to be supported in the computed style");
+      assert_true(CSS.supports(property, specified), "'" + specified + "' is a supported value for " + property + ".");
+      target.style[property] = '';
+      target.style[property] = specified;
+      let readValue = parseFloat(getComputedStyle(target)[property]);
+      assert_true(isFinite(readValue), specified + " expected finite value but got " + readValue)
+      assert_false(isNaN(readValue),   specified + " expected finite value but got " + readValue)
+      if (expected > 0)
+        assert_greater_than_equal(readValue, expected, specified);
+      else
+        assert_less_than_equal(readValue, expected, specified);
+  }, `Property ${property} value '${specified}'${titleExtra ? ' ' + titleExtra : ''}`);
+}
+
 function test_pseudo_computed_value(pseudo, property, specified, computed, titleExtra) {
   if (!computed)
     computed = specified;