Testing computed value of calc() with mixed units (#40425)

web-platform-tests · Jun 8, 2023 · f96b61c · f96b61c
1 parent 9c15bb1
commit f96b61c
Showing 1 changed file with 222 additions and 0 deletions.
diff --git a/css/css-values/getComputedStyle-calc-mixed-units-002.html b/css/css-values/getComputedStyle-calc-mixed-units-002.html
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values Test: computed value of 8 calc() values that involve mixed units</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-values-4/#calc-computed-value">
+
+  <meta name="flags" content="">
+  <meta content="This meta-test verifies that terms with a length value that can be resolved at computed-value time must be resolved and must be absolutized to 'px'. In this meta-test, we test percentage unit (%), three font-relative length units (em, rem, lh) and some absolute length units (pc, pt, px, cm, mm, Q, in). " name="assert">
+
+  <!--
+
+     NOT Tested in this test are:
+
+     Viewport-percentage Length units:
+     vh, svh, lvh, dvh,
+     vw, svw, lvw, dvw,
+     vmin, svmin, lvmin, dvmin,
+     vmax, svmax, lvmax, dvmax,
+     vi, svi, lvi, dvi,
+     vb, svb, lvb, dvb
+
+     and these of font-relative length units:
+     ex, rex,
+     cap, rcap,
+     ch, rch,
+     ic, ric,
+     rlh
+
+  -->
+
+  <script src="/resources/testharness.js"></script>
+
+  <script src="/resources/testharnessreport.js"></script>
+
+  <style>
+  html
+    {
+      font-size: 30px; /* for checking rem unit */
+    }
+
+  body
+    {
+      font-size: 16px;
+      line-height: 1.25; /* computed value: 20px; for checking lh unit */
+      height: 500px;
+      margin: 20px;
+      width: 520px;
+    }
+
+  div#target
+    {
+      height: 100px;
+      width: 100px;
+    }
+  </style>
+
+  <div id="target"></div>
+
+  <script>
+  function startTesting()
+  {
+
+  var targetElement = document.getElementById("target");
+
+    function verifyComputedStyle(property_name, specified_value, expected_value, description)
+    {
+
+    test(function()
+      {
+
+      targetElement.style.setProperty(property_name, "initial");
+
+      targetElement.style.setProperty(property_name, specified_value);
+
+      assert_equals(getComputedStyle(targetElement)[property_name], expected_value);
+
+      }, description);
+    }
+
+    verifyComputedStyle("width", "calc(10% + 2em)", "84px", "testing width: calc(10% + 2em)");
+
+    /*
+
+     520px mult 10% == 52px
+
+                    +
+
+        16px mult 2 == 32px
+
+                     =======
+
+                       84px
+
+    */
+
+
+    verifyComputedStyle("width", "calc(5% + 4rem)", "146px", "testing width: calc(5% + 4rem)");
+
+    /*
+
+     520px mult 5% ==  26px
+
+                    +
+
+       30px mult 4 == 120px
+
+                     =======
+
+                      146px
+
+    */
+
+
+    verifyComputedStyle("width", "calc(8lh + 7px)", "167px", "testing width: calc(8lh + 7px)");
+
+    /*
+
+     8 mult 20px ==  160px
+
+                    +
+
+                       7px
+
+                     =======
+
+                     167px
+
+    */
+
+
+    verifyComputedStyle("height", "calc(10% + 6pt)", "58px", "testing height: calc(10% + 6pt)");
+
+    /*
+
+    10% mult 500 == 50px
+
+                  +
+
+             6pt ==  8px
+
+                  ========
+
+                    58px
+
+    */
+
+
+    verifyComputedStyle("width", "calc(4em + 2.6458333cm)", "164px", "testing width: calc(4em + 2.6458333cm)");
+
+    /*
+
+     4 mult 16px ==   64px
+
+          +
+
+     2.6458333cm ==  100px
+
+                   ========
+
+                     164px
+
+    */
+
+
+    verifyComputedStyle("height", "calc(5em + 26.458333mm)", "180px", "testing height: calc(5em + 26.458333mm)");
+
+    /*
+
+     5 mult 16px == 80px
+
+          +
+
+    26.458333mm == 100px
+
+                 ========
+
+                   180px
+
+    */
+
+
+    verifyComputedStyle("width", "calc(2in + 101.6Q)", "288px", "testing width: calc(2in + 101.6Q)");
+
+    /*
+
+     2 mult 96px == 192px
+
+          +
+
+       101.6Q    ==  96px
+
+                   ========
+
+                    288px
+
+    */
+
+
+    verifyComputedStyle("height", "calc(1pc + 3pt)", "20px", "testing height: calc(1pc + 3pt)");
+
+    /*
+
+       1pc == 16px
+
+          +
+
+       3pt ==  4px
+
+             =======
+
+              20px
+
+    */
+
+  }
+
+  startTesting();
+
+  </script>