diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/animation/test/browser_animation_animated-property-name.js | 127 |
1 files changed, 127 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js b/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js new file mode 100644 index 0000000000..a1505125f6 --- /dev/null +++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js @@ -0,0 +1,127 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test the following animated property name component features: +// * name of property +// * display compositor sign when the property was running on compositor. +// * display warning when the property is runnable on compositor but was not. + +async function test_element(className, data) { + await addTab(URL_ROOT + "doc_simple_animation.html"); + await removeAnimatedElementsExcept([className]); + const { panel } = await openAnimationInspector(); + + info("Checking animated property name component"); + const animatedPropertyNameEls = panel.querySelectorAll( + ".animated-property-name" + ); + is( + animatedPropertyNameEls.length, + data.length, + `Number of animated property name elements should be ${data.length}` + ); + + for (const [ + index, + animatedPropertyNameEl, + ] of animatedPropertyNameEls.entries()) { + const { property, isOnCompositor, isWarning } = data[index]; + + info(`Checking text content for ${property}`); + + const spanEl = animatedPropertyNameEl.querySelector("span"); + ok( + spanEl, + `<span> element should be in animated-property-name of ${property}` + ); + is(spanEl.textContent, property, `textContent should be ${property}`); + + info(`Checking compositor sign for ${property}`); + + if (isOnCompositor) { + ok( + animatedPropertyNameEl.classList.contains("compositor"), + "animatedPropertyNameEl should has .compositor class" + ); + isnot( + getComputedStyle(spanEl, "::before").width, + "auto", + "width of ::before pseud should not be auto" + ); + } else { + ok( + !animatedPropertyNameEl.classList.contains("compositor"), + "animatedPropertyNameEl should not have .compositor class" + ); + is( + getComputedStyle(spanEl, "::before").width, + "auto", + "width of ::before pseud should be auto" + ); + } + + info(`Checking warning for ${property}`); + + if (isWarning) { + ok( + animatedPropertyNameEl.classList.contains("warning"), + "animatedPropertyNameEl should has .warning class" + ); + is( + getComputedStyle(spanEl).textDecorationStyle, + "dotted", + "text-decoration-style of spanEl should be 'dotted'" + ); + is( + getComputedStyle(spanEl).textDecorationLine, + "underline", + "text-decoration-line of spanEl should be 'underline'" + ); + } else { + ok( + !animatedPropertyNameEl.classList.contains("warning"), + "animatedPropertyNameEl should not have .warning class" + ); + is( + getComputedStyle(spanEl).textDecorationStyle, + "solid", + "text-decoration-style of spanEl should be 'solid'" + ); + is( + getComputedStyle(spanEl).textDecorationLine, + "none", + "text-decoration-line of spanEl should be 'none'" + ); + } + } +} + +add_task(async function compositor_notall() { + await test_element(".compositor-notall", [ + { + property: "--ball-color", + }, + { + property: "opacity", + isOnCompositor: true, + }, + { + property: "transform", + isOnCompositor: true, + }, + { + property: "width", + }, + ]); +}); + +add_task(async function compositor_warning() { + await test_element(".compositor-warning", [ + { + property: "opacity", + isWarning: true, + }, + ]); +}); |