keyframes-graph_keyframe-marker_head.js (5548B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 /* import-globals-from head.js */ 7 8 // Test for following keyframe marker. 9 // * element existence 10 // * title 11 // * and marginInlineStart style 12 13 const KEYFRAMES_TEST_DATA = [ 14 { 15 targetClass: "multi-types", 16 properties: [ 17 { 18 name: "background-color", 19 expectedValues: [ 20 { 21 title: "rgb(255, 0, 0)", 22 marginInlineStart: "0%", 23 }, 24 { 25 title: "rgb(0, 255, 0)", 26 marginInlineStart: "100%", 27 }, 28 ], 29 }, 30 { 31 name: "background-repeat", 32 expectedValues: [ 33 { 34 title: "space round", 35 marginInlineStart: "0%", 36 }, 37 { 38 title: "round space", 39 marginInlineStart: "100%", 40 }, 41 ], 42 }, 43 { 44 name: "font-size", 45 expectedValues: [ 46 { 47 title: "10px", 48 marginInlineStart: "0%", 49 }, 50 { 51 title: "20px", 52 marginInlineStart: "100%", 53 }, 54 ], 55 }, 56 { 57 name: "margin-left", 58 expectedValues: [ 59 { 60 title: "0px", 61 marginInlineStart: "0%", 62 }, 63 { 64 title: "100px", 65 marginInlineStart: "100%", 66 }, 67 ], 68 }, 69 { 70 name: "opacity", 71 expectedValues: [ 72 { 73 title: "0", 74 marginInlineStart: "0%", 75 }, 76 { 77 title: "1", 78 marginInlineStart: "100%", 79 }, 80 ], 81 }, 82 { 83 name: "text-align", 84 expectedValues: [ 85 { 86 title: "right", 87 marginInlineStart: "0%", 88 }, 89 { 90 title: "center", 91 marginInlineStart: "100%", 92 }, 93 ], 94 }, 95 { 96 name: "transform", 97 expectedValues: [ 98 { 99 title: "translate(0px)", 100 marginInlineStart: "0%", 101 }, 102 { 103 title: "translate(100px)", 104 marginInlineStart: "100%", 105 }, 106 ], 107 }, 108 ], 109 }, 110 { 111 targetClass: "narrow-offsets", 112 properties: [ 113 { 114 name: "opacity", 115 expectedValues: [ 116 { 117 title: "0", 118 marginInlineStart: "0%", 119 }, 120 { 121 title: "1", 122 marginInlineStart: "10%", 123 }, 124 { 125 title: "0", 126 marginInlineStart: "13%", 127 }, 128 { 129 title: "1", 130 marginInlineStart: "100%", 131 }, 132 ], 133 }, 134 ], 135 }, 136 { 137 targetClass: "same-color", 138 properties: [ 139 { 140 name: "background-color", 141 expectedValues: [ 142 { 143 title: "rgb(0, 255, 0)", 144 marginInlineStart: "0%", 145 }, 146 { 147 title: "rgb(0, 255, 0)", 148 marginInlineStart: "100%", 149 }, 150 ], 151 }, 152 ], 153 }, 154 { 155 targetClass: "currentcolor", 156 properties: [ 157 { 158 name: "background-color", 159 expectedValues: [ 160 { 161 title: "currentcolor", 162 marginInlineStart: "0%", 163 }, 164 { 165 title: "rgb(0, 255, 0)", 166 marginInlineStart: "100%", 167 }, 168 ], 169 }, 170 ], 171 }, 172 ]; 173 174 /** 175 * Do test for keyframes-graph_keyframe-marker-ltf/rtl. 176 * 177 * @param {Array} testData 178 */ 179 // eslint-disable-next-line no-unused-vars 180 async function testKeyframesGraphKeyframesMarker() { 181 await addTab(URL_ROOT + "doc_multi_keyframes.html"); 182 await removeAnimatedElementsExcept( 183 KEYFRAMES_TEST_DATA.map(t => `.${t.targetClass}`) 184 ); 185 const { animationInspector, panel } = await openAnimationInspector(); 186 187 for (const { properties, targetClass } of KEYFRAMES_TEST_DATA) { 188 info(`Checking keyframe marker for ${targetClass}`); 189 const onDetailRendered = animationInspector.once( 190 "animation-keyframes-rendered" 191 ); 192 await clickOnAnimationByTargetSelector( 193 animationInspector, 194 panel, 195 `.${targetClass}` 196 ); 197 await onDetailRendered; 198 199 for (const { name, expectedValues } of properties) { 200 const testTarget = `${name} in ${targetClass}`; 201 info(`Checking keyframe marker for ${testTarget}`); 202 info(`Checking keyframe marker existence for ${testTarget}`); 203 const markerEls = panel.querySelectorAll( 204 `.${name} .keyframe-marker-item` 205 ); 206 is( 207 markerEls.length, 208 expectedValues.length, 209 `Count of keyframe marker elements of ${testTarget} ` + 210 `should be ${expectedValues.length}` 211 ); 212 213 for (let i = 0; i < expectedValues.length; i++) { 214 const hintTarget = `.keyframe-marker-item[${i}] of ${testTarget}`; 215 216 info(`Checking ${hintTarget}`); 217 const markerEl = markerEls[i]; 218 const expectedValue = expectedValues[i]; 219 220 info(`Checking title in ${hintTarget}`); 221 is( 222 markerEl.getAttribute("title"), 223 expectedValue.title, 224 `title in ${hintTarget} should be ${expectedValue.title}` 225 ); 226 227 info(`Checking marginInlineStart style in ${hintTarget}`); 228 is( 229 markerEl.style.marginInlineStart, 230 expectedValue.marginInlineStart, 231 `marginInlineStart in ${hintTarget} should be ` + 232 `${expectedValue.marginInlineStart}` 233 ); 234 } 235 } 236 } 237 }