Bug 1584883 [wpt PR 19393] - Port margin-interpolation.html to wpt, a=testonly
authorXida Chen <xidachen@chromium.org>
Thu, 03 Oct 2019 09:53:52 +0000
changeset 496600 e10eb398c654c9a373def446e5550ab08b22ed15
parent 496599 81a5ed5da59438c547ac721792ab1ed901f7e827
child 496601 477edf52c1d215268ac13565ad01dc25a71498b8
push id36662
push userccoroiu@mozilla.com
push dateMon, 07 Oct 2019 21:53:50 +0000
treeherdermozilla-central@4651f71eeb54 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1584883, 19393, 900581, 1831264, 701099
milestone71.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 1584883 [wpt PR 19393] - Port margin-interpolation.html to wpt, a=testonly Automatic update from web-platform-tests Port margin-interpolation.html to wpt Bug: 900581 Change-Id: I13e9433c00bf606f4d7258c76609cdb84e8b0b08 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1831264 Commit-Queue: Xida Chen <xidachen@chromium.org> Reviewed-by: Yi Gu <yigu@chromium.org> Cr-Commit-Position: refs/heads/master@{#701099} -- wpt-commits: e7a6e5be4efa004015cda98869274ef9fe965082 wpt-pr: 19393
testing/web-platform/tests/css/css-box/animation/margin-interpolation.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-box/animation/margin-interpolation.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>margin interpolation</title>
+<link rel="help" href="https://www.w3.org/TR/CSS2/box.html#margin-properties">
+<meta name="assert" content="margin supports animation">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.parent {
+  margin: 10px;
+  border: solid;
+  display: inline-block;
+}
+
+.target {
+  width: 40px;
+  height: 40px;
+  background-color: black;
+  display: inline-block;
+  margin: 30px;
+  opacity: 0.5;
+}
+
+.expected {
+  background-color: green;
+}
+</style>
+
+<body>
+<template id="target-template">
+  <div>
+    <div class="target"></div>
+  </div>
+</template>
+
+<script>
+test_interpolation({
+  property: 'margin',
+  from: neutralKeyframe,
+  to: '20px',
+}, [
+  {at: -0.3, expect: '33px'},
+  {at: 0, expect: '30px'},
+  {at: 0.3, expect: '27px'},
+  {at: 0.6, expect: '24px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '15px'},
+]);
+
+test_interpolation({
+  property: 'margin',
+  from: 'initial',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '-6px'},
+  {at: 0, expect: '0px'},
+  {at: 0.3, expect: '6px'},
+  {at: 0.6, expect: '12px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '30px'},
+]);
+
+test_interpolation({
+  property: 'margin',
+  from: 'inherit',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '7px'},
+  {at: 0, expect: '10px'},
+  {at: 0.3, expect: '13px'},
+  {at: 0.6, expect: '16px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '25px'},
+]);
+
+test_interpolation({
+  property: 'margin',
+  from: 'unset',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '-6px'},
+  {at: 0, expect: '0px'},
+  {at: 0.3, expect: '6px'},
+  {at: 0.6, expect: '12px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '30px'},
+]);
+
+test_interpolation({
+  property: 'margin',
+  from: '0px',
+  to: '10px'
+}, [
+  {at: -0.3, expect: '-3px'},
+  {at: 0, expect: '0px'},
+  {at: 0.3, expect: '3px'},
+  {at: 0.6, expect: '6px'},
+  {at: 1, expect: '10px'},
+  {at: 1.5, expect: '15px'}
+]);
+
+test_interpolation({
+  property: 'margin',
+  from: '20px 40px 60px 80px',
+  to: '30px 50px 70px 90px'
+}, [
+  {at: -0.3, expect: '17px 37px 57px 77px'},
+  {at: 0, expect: '20px 40px 60px 80px'},
+  {at: 0.3, expect: '23px 43px 63px 83px'},
+  {at: 0.6, expect: '26px 46px 66px 86px'},
+  {at: 1, expect: '30px 50px 70px 90px'},
+  {at: 1.5, expect: '35px 55px 75px 95px'}
+]);
+</script>
+</body>