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 464588 3529a19307c6726cca0640f3a75d5aa7e598e2ce
parent 464587 1ddf359cefa95cddeaea8d01752c8174cb558ccc
child 464589 aff06f0ab5f8e15d3f53745df840d3fcb7c31ef3
push id35717
push useraciure@mozilla.com
push dateSun, 17 Mar 2019 09:45:26 +0000
treeherdermozilla-central@e0861be8d6c0 [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>