Bug 1529749 [wpt PR 15321] - Added 2 new calc() tests with background-position, a=testonly
authorGérard Talbot <github@gtalbot.org>
Tue, 05 Mar 2019 12:18:58 +0000
changeset 464253 b2ffdd7ebfe7ada40c1f12ea2b1a854b134045c9
parent 464252 d4188fabe55521b0d7a1e221fe37cb990fef8f75
child 464254 0b5d77924a133aa2111dfd010b4c25e3d0e734d8
push id35713
push usercbrindusan@mozilla.com
push dateFri, 15 Mar 2019 21:55:43 +0000
treeherdermozilla-central@66b1aba3fb43 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1529749, 15321
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 1529749 [wpt PR 15321] - Added 2 new calc() tests with background-position, a=testonly Automatic update from web-platform-tests Added 2 new calc() tests with background-position -- wpt-commits: 1e29498a87bc6da1fc2bd8fa36c5b8f7ec652d82 wpt-pr: 15321
testing/web-platform/tests/css/css-values/calc-background-position-002.html
testing/web-platform/tests/css/css-values/calc-background-position-003.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/calc-background-position-002.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test: computed value of 'background-position' when specified with calc() function</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-3/#calc-computed-value">
+
+  <meta name="flags" content="">
+  <meta content="This test verifies how 6 calc() functions are computed for 'background-position'." 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 verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description)
+    {
+
+    test(function()
+      {
+
+      targetElement.style.setProperty(property_name, initial_value);
+
+      /*
+      The purpose of the initial_value is to act as a fallback
+      value in case the calc() function in the specified value
+      fails or in case it generates an invalid value. Since we
+      are running 6 consecutive tests on the same element,
+      then it is necessary to 'reset' its property to an
+      initial value.
+      */
+
+      targetElement.style.setProperty(property_name, specified_value);
+
+      assert_equals(getComputedStyle(targetElement)[property_name], expected_value);
+
+      }, description);
+    }
+
+ /* verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description) */
+
+    verifyComputedStyle("background-position", "initial", "calc(2px + 3px) calc(4px + 5px)", "5px 9px", "testing background-position: calc(2px + 3px) calc(4px + 5px)");
+
+    verifyComputedStyle("background-position", "initial", "calc(18px - 7px) calc(19px - 7px)", "11px 12px", "testing background-position: calc(18px - 7px) calc(19px - 7px)");
+
+    verifyComputedStyle("background-position", "initial", "calc(4 * 5px) calc(6px * 4)", "20px 24px", "testing background-position: calc(4 * 5px) calc(6px * 4)");
+
+    verifyComputedStyle("background-position", "initial", "calc(100px / 4) calc(119px / 7)", "25px 17px", "testing background-position: calc(100px / 4) calc(119px / 7)");
+
+    verifyComputedStyle("background-position", "initial", "calc(6px + 21%) calc(7em + 22%)", "calc(21% + 6px) calc(22% + 112px)", "testing background-position: calc(6px + 21%) calc(7em + 22%)");
+
+  /*
+    "
+    (...) background-position has layout-dependent behavior for
+    percentage values, and thus does not resolve percentages
+    until used-value time. Due to this, background-position
+    computation preserves the percentage in a calc(). (...)
+    "
+    https://www.w3.org/TR/css-values-3/#calc-computed-value
+  */
+
+    verifyComputedStyle("background-position", "initial", "calc(-8px + 23%) calc(-9em + 24%)", "calc(23% - 8px) calc(24% - 144px)", "testing background-position: calc(-8px + 23%) calc(-9em + 24%)");
+
+ /* verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description) */
+  }
+
+  startTesting();
+
+  </script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/calc-background-position-003.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test: serialization of 'background-position' when specified with calc() function</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css4-values/#calc-serialize">
+
+  <meta name="flags" content="">
+  <meta content="This test verifies how 6 calc() functions are serialized for 'background-position'." 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.backgroundPosition = specified_value;
+
+      assert_equals(targetElement.style.backgroundPosition, serialization_expected);
+
+      }, description);
+    }
+
+  /*
+    verifySerialization(specified_value, serialization_expected, description)
+  */
+
+    verifySerialization("calc(2px + 3px) calc(4px + 5px)", "calc(5px) calc(9px)", "testing background-position: calc(2px + 3px) calc(4px + 5px)");
+
+    verifySerialization("calc(18px - 7px) calc(19px - 7px)", "calc(11px) calc(12px)", "testing background-position: calc(18px - 7px) calc(19px - 7px)");
+
+    verifySerialization("calc(4 * 5px) calc(6px * 4)", "calc(20px) calc(24px)", "testing background-position: calc(4 * 5px) calc(6px * 4)");
+
+    verifySerialization("calc(100px / 4) calc(119px / 7)", "calc(25px) calc(17px)", "testing background-position: calc(100px / 4) calc(119px / 7)");
+
+  /*
+    verifySerialization(specified_value, serialization_expected, description)
+  */
+
+    verifySerialization("calc(6px + 21%) calc(7em + 22%)", "calc(21% + 6px) calc(22% + 7em)", "testing background-position: calc(6px + 21%) calc(7em + 22%)");
+
+    verifySerialization("calc(-8px + 23%) calc(-9em + 24%)", "calc(23% - 8px) calc(24% - 9em)", "testing background-position: calc(-8px + 23%) calc(-9em + 24%)");
+
+  /*
+
+  "
+  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
+
+  */
+
+  }
+
+  startTesting();
+
+  </script>