Bug 1529740 [wpt PR 15320] - Values3 gt pr16, a=testonly
authorGérard Talbot <github@gtalbot.org>
Tue, 05 Mar 2019 12:18:55 +0000
changeset 464586 751a65189e70f4519735b01ad24ad38a1fb83b2f
parent 464585 070850f781aeb336947812a084b69cb91eb9e0af
child 464587 1ddf359cefa95cddeaea8d01752c8174cb558ccc
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
bugs1529740, 15320
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 1529740 [wpt PR 15320] - Values3 gt pr16, a=testonly Automatic update from web-platform-tests Added 3 tests with 2 from google chromium project -- Added 3 tests with 2 from google chromium project -- wpt-commits: 49b277280e996f0d290e6a2febe683cbaaa82ae3, 9268e46bb715326b86b3fc563e6d2ca2bf5a31a4 wpt-pr: 15320
testing/web-platform/tests/css/css-values/calc-min-height.html
testing/web-platform/tests/css/css-values/calc-nesting-002.html
testing/web-platform/tests/css/css-values/calc-nesting.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/calc-min-height.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test: calc() function in 'min-height' and 'box-sizing: border-box' (complex)</title>
+
+  <!--
+
+  Original test is:
+
+https://chromium.googlesource.com/chromium/src/+/c825d655f6aaf73484f9d56e9012793f5b9668cc/third_party/WebKit/LayoutTests/css3/calc/calc-min-height.html
+
+  The original test is related to:
+
+  Issue 580508: Height of content changes after multiple reloads
+  https://bugs.chromium.org/p/chromium/issues/detail?id=580508
+
+  -->
+
+  <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-notation">
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+
+  <meta name="flags" content="">
+  <meta name="assert" content="This test checks how 'min-height' with calc(percentage) and 'box-sizing' are handled. The percentage in the calc() is calculated on the content box height of div#container.">
+
+  <style>
+  div#container
+    {
+      border-bottom: transparent solid 100px;
+      border-right: transparent solid 100px;
+      height: 400px;
+      width: 100px;
+    }
+
+  div#item
+    {
+      background-color: red;
+      box-sizing: border-box;
+      height: 50px;
+      min-height: calc(50% - 100px);
+    }
+
+  div#item > div
+    {
+      background-color: green;
+      border-bottom: green solid 34px; /* arbitrary border-bottom-width value */
+      border-top: green solid 12px; /* arbitrary border-top-width value */
+      box-sizing: border-box;
+      height: 17px;
+      min-height: 100%; /* content height should be 100px - 34px - 12px == 54px */
+      overflow-y: visible;
+      /*
+      If the content height of innermost div is taller
+      than 54px, then a green rectangle (not a square)
+      will be created.
+
+      If the content height of innermost div is less
+      than 54px, then an horizontal stripe of red
+      will become visible.
+      */
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="container">
+
+    <div id="item">
+
+      <div></div>
+
+    </div>
+
+  </div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/calc-nesting-002.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test: serialization of summation involving nested calc()</title>
+
+  <!--
+
+  This test is an adapted version of the portion of the original test
+
+  https://chromium.googlesource.com/chromium/src/+/c825d655f6aaf73484f9d56e9012793f5b9668cc/third_party/WebKit/LayoutTests/css3/calc/calc-nesting.html
+
+  which required using property-parsing-test.js
+
+  -->
+
+  <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/#math-function-simplify-an-expression">
+
+  <meta content="This test checks that how a summation involving one or more nested calc() is performed and serialized." 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.left = specified_value;
+
+      assert_equals(targetElement.style.left, serialization_expected);
+
+      }, description);
+    }
+
+    verifySerialization("calc(20px + calc(80px))", "calc(100px)", "testing calc(20px + calc(80px))");
+
+    verifySerialization("calc(calc(100px))", "calc(100px)", "testing calc(calc(100px))");
+
+    verifySerialization("calc(calc(2) * calc(50px)", "calc(100px)", "testing calc(calc(2) * calc(50px)");
+
+    verifySerialization("calc(calc(150px*2/3)", "calc(100px)", "testing calc(calc(150px*2/3)");
+
+    verifySerialization("calc(calc(2 * calc(calc(3)) + 4) * 10px)", "calc(100px)", "testing calc(calc(2 * calc(calc(3)) + 4) * 10px)");
+
+    verifySerialization("calc(50px + calc(40%))", "calc(40% + 50px)", "testing calc(50px + calc(40%))");
+
+  /*
+
+  "
+  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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/calc-nesting.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test: nested calc() functions</title>
+
+  <!--
+
+  This test is the first portion of the original test
+
+  https://chromium.googlesource.com/chromium/src/+/c825d655f6aaf73484f9d56e9012793f5b9668cc/third_party/WebKit/LayoutTests/css3/calc/calc-nesting.html
+
+  -->
+
+  <link rel="help" href="https://www.w3.org/TR/css-values-3/#calc-notation">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+#parent { width: 200px; }
+#div1 { width: calc(calc(50px)); }
+#div2 { width: calc(calc(60%) - 20px); }
+#div3 { width: calc(calc(3 * 25%)); }
+#div4 {
+    --width: calc(10% + 30px);
+    width: calc(2 * var(--width));
+}
+</style>
+<div id=parent>
+  <div id=div1></div>
+  <div id=div2></div>
+  <div id=div3></div>
+  <div id=div4></div>
+</div>
+<script>
+// Tests that require layout
+test(function(){
+    assert_equals(getComputedStyle(div1).width, "50px");
+    assert_equals(getComputedStyle(div2).width, "100px");
+    assert_equals(getComputedStyle(div3).width, "150px");
+    assert_equals(getComputedStyle(div4).width, "100px");
+}, "Nested calcs should work with layout");
+</script>