diff options
Diffstat (limited to 'devtools/client/animationinspector/test/browser_animation_keyframe_markers.js')
-rw-r--r-- | devtools/client/animationinspector/test/browser_animation_keyframe_markers.js | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/devtools/client/animationinspector/test/browser_animation_keyframe_markers.js b/devtools/client/animationinspector/test/browser_animation_keyframe_markers.js new file mode 100644 index 000000000..789c0efb6 --- /dev/null +++ b/devtools/client/animationinspector/test/browser_animation_keyframe_markers.js @@ -0,0 +1,74 @@ +/* vim: set ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that when an animation is selected and its list of properties is shown, +// there are keyframes markers next to each property being animated. + +const EXPECTED_PROPERTIES = [ + "backgroundColor", + "backgroundPosition", + "backgroundSize", + "borderBottomLeftRadius", + "borderBottomRightRadius", + "borderTopLeftRadius", + "borderTopRightRadius", + "filter", + "height", + "transform", + "width" +]; + +add_task(function* () { + yield addTab(URL_ROOT + "doc_keyframes.html"); + let {panel} = yield openAnimationInspector(); + let timeline = panel.animationsTimelineComponent; + + info("Expand the animation"); + yield clickOnAnimation(panel, 0); + + ok(timeline.rootWrapperEl.querySelectorAll(".frames .keyframes").length, + "There are container elements for displaying keyframes"); + + let data = yield getExpectedKeyframesData(timeline.animations[0]); + for (let propertyName in data) { + info("Check the keyframe markers for " + propertyName); + let widthMarkerSelector = ".frame[data-property=" + propertyName + "]"; + let markers = timeline.rootWrapperEl.querySelectorAll(widthMarkerSelector); + + is(markers.length, data[propertyName].length, + "The right number of keyframes was found for " + propertyName); + + let offsets = [...markers].map(m => parseFloat(m.dataset.offset)); + let values = [...markers].map(m => m.dataset.value); + for (let i = 0; i < markers.length; i++) { + is(markers[i].dataset.offset, offsets[i], + "Marker " + i + " for " + propertyName + " has the right offset"); + is(markers[i].dataset.value, values[i], + "Marker " + i + " for " + propertyName + " has the right value"); + } + } +}); + +function* getExpectedKeyframesData(animation) { + // We're testing the UI state here, so it's fine to get the list of expected + // properties from the animation actor. + let properties = yield animation.getProperties(); + let data = {}; + + for (let expectedProperty of EXPECTED_PROPERTIES) { + data[expectedProperty] = []; + for (let {name, values} of properties) { + if (name !== expectedProperty) { + continue; + } + for (let {offset, value} of values) { + data[expectedProperty].push({offset, value}); + } + } + } + + return data; +} |