browser_animation_summary-graph_negative-delay-path.js (3274B)
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 NegativeDelayPath component works. 7 // * element existance 8 // * path 9 10 const TEST_DATA = [ 11 { 12 targetClass: "delay-positive", 13 }, 14 { 15 targetClass: "delay-negative", 16 expectedIterationPathList: [ 17 [ 18 { x: 0, y: 0 }, 19 { x: 0, y: 50 }, 20 { x: 250000, y: 75 }, 21 { x: 500000, y: 100 }, 22 { x: 500000, y: 0 }, 23 ], 24 ], 25 expectedNegativePath: [ 26 { x: -500000, y: 0 }, 27 { x: -250000, y: 25 }, 28 { x: 0, y: 50 }, 29 { x: 0, y: 0 }, 30 ], 31 }, 32 { 33 targetClass: "delay-negative-25", 34 expectedIterationPathList: [ 35 [ 36 { x: 0, y: 0 }, 37 { x: 0, y: 25 }, 38 { x: 750000, y: 100 }, 39 { x: 750000, y: 0 }, 40 ], 41 ], 42 expectedNegativePath: [ 43 { x: -250000, y: 0 }, 44 { x: 0, y: 25 }, 45 { x: 0, y: 0 }, 46 ], 47 }, 48 { 49 targetClass: "delay-negative-75", 50 expectedIterationPathList: [ 51 [ 52 { x: 0, y: 0 }, 53 { x: 0, y: 75 }, 54 { x: 250000, y: 100 }, 55 { x: 250000, y: 0 }, 56 ], 57 ], 58 expectedNegativePath: [ 59 { x: -750000, y: 0 }, 60 { x: 0, y: 75 }, 61 { x: 0, y: 0 }, 62 ], 63 }, 64 ]; 65 66 add_task(async function () { 67 await addTab(URL_ROOT + "doc_multi_timings.html"); 68 await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`)); 69 const { panel } = await openAnimationInspector(); 70 71 for (const { 72 targetClass, 73 expectedIterationPathList, 74 expectedNegativePath, 75 } of TEST_DATA) { 76 const animationItemEl = await findAnimationItemByTargetSelector( 77 panel, 78 `.${targetClass}` 79 ); 80 81 info(`Checking negative delay path existence for ${targetClass}`); 82 const negativeDelayPathEl = animationItemEl.querySelector( 83 ".animation-negative-delay-path" 84 ); 85 86 if (expectedNegativePath) { 87 ok( 88 negativeDelayPathEl, 89 "The negative delay path element should be in animation item element" 90 ); 91 const pathEl = negativeDelayPathEl.querySelector("path"); 92 assertPathSegments(pathEl, true, expectedNegativePath); 93 } else { 94 ok( 95 !negativeDelayPathEl, 96 "The negative delay path element should not be in animation item element" 97 ); 98 } 99 100 if (!expectedIterationPathList) { 101 // We don't need to test for iteration path. 102 continue; 103 } 104 105 info(`Checking computed timing path existance for ${targetClass}`); 106 const computedTimingPathEl = animationItemEl.querySelector( 107 ".animation-computed-timing-path" 108 ); 109 ok( 110 computedTimingPathEl, 111 "The computed timing path element should be in each animation item element" 112 ); 113 114 info(`Checking iteration path list for ${targetClass}`); 115 const iterationPathEls = computedTimingPathEl.querySelectorAll( 116 ".animation-iteration-path" 117 ); 118 is( 119 iterationPathEls.length, 120 expectedIterationPathList.length, 121 `Number of iteration path should be ${expectedIterationPathList.length}` 122 ); 123 124 for (const [j, iterationPathEl] of iterationPathEls.entries()) { 125 assertPathSegments(iterationPathEl, true, expectedIterationPathList[j]); 126 } 127 } 128 });