| Index: pkg/polymer/lib/elements/web-animations-js/test/testcases/disabled-test-compositing-order.html
|
| diff --git a/pkg/polymer/lib/elements/web-animations-js/test/testcases/disabled-test-compositing-order.html b/pkg/polymer/lib/elements/web-animations-js/test/testcases/disabled-test-compositing-order.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..ec464d3d37f890b4d8f3cf8735c645e9ce2d240f
|
| --- /dev/null
|
| +++ b/pkg/polymer/lib/elements/web-animations-js/test/testcases/disabled-test-compositing-order.html
|
| @@ -0,0 +1,112 @@
|
| +<!--
|
| +Copyright 2013 Google Inc. All Rights Reserved.
|
| +
|
| +Licensed under the Apache License, Version 2.0 (the "License");
|
| +you may not use this file except in compliance with the License.
|
| +You may obtain a copy of the License at
|
| +
|
| + http://www.apache.org/licenses/LICENSE-2.0
|
| +
|
| +Unless required by applicable law or agreed to in writing, software
|
| +distributed under the License is distributed on an "AS IS" BASIS,
|
| +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
| +See the License for the specific language governing permissions and
|
| +limitations under the License.
|
| +-->
|
| +
|
| +<!DOCTYPE html><meta charset="UTF-8">
|
| +
|
| +<style>
|
| +div.anim {
|
| + position: relative;
|
| +}
|
| +</style>
|
| +
|
| +<div id="target1" class="anim"></div>
|
| +<div id="target2" class="anim"></div>
|
| +<div id="target3" class="anim"></div>
|
| +<div id="target4" class="anim"></div>
|
| +
|
| +<script src="../bootstrap.js" nochecks></script>
|
| +<script>
|
| +"use strict";
|
| +
|
| +var leftToRight = [{left: "100px"}, {left: "200px"}];
|
| +var leftToRightLarge = [{left: "100px"}, {left: "1000px"}];
|
| +var rightToLeft = [{left: "200px"}, {left: "100px"}];
|
| +var noop = {color: "red"};
|
| +
|
| +// Test that an animation uses the correct compositing order when it has a
|
| +// grandparent that remains active longer than its parent.
|
| +//
|
| +// The first animation should run between times 0.0 and 1.0 and the second
|
| +// between times 2.0 and 3.0. Both use the default fill mode of "forwards", but
|
| +// because the second animation has a later start time, it should be composited
|
| +// second, so the div should end up on the left.
|
| +var target1 = document.getElementById("target1");
|
| +var player = document.timeline.play(new ParGroup([
|
| + new ParGroup([
|
| + new Animation(target1, leftToRight, 1.0),
|
| + ]),
|
| + new SeqGroup([
|
| + new Animation(target1, noop, 2.0),
|
| + new Animation(target1, rightToLeft, 1.0),
|
| + ]),
|
| +]));
|
| +
|
| +timing_test(function() {
|
| + at(3.0, function() {assert_equals(getComputedStyle(target1).getPropertyValue("left"), "100px")});
|
| + }, "First animation should have earlier compositing order");
|
| +
|
| +// Test that compositing order takes account of playback rate.
|
| +//
|
| +// The start time of the first animation is 0.0. The SeqGroup has a playback
|
| +// rate of 4.0, so the effective start time of its child animation is 2.0. So
|
| +// the the div should end up on the left at time 3.0.
|
| +var target2 = document.getElementById("target2");
|
| +var player = document.timeline.play(new ParGroup([
|
| + new Animation(target2, leftToRight, 1.0),
|
| + new SeqGroup([
|
| + new Animation(target1, noop, 8.0),
|
| + new Animation(target2, rightToLeft, 4.0),
|
| + ], {playbackRate: 4.0}),
|
| +]));
|
| +
|
| +timing_test(function() {
|
| + at(3.0, function() {assert_equals(getComputedStyle(target2).getPropertyValue("left"), "100px")});
|
| + }, "Second animation should have later compositing order");
|
| +
|
| +// Test compositing order follows Player start time order.
|
| +var target3 = document.getElementById("target3");
|
| +var player1 = document.timeline.play(
|
| + new Animation(target3, leftToRight, 1.0));
|
| +player1.startTime += 1.0;
|
| +var player2 = document.timeline.play(
|
| + new Animation(target3, leftToRightLarge, 2.0));
|
| +
|
| +timing_test(function() {
|
| + at(2.0, function() {assert_equals(getComputedStyle(target3).getPropertyValue("left"), "200px")});
|
| + }, "First animation should have latest compositing order");
|
| +
|
| +// Test compositing order follows tree order.
|
| +var target4 = document.getElementById("target4");
|
| +var player = document.timeline.play(new ParGroup([
|
| + new Animation(target4, leftToRightLarge, 1.0),
|
| + new SeqGroup([
|
| + new Animation(target4, leftToRightLarge, 1.0),
|
| + new ParGroup([
|
| + new Animation(target4, leftToRightLarge, 1.0),
|
| + new Animation(target4, leftToRightLarge, 1.0),
|
| + ]),
|
| + ]),
|
| + new ParGroup([
|
| + new Animation(target4, leftToRightLarge, 1.0),
|
| + new Animation(target4, leftToRight, 1.0),
|
| + ]),
|
| +]));
|
| +
|
| +timing_test(function() {
|
| + at(2.0, function() {assert_equals(getComputedStyle(target4).getPropertyValue("left"), "200px")});
|
| + }, "Last animation should have latest compositing order");
|
| +
|
| +</script>
|
|
|
Chromium Code Reviews
Issue 175443005:
[polymer] import all elements (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart