tests/wpt/web-platform-tests/css/css-timing/frames-timing-functions-syntax.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!DOCTYPE html>
<meta charset=utf-8>
<meta name="assert"
content="This test checks the syntax output of frame timing functions" />
<title>Frames timing function syntax tests</title>
<link rel="help"
href="https://drafts.csswg.org/css-timing/#frames-timing-functions">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="testcommon.js"></script>
<body>
<div id="log"></div>
<script>
"use strict";

test(function(t) {
  const div = createDiv(t);
  div.style.animation = 'abc 1s ease-in';
  div.style.animationTimingFunction = 'frames(1)';
  assert_equals(getComputedStyle(div).animationTimingFunction, 'ease-in');
}, 'The number of frames must be a positive integer greater than 1, or we ' +
   'fallback to the previously-set easing');

test(function(t) {
  const div = createDiv(t);
  div.style.animation = 'abc 1s frames(  2 )';
  assert_equals(getComputedStyle(div).animationTimingFunction, 'frames(2)');
}, 'The serialization of frames is \'frames(n)\', n is the number of frames');

</script>
</body>