Update web-platform-tests to revision 6aef6676d2f95c29de17666cc70d61b517939fbf

2025-08-06 14:10:11 +01:00 · 2018-08-18 21:26:51 -04:00 · 2018-08-18 21:26:51 -04:00 · 3ebfea9f10
commit 3ebfea9f10
parent cd0e7e7ebb
250 changed files with 2846 additions and 702 deletions
--- a/tests/wpt/web-platform-tests/css/css-transitions/KeyframeEffect-getKeyframes.tentative.html
+++ b/tests/wpt/web-platform-tests/css/css-transitions/KeyframeEffect-getKeyframes.tentative.html
@ -0,0 +1,135 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>KeyframeEffect.getKeyframes() for CSS transitions</title>
+<!-- TODO: Add a more specific link for this once it is specified. -->
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/helper.js"></script>
+<style>
+:root {
+  --var-100px: 100px;
+}
+</style>
+<div id="log"></div>
+<script>
+'use strict';
+
+const getKeyframes = e => {
+  return e.getAnimations()[0].effect.getKeyframes();
+};
+
+const assert_frames_equal = (a, b, name) => {
+  assert_equals(
+    Object.keys(a).sort().toString(),
+    Object.keys(b).sort().toString(),
+    `properties on ${name}`
+  );
+  for (const p in a) {
+    assert_equals(a[p], b[p], `value for '${p}' on ${name}`);
+  }
+};
+
+test(t => {
+  const div = addDiv(t);
+
+  div.style.left = '0px';
+  getComputedStyle(div).transitionProperty;
+  div.style.transition = 'left 100s';
+  div.style.left = '100px';
+
+  const frames = getKeyframes(div);
+
+  assert_equals(frames.length, 2, 'number of frames');
+
+  const expected = [
+    { offset: 0,
+      computedOffset: 0,
+      easing: 'ease',
+      composite: 'auto',
+      left: '0px',
+    },
+    {
+      offset: 1,
+      computedOffset: 1,
+      easing: 'linear',
+      composite: 'auto',
+      left: '100px',
+    },
+  ];
+
+  for (let i = 0; i < frames.length; i++) {
+    assert_frames_equal(frames[i], expected[i], `ComputedKeyframe #${i}`);
+  }
+}, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
+   + ' transition');
+
+test(t => {
+  const div = addDiv(t);
+
+  div.style.left = '0px';
+  getComputedStyle(div).transitionProperty;
+  div.style.transition = 'left 100s steps(2,end)';
+  div.style.left = '100px';
+
+  const frames = getKeyframes(div);
+
+  assert_equals(frames.length, 2, 'number of frames');
+
+  const expected = [
+    {
+      offset: 0,
+      computedOffset: 0,
+      easing: 'steps(2)',
+      composite: 'auto',
+      left: '0px',
+    },
+    {
+      offset: 1,
+      computedOffset: 1,
+      easing: 'linear',
+      composite: 'auto',
+      left: '100px',
+    },
+  ];
+
+  for (let i = 0; i < frames.length; i++) {
+    assert_frames_equal(frames[i], expected[i], `ComputedKeyframe #${i}`);
+  }
+}, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
+   + ' transition with a non-default easing function');
+
+test(t => {
+  const div = addDiv(t);
+  div.style.left = '0px';
+  getComputedStyle(div).transitionProperty;
+  div.style.transition = 'left 100s';
+  div.style.left = 'var(--var-100px)';
+
+  const frames = getKeyframes(div);
+
+  // CSS transition endpoints are based on the computed value so we
+  // shouldn't see the variable reference
+  const expected = [
+    {
+      offset: 0,
+      computedOffset: 0,
+      easing: 'ease',
+      composite: 'auto',
+      left: '0px',
+    },
+    {
+      offset: 1,
+      computedOffset: 1,
+      easing: 'linear',
+      composite: 'auto',
+      left: '100px',
+    },
+  ];
+  for (let i = 0; i < frames.length; i++) {
+    assert_frames_equal(frames[i], expected[i], `ComputedKeyframe #${i}`);
+  }
+}, 'KeyframeEffect.getKeyframes() returns expected frames for a'
+   + ' transition with a CSS variable endpoint');
+
+</script>