Bug 1348519 - Part 3: Add web platform tests for grid-template-{columns|rows}. r=mats
authorBoris Chiou <boris.chiou@gmail.com>
Sat, 12 Jan 2019 02:22:46 +0000
changeset 453599 80dc7df104e6
parent 453598 bd4efc854419
child 453600 b08325b6d8b5
push id35360
push usernbeleuzu@mozilla.com
push dateSat, 12 Jan 2019 09:39:47 +0000
treeherdermozilla-central@cb35977ae7a4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmats
bugs1348519
milestone66.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 1348519 - Part 3: Add web platform tests for grid-template-{columns|rows}. r=mats Add wpt for testing interpolation result on grid-template-{columns|rows}. Depends on D16129 Differential Revision: https://phabricator.services.mozilla.com/D16130
testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001-ref.html
testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001.html
testing/web-platform/tests/css/css-grid/animation/grid-template-columns-interpolation.html
testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001-ref.html
testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001.html
testing/web-platform/tests/css/css-grid/animation/grid-template-rows-interpolation.html
testing/web-platform/tests/css/css-grid/animation/resources/interpolation-testcommon.js
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Grid: Reference for grid-template-columns interpolation</title>
+  <style>
+    .grid {
+      display: grid;
+      width: 400px;
+      grid-gap: 10px;
+      grid-template-columns: 60px 1fr;
+    }
+    span { border: 1px solid; }
+  </style>
+</head>
+<body>
+  <div class="grid">
+    <span>column1</span>
+    <span>column2</span>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <title>CSS Grid: Test grid-template-columns interpolation</title>
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+  <link rel="match" href="grid-template-columns-001-ref.html">
+  <meta name="assert" content="The grid-template-columns property should have
+                               correct interpolation result.">
+  <style>
+    @keyframes anim {
+      from {
+        grid-template-columns: 20px 1fr;
+      }
+      to {
+        grid-template-columns: 100px 1fr;
+      }
+    }
+    .grid {
+      display: grid;
+      width: 400px;
+      grid-gap: 10px;
+      animation: anim 10s -5s paused linear;
+    }
+    span { border: 1px solid; }
+  </style>
+</head>
+<body>
+  <div class="grid">
+    <span>column1</span>
+    <span>column2</span>
+  </div>
+</body>
+<script>
+  requestAnimationFrame(() => {
+    document.documentElement.classList.remove('reftest-wait');
+  });
+</script>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-interpolation.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>grid-template-columns interpolation</title>
+    <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+    <meta name="assert" content="grid-template-columns supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="resources/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      // Distinct length of track list.
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "1fr 1fr 1fr",
+        to: "2fr 2fr"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "10px 20px 30px",
+        to: "20px 30px"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "1fr 1fr 1fr",
+        to: "none"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "none",
+        to: "20px 30px"
+      });
+
+      // Exercise <explicit-track-list>
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "10px 20px 30px",
+        to: "20px 30px 40px"
+      }, [
+        {at: -1, expect: "0px 10px 20px"},
+        {at: 0, expect: "10px 20px 30px"},
+        {at: 0.4, expect: "14px 24px 34px"},
+        {at: 0.6, expect: "16px 26px 36px"},
+        {at: 1, expect: "20px 30px 40px"},
+        {at: 2, expect: "30px 40px 50px"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "10px 20px 30px",
+        to: "20% 30% 40px"
+      }, [
+        {at: -1, expect: "calc(20px + -20%) calc(40px + -30%) 20px"},
+        {at: 0, expect: "calc(10px + 0%) calc(20px + 0%) 30px"},
+        {at: 0.4, expect: "calc(6px + 8%) calc(12px + 12%) 34px"},
+        {at: 0.6, expect: "calc(4px + 12%) calc(8px + 18%) 36px"},
+        {at: 1, expect: "20% 30% 40px"},
+        {at: 2, expect: "calc(-10px + 40%) calc(-20px + 60%) 50px"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "1fr 1fr 1fr",
+        to: "2fr auto 2fr"
+      }, [
+        {at: -1, expect: "0fr 1fr 0fr"},
+        {at: 0, expect: "1fr 1fr 1fr"},
+        {at: 0.4, expect: "1.4fr 1fr 1.4fr"},
+        {at: 0.6, expect: "1.6fr auto 1.6fr"},
+        {at: 1, expect: "2fr auto 2fr"},
+        {at: 2, expect: "3fr auto 3fr"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "1fr [a b] 1fr [d] 1fr",
+        to: "2fr [c] auto 2fr"
+      }, [
+        {at: -1, expect: "0fr [a b] 1fr [d] 0fr"},
+        {at: 0, expect: "1fr [a b] 1fr [d] 1fr"},
+        {at: 0.4, expect: "1.4fr [a b] 1fr [d] 1.4fr"},
+        {at: 0.6, expect: "1.6fr [c] auto 1.6fr"},
+        {at: 1, expect: "2fr [c] auto 2fr"},
+        {at: 2, expect: "3fr [c] auto 3fr"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "fit-content(10px) fit-content(20px)",
+        to: "fit-content(20px) max-content"
+      }, [
+        {at: -1, expect: "fit-content(0px) fit-content(20px)"},
+        {at: 0, expect: "fit-content(10px) fit-content(20px)"},
+        {at: 0.4, expect: "fit-content(14px) fit-content(20px)"},
+        {at: 0.6, expect: "fit-content(16px) max-content"},
+        {at: 1, expect: "fit-content(20px) max-content"},
+        {at: 2, expect: "fit-content(30px) max-content"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "minmax(10px, 1fr) minmax(20px, 2fr)",
+        to: "minmax(20px, 2fr) minmax(30px, auto)"
+      }, [
+        {at: -1, expect: "minmax(0px, 0fr) minmax(10px, 2fr)"},
+        {at: 0, expect: "minmax(10px, 1fr) minmax(20px, 2fr)"},
+        {at: 0.4, expect: "minmax(14px, 1.4fr) minmax(24px, 2fr)"},
+        {at: 0.6, expect: "minmax(16px, 1.6fr) minmax(26px, auto)"},
+        {at: 1, expect: "minmax(20px, 2fr) minmax(30px, auto)"},
+        {at: 2, expect: "minmax(30px, 3fr) minmax(40px, auto)"}
+      ]);
+
+      // Exercise <track-list> (with <track-repeat>)
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "1fr repeat(2, 2fr 30px) 1fr",
+        to: "2fr repeat(2, 3fr 40px 50px) 2fr"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "1fr repeat(2, 2fr 30px) 1fr",
+        to: "2fr repeat(3, 3fr 40px) 2fr"
+      });
+
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "repeat(2, 2fr 30px)",
+        to: "repeat(4, 40px)"
+      }, [
+        {at: -1, expect: "2fr 20px 2fr 20px"},
+        {at: 0, expect: "repeat(2, 2fr 30px)"},
+        {at: 0.4, expect: "2fr 34px 2fr 34px"},
+        {at: 0.6, expect: "40px 36px 40px 36px"},
+        {at: 1, expect: "repeat(4, 40px)"},
+        {at: 2, expect: "40px 50px 40px 50px"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "1fr repeat(2, 2fr auto 30px) 1fr",
+        to: "2fr repeat(2, 3fr 30px 40px) 2fr"
+      }, [
+        {at: -1, expect: "0fr repeat(2, 1fr auto 20px) 0fr"},
+        {at: 0, expect: "1fr repeat(2, 2fr auto 30px) 1fr"},
+        {at: 0.4, expect: "1.4fr repeat(2, 2.4fr auto 34px) 1.4fr"},
+        {at: 0.6, expect: "1.6fr repeat(2, 2.6fr 30px 36px) 1.6fr"},
+        {at: 1, expect: "2fr repeat(2, 3fr 30px 40px) 2fr"},
+        {at: 2, expect: "3fr repeat(2, 4fr 30px 50px) 3fr"}
+      ]);
+
+      // Exercise <auto-track-list>
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+        to: "20px 20px repeat(auto-fill, minmax(30px, 1fr))"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+        to: "20px repeat(auto-fit, minmax(30px, 1fr)) 20px"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+        to: "20px repeat(auto-fill, minmax(35px, auto)) 20px"
+      });
+    </script>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Grid: Reference for grid-template-rows interpolation</title>
+  <style>
+    .grid {
+      display: grid;
+      width: 400px;
+      height: 400px;
+      grid-gap: 10px;
+      grid-template-rows: 60px 1fr;
+    }
+    span { border: 1px solid; }
+  </style>
+</head>
+<body>
+  <div class="grid">
+    <span>row1</span>
+    <span>row2</span>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <title>CSS Grid: Test grid-template-rows interpolation</title>
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+  <link rel="match" href="grid-template-rows-001-ref.html">
+  <meta name="assert" content="The grid-template-rows property should have
+                               correct interpolation result.">
+  <style>
+    @keyframes anim {
+      from {
+        grid-template-rows: 20px 1fr;
+      }
+      to {
+        grid-template-rows: 100px 1fr;
+      }
+    }
+    .grid {
+      display: grid;
+      width: 400px;
+      height: 400px;
+      grid-gap: 10px;
+      animation: anim 10s -5s paused linear;
+    }
+    span { border: 1px solid; }
+  </style>
+</head>
+<body>
+  <div class="grid">
+    <span>row1</span>
+    <span>row2</span>
+  </div>
+</body>
+<script>
+  requestAnimationFrame(() => {
+    document.documentElement.classList.remove('reftest-wait');
+  });
+</script>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-interpolation.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>grid-template-rows interpolation</title>
+    <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+    <meta name="assert" content="grid-template-rows supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="resources/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      // Distinct length of track list.
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "1fr 1fr 1fr",
+        to: "2fr 2fr"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "10px 20px 30px",
+        to: "20px 30px"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "1fr 1fr 1fr",
+        to: "none"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "none",
+        to: "20px 30px"
+      });
+
+      // Exercise <explicit-track-list>
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "10px 20px 30px",
+        to: "20px 30px 40px"
+      }, [
+        {at: -1, expect: "0px 10px 20px"},
+        {at: 0, expect: "10px 20px 30px"},
+        {at: 0.4, expect: "14px 24px 34px"},
+        {at: 0.6, expect: "16px 26px 36px"},
+        {at: 1, expect: "20px 30px 40px"},
+        {at: 2, expect: "30px 40px 50px"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "10px 20px 30px",
+        to: "20% 30% 40px"
+      }, [
+        {at: -1, expect: "calc(20px + -20%) calc(40px + -30%) 20px"},
+        {at: 0, expect: "calc(10px + 0%) calc(20px + 0%) 30px"},
+        {at: 0.4, expect: "calc(6px + 8%) calc(12px + 12%) 34px"},
+        {at: 0.6, expect: "calc(4px + 12%) calc(8px + 18%) 36px"},
+        {at: 1, expect: "20% 30% 40px"},
+        {at: 2, expect: "calc(-10px + 40%) calc(-20px + 60%) 50px"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "1fr 1fr 1fr",
+        to: "2fr auto 2fr"
+      }, [
+        {at: -1, expect: "0fr 1fr 0fr"},
+        {at: 0, expect: "1fr 1fr 1fr"},
+        {at: 0.4, expect: "1.4fr 1fr 1.4fr"},
+        {at: 0.6, expect: "1.6fr auto 1.6fr"},
+        {at: 1, expect: "2fr auto 2fr"},
+        {at: 2, expect: "3fr auto 3fr"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "1fr [a b] 1fr [d] 1fr",
+        to: "2fr [c] auto 2fr"
+      }, [
+        {at: -1, expect: "0fr [a b] 1fr [d] 0fr"},
+        {at: 0, expect: "1fr [a b] 1fr [d] 1fr"},
+        {at: 0.4, expect: "1.4fr [a b] 1fr [d] 1.4fr"},
+        {at: 0.6, expect: "1.6fr [c] auto 1.6fr"},
+        {at: 1, expect: "2fr [c] auto 2fr"},
+        {at: 2, expect: "3fr [c] auto 3fr"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "fit-content(10px) fit-content(20px)",
+        to: "fit-content(20px) max-content"
+      }, [
+        {at: -1, expect: "fit-content(0px) fit-content(20px)"},
+        {at: 0, expect: "fit-content(10px) fit-content(20px)"},
+        {at: 0.4, expect: "fit-content(14px) fit-content(20px)"},
+        {at: 0.6, expect: "fit-content(16px) max-content"},
+        {at: 1, expect: "fit-content(20px) max-content"},
+        {at: 2, expect: "fit-content(30px) max-content"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "minmax(10px, 1fr) minmax(20px, 2fr)",
+        to: "minmax(20px, 2fr) minmax(30px, auto)"
+      }, [
+        {at: -1, expect: "minmax(0px, 0fr) minmax(10px, 2fr)"},
+        {at: 0, expect: "minmax(10px, 1fr) minmax(20px, 2fr)"},
+        {at: 0.4, expect: "minmax(14px, 1.4fr) minmax(24px, 2fr)"},
+        {at: 0.6, expect: "minmax(16px, 1.6fr) minmax(26px, auto)"},
+        {at: 1, expect: "minmax(20px, 2fr) minmax(30px, auto)"},
+        {at: 2, expect: "minmax(30px, 3fr) minmax(40px, auto)"}
+      ]);
+
+      // Exercise <track-list> (with <track-repeat>)
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "1fr repeat(2, 2fr 30px) 1fr",
+        to: "2fr repeat(2, 3fr 40px 50px) 2fr"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "1fr repeat(2, 2fr 30px) 1fr",
+        to: "2fr repeat(3, 3fr 40px) 2fr"
+      });
+
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "repeat(2, 2fr 30px)",
+        to: "repeat(4, 40px)"
+      }, [
+        {at: -1, expect: "2fr 20px 2fr 20px"},
+        {at: 0, expect: "repeat(2, 2fr 30px)"},
+        {at: 0.4, expect: "2fr 34px 2fr 34px"},
+        {at: 0.6, expect: "40px 36px 40px 36px"},
+        {at: 1, expect: "repeat(4, 40px)"},
+        {at: 2, expect: "40px 50px 40px 50px"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "1fr repeat(2, 2fr auto 30px) 1fr",
+        to: "2fr repeat(2, 3fr 30px 40px) 2fr"
+      }, [
+        {at: -1, expect: "0fr repeat(2, 1fr auto 20px) 0fr"},
+        {at: 0, expect: "1fr repeat(2, 2fr auto 30px) 1fr"},
+        {at: 0.4, expect: "1.4fr repeat(2, 2.4fr auto 34px) 1.4fr"},
+        {at: 0.6, expect: "1.6fr repeat(2, 2.6fr 30px 36px) 1.6fr"},
+        {at: 1, expect: "2fr repeat(2, 3fr 30px 40px) 2fr"},
+        {at: 2, expect: "3fr repeat(2, 4fr 30px 50px) 3fr"}
+      ]);
+
+      // Exercise <auto-track-list>
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+        to: "20px 20px repeat(auto-fill, minmax(30px, 1fr))"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+        to: "20px repeat(auto-fit, minmax(30px, 1fr)) 20px"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+        to: "20px repeat(auto-fill, minmax(35px, auto)) 20px"
+      });
+    </script>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/resources/interpolation-testcommon.js
@@ -0,0 +1,66 @@
+'use strict';
+function test_interpolation(settings, expectations) {
+  // Returns a timing function that at 0.5 evaluates to progress.
+  function timingFunction(progress) {
+    if (progress === 0)
+      return 'steps(1, end)';
+    if (progress === 1)
+      return 'steps(1, start)';
+    var y = (8 * progress - 1) / 6;
+    return 'cubic-bezier(0, ' + y + ', 1, ' + y + ')';
+  }
+
+  test(function(){
+    assert_true(CSS.supports(settings.property, settings.from), 'Value "' + settings.from + '" is supported by ' + settings.property);
+    assert_true(CSS.supports(settings.property, settings.to), 'Value "' + settings.to + '" is supported by ' + settings.property);
+  }, '"' + settings.from + '" and "' + settings.to + '" are valid ' + settings.property + ' values');
+
+  for (var i = 0; i < expectations.length; ++i) {
+    var progress = expectations[i].at;
+    var expectation = expectations[i].expect;
+    var animationId = 'anim' + i;
+    var targetId = 'target' + i;
+    var referenceId = 'reference' + i;
+    test(function(){
+      assert_true(CSS.supports(settings.property, expectation), 'Value "' + expectation + '" is supported by ' + settings.property);
+
+      var stylesheet = document.createElement('style');
+      stylesheet.textContent =
+        '#' + targetId + ' {\n' +
+        '  animation: 2s ' + timingFunction(progress) + ' -1s paused ' + animationId + ';\n' +
+        '}\n' +
+        '@keyframes ' + animationId + ' {\n' +
+        '  0% { ' + settings.property + ': ' + settings.from + '; }\n' +
+        '  100% { ' + settings.property + ': ' + settings.to + '; }\n' +
+        '}\n' +
+        '#' + referenceId + ' {\n' +
+        '  ' + settings.property + ': ' + expectation + ';\n' +
+        '}\n';
+      document.head.appendChild(stylesheet);
+
+      var target = document.createElement('div');
+      target.id = targetId;
+      document.body.appendChild(target);
+
+      var reference = document.createElement('div');
+      reference.id = referenceId;
+      document.body.appendChild(reference);
+      reference.style = '';
+
+      assert_equals(getComputedStyle(target)[settings.property], getComputedStyle(reference)[settings.property]);
+    }, (settings.test_prefix ? settings.test_prefix : "") +
+       'Animation between "' + settings.from + '" and "' + settings.to +
+       '" at progress ' + progress);
+  }
+}
+
+function test_no_interpolation(settings) {
+  var expectatFrom = [-1, 0, 0.4].map(function (progress) {
+    return {at: progress, expect: settings.from};
+  });
+  var expectatTo = [0.6, 1, 2].map(function (progress) {
+    return {at: progress, expect: settings.to};
+  });
+
+  test_interpolation(settings, expectatFrom.concat(expectatTo));
+}