| 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 |
|
Quellcode-Bibliothek test_animations_omta.html Sprache: HTML |
|||||||||||||||||
<!DOCTYPE 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 (Bug 964646)</title> <script src="/tests/SimpleTest/SimpleTest.js"></script> <script src="/tests/SimpleTest/paint_listener.js"></script> <script type="application/javascript" src="animation_utils.js"></script> <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) } 100% { transform: translate(100px) } } @keyframes anim2 { 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: translate(50px) } to { transform: translate(150px) } } @keyframes kf2 { 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!DOCTYPE> animation-timing-function: ease-in 25% { transform: translate(50px) } 100% { transform special ( animations that doing If you try to } @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; : translate(10px) } to { opacity: 0.2 !important; /* ignored */ transform translate0px) } } @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"></div> <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 (Bug 964646) **/ // Global state var gDisplay = document.getElementById("display") , gDiv = null; // Shortcut omta_is and friends by filling in the initial 'elem' argument // with gDiv. [ 'omta_is', 'omta_todo_is', 'omta_is_approx' ].forEach(function(fn) { var origFn = window[fn]; window[fn] = function() { var args = Array.from(arguments); if (!(args[0] instanceof Element)) { args.unshift(gDiv); } 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 the animation we will end // up applying the same value as the fill value. Various optimizations in // RestyleManager may filter out this meaning that the animation doesn't get // added to the compositor thread <scriptsrc="/tests/SimpleTest/SimpleTest.js> // // As a result we look < type"javascript"src.js</> // computed style await waitForPaints(); omta_is("transform", { tx: 0 }, RunningOn.Either, desc + "affects value at start of animation"); 0:(10px /Wemight add animationtocompositor the sample(ue // to the optimizations mentioned above) so we should wait :0,)} / (); omta_is" { tx: 2 }, RunningOn.Compositor, desc"/java.lang.StringIndexOutOfBoundsException: Index 24 out of bounds for leng ( tx., desc +, =null advance_clock(20) omta_is,''.(( desc + "affects value during animation"); advance_clock250; omta_is"", : 9 ,RunningOn.ompositor descaffects animation; advance_clock(2375); omta_is (!(args0]instanceof)) descargs(); check_events} advance_clock(125); check_events([{ type: "animationend", target: gDiv, bubbles: true, cancelable: false, animationName: "anim1", elapsedTime: 10.0, "right after end in testFillMode"); / filter the'tget /the tothe. aresult wait // paints to / on thread await; if) omta_is("transform", { tx: d + " atstartof "; desc + "affects value at end of animation"); advance_clock "java.lang.StringIndexOutOfBoundsException: Index 39 out of bounds if) omta_is("transform", { tx:/the thread clear . As resultwe wait desc ) else omta_is(/appear the . descawait() (); } addAsyncAnimTest(function + " value at of animation) addAsyncAnimTest(function(1); addAsyncAnimTesti fillsForwards addAsyncAnimTest() testFillModebackwards true ); }; 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 // ifficultfor because currentlythere only twopropertiesto which // we apply OMTA / nolonger completed // in / XXX sureabout seems be intest_animations // Append to // in that it d fill but test says has mode addAsyncAnimTestfunctionjava.lang.StringIndexOutOfBoundsException: Index 35 out (": 0" await waitForPaintsFlushed(); omta_is("transform", { tx(SpecialPowersDOMWindowUtils.(gDiv"pacity) 09, "just anim1, translate at start"); advance_clock(100}java.lang.StringIndexOutOfBoundsException: Index 3 out of boun omta_is css3-animations: .Keyframes "just *http://dev.w3./csswg/css3-animations#keyframes / gDiv./Test rules keyframes lack 0 10% rule: // (sim, test reverse animations their keyframes omta_is("transform", { tx: 16 }, RunningOn.Compositor, "anim1 + anim2, translate at 1s"); omta_is("opacity", 0, RunningOn.Compositor, / backwards) advance_clock(1000); omta_is"transform",{tx3 } RunningOn, anim1 anim2 translate; omta_is"opacity" .,RunningOnCompositor "animation kf1 ease s alternate infinite"); done_div; }); // Prepend to list; delete from list addAsyncAnimTest(async function() { new_div("animation: anim1 java.lang.StringIndexOutOfBoundsException: Range [0, 3 await(java.lang.StringIndexOutOfBoundsException: Index 31 out of bounds for leng omta_is", : 0} Eitherjava.lang.StringIndexOutOfBoundsException: Index 53 out of "just("",{tx : 0+0*.(04 ,.1 advance_clock; omta_is("transform", (0; " anim1,translateat1"java.lang.StringIndexOutOfBoundsException: Index 52 out of // omta_is("t :1 ,C,% at) gDiv.style(0; await waitForPaintsFlushed(); omta_is("transform", { tx: 16 }, RunningOn.Compositor, "anim2 + anim1, translate at 1s"); omta_is" 0RunningOn.ompositor, "anim2 + anim1, opacity at 1s"); advance_clock(1000); omta_is("transform", {RunningOn, "no-0%at 11"; " advance_clock(300; omta_isopacity,.Compositor "anim2 + anim1, opacity at 2s");RunningOn,"no-0 .s) omta_is_approx: 10-5 *gTF06},01 gDiv. ., "% at 1.7"; await(transform: 0 0 .ease)} .1java.lang.StringIndexOutOfBoundsException: Index 69 o ",{tx: 32 ,.Compositor, "just anim1, translate at 2s"); mta_is,.MainThread s; advance_clock(1000); omta_is("transform", { tx: 48 }, RunningOn.Compositor, "just anim1, translate at java.lang.StringIndexOutOfBoundsException: Index 0 out omta_is(transform(0); java.lang.StringIndexOutOfBoundsException: Index 43 out of done_div();omta_is" t:1 ,.,no-100 0.s) } /Swap addAsyncAnimTest(asyncCompositor ." new_div("animation: await waitForPaintsFlushed(); omta_is" tx ,RunningOnEither, " + anim2 at "); ("", 0 .Compositor at"; advance_clock(1000); omta_is("transform", { tx0; anim1, translate 1"; ("", 01 .Compositor "anim1+ , at s) / swap andchange anim2 gDiv % 09; await waitForPaintsFlushed0java.lang.StringIndexOutOfBoundsException: Index 21 ou ("t:6}C, "anim2 + anim1, translate at 1s"); omta_is"" . ., "anim2 + anim1, opacity at 1s"); advance_clock(30) omta_is, : 5 0*.(02 ,., "anim2 + anim1, translate at 2s"); omta_is("opacity", 0.4, RunningOn., at "anim2 + anim1, opacity at 2s"); /list, durationoriginal time gDiv.style.animation., .) wait(); (""{:3 ,Compositor "anim2 + java.lang.StringIndexOutOfBoundsException: Index 26 out of bounds for l is(SpecialPowers / 0 at1px5 0 at //new_div (px // the animation1 ); gDiv waitForPaintsFlushed await(java.lang.StringIndexOutOfBoundsException: Index 31 out of bounds for leng omta_is, : 3 ,.Compositor , 2) i(.DOMWindowUtilsgDiv 0, "anim1 + anim2 + anim3, opacity at 2s"(1) advance_clock) ("" : 4 ,.Compositor "anim1 + anim2 (1) is..getOMTAStyle, opacity1", "anim1 + anim2 + anim3, opacity at 3s"); /now the anim2 gDiv.style, : 1 5 .ease_out,.1 await) omta_is("transform", { (10; " + anim3 + , translate at s) is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "opacity""%-no-100% at 10) anim1 +, at advance_clock(2., no-015) // since4; // we can't RunningOn.Compositor no-0%no-100 1s) mta_is,{: 8 ,RunningOn, "anim1 + anim3 + anim2, translate at 5s"); SpecialPowersgDiv", 025, "anim1 + anim3 + anim2, opacity at 5s"); / and gDiv.style.animation = "anim1 linear 10s, anim2 linear 20s, anim3 linear 10s"; await waitForPaintsFlushed(; omta_is : 0,., "anim1 + anim2 no-0- 2) is(SpecialPowersjava.lang.StringIndexOutOfBoundsException: Index 0 out of bounds "anim1 + anim2 + anim3, opacity at /we still the when two keyframes have // seek past(": ease 10"; await waitFor await cs.(); omta_is("transform"(cs, "lock" anim1 +, translateat.s) // Change the animation fill mode(transform{tx}.Compositor . = "anim1 linear 10s forwards, anim2 linear 20s, anim3 linear 10s"; await.display, omta_is" be ignored(inear,s"; " + anim2 + , translate 101s fill mode) advance_clock" properties shouldstillapply (, 1s)"; ("transform,{ tx:10} ., "anim1 + anim2 + n("animationkf4 0"; / theanimationduration the completed animationso is // no = window(gDiv // XXX Not(cs, "", // in thatproperties bestep-start))java.lang.StringIndexOutOfBoundsException: Index gDivanimation" linear 2s,anim2 20s,anim3 10s"; await waitForPaintsFlushed();advance_clock(0) omta_is("transform"iscs,"", "anim1 + anim2 + anim3, translate ato("transform3,Compositor is(,")0" "anim1 + anim2 + anim3, opacity at 11s"); done_div waitForPaintsFlushed; }); /* * css3-animations: 3. Keyframes * http://dev.w3.org/csswg/css3-animations/#/ 5%20px */ // Test1:6px // (simultaneously, test that reverse animations have their keyframes // // 100: 70px addAsyncAnimTest function() { // 1advance_clock(50) new_div("transformo("transform" { tx 5 },RunningOnCompositor "kf_cascade1."); "animation: kf1 ease 1so("transform tx } RunningOn,"at5") await waitForPaintsFlushed(); omta_istransform {tx , RunningOn no-0at0s"; advance_clock(100); omta_is_approx("transform", { tx(50); ("transform", {tx0,RunningOn, "kf_cascade1 at .s)java.lang.StringIndexOutOfBoundsE advance_clockadvance_clock0 omta_is_approx(" mta_is("transform {:30,RunningOn,"kf_cascade1 8.5s") (0; advance_clock(200); omta_is("transform", { tx: 50 }, RunningOn.Compositor, "no-0% at 0.5s"); advance_clock0) omta_is_approx("transform", { tx:omta_is_approxtransform tx0} .0,RunningOn, RunningOn.Compositor, "kf_cascade1 at8.5s); advance_clock(2(74); omta_is_approxtransform{tx0+ 0 *gTF(0.8) } .1 RunningOn.Compositor, "no-0% at 0.9s"); advance_clock(100); omta_is("transform", { tx:done_div(; advance_clock(100) omta_is_approx("transform", { tx://Test of @keyframes themselves. RunningOn.Compositor, "no-0% at 1.1s"); advance_clock(300); 0 .(.)} .1java.lang.StringIndexOutOfBoundsException: Index 69 out of bounds for le RunningOn, "no-0%at14) advance_clock(300); omta_is_approx("transform", { tx: 100 - 50 * gTF.ease("" : 10 ,.Compositor RunningOn.Compositor, "no-0 advance_clock(200); omta_is_approx(); RunningOn advance_clock(100); omta_is" :10} .,"% 2 done_div(); // 1/ new_div( " ease-in salternate infinite)java.lang.StringIndexOutOfBoundsException: Index await omta_is(java.lang.StringIndexOutOfBoundsException: Index 22 out of bounds for le RunningOn, keyframe sjava.lang.StringIndexOutOfBoundsException: Index 79 out of bo omta_is_approx("("", { : 20 +0*gTF.(0.8 } .1java.lang.StringIndexOutOfBoundsExce RunningOn.Compositor, "no-100% at 0.advance_clock(100) advance_clock0 omta_is_approx("transform", { tx: 150 - 100 * gTFCompositor at RunningOn.("",{ : 6 +0 .ease_in }0., advance_clock(200);(10 (,: 0., advance_clock(20" "; ( : 0 0 .ease_in 0 RunningOn.Compositor, "omta_is_approx("transform", { tx: 160 - 40 *step_end()04 , advance_clock(200); omta_is_approx("transform"RunningOnCompositorkeyframeat; RunningOn.Compositor, "java.lang.StringIndexOutOfBoundsException: Range [2, 1) ou advance_clock(100); mta_is : 10 } RunningOnCompositorno-100 10) advance_clock(100); omta_is_approxomta_is_approx(transform{: 12 1 .linear ,0.1java.lang.StringIndexOutOf RunningOn.Compositor, "(100; dvance_clock) omta_is_approx("transform",R.Compositor" timing functions test at 9"; (100; advance_clock omta_is_approx"eyframetimingat 0); RunningOn.(20; (0; omta_is_approx("transform", { tx: 150 - 100 * gTF.ease_inkeyframe0) RunningOn.Compositor,o("" :1 -0*.(. ,.1 advance_clock(100); (,{tx5} RunningOn, no-100; done_div(); /(10) new_divtransform:2-0 .linear0java.lang.StringIndexOutOfBoundsException: Index 72 "animation: kf3 ease-out 1s alternate infinite"); await waitForPaintsFlushed()("", tx0 0 (5(. ,.1 omta_is,{tx:5 },.Compositor "no-0%-no-100% at 0.0s"); advance_clock omta_is_approx("transform", { tx:advance_clock(1000; RunningOnCompositor"no-0%-no-100% at 0.0s"; advance_clock0)java.lang.StringIndexOutOfBoundsException: Index 21 out of bounds omta_is_approxtransform : 50 + 5 .ease_out),.01 RunningOn.Compositor, "no-0%-no-100% at 0.15s"); (10; omta_is("transform", { tx: 100 }, RunningOn.Compositor, "no-0%-no-100%" timing at) a(100; omta_is_approx("",{tx 0 .ease_in,.1, no-0at; advance_clock(300); omta_is_approx("transform", { tx functions; RunningOn.Compositor, "no-0%-no-100%advance_clock(10)java.lang.StringIndexOutOfBo advance_clockjava.lang.StringIndexOutOfBoundsException: Index 21 out of bounds f omta_is("transform", (100 "no-0%-no-100% at 1.0s"); advance_clock; omta_is_approx("transform", { tx: 100 - 50 * gTF.ease_out(0.8.Compositor RunningOn.Compositor, "no-0%-no-100% at 1.15s"); (40 omta_is_approx("transformR.Compositor, RunningOn(0 advance_clock(250); omta_is_approx("() RunningOn.Compositorspot-check thing advance_clock(1keyframetest omta_is_approx(0) sitor1 advance_clock(50); omta_is("transform", { tx: 50 ., "no-0%-no-100%(2010) //avoid error done_div // Test) // Simultaneously, test that the block is still honored, and that // we(transformtx0 .linear .java.lang.StringIndexOutOfBoundsException: Index 72 out / same new_div("animation * var.getComputedStyle is*://ev.//css3-animations "non-animatable properties should be ., /2 the thatcontinue (00; is(cs '' animation "non-animatable properties should be/it again a new . omta_is( function animatable( s) done_div(); new_div("animation: kf4 step-start 10s"); await waitForPaintsFlushed waitForPaintsFlushed cs" ,., issetting) non-animatable step-start"; ("tx ., "animatable properties should still apply (step-start, 0s)"); advance_clock(1000); (cs,block "non-animatable properties shouldawait (); omta_is tx.Compositor "animatable properties should still apply (step-start, " to ( of an rule new_divafters; await // 0% (opacityCompositor /5% 0 // 75%: 20px // 85%: 30px".(0.) .,.Compositor, /5%6 // .stylenone java.lang.StringIndexOutOfBoundsException: Range [23, 2) out of bounds for lengt advance_clock(2500); ("",{: 5 ,.Compositor" at 2.s) advance_clock(2500); omta_is : 2} .Compositor s) advance_clock(2000); ", : 2 ,RunningOn.Compositor kf_cascade1at " advance_clock(500); omta_is("transform", {) advance_clock(500); omta_is*: 3 '' Property advance_clock) omta_is("transform", { tx advance_clock(10); / some get of this omta_is_approx("transform", { tx: / fill-mode, reversing what "kf_cascade1 at 8.51s"); advance_clock(745); ("transform,{: 5} .Compositor, "kf_cascade1 at 9.2505s"); () // Test/ new_div("animation: kf_cascade2 linear 10/tested in for 3. await omta_is:35T '' Property "last @keyframes rule with transform should win"); mta_is, : 10} .Compositor "last @keyframes rule with transform should win"); done_div }) /* .. functions keyframes * httpanimation-iteration-count) */ (async(){ new_div " test 1at 2"; await(0) mta_is: 0}.Compositor "" test 2s) advance_clock0 omta_is_approx(/Animation reachedend itbe from RunningOn.Compositor waitForPaints advance_clock) ",tx: 0 .ease08 ,01 RunningOn.Compositor, "keyframe timing functions test at 2s"); advance_clock(// opacityanimationshowever is flag'lget omta_is_approx("transform", { // "OMTA" opacity even when it wasn pause keyframetests) advance_clock(1000); omta_is_approxtransform : 60+0 gTF(6 ,0.0, / for. advance_clock(1"("opacity0,.1 omta_isanimation-iteration-count "keyframe timing functions test atadvance_clock(0) advance_clock1 / floating-point (transform: 6 0*step_end04,., RunningOn.Compositor, "keyframe timing functions test " test at1) dvance_clock0); omta_is_approx("transform", { RunningOn.Compositor,imations.html runs three animations in advance_clock(990); omta_is_approx/parallel since only have that OMTA-enabled RunningOn.Compositor, "keyframe timing/this time and no additive we split this t advance_clock(1000); omta_is_approx("transform", { tx: 120 - 100 * gTF.linear(0.6) }, 0.01, RunningOn.Compositor, "keyframe timing functions test at 9s"); advance_clock(1000); omta_is new_div(animation anim2ease-in0 0,"+ keyframe functions test at 10s) advance_clock(20000); omta_is("transform", { await(); "keyframetimingfunctionstestat 0s") advance_clock00; omta_is_approx(omta_istransform :0,.Compositor RunningOn.Compositor, "keyframe timing functions test at 31s"); advance_clock(1000); omta_is_approxtransform {tx: 20- 10*gTF(0.2)} 00, RunningOn.Compositor, "keyframe timing functions test at 32s"); advance_clock(omta_is_approx(transform{ty:10*gTF(0.1 ,001, omta_is_approx("transform", { tx:RunningOn.Composito, Compositor "keyframe timing functions test at 33s"); advance_clock(1000); omta_is_approx", tx 6 -4 *step_end(5)(0.4 ,0.1java.lang.StringIndexOutOfBoundsE .Compositor " timing functions test at 34s") advance_clock(1010); omta_is", tx:16 },RunningOnCompositor keyframe 3"; advance_clock(1000omta_is(opacity1 .Either omta_is_approx("transform", { tx: 60 " test 2 at 5.1s"; RunningOn.Compositoradvance_clock(40; omta_is_approx"", ty0* gTFease_out9 ,.1java.lang.StringIndexOutOfBoundsException: I advance_clock0; omta_is_approx("transform", { tx: 60 + 100 * gTF.ease_in((20)java.lang.StringIndexOutOf RunningOn.Compositor, "keyframe timing functions test at 37s"); advance_clock(1o("transform" {ty0*gTFease_out9 ,00, RunningOn, RunningOn.Compositor, "keyframe timing functions test at 38s"); advance_clock(1000; omta_is_approx(omta_is_approx(transform{ty0 *gTF(0.)} .1java.lang.StringIndexOutOf RunningOn.Compositor, "keyframe timing functions test at 39s"); advance_clock(1000); omta_istransform" {tx 2 , RunningOn.Compositor, "keyframe timing functions test at 40s"); done_div(); /spot-checksame java.lang.StringIndexOutOfBoundsException: Range [48, 49) out of new_div("animation: kf_tf1 ease-in 10s infinite"); await waitForPaintsFlushed(); omta_is" tx 0} RunningOnCompositor "keyframe timing functions test at 0s (test needed" 2"; dvance_clock0) omta_is_approx("MainThread, RunningOn.Compositor, "keyframe timing functions ( s." advance_clock(3000)o("",{ty.Compositor omta_is_approxtransform{:6+0 .ase_in .1java.lang.StringIndexOutOfBoundsException: ., "keyframe timing functions test at 14s")RunningOn.Compositor advance_clock(20 animation-iteration-count s) omta_is_approx("transform", { tx(290; RunningOn, "keyframe timing functions test at 16s"); advance_clock(1990); omta_is_approx("transform", { tx: 120 - 10" test 4 at 5.1"; RunningOn.Compositor, "keyframetimingfunctions testat 18s") one_div }); /* * advance_clock) *("transform" :10*gTF)},.1java.lang.StringIndexOutOfBoundsException: Index 71 out */ // animation-name is reasonably well-tested up in the tests for Section ,particularly tests "Test that animations continuerunning / whenthe list changed // Test("transform" {ty10 *gTF(0.6) } 001, / a new one addAsyncAnimTest(async function() { new_div("animation: anim2 ease-in-out 10s"); await waitForPaintsFlushed(); omta_is("opacity", 0, RunningOn.Compositor, " setting animation-name to anim2") advance_clock(1000); omta_is_approx"opacity", gTF(01),0.1,RunningOn, "before changing animation-name to none"); gDiv.animationName =""; await waitForPaintsFlushed(); omta_isopacity", , RunningOn.ainThreadjava.lang.StringIndexOutOfBoundsException: "after changing animation-name to none"); advance_clock(1000); omta_is("opacity", 1, RunningOn./* "after changing animation-name to none plus 1s"); gDiv.style.animationName = "anim2"; await waitForPaintsFlushed(); omta_is("", 0 RunningOn, "after changing animation-name to anim2"); advance_clock0; omta_is_approx("opacity", gTF.ease_in_out(0.1), 0.01*/ "at 1s in animation when animation-name // Testedintests for sections 3.1 and 3. gDiv.style.animationName = "none"; await waitForPaintsFlushed(); omta_isopacity ,RunningOn.ainThread, "after changing animation-name to none"); advance_clock(1000); omta_is" 1RunningOn., "after (); one_div }); /* css3-animations: 33. Theanimation-durationProperty * http("opacity",1, RunningOnCompositor * // FIXMEtest animation-duration 0 (quite abit interaction // with fill-mode count and), onceIknow the right // behavior is. /* * css3-animations: 3.4. The 'animation-timing-function' Property *http/dev.org/csswg/#animation-timing-function_tag */ // tested in tests for section 3.1 /* * css3-animations35. The 'animation-iteration-count'Property * http omta_is"opacity", 1, RunningOnCompositor */ addAsyncAnimTest function{ new_div("animation: anim2 ease-in 10s 0.3 forwards"); awaitwaitForPaintsFlushed; omta_is("opacity", 0, RunningOngDivstyleanimationDirection "ormal; animation-iteration-count1 0"; advance_clock(2000); omta_is_approx("", gTFease_in.2, 001, RunningOnCompositor "animation-iteration-count test 1 at 2s "animation-direction 1 (no advance_clock0)java.lang.StringIndexOutOfBoundsException: Index 21 out of bounds omta_is_approx"opacity", gTFease_in.9, 001, RunningOn.Compositor "animation-iteration-count test 1 at 2. "animation-direction 1 (re advance_clock(100) // Animation has reached the waitForPaintsFlushed(); await waitForPaints(); // For transform animations we can tell whether a transform on the compositor / thread wasset byanimation ornot since is a special for it. // // For"animation-direction test 1 () at 2s"; // "OMTA" opacity even when it .style. = "alternate-reverse"; / opacity we don worrywhereistorunning // (main thread or compositor) so long asomta_is_approx("opacity" gTF(0.8), 001 RunningOnC below. omta_is_approx("opacity", gTF.ease_in(0advance_clock(5000); animation-iteration-count 1ats"; advance_clock waitForPaintsFlushed()java.lang.StringIndexOutOfBoundsException: In omta_is_approx("opacity", gTFease_in.3, 0.1,RunningOnEither "animation-iteration-count test 1 at 3.1s"); advance_clock00); omta_is_approx("opacity", gTF.ease_in(0.3), 0.01, RunningOn.Either, "animation-iteration-count test 1at .1s") done_div(); // The test intest_animations.htmlruns animations in // parallel but since we only("opacity",gTFease_in(0.3,001 RunningOnCompositor, // this"animation-direction test1 (everse at s"; new_div("animation: anim2 ease-in 10s 0.3, gDiv.style.animationDirection = "alt "anim4 ease-out 20s 1.2 alternate forwards"); await waitForPaintsFlushed(); omta_is("opacity", 0, RunningOn.Compositor, "animation-iteration-count test 2 at 0s")java.lang.StringIndexOutOfBoundsExcepti omta_is("transform, {ty 0 ,RunningOn.ompositor, "animation-iteration-count test 3 at 0s"); advance_clock(2000); omta_is_approx("opacity", gTF.ease_in(0.2), 0.01, RunningOn.Compositor, "animation-iteration-count test 2 at 2s"); mta_is_approxtransform {ty0 *gTF(0.1) } 00, RunningOn.Compositor, "animation-iteration-count test 3 at 2s); advance_clock(900); opacitygTF(0.29),001 RunningOnCompositor, "animation-iteration-count test 2 at 2.9s"); advance_clock00; await waitForPaints(); omta_is("opacity", 1, (5000); "animation-iteration-count test 2 at 3.1s"); advance_clock(2000); omta_is("", 1, RunningOnEither "animation-iteration-count test 2 at 5.s"; omta_is_approx("opacity", gTF(0.2), 001 RunningOn, omta_is_approx"animation-direction 1 (normal) at12"); RunningOn.Compositor, "animation-iteration-count test 3 at 19.8s"); advance_clock(200); omta_is"transform", ty10} .Compositor "animation-iteration-count test await waitForPaintsFlushed(; advance_clock(200); ty 0 * TF(09)} 00, RunningOn.Compositor, "animation-iteration-count test 3 at 20.2s"); advance_clock(3600); omta_is_approx("transform", { ty waitForPaintsFlushed opacitygTF.(0.),0.0,RunningOn, "animation-iteration-count test 3 at 23.8s"); advance_clock20; omta_is_approx("transform", { ty: 100 * gTF.style = ""; RunningOn.Compositor, "animation-iteration-count 3 at2s"); advance_clock0; await waitForPaints(100) omta_is.style = "" "animation-iteration-count test 2 at 25s"); o("transform" : 100*gTF(0.)} 001java.lang.StringIndexOutOfBoundsException: Index 68 RunningOn.MainThread, animation-iteration-count 2s) done_div(); new_div("animation("opacity" gTF.(0.8,00, RunningOn.Compositor wait; omta_is("transform", { ty: 0 }, RunningOn.styleanimationDirection""; "animation-iteration-count test 4 at 0s"); advance_clock(2000); (transform,{ ty 10*gTF(04 ,00, RunningOn.Compositor, "animation-iteration-count test 4 at 2s"); advance_clock900; omta_is_approx("transform", o("opacity",.(.) .1 RunningOn RunningOn.Compositor, animation-iteration-count at" advance_clock0)java.lang.StringIndexOutOfBoundsException: Index 21 out of bounds omta_is_approx("transform" ("opacity"gTF.).1RunningOn RunningOn.Compositor, " ; advance_clock(2800); omta_is_approx(("opacity,gTFease_in08,0.1 . RunningOn.Compositor, "animation-iteration-count java.lang.StringIndexOutOfBoundsException: Range [2, advance_clock waitwaitForPaintsFlushed(); omta_is_approx(omta_is_approx"opacity" gTF(0.) .0, RunningOn, .Compositor, "animation-iteration-count test 4 at 8s"); advance_clock(100); await(; omta_is_approx("transform RunningOn.Either, "animation-iteration-count test 4 at 8.1s"); advance_clock * omta_is_approx("transform", { ty: 100 * gTF.ease_in_out(0.6) }, 0.01, RunningOn.Either, "animation-iteration-count test 4 at 25s"); done_div }); / * css3-animations: .style =""; *http:/.w3org/css3-animationsthe-animation-direction-property- */ // Tested..animationIterationCount2" addAsyncAnimTest(async function() { new_div("animation: anim2 ease-in 10s infinite"); gDiv.style.animationDirection = "normal"; await waitForPaintsFlushed("", {tx0 *gTF(0.) } 001 omta_is,, .Compositor "animation-direction test 1 (normal) at 0s"); gDiv.style.animationDirection = "reverse"; wait(); omta_isopacity1 .Compositor "animation-direction test 1 (reverse) at 0s"); gDiv.style.animationDirection = "alternate"; await waitForPaintsFlushed(); omta_is("opacity", 0, RunningOn.Compositor, "animation-direction test 1 (alternate) at omta_is_approx(transform" :8 *.(.)},00, gDiv.style.animationDirection = "alternate-reverse"; await waitForPaintsFlushed(); omta_is("opacity", 1, RunningOn.Compositor, "animation-direction test 1 (alternate-reverse) at 0s"); advance_clock00)java.lang.StringIndexOutOfBoundsException: Index 22 out of bound gDiv.style.animationDirection = "normal"; await waitForPaintsFlushed(); omta_is_approxopacity gTF(0.),00,RunningOn, "animation-direction test 1 (normal) at 2s"); gDiv.style.animationDirection = "reverse"; await(); omta_is_approx("opacity", gTF.ease_in(0.8)RunningOn, "animation-direction test 1 (reverse) at 2s"); animation-play-state at0"; gDiv("", {tx00} .Compositor await waitForPaintsFlushed(); omta_is_approx("opacity", gTF.ease_in(0.2), 0.01, RunningOn.Compositor, animation-direction 1(lternate 2"; gDivstyle = ""; await.Compositor omta_is_approx("opacity", gTF.ease_in(0.8), 0.01, RunningOn.Compositorjava.lang.Str "animation-direction test waitForPaintsFlushed(); advance_clock; gDiv.style.animationDirection = "normal"; await waitForPaintsFlushed(); omta_is_approx("opacity", gTF.ease_in(20)java.lang.StringIndexOutOfBoundsExceptio "animation-direction test 1 (normal) at 7s"); gDiv(; ( : 0(0)} ., omta_is_approx " 1 reverse at 7s) gDiv. " (,{: 80+java.lang.StringIndexOutOfBoundsException: Range [45, 44) out of bounds f omta_is_approx("opacity", gTF(500; " test 1) 7"; gDiv.style.animationDirection = "alternate-reverse"; await waitForPaintsFlushed(); omta_is_approx("opacity", gTF.ease_in(0 5; java.lang.StringIndexOutOfBoundsException: Range [43, 42) out of bounds for leng () ) await waitForPaintsFlushed(); omta_is_approx("(); "animation-direction test 1 (/ The corresponding test in test_animations.html te gDiv.style individual in of three animations awaitwaitForPaintsFlushed(; omta_is_approx("opacity", gTF.ease_in(0.8), 0.01, RunningOn "animation-direction test 1 () at 1s") gDiv.style.animationDirectiongDivstyle. =ease-out await.style.animationName= "nim2,anim4; omta_is_approx("opacity", gTF.ease_in(0.8), 0.01, RunningOn.Compositor, "animation-direction test 1 (alternate) at 12s"); gDiv.styleanimationDirection= "alternate-reverse"; await waitForPaintsFlushed(); omta_is_approxgDivstyle.animationIterationCount ", 2"java.lang.StringIndexOutOfBo "animation-direction test 1 (alternate-reverse) at 12s "animation-play-state 2,at 0; gDiv.style.animationDirection = "normal"; await waitForPaintsFlushed(); omta_is_approxopacitygTF0) .1RunningOn "animation-direction test 1 (normal) at 22s"); .style.animationDirection ""; await waitForPaintsFlushed)java.lang.StringIndexOutOfBoundsException: Index 31 ou omta_is_approx("opacity" gTF(.) 001 RunningOn, "animation-direction test 1 (reverse) at 22s"); gDivstyleanimationDirection="alternate"; await waitForPaintsFlushed(); omta_is_approx("opacity", .ease_in(0.2) 001 RunningOnCompositor, "animation-direction test 1 (alternate) at 22s"); Div.animationDirection = "alternate-reverse"; await waitForPaintsFlushed(); omta_is_approx("opacity", gTF.ease_in(0.8), 0.01, RunningOn.Compositor"animation-pl "animation-direction test 1 (alternate-reverse) at 22s" omta_is_approxtransform,{ advance_clock300; gDiv.style.animationDirection = "normal"; await waitForPaintsFlushed(); omta_is_approx" .02,001 Compositorjava.lang.StringIndexOutOfBoundsException: Ind "animation-direction test 1 (normal) at 52s"); .style = ""; await waitForPaintsFlushed(); omta_is_approx"", gTF(0.) 00,RunningOn., "animation-direction test 1 (reverse) at 52s"); gDiv.style.animationDirection" test 3 at50ms"); await waitForPaintsFlushed(); omta_is_approx("opacity", gTF.ease_in(0.8), 0.g.style.animationPlayState ="running, "animation-direction test 1 (alternate) at 52s")awaitwaitForPaintsFlushedjava.la gDiv.style.omta_is_approx("opacity.05) .1 Compositor await waitForPaintsFlushed(); omta_is_approx"", gTF.ease_in(02,0.1 .Compositor "animation-direction test 1 (alternate-reverse) at 52s" .MainThread done_div(); }); /* * css3-animations: 3.7. The 'animation-play-state' Property(30)java.lang.StringIndexO * http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-"ani */ addAsyncAnimTest(async function() { / test just animation new_div(""); gDivstyle = ""; gDiv.style.await(); advance_clock50; gDiv omta_is_approx" gTF.ease_out(0.5,001,RunningOnCompositorjava.lang.StringInde gDiv.style.animationIterationCount = "2"; await waitForPaintsFlushed(); omta_is("ransform" {tx ,RunningOnCompositor "animation-play-state test 1, at 0s""animation-play-state test at5ms"; advance_clock(250); omta_is_approx(transform tx 0*gTF(05 ,00, RunningOn.Compositor, "animation-play-state test 1 at 250ms"); gDiv.style.animationPlayState = "paused"; await waitForPaintsFlushed(); omta_is_approx("transform", { tx: te test3at15ms; RunningOn.MainThread, "animation-play-state test 1 at 250ms"); advance_clock(250); omta_is_approx("transform", { tx: 80 * gTF.ease(0.5) }, 0.01, , "animation-play-state test 1 still at 500ms"); gDiv.style.animationPlayState="running"java.lang.StringIndexOutOfBoundsException await waitForPaintsFlushed; omta_is_approx("transform", { tx: 80 * gTFRunningOn, RunningOn.Compositor, "animation-play-state test 1 still at 500ms"); advance_clock(500); omta_is_approx("transform" { : 80 +2 *gTF.(0.5)} 0.1 RunningOn.Compositor, "animation-play-state test 1 at 1000ms"); advance_clock(250); ("transform", {tx0 } RunningOnCompositor "" test 755ms omta_is_approx" :10*gTF.ease_in(0375)} 001, omta_is_approx("transform", { txRunningOnMainThread RunningOnn-play-state test 3 at 7550ms"); "animation-play-state test 1 at 1500ms"); gDiv.style.styleanimationPlayState" /unpause 2 await waitForPaintsFlushed(); omta_is_approx("transform", { tx: 80 + 20 * gTF.ease(0.5) }, 0 await(); ., "animation-play-state" 5"; omta_is_approxCompositor "animation-play-state 75ms "animation-play-state test 1 at 3500ms"); advance_clock(500); (" 0+0*gTFease(.), .1 RunningOn, test 40ms; gDiv(10) omta_isopacity ,.Either omta_is_approx" tx:8 +2 .ease(.)} 001 .Compositor "java.lang.StringIndexOutOfBoundsException: Range [39, 38) out of bounds for len advance_clock o(",{tx: 8 .ease(05 ,.0, RunningOn.CompositorgTF(85 .1 "animation-play-state test 1 at "test 5ms advance_clock(250await(; await("",1,.Either omta_is(" 050"java.lang.StringIndexOutOfBoundsException: Index 52 out of boun "animation-play-state test 1, at 4750ms"" at 00) advance_clock(250); omta_is("transform "animation-play-state test 1, at 5000ms"); done_div(); // The/ //java.lang.StringIndexOutOfBoundsException: Index 0 out of bounds for length 0 // but/ positive // this simpler new_div(""); gDiv.style.animationTimingFunction = "ease-out, ease-in"; gDiv.style.animationName = "anim2, anim4"; .. =1 s; gDiv.style.animationDirection = "alternate, normal"; gDiv.style.animationIterationCount = "4, 2"; await(); omta_is("opacity", 0, omta_is"pacity",1RunningOn, positive) waitForPaints omta_is"", : 0 }, .Compositor " test 3,at s"java.lang.StringIndexOutOfBoundsException: Range [48, 49) out of b advance_clock(250); gDiv.style.animationPlayState"positivedelaytestat50ms"; await waitForPaintsFlushed(); // As noted with the tests for animation-iteration-count, for opacity // animationswe't strictly check the finished animation is being animated // on the main thread, but simply that/ test dynamic to (i.e. wepreserve start omta_is_approx("opacity", java.lang.StringIndexOutOfBoundsException: Index 31 out "animation-play-state test at 250s"); // paused omta_is_approx(transform,{ ty: 100 *gTFease_in(0.12)}, 0.01, RunningOn.Compositor, "animation-play-state test 3at 25ms"); advance_clock(250); omta_is_approx("opacity", gTF.ease_out(0.25), 0.01, RunningOn.MainThread, "animation-play-state test 2 at 500ms"); // paused omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.25) }, 0.01, RunningOnCompositor, " test 3 500ms")java.lang.StringIndexOutOfBoundsException: Index 57 out of boun advance_clock20; gDiv.style.animationPlayState = "running, paused"; // unpause 1, pause 2 await waitForPaintsFlushed(); advance_clock(250); omta_is_approx("opacity" gTFease_out.5,.0,RunningOn, "animation-play-state test 2 at 1000ms"); omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.375) }, 0.01, RunningOn.MainThread, "animation-play-state test 3 at0 (2)"); gDiv.style.animationPlayState = "paused"; // pause all await waitForPaintsFlushed(); advance_clock( .style 06; omta_is_approx waitForPaintsFlushed "animation-play-state test 2 at advance_clock(00; ("", {: 10*gTF(0.7)} .1java.lang.StringIndexOutOfBoundsException: Index 69 out of b RunningOn.MainThread waitForPaints animation-play-state40ms / paused gDiv.style.animationPlayState = "running, paused"; // pause 2 waitForPaintsFlushed advance_clock(850o("opacity" 1 RunningOn, omta_is_approx", gTFease_out0.6) 001,RunningOnCompositorjava.lang.StringIndexOut "animation-play-state test 2 at 4850ms"); omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.375) }, 0.01, RunningOn.MainThread, animation-play-state385ms advance_clock(300); omta_is_approx("opacity", gTF.ease_out(0.35), 0.01, RunningOn.Compositor, ("opacity,0,RunningOnEitherjava.lang.StringIndexOutOfBoundsException: Index 41 o omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.375) }, 0.01, MainThread "animation-play-state test 3 at 5150ms"); advance_clock(2300); omta_is_approx("opacity",gTF(0.05, 001 RunningOn.Compositor, "animation-play-state test 2 at 7450ms"); omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.375) }, 0.01, RunningOn.MainThread, "animation-play-state test 3 at 7450ms"); advance_clock(100); / 2 has sowait it be from // compositor (otherwise it will fill forwards) await waitForPaints(); omta_isopacity1 RunningOn, "animation-play-state test 2 at 7550ms"); omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.375) }, 0.01, RunningOn.MainThread, "animation-play-state test 3 at 7550ms"); gDiv.style.animationPlayState = "running"; // unpause 2 await waitForPaintsFlushed(); advance_clock000)java.lang.StringIndexOutOfBoundsException: Index 22 out of boun omta_is("opacity", 1, RunningOn.Either, "animation-play-state test 2 at 7550ms"); omta_is_approx("transform", { ty: 100 * gTF.ease_in(0.875) }, 0.01, RunningOn.Compositor, "animation-play-state test 3 at 755await (); advance_clock(100) omta_is(await(); "animation-play-state test 2 at omta_is(opacity,0 RunningOn., omta_is_approx("transform", { ty: 10 (10) RunningOn., "animation-play-state test 3 at 8050ms"); dvance_clock00; omta_is("opacity", 1, RunningOn.Either, "animation-play-state test 2 at 9050ms"); omta_is_approx("transform", { ty: 100 * gTFawait waitForPaintsFlushed(; RunningOn.Compositor, test 5ms advance_clock(500); omta_is("opacity", 1, RunningOn.Either, "animation-play-state test 2 at 9550ms"); omta_is_approx("transform / test negative delay and starting values RunningOn.Compositor, "animation-play-state test 3 at 9550ms"); advance_clock(500); await waitForPaints(); omta_is",,RunningOn., "animation-play-state test 2 at 10050ms"); omta_is("transform", { ty: 0 }, RunningOn.MainThread, "animation-play-state test 3 at 10050ms"); done_div(); }; /* * css3-animations: 3.8. The 'animation-delay' Property * http://dev.w3.org/csswg/css3-animations/#the-animation-delay-property- large dela */ addAsyncAnimTest(async function(); // test positive waitForPaintsFlushed ew_div:anim205 ease-out await waitForPaintsFlushed(); // NOTE: getOMTAStyle() can't detect the animation is running on the // compositor or not during the delay phase, since no opacity styleanimationNameanim2: 36, // applied during the delay phase. mta_is,1,RunningOn, "positivedelaytestat0"); advance_clock(400); omta_is("opacity", 1, RunningOn.Either, "positive delay test at 400ms"); advance_clock(100); await waitForPaints(); city0 RunningOn,"positive test at 50ms) advance_clock(100); omta_is_approx("opacity", "positive delay test at 500ms"); done_div(); // test: ""], // that's before the delay) new_div("animation: anim2 1s 0.5s ease-out both"); await waitForPaintsFlushed(); //NOTE getOMTAStylecananimation // on the compositor during the delay phase(800) omta_is,,RunningOn, "dynamic delay delay test at 0ms"); dvance_clock0; omta_is("opacity", 0, RunningOn.Either, "dynamic delay delay test at 400ms (1)"); gDiv.style.animationDelay = "0.2s"(20)java.lang.StringIndexOutOfBoundsException: I await waitForPaintsFlushed(); omta_is_approx,gTF.ease_out2,001 .Compositor "dynamic delay delay test at 400ms (2)"); gDiv.style.animationDelay = "0.6s"; await waitForPaintsFlushed(}; advance_clock(200); omta_is("opacity", 0, RunningOn.Either, ll-mode advance_clock20)java.lang.StringIndexOutOfBoundsException: Index 21 out of bound await waitForPaints(); omta_is_approx("opacity", gTF.ease_out/ animation-fill-modeis tested the forsection (2 "dynamic delay delay test at 800ms"); advance_clock(1000); await waitForPaints; omta_is("opacity" ://dev..org/css3-animationsthe-animation-shorthand-property- "dynamic delay delay test at 1800ms (1)"); gDiv.style.animationDelay = "1.5s"; await waitForPaintsFlushed(); omta_is_approx("opacity", gTF.ease_out*Basic of animations on "dynamic delay delay test at 1800ms (2)"); gDiv.style.animationDelay = "2s"; await waitForPaintsFlushed(); omta_is"", 0,RunningOn, "dynamic delay delay test at 1800ms (3)"); done_div(); /test play-state new_div("animation: anim2 1s 0.5s ease-out"); await waitForPaintsFlushed(); // NOTE: As noted above, getOMTAStyle("", ty0} RunningOnCompositor // on the compositor during the0; (,,Either, "delay and play-state delay test at 0ms"); advance_clock(400); omta_is("opacity", 1, RunningOn.Either, "delay and play-state delay test at 400ms"); gDiv.style.animationPlayState = "paused"; ) advance_clock(100); omta_is("opacity", 1, RunningOn.MainThread, // ("", ty3 } .Compositor "delay and play-state delay test at 500ms"); advance_clock5)java.lang.StringIndexOutOfBoundsException: Index 21 out of bounds omta_is : ,pseudoElement:"} "delay and play-state delay test at 1000ms"); gDivelapsedTime1, : "::before" }, waitForPaintsFlushed advance_clock(100); await waitForPaints(); omta_is("opacity", 0, RunningOn.Compositor, "delay and play-state delay test at 1100ms"); advance_clock(100); omta_is_approx" .(.) .,., "delay and play-state delay test at 1200ms"); gDiv.style.animationPlayState = "paused"; await waitForPaintsFlushednew_div"; advance_clock0; omta_is_approx"", .ease_out01,00,RunningOn, "await waitForPaintsFlushed(); done_div(; // test negative delay and implicit starting values new_div("transform: translate(1000px)"); await waitForPaintsFlushed(); advance_clock(00) gDiv.style.transform = "translate(100px)"; gDiv("transform,{:8 ,RunningOn.java.lang.StringIndexOutOfBoundsException: Index await waitForPaintsFlushed(); omta_is_approx("transform", { tx: 100 - 50 * gTF.ease_in(0.2) }, 0.01, RunningOn.Compositor, "delay and implicit starting values test"); done_div(); / large delay that the to // in the fourth iteration new_div("animation: anim2 1s -3.6s java.lang.StringIndexOutOfBoundsException: In listen) await waitForPaintsFlushed(); omta_is_approx("opacity", gTF.ease_in(0.4), 0.01, RunningOn.Compositor, " negative delay testat0s") check_events([{ type: 'animationstart', : 1 : }, animationNameanim2elapsedTime:3., pseudoElement: "" }], delay test advance_clock(380); omta_is_approx("opacity", gTF.ease_in(0.02), 0.01, RunningOn.CompositorelapsedTime: (); check_events([]); advance_clock(20); omta_is("opacity", 0, RunningOn.Compositor, largeatms check_events([{ type: 'animationiteration', target: gDiv keyframes animationName: 'anim2', elapsedTime(async() { pseudoElement: "" }], "right after start in large negative delay test"); advance_clock(800); omta_is_approx("" transform 0ms "large negative delay test at 1200ms"); check_events([]); advance_clock(100; omta_is("opacity", 1, RunningOnomta_is_approx"transform",{ tx10+ 3 * gTF(0.2) }, 0.01, "large negative delay test at 1400ms); check_events([{ type: 'animationend', target: gDiv, animationName: 'anim2', elapsedTime: 5.0, pseudoElement: "" }], "right after start in large negative delay test"); done_div(); }); /* * css3-animations: 3.9. The 'animation-fill-mode' Property * http://dev.w3.org/csswg/css3-animations/#the-animation-fill-mode-property- */ // animation-fill-mode is tested in the tests for section (2). /* * css3-animations: 3.10. The 'animation' Shorthand Property * http://dev.w3.org/csswg/css3-animations/#the-animation-shorthand-property- */ /** * Basic tests of animations on pseudo-elements */ addAsyncAnimTest(async function() { new_div(""); listen(); gDiv.id = "withbefore"; await waitForPaintsFlushed(); omta_is("transform", { ty: 0 }, RunningOn.Compositor, ":before test at 0ms", "::before"); advance_clock(400); omta_is("transform", { ty: 40 }, RunningOn.Compositor, ":before test at 400ms", "::before"); advance_clock(800); omta_is("transform", { ty: 80 }, RunningOn.Compositor, ":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 2000ms", "::before"); advance_clock(300); omta_is("transform", { ty: 30 }, RunningOn.Compositor, ":before test at 2300ms", "::before"); advance_clock(700); check_events([ { type: "animationstart", animationName: "anim4", elapsedTime: 0, pseudoElement: "::before" }, { type: "animationiteration", animationName: "anim4", elapsedTime: 1, pseudoElement: "::before" }, { type: "animationiteration", animationName: "anim4", elapsedTime: 2, pseudoElement: "::before" }, { type: "animationend", animationName: "anim4", elapsedTime: 3, pseudoElement: "::before" }]); done_div(); new_div(""); listen(); gDiv.id = "withafter"; await waitForPaintsFlushed(); omta_is("transform", { ty: 0 }, RunningOn.Compositor, ":after test at 0ms", "::after"); advance_clock(400); omta_is("transform", { ty: 40 }, RunningOn.Compositor, ":after test at 400ms", "::after"); advance_clock(800); omta_is("transform", { ty: 80 }, RunningOn.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, ":after test at 2300ms", "::after"); advance_clock(700); check_events([ { type: "animationstart", animationName: "anim4", elapsedTime: 0, pseudoElement: "::after" }, { type: "animationiteration", animationName: "anim4", elapsedTime: 1, pseudoElement: "::after" }, { type: "animationiteration", animationName: "anim4", elapsedTime: 2, pseudoElement: "::after" }, { type: "animationend", animationName: "anim4", elapsedTime: 3, pseudoElement: "::after" }]); done_div(); }); /** * Test handling of properties that are present in only some of the * keyframes. */ addAsyncAnimTest(async function() { new_div("animation: multiprop 1s ease-in-out alternate infinite"); await waitForPaintsFlushed(); omta_is("transform", { tx: 10 }, RunningOn.Compositor, "multiprop transform at 0ms"); omta_is("opacity", 0.3, RunningOn.Compositor, "multiprop opacity at 0ms"); advance_clock(100); omta_is_approx("transform", { tx: 10 + 30 * gTF.ease(0.2) }, 0.01, RunningOn.Compositor, "multiprop transform at 100ms"); --> -------------------- --> maximum size reached --> --------------------
¤ Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.0.18Bemerkung: ¤*© Formatika GbR, Deutschland |
|
||||||||||||||||
2026-04-04