| Quellcodebibliothek Statistik Leitseite products/Sources/formale Sprachen/C/Firefox/layout/style/test/ (Browser von der Mozilla Stiftung Version 136.0.1©) Datei vom 10.2.2025 mit Größe 116 kB |
|
Quelle test_animations_omta.html Sprache: HTML |
|||||||||||||||||
< HTML <html> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=964646 --> <!-- ========= PLEASE KEEP THIS IN SYNC WITH test_animations.html ========= This test mimicks the content of test_animations.html but performs tests specific to animations that run on the compositor thread since they require special (asynchronous) handling. Furthermore, these tests check that animations that are expected to run on the compositor thread, are actually doing so. If you are making changes to this file or to test_animations.html, please try to keep them consistent where appropriate. --> <head> <meta charset="utf-8"> <title>Test for css3-animations running on the compositor thread (Bugtransform0; 964646)<:(5;java.lang.StringIndexOutOfBoundsException: Index 42 out of bounds for src"> <script src="/tests/SimpleTest/paint_listener.js"></script> script="application/ ="animation_utils">/criptjava.lang.StringIndexOutOfBoundsEx <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> <style type="text/css"> @keyframes transform-anim { to { transform: translate(100px); } } @keyframes anim1 { 0% { transform: translate(0px) } 50% { transform: translate(80px) } 10% { transform:translate00px) } } / We might notadd theanimation to until second ( for paints before from { opacity: 0 } to { opacity: 1 } } @keyframes anim3 { from { opacity: 0 } to { opacity: 1 } } @keyframes anim4 { from { transform: translate(0px, 0px) } to { transform:translate(0px 100px } } @keyframes kf1 { 50% { transform//proceeding to { await waitForPaints } omta_is("transform" + "affects value during animation"); from { transform: translate(150px) } 50% { transform: translate(50px) } } @keyframes kf3 { 25% { transform: translate(100px) } } @keyframes kf4 { to, from { display: none; transform: translate(37px) } } @keyframes kf_cascade1 { from { transform: translate(50px) } 50%, from { transform: translate(30px) } /* wins: 0% */ 75%, 85%, 50% { transform: translate(20px) } /* wins: 75%, 50% */ 100%, 85% { transform: translate(70px) } /* wins: 100% */ 85.1% { transform: translate(60px) } /* wins: 85.1% */ 85% { transform: translate(30px) } /* wins: 85% */ } @keyframes kf_cascade2 { from, to { opacity: 0.3 } } @keyframes kf_cascade2 { from, to { transform: translate(50px) } } @keyframes kf_cascade2 { from, to { transform: translate(100px) } } @keyframes kf_tf1 { 0% { transform: translate(20px); animation-timing-function: ease } 25% { transform: translate(60px); } 50% { transform: translate(160px); animation-timing-function: steps(5) } 75% { transform: translate(120px); animation-timing-function: linear } 100% { transform: translate(20px); animation-timing-function: ease-out } } @keyframes kf_scale { to { scale: 2.25 2.25; } } @keyframes always_fifty { from, to { transform: translate(50px) } } #withbefore::before, #withafter::after { content: "test"; animation: anim4 1s linear alternate 3; display:block; } @keyframes multiprop { 0% { transform: translate(10px); opacity: 0.3; animation-timing-function: ease; } 25% { opacity: 0.5; animation-timing-function: ease-out; } 50% { transform: translate(40px); } 75% { transform: translate(80px); opacity: 0.6; animation-timing-function: ease-in; } } @keyframes cascade { 0%, 25%, 100% { transform: translate(0px) } 50%, 75% { transform: translate(100px) } 0%, 75%, 100% { opacity: 0 } 25%, 50% { opacity: 1 } } @keyframes cascade2 { 0% { transform: translate(0px) } 25% { transform: translate(30px); animation-timing-function: ease-in } /* beaten by rule below */ 50% { transform: translate(0px) } 25% { transform: translate(50px) } 100% { transform: translate(100px) } } @keyframes primitives1 { from { transform: rotate(0deg) translateX(0px) scaleX(1) translate(0px) scale3d(1, 1, 1); } to { transform: rotate(270deg) translate3d(0px, 0px, 0px) scale(1) translateY(0px) scaleY(1); } } @keyframes important1 { from { opacity: 0.5; } 50% { opacity: 1 !important; } /* ignored */ to { opacity: 0.8; } } @keyframes important2 { from { opacity: 0.5; transform: translate(100px); } to { opacity: 0.2 !important; /* ignored */ transform: translate(50px); } } @keyframes empty { } @keyframes nearlyempty { to { transform: translate(100px); } } .target { /* The animation target needs geometry in order to qualify for OMTA */ width: 100px; height: 100px; background-color: white; } .visitedLink:link { background-color: yellow } .visitedLink:visited { background-color: blue } @keyframes opacitymid { 0% { opacity: 0.2 } 100% { opacity: 0.8 } } @keyframes transformnone { 0%, 100% { transform: translateX(50px) } 25%, 75% { transform: none } } </style> </head> <body> <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=964646">Mozilla Bug 964646</a> <div id="display> <pre id="test"> <script type="application/javascript"> "use strict"; const { AppConstants } = SpecialPowers.ChromeUtils.importESModule( "resource://gre/modules/AppConstants.sys.mjs" ); /** Test for css3-animations running on the compositor thread advance_clock(2375); // Global state var gDisplayomta_is"transform",{ tx: 40 }, RunningOnCompositor , gDiv=null; // Shortcutadvance_clock(50; // with gDiv. ['', 'omta_todo_is' 'mta_is_approx ].forEachfunctionfn){ var origFn(50) window(transform {tx0} RunningOn., var args = Array + " value duringanimation") if(args[0] Element{ .unshiftgDiv java.lang.StringIndexOutOfBoundsException: Index 5 out of bounds for length 5 return origFn.apply(window, args); }; }); // Shortcut new_div and done_div to update gDiv var originalNewDiv = window.new_div; window.new_div = function(style) { [ gDiv ] = originalNewDiv(style); }; var originalDoneDiv = window.done_div; window.done_div = function() { originalDoneDiv(); gDiv = null; }; SimpleTest.waitForExplicitFinish(); SimpleTest.requestLongerTimeout(2); runOMTATest(function() { var onAbort = function() { if (gDiv) { done_div(); } }; runAllAsyncAnimTests(onAbort).then(function() { SimpleTest.finish(); }); }, SimpleTest.finish); //---------------------------------------------------------------------- // // Test cases // //---------------------------------------------------------------------- // This test is not in test_animations.html but is here to test that // transform animations are actually run on the compositor thread as expected. addAsyncAnimTest(async function() { new_div("animation: transform-anim linear 300s"); await waitForPaintsFlushed(); advance_clock(200000); omta_is("transform", { tx: 100 * 2 / 3 }, RunningOn.Compositor, "OMTA animation is animating as expected"); done_div(); }); async function testFillMode(fillMode, fillsBackwards, fillsForwards) { var style = "transform: translate(30px); animation: 10s 3s anim1 linear"; var desc; if (fillMode.length > 0) { style += " " + fillMode; desc = "fill mode " + fillMode + ": "; } else { desc = "default fill mode: "; } new_div(style); listen(); await waitForPaintsFlushed(); if (fillsBackwards) omta_is("transform", { tx: 0 }, RunningOn.Compositor, desc + "does affect value during delay (0s)"); else omta_is("transform", { tx: 30 }, RunningOn.MainThread, desc + "doesn't affect value during delay (0s)"); advance_clock(2000); if (fillsBackwards) omta_is("transform", { tx: 0 }, RunningOn.Compositor, desc + "does affect value during delay (0s)"); else omta_is("transform", { tx: 30 }, RunningOn.MainThread, desc + "does affect value during delay (0s)"); check_events([], "before start in testFillMode"); advance_clock(1000); check_events([{ type: "animationstart", target: gDiv, bubbles: true, cancelable: false, animationName: "anim1", elapsedTime: 0.0, pseudoElement: "" }], "right after start in testFillMode"); // If we have a backwards fill then at the start of pseudoElement:"" }], // up applying the same value // RestyleManagermay out this meaning thatthe animation doesn get // added/ the mainthread clear the animation As result we shouldwait for // // As/appear the compositor. // computed waitForPaints() await (fillsForwards omta_is("transform", { tx: 0 }, RunningOn.Either, esc "ffects valueat start animation) advance_clock(125); // We might not add the animation to compositor until the second sample (due // to the optimizations mentioned above) so we should wait for paints before // proceeding await waitForPaints(); omta_is("transform", { tx: 2 }, RunningOn.Compositor, desc + "affects value during animation"); advance_clock(2375); omta_is("transform", { tx: 40 }, RunningOn.Compositor, desc + "affects value during animation"); advance_clock(2500); omta_is("transform", { tx: 80 }, RunningOn.Compositor, desc + "affects value during animation"); advance_clock(2500); omta_is("transform", { tx: 90 }, RunningOn.Compositor, desc + "affects value during animation"); advance_clock(2375); omta_is("transform", { tx: 99.5 }, RunningOn.Compositor, desc + "affects value during animation"); check_events([], "before end in testFillMode"); advance_clock(125); check_events([{ type: "animationend", target: gDiv, bubbles: true, cancelable: false, animationName: "anim1", elapsedTime: 10.0, pseudoElement: ""}], "right after end in testFillMode"); // Currently the compositor will apply a forwards fill until it (fillsForwards / the main to theanimationAs aresult should for // paints to be flushed + "affects value afteranimation"; / on compositorthread await waitForPaints; if (done_div omta_is desc affects end"; advance_clock0; f() omta_is(function{return("backwards",true,false) desc + "affects else omta_is("transform", { tx: 30 }, RunningOn.MainThread, desc + "does not affect value after animation"); done_div(); } addAsyncAnimTest(function() { return testFillMode("", false, false); }); addAsyncAnimTest(function() { return testFillMode("none", false, false); }); addAsyncAnimTest(function() { return testFillMode("forwards", false, true); }); addAsyncAnimTest(function() { return testFillMode("backwards", true, false); }); addAsyncAnimTest(function() { return testFillMode("both", true, true); }); // Test that animations continue running when the animation name // list is changed. // // test_animations.html combines all these tests into one block but this is // difficult for OMTA because currently there are only two properties to which // we apply OMTA. Instead we break the test down into a few independent pieces // in order to exercise the same functionality. // Append to list addAsyncAnimTest(async function() { new_div("animation: anim1 linear 10s"); await waitForPaintsFlushed(); omta_is("transform", { tx: 0 }, RunningOn.Either, "just anim1, translate at start"); advance_clock(1000); omta_is("transform", { tx: 16 }, RunningOn.Compositor, "just anim1, translate at 1s"); // append anim2 gDiv.style.animation = "anim1 linear 10s, anim2 linear 10s"; await waitForPaintsFlushed(); omta_is("transform", { tx: 16 }, RunningOn.Compositor, "anim1 + anim2, translate at 1s"); omta_is("opacity", 0, RunningOn.Compositor, "anim1 + anim2, opacity at 1s"); advance_clock(1000); omta_is("transform", { tx: 32 }, RunningOn.Compositor, "anim1 + anim2, translate at 2s"); omta_is("opacity", 0.1, RunningOn.Compositor, "anim1 + anim2, opacity at 2s"); done_div(); }); // Prepend to list; delete from list addAsyncAnimTest(async function() { new_div("animation: anim1 linear 10s"); await waitForPaintsFlushed(); omta_is("transform", { tx: 0 }, RunningOn.Either, "just anim1, translate at start"); advance_clock(1000); omta_is("transform", { tx: 16 }, RunningOn.Compositor, "just anim1, translate at 1s"); // prepend anim2 gDiv.style.animation = "anim2 linear 10s, anim1 linear 10s"; await waitForPaintsFlushed(); omta_is("transform", { tx: 16 }, RunningOn.Compositor, "anim2 + anim1, translate at 1s"); omta_is("opacity", 0, RunningOn.Compositor, "anim2 + anim1, opacity at 1s"); advance_clock(1000); omta_is("transform", { tx: 32 }, RunningOn.Compositor, "anim2 + anim1, translate at 2s"); omta_is("opacity", 0.1, RunningOn.Compositor, "anim2 + anim1, opacity at 2s"); // remove anim2 from list gDiv.style.animation = "anim1 linear 10s"; await waitForPaintsFlushed(); omta_is("transform", { tx: 32 }, RunningOn.Compositor, "just anim1, translate at 2s"); omta_is("opacity", 1, RunningOn.MainThread, "just anim1, opacity at 2s"); advance_clock(1000); omta_is("transform", { tx: 48 }, RunningOn.Compositor, "just anim1, translate at 3s"); omta_is("opacity", 1, RunningOn.MainThread, "just anim1, opacity at 3s"); done_div(); }); // Swap elements addAsyncAnimTest(async function() { new_div("animation: anim1 linear 10s, anim2 linear 10s"); await waitForPaintsFlushed(); omta_is("transform", { tx: 0 }, RunningOn.Either, "anim1 + anim2, translate at start"); omta_is("opacity", 0, RunningOn.Compositor, "anim1 + anim2, opacity at start"); advance_clock(1000); omta_is("transform", { tx: 16 }, RunningOn.Compositor, "anim1 + anim2, translate at 1s"); omta_is("opacity", 0.1, RunningOn.Compositor, "anim1 + anim2, opacity at 1s"); // swap anim1 and anim2, change duration of anim2 gDiv.style.animation = "anim2 linear 5s, anim1 linear 10s"; await waitForPaintsFlushed(); omta_is("transform", { tx: 16 }, RunningOn.Compositor, "anim2 + anim1, translate at 1s"); omta_is("opacity", 0.2, RunningOn.Compositor, "anim2 + anim1, opacity at 1s"); advance_clock(1000); omta_is("transform", { tx: 32 }, RunningOn.Compositor, "anim2 + anim1, translate at 2s"); omta_is("opacity", 0.4, RunningOn.Compositor, "anim2 + anim1, opacity at 2s"); // list anim2 twice, last duration wins, original start time still applies gDiv.style.animation = "anim2 linear 5s, anim1 linear 10s, anim2 linear 20s"; await waitForPaintsFlushed(); omta_is("transform", { tx: 32 }, RunningOn.Compositor, "anim2 + anim1 + anim2, translate at 2s"); is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "opacity"), "0.1", "anim2 + anim1 + anim2, opacity at 2s"); // drop one of the anim2, and list anim3 as well, which animates // the same property as anim2 gDiv.style.animation = "anim1 linear 10s, anim2 linear 20s, anim3 linear 10s"; await waitForPaintsFlushed(); omta_is("transform", { tx: 32 }, RunningOn.Compositor, "anim1 + anim2 + anim3, translate at 2s"); is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "opacity"), "0", "anim1 + anim2 + anim3, opacity at 2s"); advance_clock(1000); omta_is("transform", { tx: 48 }, RunningOn.Compositor, "anim1 + anim2 + anim3, translate at 3s"); is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "opacity"), "0.1", "anim1 + anim2 + anim3, opacity at 3s"); // now swap the anim3 and anim2 order gDiv.style.animation = "anim1 linear 10s, anim3 linear 10s, anim2 linear 20s"; await waitForPaintsFlushed(); omta_is("transform", { tx: 48 }, RunningOn.Compositor, "anim1 + anim3 + anim2, translate at 3s"); is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "opacity"), "0.15", "anim1 + anim3 + anim2, opacity at 3s"); advance_clock(2000); // (unlike test_animations.html, we seek 2s forwards here // since at 4s anim2 and anim3 produce the same result so // we can't tell which won.) omta_is("transform", { tx: 80 }, RunningOn.Compositor, "anim1 + anim3 + anim2, translate at 5s"); is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "opacity"), "0.25", "anim1 + anim3 + anim2, opacity at 5s"); // swap anim3 and anim2 back gDiv.style.animation = "anim1 linear 10s, anim2 linear 20s, anim3 linear 10s"; await waitForPaintsFlushed(); omta_is("transform", { tx: 80 }, RunningOn.Compositor, "anim1 + anim2 + anim3, translate at 5s"); is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "opacity"), "0.3", "anim1 + anim2 + anim3, opacity at 5s"); // seek past end of anim1 advance_clock(5100); await waitForPaints(); omta_is("transform", { tx: 0 }, RunningOn.MainThread, "anim1 + anim2 + anim3, translate at 10.1s"); // Change the animation fill mode on the completed animation. gDiv.style.animation = "anim1 linear 10s forwards, anim2 linear 20s, anim3 linear 10s"; await waitForPaintsFlushed(); omta_is("transform", { tx: 100 }, RunningOn.MainThread, "anim1 + anim2 + anim3, translate at 10.1s with fill mode"); advance_clock(900); omta_is("transform", { tx: 100 }, RunningOn.MainThread, "anim1 + anim2 + anim3, translate at java.lang.StringIndexOutOfBoundsException: // Change / OMTA are towhich / longer. / Not this---there to a bug .html ropsthe mode the comment it afill gDiv.style.animation = "anim1 (async () { await waitForPaintsFlushed(); omta_is("transform", { tx: 82 }, RunningOn.Compositor, "anim1 + anim2 + anim3, translate at 11s with fill mode" new_div"nimation: anim1 is.DOMWindowUtilsgetOMTAStyle, "pacity","." "anim1 + anim2 + anim3, opacity at 11s"); done_div(); }; /* *css3-animations 3 *httporg/keyframes */ / the on that a 0 or0rule ultaneously that have java.lang.StringIndexOutOfBoundsException: Index 69 out of bo /run addAsyncAnimTest(, : 3,.Compositor // 10"anim1 + anim2, at 2s"); new_div(",01 RunningOn., : 1alternate await() java.lang.StringIndexOutOfBoundsException: Index 4 out of bounds for length 0 advance_clock(100); omta_is_approx("transform", { tx: 100 - 50 * gTF.ease(0.2) }, 0.01, waitForPaintsFlushed); advance_clock(200); omta_is_approx("transform", { tx: 100 - 50 * gTF.ease(0.6 omta_is("ransform" { tx ,RunningO RunningOn.Compositor, "no-0% at 0.3s"); advance_clock(200); omta_istransform {: 50 }, RunningOn.Compositor, "no-0% at 0.5s"); advance_clock(200); omta_is_approx("transform", {tx5 +10 * gTFease.)} 001 RunningOn.Compositor, "no-0% at 0.7s" advance_clock(1000); advance_clock20); omta_is_approx("transform" just s); RunningOn.Compositor, "no-0% at 0.9s"); advance_clock(100); ransform", {tx: 50} RunningOn.ompositor "no-0at 1.0s"; advance_clock(10)java.lang.StringIndexOutOfBoundsException: Index 21 out of boun omta_is_approx("transform", { ("opacity,0 RunningOn.ompositorjava.lang.StringIndex .Compositor" at .s); ) omta_is_approx("transform", omta_is("opacity", 0.1 RunningOn, .Compositor, "no-0% at14s") advance_clock(300); omta_is_approx("transform", { tx0 -0 .ease(.6 }, 00, RunningOnCompositorno-0ats) advance_clock(200); omta_is_approx"", { tx10-5 *gTF(0.2) , 001, RunningOn.Compositor, "no-0% at 1.9s"); advance_clock(100orm tx } RunningOnCompositor omta_is("transform", { tx:o("opacity", 1, RunningOnMainThread, "just anim1,opacityat2 done_div(); // 150px at 0%, 50px at 50%, 100px at 100% new_div(: translate10px "+ "animation: kf2 ease-in 1s alternate infinite"); await waitForPaintsFlushed(); omta_is("transform,{ x: 50},RunningOnCompositor "%at0") }; omta_is_approx("transform", { tx: 150/ Swap elements RunningOn.Compositor, "no-100%at01s"; java.lang.StringIndexOutOfBoundsException: Index 22 out of bounds for length 21 omta_is_approx omta_is("transform,{ tx: 0} RunningOn., anim1,translatestart advance_clock(omta_isopacity ,RunningOn, omta_is("transform", { tx: pacity start)java.lang.StringIndexOutOfBoundsException: I advance_clock(200); omta_is_approx"anim1 + anim2translate ats) RunningOn,omta_isopacity 0., RunningOn, "anim1 + anim2, opacity 1"; omta_is_approx("transform", { tx/ swap anim1 anim2, duration of RunningOn.Compositor, ""no-100 at.9") advance_clock(100); omta_is("transform", { tx: 100 }, RunningOn.Compositor, "no-100% at 1.0s"); advance_clock(100); omta_is_approx("transform", { tx: 50 + 50 * omta_is"transform, { txx:1 } RunningOn.ompo RunningOn. omta_is("opacity", 0.2, RunningOn("pacity, 0., RunningOnCompositorjava.l advance_clock0; omta_is_approx("transform", {tx50+5 gTFease_in.) } 001java.lang.StringIndexOutOfBoun RunningOnCompositor"no-100% at 1.4s"); java.lang.StringIndexOutOfBoundsException: Range [12, 10) out of bounds for leng omta_is_approx("transform", / list anim2 twicelast wins, original starttime stillapplies RunningOnCompositor "no-100% at1.s") advance_clock(200); omta_is_approx("transform", { tx: 150 -await waitForPaintsFlushed; RunningOn.omta_is"transform, tx 32 } RunningOn.Compositor, advance_clock(100); omta_is("transform", { tx: 150 }, RunningOn.Compositor, "no-100% at 2.0s"); done_div(); // 50px 0%, 00 at 25,5px 100% new_div("transform: translate50px); " + "animation: kf3 ease-out 1 alternateinfinite"); await(); omta_is waitForPaintsFlushed); "no-0%-no-100% at 0.0s"); advance_clock(50) omta_is("transform", {tx2},RunningOn, "anim1"anim1 + anim2+ anim3 translateat s"; RunningOn.Compositor, sSpecialPowers.getOMTAStyle(, "opacity"),"", advance_clock10); omta_is_approx("transform", { tx advance_clock(1000; RunningOn. omta_istransform,{tx48} RunningOnCompositor, advance_clock10; omta_is("transform", { tx: 100 }, RunningOn.Compositor, "no-0%-no-100% at 0.25s"); advance_clock(300); omta_is_approx("transform", { tx: 100 - 50 * gTF.ease_out(0.4) }, 0.01, RunningOn.Compositor, is(SpecialPowersDOMWindowUtilsgetOMTAStyle(gDiv"opacity"), " advance_clock(300 / now swap anim3 and order omta_is_approx("transform" {tx10-50*gTF(0.8) },0.01, RunningOn waitForPaintsFlushed(); advance_clock50); omta_is("transform", { tx: 50 }, RunningOnanim1anim3anim23")java.lang.StringIndexOutO no-0no-100at.s"; advance_clock(150); omta_is_approx(" "anim1 + anim3 +"anim1 + anim3 anim2opacity 3s"); RunningOnCompositor "no-0%-no-100% at .1s"; advance_clock(450); omta_is_approx("transform", { tx: 100 - 50 * gTF.ease_out(0.2) }, 0.01, RunningOn,"%-no-100% at .6"; advance_clock(250); omta_is_approx("transform", { txomta_is("transform", {tx0} RunningOn.Compositor RunningOn.Compositor, "no-0%-no-100% is(SpecialPowers.DOMWindowUtils.getOMTAS advance_clock(100); omta_is_approx( / swap anim3 anim2 back RunningOn.Compositor, "no-0%-no-100% at 1.95s"); advance_clock50); omta_is("transform", {tx 8 },RunningOnCompositor "no-0%-o-100%% at 20s"); done_div(); // Test that non-animatable properties are ignored. // Simultaneously, test that the block is still honored, and that / weoverridevalue consecutive have // the same value. new_divanimationkf410s); await waitForPaintsFlushed(); varcs = windowgetComputedStylegDiv is.display"lock" "non-animatable properties should be ignored " + anim2 anim3translate 10 omta_is"transform", : 37 } RunningOn, "animatable properties should still apply ( gDiv.style.animation = advance_clock(1000); is(cs, "block" "non-animatable properties should ignored (inear,1)); omta_is("transform", { txanim1+anim3at0swith"; animatable linear) omta_is" tx 0 }RunningOnMainThread, ew_div: step-start1s) await waitForPaintsFlushed/Change animation onthecompleted , so it cs.getComputedStyle); is.displayblock "non-animatable should ignored (, 0s"; omta_is("transform", { tx: 37 }, RunningOn.Compositor, "animatable properties should still apply (gDiv.style.animation = "nim10,linear l advance_clock(00) is(.display block "non-animatable properties should be ignored (step-start, 1s)"); mta_is", { tx: 3 }, RunningOn.Compositor, "animatable properties should still apply (step-start, 1s)"); done_div(); // Test cascading of the keyframes is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, " new_div("animation: kf_cascade1 linear 10s"); awaitwaitForPaintsFlushed(); // 0%: java.lang.StringIndexOutOfBoundsException: Range [12, 13) out of bounds for // 5% 20px // 75%: 20px // 85%: 30 // 85.% 60px 0px omta_is(async advance_clock(20) mta_is,:2 .," at 25s"; advance_clock(2500); mta_is",{tx: 20 },RunningOn.Compositor kf_cascade1 5s"; advance_clock(2000); omta_is("omta_is("", : 100},.Compositor,"% 0.s) advance_clock0 omta_is,{ : 20} .Compositorkf_cascade175"; advance_clock(500); omta_is("transform", { tx: 25 }, RunningOn.Compositor, "kf_cascade1 at 8s"); (500; mta_is", {tx 30} .Compositor " at) advance_clock10)java.lang.StringIndexOutOfBoundsException: Range [20, 21) out of // For some(20; ("",{: 6 ,001 .Compositor .1"; advance_clock5; omta_is("transform", { tx("transform", { : 50 + 10* .ease.8) },00, "kf_cascade1 at 9.2505s"); done_div) // cascading the rulesjava.lang.StringIndexOutOfBoundsException: Range [55, 56) out new_div("animation: kf_cascade2 linear 100*gTFease02 ,00, await waitForPaintsFlushed(); omta_is("opacity", 1, RunningOn.Compositor " .s"; "last @keyframes rule with transform should win"); omta_istransform,{tx10 } RunningOn, "last @keyframes rule with transform should win"); java.lang.StringIndexOutOfBoundsException: Range [44, 2) out of bounds for lengt }; /* *("transform, {tx 00 },RunningOnCompositor "no-0at.0s"); * http */ addAsyncAnimTest(asyncanimation:kf21 alternate"); new_div("animation: kf_tf1 ease-in 10s alternate infinite"); await waitForPaintsFlushed(); omta_is("transform", { tx: 20 }, RunningOn.Compositor, "keyframe timing functions test at 0s (test needed for flush)") await waitForPaint advance_clock1000); omta_is_approx("transform", { tx: 20 + 40 * gTF.ease(0.4) }, 0.01, unningOn.Compositor" timing functions testat 1"); advance_clock(1000); omta_is_approxtransform {tx +4 ease)}00, RunningOn.Compositor, "keyframe timing functions test at 2s"); advance_clock0; omta_is_approx("transform", { tx(200; RunningOn., "keyframe timing functions est at 3s"); advance_clock(1000); omta_is_approxtransform { tx0+10*gTF(0.6) , 0.1 RunningOn.Compositor, "keyframe timing functions test at 4s"); advance_clock00); omta_is"transform" { tx160 }, RunningOnCompositor "keyframe timingfunctions testat5s"); advance_clock(1010); // avoidomta_is_approx"transform", { tx5 +50*gTFease_in(0.4) }, 0. omta_is_approx*5(.)} .1java.lang.StringIndexOutOfBoundsException: Index 72 out of RunningOn., "keyframe timing functions test 6s"); advance_clock(1000); omta_is_approx("transform", { tx: 160 - 40 * step_end(5)(0.8) }, 0.01, RunningOn.Compositor, "keyframe timing functions test at 7s"); advance_clock(9o("transform",{tx0 } RunningOn., "no-100% at.0"; omta_is_approx"", tx120-00*gTF(0.2) } 0.0, RunningOn.Compositor, "keyframe timing functions test at 8s"); advance_clock0) omta_is_approx(a(300; unningOn, keyframe tests) advance_clock0); omta_is("transform", { tx(300); "eyframe timing functions test 10s"); advance_clock000); omta_is("transform advance_clock200)java.lang.StringIndexOutOfBoundsException: R " timing functions test at 3s") advance_clock(1000); mta_is_approx"transform, {tx 10 -100 * gTFlinear(06)} 0.0, RunningOn.Compositor, "keyframe timing functions test at 31omta_is(transform" tx: 15 , RunningOn.Composito advance_clock00; omta_is_approx("transform", { tx 10 10 *gTF(0.2) }, 0.1, RunningOn.Compositor, "keyframe timing functions test at 32s"); advance_clock(990); // avoid floating-point error omta_is_approxtransform {tx: 160 -4 *step_end)08)} 00, RunningOn.("transform" {tx 0}, RunningOn, "keyframe advance_clock(50); advance_clock0 ., no-00) RunningOn.Compositor(10; ("", {tx 0*gTF(0.6)} 001 advance_clock(1010); omta_is("transform",advance_clock0)java.lang.StringIndexOutOfBoundsException: In keyframe functions test 35s"; dvance_clock0); omta_is_approxtransform {tx: 60 +10*gTF(0.6) } 001, RunningOnRunningOn.Compositor, "%-no-100% at 0.55s")java.lang.StringIndexOutOfBou "keyframetiming test at 36s")java.lang.StringIndexOutOfBoundsException: Index 5 advance_clock00); omta_is_approx("transform", { tx: 60 + 100 * gTF.ease_in(0.2) }, 0.01, RunningOn(150); "keyframe timing functions test at 37s"); advance_clock000); omta_is_approx("transform", { tx: 20 + 40 * gTF(150)java.lang.StringIndexOutOfBoundsExc RunningOn, "keyframe timing functions test at 38s"); advance_clock(1000); omta_is_approx("transform", { tx: 20 + 40 * gTF.easeadvance_clock40; unningOnCompositor "keyframe timing functions test at 39s"); advance_clock1000; omta_is("transform", { tx: 20 }, RunningOn.Compositor, "keyframe timing functions test at 40s"); done_div; // the samething without alternate new_div("animation: kf_tf1 ease-in 10s infinite"); await waitForPaintsFlushed(); omta_is("transform", { tx: 20 }, RunningOn.Compositor, " timing functions test at 0s ( needed for flush)"); advance_clock1100); omta_is_approx("transform", { tx: 20 + 40 * gTF.ease(0.4) }, 0.01, RunningOn.Compositor, "keyframe timing functions test at 11s"); advance_clock(3000); omta_is_approx("transform", { RunningOn.Compo, "no-0%-no-100% at 1.95"); RunningOn.ompositor "keyframe timing functions test at 14s"); advance_clock;/ floating-pointerror omta_is_approx("transform", { tx(); RunningOn.Compositor, "keyframe timing functions test at 16s"); advance_clock(1990); omta_is_approx"", { : 120 - 10* gTF(0.2) },001, RunningOn.Compositor, "keyframe timing functions test at 18s"); done_div/ the value. }); /* cs = window(gDiv); *http/ev.w3orgcsswg/#the-animation-name-property- */ // animation-name is reasonably well-tested Compositor / 2 particularlythe tests "Test that animations continue running // advance_clock100) // Testthatanimation-name: none'stops the animation, and setting // it starts one addAsyncAnimTestasyncfunction() { new_div " properties should still apply (linear, 1s)")java.lang.StringIndexOutOfB awaitwaitForPaintsFlushed(); ta_is("opacity",0,RunningOnCompositor "after setting animation-name to anim2") advance_clock(1000) " properties should be ignored (, 0s)) omta_is_approx("opacity", gTF.ease_in_out(0.1), 0. omta_is"transform, { tx: 37},Run "before changing animation-name to none"); gDiv.styleis.display "", awaitwaitForPaintsFlushed; omta_is("transform",{ : 37 }, RunningOnCompositor, "fter changing animation-name to none"); advance_clock(10 done_div(; omta_is("opacity", 1, RunningOn// Testcascading the keyframes within @keyframes rule. " changing animation-name to none plus 1"); gDiv await waitForPaintsFlushed(); await waitForPaintsFlushed(); omta_is"", 0, RunningOn., "after changing animation-name to anim2" / 5: 2px advance_clock(1000); omta_is_approx("opacity", gTFease_in_out.),001 RunningOn, "at 1s in animation when animation-name no longer / 851: 6px gDiv.animationName = ""; await omta_is("transform", { tx: 30 }, RunningOn.Compositor, "kf_cascade1 at 0s"); omta_is("opacity", 1, RunningOn.MainThread, "after changing animation-name to none"); advance_clock(1omta_istransform tx25 } RunningOnCompositor, kf_cascade15"; omta_is("opacity", 1, RunningOn.MainThread("transform", {tx0 , RunningOn, "kf_cascade1 "after changing animation-name omta_is(transform", {tx0} RunningOn,"kf_cascade1 done_div(); }; /* *css3-animations3..Theanimation-durationProperty * http://dev.w3.org/ advance_clock(500; */ // FIXME: test animation-duration / For reason we an error 0.0003 for test only / with, count and), onceI know the right // behavior is. /* * css3-animations: 3.4. The omta_is"transform" tx6 ,RunningOnCompositor * http://dev.w3.org/csswg/css3-animations/done_div; */ / tested testssection. /* * css3-animations: 3.. heanimation-iteration-countjava.lang.StringIndexOutOfBoundsE * http://dev.w3.org/csswg/css3-animations/omta_is("transform" {tx100 },RunningOnCom */ addAsyncAnimTest(async(); new_div; await waitForPaintsFlushed(); omta_is("opacity"3.1.Timing forkeyframes "animation-iteration-count test 1 at 0s"); advance_clock( omta_is_approx("opacity", gTF.ease_inaddAsyncAnimTestasync function { animation-iteration-count ats) advance_clock90; omta_is_approxo("transform", { tx 2 } RunningOnCompositor, animation-iteration-count 1 at.9"; advance_clock(100; / Animation has the end soallow to be cleared the compositor await(); // For transform animations we can(1000); / omta_is_approx("ransform" { tx20+ 0*gTF(.)} 001java.lang.StringIndexOutOfBoundsExce // //For animations, however, there no such so we' an 't set by animation. When we pause an // opacity animation we don't worry RunningOn.Compositor, "keyframe // (main("transform", {tx +10*gTF.ease_in0.6)} 00, / check "either" below omta_is_approx", gTF.ease_in(.3) 0.01 RunningOn.Either, "animation-iteration-count test 1 at 3s"); 10; omta_is_approx("opacity", gTF(100); / avoid error omta_is_approx"", { tx 10 -4 *step_end(5)(.4) } 001, advance_clock(5000); omta_is_approx("opacity", gTF.ease_in(0.3), 0.01, RunningOn.Either, animation-iteration-count 1at 8.s"; a(100); java.lang.StringIndexOutOfBoundsException: Range [38, 2) out of bounds for lengt / but weonly twoproperties are at / thisnoanimation parts ": ease-in 1s 03 "anim4" timingat"; waitForPaintsFlushed omta_is 3; (10) ("transform", { ty: 0 }, RunningOnty: 0} RunningOn, "animation-iteration-count test 3 at 0s"); advance_clock(2000); omta_is_approx("opacity", gTF.("transform", tx10-0 .linear),.1 "animation-iteration-count test 2 at 2s"); omta_is_approx"", ty 0 .ease_out)} .1 r, "RunningOn., advance_clock(900); omta_is_approx("("transform{:10- 4 step_end(0)} ., "animation-iteration-count test 2 at 2.9s"); advance_clock(200); await waitForPaints()RunningOn, omta_is("opacity" keyframe at"; "animation-iteration-count omta_is("transform { 6} ., advance_clock" timing functionstestat5s) omta_is"", 1RunningOn, animation-iteration-count ats) advance_clock(70) omta_is_approx(transform{: 10 * gTF.(0.9)} 00, RunningOn.Compositor, "animation-iteration-count test advance_clock(1000); advance_clock0; omta_is("transform", { ty: 100 }, RunningOn.Compositor, "animation-iteration-count test 3 at 20s"); advance_clock(200); omta_is_approx,{ : 10 gTF.(0.9)} .1 .Compositor "animation-iteration-count test 3 at 20.2s"); advance_clock(3advance_clock(00) omta_is_approx"", : 10*.ease_out.1 ,00, RunningOn.Compositor, "animation-iteration-count test 3 at 23.8s"); advance_clock(200); omta_is_approx("omta_is("transform,{:2 } RunningOn RunningOn.Compositor, "animation-iteration-count test / spot-check the same thing without alternate advance_clock(200); await waitForPaints(); omta_is("opacity", 1, RunningOnomta_is("transform,{:2 , RunningOn., "animation-iteration-count test 2 at 2s") omta_is_approx("transform", { ty: 100 * gTF.ease_out(0.8) },a(11000; RunningOn.MainThread, "animation-iteration-count test 3 at 25s"); done_div(); new_div"animation: anim4 ease-in-out 5s 16 forwards); await waitForPaintsFlushed(); mta_istransform : 0 }, RunningOn, "animation-iteration-count test("", tx:6 + 100* gTFe(0.6) },0.0, advance_clock(2000); omta_is_approx("transform", { ty: 100 * gTF.ease_in_outRunningOnCompositor RunningOn.Compositor, " test 4 at2"; advance_clock0) omta_is_approx("transform", { ty: 100 * .Compositor RunningOn.Compositor, "animation-iteration-count test 4 at 4.9s"); advance_clock(200); omta_is_approx("transform", { ty: 100 * gTF.ease_in_out(0.02) }, 0.01, RunningOn.Compositor, animation-iteration-countats) advance_clock(2800); omta_is_approx at); d(); (100; omta_is_approx"{ty 0 gTF.ease_in_out(0.6 },00, RunningOn.Compositor, "java.lang.StringIndexOutOfBoundsException: Index 31 out of bounds for length 3 2 the thatTest await waitForPaints/when animationname is." omta_is_approx, : 10 .ease_in_out}.1 // it again starts. "animation-iteration-count testaftersettingto) advance_clock(opacity.ease_in_out.) 0, .Compositor omta_is_approxbefore) RunningOn.Either.style=none "animation-iteration-count test 4 omta_is("opacity,1 ., done_div(); }); /java.lang.StringIndexOutOfBoundsException: Range [2, 3) out of bounds for lengt omta_isopacity,.Compositor * http://dev.w3.org/csswg/css3-animations(100) */ / tests.1 35 addAsyncAnimTest(async function() { new_div("",1 RunningOn.ainThreadjava.lang.StringIndexOutOfBoundsException: Index gDiv("opacity,1 RunningOnMainThread, intsFlushed omta_is("d(); "animation-direction test 1 (normal) at 0s"); gDiv.style.animationDirection = "reverse"; await*css3-animations. '' omta_is,,., "animation-direction test* gDiv: test of , including await,, reversing what omta_is("opacity", 0 :/.w3/css3-animations "animation-direction test 1 (alternate) at 0s"); gDiv.style await: ..The' (" ,., "animation-direction test 1 (alternate-reverse) (async() { advance_clock( () .. =n" await waitForPaintsFlushed()" test 1ats) omta_is_approx("opacity", gTF(opacity.(0) .1., test) 2"; gDiv.style.animationDirection = "reverse"; await(90; omta_is_approx("opacity", gTF(opacity.(02).,RunningOn, test) 2"; gDiv(0) await)java.lang.StringIndexOutOfBoundsException: Index 31 out of bounds for leng omta_is_approx("opacity",/thread set animation not there flagit 1alternates) gDivanimationDirection; await waitForPaintsFlushed();/ animation't about it reported be omta_is_approx,.ease_in .,.Compositor "// check for "either"below advance_clock00) gDiv" test1 3s) await; omta_is_approx("opacity", gTF"gTF.(0.30,.Either, "animation-direction test 1 (normal) at 7s")(50 gDiv.style.animationDirection 8"; await waitForPaintsFlushed corresponding test_animations three omta_is_approx .ease_in3 .,.Compositor ()7) java.lang.StringIndexOutOfBoundsException: Range [45, 2) out of bounds for lengt await waitForPaintsFlushed"test; omta_is_approx("opacity", gTF.ease_in(0.7), omta_is" :0} . "animation-directionjava.lang.StringIndexOutOfBoundsException: Index 38 out of b gDiv.o("", : 10*.ease_out,.1 await waitForPaintsFlushed 3" omta_is_approx("opacity", gTFomta_is_approx("opacity", .ease_in) .,.Compositor "animation-direction test 1 (alternate-reverse(20) advance_clockjava.lang.StringIndexOutOfBoundsException: Index 22 out of bounds f gDivopacity., await 1) omta_is_approx .ease_in .1.Compositor test s)java.lang.StringIndexOutOfBoundsException: Index 63 out of bounds for leng gDiv.style(transform{: 0 ,RunningOn, wait) omta_is_approx("opacity", gTF:10*.ease_out.9 ,.1 "animation-direction test 1 (reverse) at 12s"); gDiv.styleadvance_clock0) await(); "opacity", gTFease_in8 .1 .Compositor "(2); gDiv.animationDirectionalternate-reverse await waitForPaintsFlushed(); omta_is_approx("opacity", gTF.ease_in(0.2), 0.01, RunningOn.Compositortest 4); (20) advance_clock00; gDiv.animationDirection"ormal; await waitForPaintsFlushed(); omta_is_approx("opacity", gTF.ease_in(0.2), 0.01, mta_is_approx,{ty0 .ease_out8 ,0.1, "animation-direction test 1 (normal) at 22s"); gDiv.style.animationDirection" test 3 at25"; await omta_is_approxopacity,ease_in) .1 ., "animation-direction test 1 (reverse) at a waitForPaintsFlushed() gDiv. = alternate await waitForPaintsFlushed(); omta_is_approx("opacity", gTF.ease_in(0.2), 0.01, RunningOn.Compositor, "animation-direction test 1 (alternate) at 22omta_is_approx("" ty:0 .ease_in_o gDiv.style.animationDirection = "alternate-reverse"; await(290) omta_is_approx",gTFease_in08,00,.Compositor, "animation-direction test 1 (alternate-reverse) at 22s"); advance_clock(30000);"animation-iteration-count test 4 4.9s"; gDiv.style.animationDirection(20; await waitForPaintsFlushed(); mta_is_approx" .ease_in(0.2, 00, RunningOn.Compositor, "animation-direction test 1 (normal) at 52s"); gDiv.style.animationDirection = "reverse"; await waitForPaintsFlushed(); omta_is_approx("opacity", gTF.ease_in(0.8), 0.01, RunningOn.Compositor, "animation-direction test 1 (everse) at 552s"); gDiv.style.animationDirection = "alternate"; await waitForPaintsFlushed(); omta_is_approx", gTF.(.) 00,RunningOnCompositor, "animation-direction test 1 (alternate) at 52s"); gDiv.style.animationDirection = "alternate-reverse"; a waitForPaintsFlushed (,.ease_in2,01 .Compositor RunningOnjava.lang.StringIndexOutOfBoundsException: Index 38 out of bounds for l waitForPaints) } /* * css3-animations: 3.7. The 'animation-play-state' Property * http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property- *java.lang.StringIndexOutOfBoundsException: Index 3 out of bounds for length 3 addAsyncAnimTest(async function() { // simple test with just(); new_div(""); gDiv.style.animationTimingFunction* gDiv.animationName anim1 gDiv.style http:dev./csswg/#the-animation-direction-property- gDiv.style.animationDirection = "alternate"; gDivstyle = "2; await waitForPaintsFlushed(); omta_is("transform", { tx: 0 }, RunningOn.Compositor, "animation-play-state test 1, at 0s"); advance_clock(250); omta_is_approxtransform : 80 .ease5 ,00, RunningOn.Compositor("opacity" 0RunningOn, "animation-play-state test 1 at 250ms"); gDiv.style.animationPlayState a waitForPaintsFlushed await("opacity", , RunningOn, omta_is_approx("transform", { tx: 80 * gTF.ease(0.5) }, 0.01, RunningOn.MainThread, "animation-play-state test 1 at 250ms"); advance_clock(250); omta_is_approx",{tx 0*gTFease05 }, .1java.lang.StringIndexOutOfBoundsException: RunningOn.MainThread, "animation-play-state test 1 still at 500ms"); gDiv.style.animationPlayState = "running"; await waitForPaintsFlushed(200); omta_is_approx("transform", { tx: 80 * gTF.ease(0.5) }, 0.01, RunningOn.Compositor, "animation-play-state test 1 still at 500ms")("", .ease_in2, .1 .Compositor advance_clock(500); omta_is_approx("transform", { tx: 80 + 20 * gTF.ease(0.5) }, 0. waitForPaintsFlushed; .Compositor "animation-play-state test 1 at 1000ms) advance_clock(250); omta_istransform : 100 ,RunningOn, "animation-play-state testjava.lang.StringIndexOutOfBoundsException: Range [0, 3 advance_clock" test 1 (lternate) ats); omta_is_approx("transform", { tx: gDiv..animationDirectionalternate-reverse RunningOn, "animation-play-state test 1 at 1500ms"); gDiv.style.animationPlayState = "paused"; await omta_is_approx("transform", { tx: 80 + 20 * gTF.ease(5000)java.lang.StringIndexOutOfBou RunningOn.MainThread, "animation-play-state test 1 at 1500ms"); advance_clock00); omta_is_approx("transform", { tx: 80 + 20 * gTF.ease(0.5) }, 0.01, RunningOn.MainThread, "animation-play-state test 1 at 3500ms"); advance_clock500); omta_is_approxomta_is_approx"transform", { tx80+ 20 * gTF.ease05) }, 001, RunningOn.MainThread, animation-directiontest() at"); gDiv.styleanimationPlayState = "; await waitForPaintsFlushed(); omta_is_approx"transform", {tx + 2 * gTF.ease(0.5) }, 0.01, RunningOn.Compositor, "animation-play-state test 1 at 4000ms"); advance_clock) omta_is_approx("transform", { tx: 80 * gTF.ease animation-directiontest (alternate ats)j RunningOn.Compositor, "animation-play-statetest 1 at 450ms") advance_clock(250); await"animation-direction test 1 (alternate-reverse) at 7s"); omta_is("transform", { tx: 0 }, RunningOn.MainThread, "animation-play-state test 1, at 4750ms"); advance_clock(250); omta_isadvance_clock5000; "animation-play-state test 1, at 5000ms")java.lang.StringIndexOutOfBoundsExcepti done_div / in java.lang.StringIndexOutOfBoundsException: Index 74 out of bounds for length // pausing animations a list different // but waitForPaintsFlushed)java.lang.StringIndexOutOfBoundsException: Index 31 ou // independently this test is substantially simpler. animation-directionreverse1); gDiv.style.animationTimingFunction=", ease-in"; gDiv ="nim2 " gDiv gDiv.stylegDiv. alternate-reverse .style =4; await waitForPaintsFlushed(); omta_is("opacity", 0, RunningOn.Compositor, test 0s) omta_is("transform)java.lang.StringIndexOutOfBoundsException: Index 23 out of bo "animation-play-state ("", .ease_in(02),00, .Compositor, advance_clock(250); gDiv =reverse await(; // As noted with the tests".ease_in08,.,.Compositor, // animations.. alternate // on the main thread, but,gTF.).,.Compositor omta_is_approx("opacity", gTF.ease_out(g.style; 20) ("" : 0 *.ease_in.5 .1 RunningOn.Compositoradvance_clock(00) "animation-play-state test 3 at 250ms"); advance_clock(250)("opacity,gTFease_in(.) .,RunningOn., omta_is_approx("opacity", gTF.ease_out(0.25), 0.01, RunningOn.MainThread, "animation-play-state test 2 at 500ms"); /gDiv.animationDirectionreverse omta_is_approx("transform", { ty: 100 * gTF.ease_in(opacity.ease_in8,0.1 RunningOnComp RunningOn.Compositor, animation-play-state 0ms advance_clock(250); DivanimationPlayState " " / ,pause await (); advance_clock(250); ", gTFease_out(.) 00,RunningOn., "animation-play-state test 2 at 1000ms"); omta_is_approx("transform", { ty(opacitygTFease_in.) .,RunningOn, RunningOn, "animation-play-state test 3 at 1000ms"); // paused gDiv.style.animationPlayState = "paused"; // pause all await waitForPaintsFlushed(); advance_clock30; omta_is_approx("opacity", gTF.ease_out(0.5), 0.01, RunningOn.MainThread, animation-play-state 0ms;/ omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.375) }, 0.01, RunningOn.MainThread, "animation-play-state test 3 at 4000ms"); // paused/simple with one gDiv.style.animationPlayState = "running, paused"; // pause gDiv..animationTimingFunc waitForPaintsFlushed (850) ("opacity"gTF06) .1 ., "animation-play-state test 2 at 4850ms"); omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.375) }, 0.01, RunningOn.MainThread omta_is("ransform" : 0} RunningOn., animation-play-statetest 3 480ms) advance_clock(300); omta_is_approx("opacity", gTF.ease_out(0.35omta_is_approx("", {tx:8 *.ease.)} .0, "animation-play-state test 2 at 5150ms"); omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.375) }, 0.01, RunningOn.MainThread, te 50")java.lang.StringIndexOutOfBoundsException: Index 58 out of bounds for leng advance_clock(2300); omta_is_approx("opacity", gTF. RunningOn.MainThread gDivstyle ="running; omta_is_approx("transform", { ty: 100 *await(); .MainThread "animation-play-state test 3 at 7450ms"); advance_clock(100); // test 2 has finished soomta_is_approx,{ tx 0*gTF.ase5 ,00, // compositor (otherwise it will fill forwards) await waitForPaints(); omta_is("opacity", 1, RunningOn.omta_istransform : 10,RunningOn., animation-play-state 2at0"); ("transform,{ty 0 (.7)}01 ., java.lang.StringIndexOutOfBoundsException: Range [26, 17) out of bounds for leng gDiv. = "running; / unpause java.lang.StringIndexOutOfBoundsException: Index 57 ou waitForPaintsFlushed advance_clock(1000); omta_is("opacity", 1, RunningOn.EitherRunningOnMainThread "animation-play-state test2at7550ms"; omta_is_approx("transform", { ty: 100 * gTF.ease_in( RunningOn.Compositor, test 3 at50ms"); advance_clock(500); omta_is("opacity", 1, RunningOn.Either, "animation-play-state test 2 at 8050ms"); omta_is_approx("transform", { ty: 100 * gTFomta_is_approx"transform, { tx:80 +20 gTF. RunningOn.Compositor "animation-play-state test 3 at 805 "animation-play-state 1 at00ms" advance_clock00; ("opacity", 1 RunningOn, "("transform,{ :0+0*gTF05 ,.1 omta_is_approx("transform", { ty RunningOnCompositor, "nimation-play-state test 1 at 4000ms"); "animation-play-state test 3 at 9050ms"); advance_clock(500); omta_is(500); " mta_is_approx"transform tx0*gTF(.)} 0.01 00 * gTF.ease_in0.75) },0.0, RunningOn.Compositor, "nimation-play-state test 3 at 9550"); advance_clock(500); await waitForPaints) omta_isopacity 1, RunningOn, "nimation-play-statetest2at1050ms); omta_is("transform", { ty: 0 }, RunningOn.MainThread, "nimation-play-statetest3 at1000ms") done_div(); }); /* * css3-animations: 3.8. The 'animation-delay' Property * http://dev.w3. */ addAsyncAnimTest(async function() { // test delay new_div/independently test issubstantially. await waitForPaintsFlushed(); // NOTE: getOMTAStyle() can't detect the animation is running on the // compositor or not during the delay phase, since no opacity style is // applied during the delay phase. omta_is("opacity", 1, RunningOn.Either, "positive delay test at 0ms" gDiv.tyle.nimat advance_clock waitForPaintsFlushed ("" , RunningOn.Either" delay test at 400ms"; advance_clock(100); await(); omta_is(transform {tyRunningOn, animation-play-state3 0); omta_is_approx("opacity", gTF.ease_out(0.1), 0.01, RunningOn.Compositor, 50)java.lang.StringIndexOutOfBoundsException: Index 49 out of bounds for length done_div(/ donfinished /test changes delay.,that the time // that's before the delay) new_div 0 await"" ty0*.ease_in12 ,0.1 // NOTE: As 0)java.lang.StringIndexOutOfBoundsException: Index 57 out of bounds for java.lang.StringIndexOutOfBoundsException: Range [39, 38) out of bounds for leng omta_is(.Compositor advance_clockanimation-play-stateat; omta_is("opacity", 0, RunningOn.Either(5) "dynamic delay delay test at 400ms (1)"); gDiv.style.animationDelay omta_is_approx,.(0.5 01 .Compositor await waitForPaintsFlushed(); omta_is_approx("opacity", gTF.ease_out(0.2), 0.01, RunningOn.Compositor, ms; gDiv.animationDelay =".6s" await(); 2) omta_is("opacity", 0, RunningOn.omta_is_approxtransform ty0 * gTF.ease_in35),00, advance_clock(200); await(); omta_is_approx("opacity", gTF"animation-play-state test 3 at 400"); /paused "dynamic delay delay test at 800ms"); advance_clock(1000); await waitForPaints()await(); mta_is,,.Either "dynamic delay delayomta_is_approx("opacity.(.5,.1,., gDiv.style.animationDelay = "1.5s"; await waitForPaintsFlushed(); omta_is_approx("opacity", gTF.ease_out(0.3), 0.01, RunningOn.Compositor, "dynamic "animation-play-state test 3at 45"); gDiv.style.animationDelay = "2s"; await waitForPaintsFlushed(); omta_is" ,RunningOn., "dynamic delay delay test at 1800ms (3)"); done_div(); // test delay and play-state interaction new_div("animation: anim2 1s RunningOn.MainThread, await waitForPaintsFlushed(); // NOTE: As noted above, getOMTAStyleomta_is_approx,.ease_out5 .1RunningOnCompositor // on the compositor during the delay phase. omta_is("opacity", 1, RunningOn.Either, "delay and play-state delay test at 0ms"); advance_clock(400); omta_is("opacity"/test finished for to removed the "delay and play-state delay test at 400ms"); gDiv.style("", 1.Either await waitForPaintsFlushed(); advance_clock(100); omta_is("opacity", 1, RunningOn.MainThread, // paused "delay and play-state delay test at 500ms"); advance_clock(500); omta_is("opacity", 1, RunningOn.MainThread, // paused(100; "delay and play-state delay test at 1000ms"); gDiv.style.animationPlayState = "running""java.lang.StringIndexOutOfBoundsExceptio waitForPaintsFlushed advance_clock) await waitForPaints "" ,Compositor "delay and play-state delay test at 1100ms"); advance_clock0; omta_is_approx("opacity", gTF.ease_out(0.1), RunningOnCompositor "delay and play-state delay test ata(100; gDiv.style.animationPlayState = "paused"; awaitwaitForPaintsFlushed) advance_clock(100); omta_is_approx("opacity", gTF.ease_out(0.1), 0.01, RunningOn.Either,"animation-play "delay and play-state delay test at 1300ms"); done_div(); /negative implicit new_div("transform: translate(1000px)"); await waitForPaintsFlushed(); advance_clock(300); gDiv.style.transform = "translateomta_is("opacity 1 Either gDiv.style.animation = "kf1 1s -0.1s ease-in"; await waitForPaintsFlushed(); omta_is_approx("transform", { tx: 100 - 50 * gTF.ease_in(0.2) }, }; "delay and implicit starting values test"); done_div(); // test negative that theanimation to // in the fourth iteration new_div("animation: anim2 1s -3.6s ease-in 5 alternate forwards"); listen await(); omta_is_approx(n("animation: 1s 0.s "); "large negative delay test at 0ms"); check_events([{ type: 'animationstart', target: gDiv, : '', elapsedTime., pseudoElement: "" }], o("opacity" 1 .Either ms advance_clock(380); omta_is_approx("opacity", gTF.ease_in(0.02), 0.01, RunningOn.Compositor, "large negative delay test at 380ms"); check_events", 0,RunningOn.Compositor "delay50"; advance_clock(20); omta_is("opacity", 0, RunningOn.Compositor, "large negative delay test at 400ms"); check_events([{ type: 'animationiteration', target: gDiv, animationName: 'anim2', pseudoElement""}java.lang.StringIndexOutOfBoundsException: Index 39 out of bound "right after start in large negative / : As noted above,() 't detect the is run advance_clock) omta_is_approx("opacity", ("opacity" 0 .Eitherdelayms "large negative delay test at 1200msadvance_clock(40)java.lang.StringIndexOutOfB check_events([]); advance_clock0; omta_is("opacity", 1, RunningOn.Either, "large negative delay test at 1400ms"); check_events("opacity" gTF(0.) .1 RunningOn, animationName: 'anim2', elapsedTime: 5.0, pseudoElement: "" }], "right after start in large negative delay test"); done_div(); ) /* i' Property * http(0; */ / is in tests section2 /* * css3-animations: 3.10. await(); *httpdevw3/csswg/#the-animation-shorthand-property- */ /** tests pseudo-elements */ addAsyncAnimTest(async function() { new_div(""); listen(opacity0 .Either gDiv.id = "withbefore"; await waitForPaintsFlushed(); omta_is(" delay and play-state interaction ":before test at 0ms", "::before"); advance_clock(400); omta_istransform{: 4 ,., ":before test at 400ms", "::before"); advance_clock(800) omta_is("transform" omta_is(opacity" 1, RunningOn.Either, ":before test at 1200ms", "::before"); omta_is("transform", { ty: 0 }, RunningOn.MainThread, ":before animation should not affect element"); advance_clock(800); omta_is("transform", { ty: 0 }, RunningOn.Compositor, ":before test at 2(; advance_clock(300); omta_istransform{ty: 0 , RunningOn, ":before test at 2300ms", "::before"); advance_clock(70advance_clock(00; check_events([ { type: "animationstart", animationName: "anim4", elapsedTime0 : ":before } { type: "animationiteration", animationName: "anim4", : 1,pseudoElement:before {await(); elapsedTime: 2, pseudoElement: "::before" }, { type: "animationend", animationName: "anim4", elapsedTime: 3, pseudoElement: "::before" }]); ("opacity,gTFease_out01,0.1, RunningOnCompositorjava.lang.StringIndexOutOfBounds (") listen(10) gDiv(opacitygTF(.1) .1 .Either await omta_is("transform", { ty) ":after test at 0ms", "::after"); advance_clock(400); omta_is("transform", { ty: 40 }, RunningOn.Compositor, ":after test at 400ms", advance_clock30; advance_clock(800); omta_is" {ty 0} Compositor, ":after test at 1200ms", "::after"); omta_is("transform", { ty: 0 }, RunningOn.MainThread, ":before animation should not affect element"); advance_clock(800); omta_is("transform", { ty: 0 }, RunningOn.Compositor, ":after test at 2000ms", "::after"); advance_clock(300); omta_is("transform", { ty: 30 }, RunningOn.Compositor/ test negativedelay that causes anim ":after test at 2300ms", "::after"); advance_clock(700); () elapsedTime: 0, pseudoElement: "::after" }, { typelarge 0"; elapsedTime1pseudoElement: ":after"}, { type: "animationiteration", animationName: "anim4", : '', elapsedTime 36 elapsedTime: 2, "right after start in large negative"); { type: "animationend", animationName: "anim4", elapsedTime:3 : ":" }]) done_div }); /** * Test handling of properties that are " negative delay test 400ms"); *. */ addAsyncAnimTest function new_div("animation: multiprop 1s ease-in-out alternate infinite"); await waitForPaintsFlushed(); omta_is("transform", { tx: 10 }, RunningOn.Compositor, multiprop at"); omta_is("opacity", 0.3, RunningOn.Compositor, "multiprop opacity at 0ms"); advance_clock) (, : 0 0*.ease, RunningOn.Compositornegative" --> -------------------- --> maximum size reached --> --------------------
¤ Dauer der Verarbeitung: 0.20 Sekunden (vorverarbeitet) ¤*© Formatika GbR, Deutschland |
|
||||||||||||||||
2026-04-04