bower_components/web-animations-js/test/testcases/disabled-test-compositing-order.html - Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

Side by Side Diff: bower_components/web-animations-js/test/testcases/disabled-test-compositing-order.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master

Patch Set: Created 5 years, 11 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « bower_components/web-animations-js/test/testcases/disabled-media.html ('k') | bower_components/web-animations-js/test/testcases/impl-test-deprecation.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!--

2 Copyright 2013 Google Inc. All Rights Reserved.

3

4 Licensed under the Apache License, Version 2.0 (the "License");

5 you may not use this file except in compliance with the License.

6 You may obtain a copy of the License at

7

8 http://www.apache.org/licenses/LICENSE-2.0

9

10 Unless required by applicable law or agreed to in writing, software

11 distributed under the License is distributed on an "AS IS" BASIS,

12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

13 See the License for the specific language governing permissions and

14 limitations under the License.

15 -->

16

17 <!DOCTYPE html><meta charset="UTF-8">

18

19 <style>

20 div.anim {

21 position: relative;

22 }

23 </style>

24

25 <div id="target1" class="anim"></div>

26 <div id="target2" class="anim"></div>

27 <div id="target3" class="anim"></div>

28 <div id="target4" class="anim"></div>

29

30 <script src="../bootstrap.js" nochecks></script>

31 <script>

32 "use strict";

33

34 var leftToRight = [{left: "100px"}, {left: "200px"}];

35 var leftToRightLarge = [{left: "100px"}, {left: "1000px"}];

36 var rightToLeft = [{left: "200px"}, {left: "100px"}];

37 var noop = {color: "red"};

38

39 // Test that an animation uses the correct compositing order when it has a

40 // grandparent that remains active longer than its parent.

41 //

42 // The first animation should run between times 0.0 and 1.0 and the second

43 // between times 2.0 and 3.0. Both use the default fill mode of "forwards", but

44 // because the second animation has a later start time, it should be composited

45 // second, so the div should end up on the left.

46 var target1 = document.getElementById("target1");

47 var player = document.timeline.play(new AnimationGroup([

48 new AnimationGroup([

49 new Animation(target1, leftToRight, 1.0),

50 ]),

51 new AnimationSequence([

52 new Animation(target1, noop, 2.0),

53 new Animation(target1, rightToLeft, 1.0),

54 ]),

55 ]));

56

57 timing_test(function() {

58 at(3.0, function() {assert_equals(getComputedStyle(target1).getPropertyValue ("left"), "100px")});

59 }, "First animation should have earlier compositing order");

60

61 // Test that compositing order takes account of playback rate.

62 //

63 // The start time of the first animation is 0.0. The AnimationSequence has a pla yback

64 // rate of 4.0, so the effective start time of its child animation is 2.0. So

65 // the the div should end up on the left at time 3.0.

66 var target2 = document.getElementById("target2");

67 var player = document.timeline.play(new AnimationGroup([

68 new Animation(target2, leftToRight, 1.0),

69 new AnimationSequence([

70 new Animation(target1, noop, 8.0),

71 new Animation(target2, rightToLeft, 4.0),

72 ], {playbackRate: 4.0}),

73 ]));

74

75 timing_test(function() {

76 at(3.0, function() {assert_equals(getComputedStyle(target2).getPropertyValue ("left"), "100px")});

77 }, "Second animation should have later compositing order");

78

79 // Test compositing order follows AnimationPlayer start time order.

80 var target3 = document.getElementById("target3");

81 var player1 = document.timeline.play(

82 new Animation(target3, leftToRight, 1.0));

83 player1.startTime += 1.0;

84 var player2 = document.timeline.play(

85 new Animation(target3, leftToRightLarge, 2.0));

86

87 timing_test(function() {

88 at(2.0, function() {assert_equals(getComputedStyle(target3).getPropertyValue ("left"), "200px")});

89 }, "First animation should have latest compositing order");

90

91 // Test compositing order follows tree order.

92 var target4 = document.getElementById("target4");

93 var player = document.timeline.play(new AnimationGroup([

94 new Animation(target4, leftToRightLarge, 1.0),

95 new AnimationSequence([

96 new Animation(target4, leftToRightLarge, 1.0),

97 new AnimationGroup([

98 new Animation(target4, leftToRightLarge, 1.0),

99 new Animation(target4, leftToRightLarge, 1.0),

100 ]),

101 ]),

102 new AnimationGroup([

103 new Animation(target4, leftToRightLarge, 1.0),

104 new Animation(target4, leftToRight, 1.0),

105 ]),

106 ]));

107

108 timing_test(function() {

109 at(2.0, function() {assert_equals(getComputedStyle(target4).getPropertyValue ("left"), "200px")});

110 }, "Last animation should have latest compositing order");

111

112 </script>

OLD	NEW