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 464587 1ddf359cefa95cddeaea8d01752c8174cb558ccc
parent 464586 751a65189e70f4519735b01ad24ad38a1fb83b2f
child 464588 3529a19307c6726cca0640f3a75d5aa7e598e2ce
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
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>