browser_animation_animation-target_select.js (1755B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test for following selection feature related AnimationTarget component works: 7 // * select selected node by clicking on target node 8 9 add_task(async function () { 10 await addTab(URL_ROOT + "doc_simple_animation.html"); 11 await removeAnimatedElementsExcept([".multi", ".long"]); 12 const { animationInspector, panel } = await openAnimationInspector(); 13 14 info("Check initial status"); 15 is( 16 panel.querySelectorAll(".animation-item").length, 17 3, 18 "The length of animations should be 3. Two .multi animations and one .long animation" 19 ); 20 21 info("Check selecting an animated node by clicking on the target node"); 22 await clickOnTargetNode(animationInspector, panel, 0); 23 assertNodeFront( 24 animationInspector.inspector.selection.nodeFront, 25 "DIV", 26 "ball multi" 27 ); 28 is( 29 panel.querySelectorAll(".animation-item").length, 30 2, 31 "The length of animations should be 2" 32 ); 33 34 info("Check if the both target nodes refer to the same node"); 35 await clickOnTargetNode(animationInspector, panel, 1); 36 assertNodeFront( 37 animationInspector.inspector.selection.nodeFront, 38 "DIV", 39 "ball multi" 40 ); 41 is( 42 panel.querySelectorAll(".animation-item").length, 43 2, 44 "The length of animations should be 2" 45 ); 46 }); 47 48 function assertNodeFront(nodeFront, tagName, classValue) { 49 is( 50 nodeFront.tagName, 51 tagName, 52 "The highlighted node has the correct tagName" 53 ); 54 is( 55 nodeFront.attributes[0].name, 56 "class", 57 "The highlighted node has the correct attributes" 58 ); 59 is( 60 nodeFront.attributes[0].value, 61 classValue, 62 "The highlighted node has the correct class" 63 ); 64 }