Bug 1529752 [wpt PR 15423] - Added calc-serialization-002 getComputedStyle-border-radius-002 tests, a=testonly
authorGérard Talbot <github@gtalbot.org>
Tue, 05 Mar 2019 12:19:00 +0000
changeset 522206 0b5d77924a133aa2111dfd010b4c25e3d0e734d8
parent 522205 b2ffdd7ebfe7ada40c1f12ea2b1a854b134045c9
child 522207 fbf69465f685fb79e5ae5562385455aa6fccc002
push id10871
push usercbrindusan@mozilla.com
push dateMon, 18 Mar 2019 15:49:32 +0000
treeherdermozilla-beta@018abdd16060 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1529752, 15423
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1529752 [wpt PR 15423] - Added calc-serialization-002 getComputedStyle-border-radius-002 tests, a=testonly Automatic update from web-platform-tests Added calc-serialization-002 getComputedStyle-border-radius-002 tests -- wpt-commits: 1d8ab82f60c260dd24ab819d8da1b43fd60d0adc wpt-pr: 15423
testing/web-platform/tests/css/css-values/calc-serialization-002.html
testing/web-platform/tests/css/css-values/getComputedStyle-border-radius-002.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/calc-serialization-002.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units: calc() serialization of a summation (complex)</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/#compat">
+  <link rel="help" href="https://www.w3.org/TR/css-values-4/#calc-serialize">
+
+  <meta content="This test verifies how 11 summations of mixed length units are serialized. Absolute length units, relative length units, font-relative length units, viewport-percentage length units and percentage units are tested." name="assert">
+
+  <script src="/resources/testharness.js"></script>
+
+  <script src="/resources/testharnessreport.js"></script>
+
+  <div id="target"></div>
+
+  <script>
+  function startTesting()
+  {
+
+  var targetElement = document.getElementById("target");
+
+    function verifySerialization(specified_value, serialization_expected, description)
+    {
+
+    test(function()
+      {
+
+      targetElement.style.height = specified_value;
+
+      assert_equals(targetElement.style.height, serialization_expected);
+
+      }, description);
+    }
+
+  /*
+
+  "
+  Sort the terms in the following order:
+
+    The number, if present
+
+    The percentage, if present
+
+    The dimensions, ordered by their units ASCII case-insensitive alphabetically
+  "
+  https://www.w3.org/TR/css-values-4/#math-function-serialize-a-summation
+
+  cm  centimeters  1cm = 96px/2.54
+  mm  millimeters  1mm = 1/10th of 1cm
+  Q   quarter-millimeters  1Q = 1/40th of 1cm
+  in  inches  1in = 2.54cm = 96px
+  pc  picas  1pc = 1/6th of 1in
+  pt  points  1pt = 1/72th of 1in
+  px  pixels  1px = 1/96th of 1in
+
+  */
+
+    verifySerialization("calc(1vh + 2px + 3%)", "calc(3% + 2px + 1vh)", "testing calc(1vh + 2px + 3%)");
+
+    verifySerialization("calc(4px + 1vh)", "calc(4px + 1vh)", "testing calc(4px + 1vh)");
+
+    verifySerialization("calc(5px + 6em + 1vh)", "calc(6em + 5px + 1vh)", "testing calc(5px + 6em + 1vh)");
+
+    verifySerialization("calc(1vh - 7px)", "calc(-7px + 1vh)", "testing calc(1vh - 7px)");
+
+    verifySerialization("calc(-8px + 9em + 1vh)", "calc(9em - 8px + 1vh)", "testing calc(-8px + 9em + 1vh)");
+
+    verifySerialization("calc(1pc + 1in + 1vh + 10%)", "calc(10% + 112px + 1vh)", "testing calc(1pc + 1in + 1vh + 10%)");
+
+ /* verifySerialization(specified_value, serialization_expected, description)  */
+
+    verifySerialization("calc(25.4q + 1vh + 12%)", "calc(12% + 24px + 1vh)", "testing calc(25.4q + 1vh + 12%)");
+
+    verifySerialization("calc(1em + 1.27cm + 13% + 3em)", "calc(13% + 4em + 48px)", "testing calc(1em + 1.27cm + 13% + 3em)");
+
+    verifySerialization("calc(1vmin - 14%)", "calc(-14% + 1vmin)", "testing calc(1vmin - 14%)");
+
+    verifySerialization("calc(15vw + 16vmin - 17vh)", "calc(-17vh + 16vmin + 15vw)", "testing calc(15vw + 16vmin - 17vh)");
+
+    verifySerialization("calc(-80px + 25.4mm)", "calc(16px)", "testing calc(-80px + 25.4mm)");
+
+    /*
+    This calc(-80px + 25.4mm) test is on purpose last. We want the
+    div#target to occupy 16px and to not cause document box height
+    to be unneedlessly tall.
+    */
+
+  }
+
+  startTesting();
+
+  </script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/getComputedStyle-border-radius-002.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values Test: percentages in calc() and computed border-radius values</title>
+
+  <!--
+
+  Bugzilla bug report 1516454: Computed value of border-radius with calc(percentage) is incorrect
+  https://bugzilla.mozilla.org/show_bug.cgi?id=1516454
+
+  -->
+
+  <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-3/#calc-computed-value">
+
+  <style>
+  div#target
+    {
+      border: black solid 5px;
+      height: 100px;
+      width: 100px;
+    }
+  </style>
+
+  <script src="/resources/testharness.js"></script>
+
+  <script src="/resources/testharnessreport.js"></script>
+
+  <div id="log"></div>
+
+  <div id="target"></div>
+
+  <script>
+  function startTesting()
+  {
+
+    var targetElement = document.getElementById("target");
+
+    function compareValue(property_name, calcValue, expectedValue, description)
+    {
+
+    test(function()
+      {
+
+      targetElement.style.setProperty(property_name, "initial");
+
+      targetElement.style.setProperty(property_name, calcValue);
+
+      var computedCalcValue = getComputedStyle(targetElement)[property_name];
+
+      targetElement.style.setProperty(property_name, expectedValue);
+
+      var computedExpectedValue = getComputedStyle(targetElement)[property_name];
+
+      assert_equals(computedCalcValue, computedExpectedValue);
+
+      }, description);
+    }
+
+    compareValue("border-top-left-radius", "calc(50%)", "50%", "simple percentage conversion test 1");
+
+    compareValue("border-top-right-radius", "calc(50%)", "50%", "simple percentage conversion test 2");
+
+    compareValue("border-bottom-left-radius", "calc(50%)", "50%", "simple percentage conversion test 3");
+
+    compareValue("border-bottom-right-radius", "calc(50%)", "50%", "simple percentage conversion test 4");
+
+    compareValue("border-top-left-radius", "calc(50%) calc(25%)", "50% 25%", "percentage conversion test 5");
+
+    compareValue("border-top-right-radius", "calc(50%) calc(25%)", "50% 25%", "percentage conversion test 6");
+
+    compareValue("border-bottom-left-radius", "calc(50%) calc(25%)", "50% 25%", "percentage conversion test 7");
+
+    compareValue("border-bottom-right-radius", "calc(50%) calc(25%)", "50% 25%", "percentage conversion test 8");
+  }
+
+  startTesting();
+
+  </script>