summaryrefslogtreecommitdiffstats
path: root/dom/base/test/file_domwindowutils_animation.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /dom/base/test/file_domwindowutils_animation.html
parentInitial commit. (diff)
downloadfirefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'dom/base/test/file_domwindowutils_animation.html')
-rw-r--r--dom/base/test/file_domwindowutils_animation.html217
1 files changed, 217 insertions, 0 deletions
diff --git a/dom/base/test/file_domwindowutils_animation.html b/dom/base/test/file_domwindowutils_animation.html
new file mode 100644
index 0000000000..dfcc8fc05c
--- /dev/null
+++ b/dom/base/test/file_domwindowutils_animation.html
@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>DOMWindowUtils test with animation</title>
+ <script src="/tests/SimpleTest/paint_listener.js"></script>
+ <script src="/tests/dom/animation/test/testcommon.js"></script>
+</head>
+<body>
+<script type="application/javascript">
+
+const SimpleTest = window.opener.SimpleTest;
+const utils = SpecialPowers.getDOMWindowUtils(window);
+const next = window.opener.next;
+const is = window.opener.is;
+const ok = window.opener.ok;
+
+function addStyle(rules) {
+ const extraStyle = document.createElement("style");
+ document.head.appendChild(extraStyle);
+ rules.forEach(rule => {
+ extraStyle.sheet.insertRule(rule, extraStyle.sheet.cssRules.length);
+ });
+}
+
+function deleteStyle() {
+ document.head.querySelector("style").remove();
+}
+
+
+function test_getUnanimatedComputedStyle() {
+ [
+ {
+ property: "opacity",
+ keyframes: [1, 0],
+ expectedInitialStyle: "1",
+ expectedDuringTransitionStyle: "0",
+ isDiscrete: false,
+ },
+ {
+ property: "clear",
+ keyframes: ["left", "inline-end"],
+ expectedInitialStyle: "none",
+ expectedDuringTransitionStyle: "inline-end",
+ isDiscrete: true,
+ },
+ ].forEach(testcase => {
+ const { property, keyframes, expectedInitialStyle,
+ expectedDuringTransitionStyle, isDiscrete } = testcase;
+
+ [null, "unset", "initial", "inherit"].forEach(initialStyle => {
+ const scriptAnimation = target => {
+ return target.animate({ [property]: keyframes }, 1000);
+ }
+ checkUnanimatedComputedStyle(property, initialStyle, null,
+ expectedInitialStyle, expectedInitialStyle,
+ scriptAnimation, "script animation");
+
+ const cssAnimationStyle = `@keyframes cssanimation {`
+ + ` from { ${property}: ${ keyframes[0] }; }`
+ + ` to { ${property}: ${ keyframes[1] }; } }`;
+ addStyle([cssAnimationStyle]);
+ const cssAnimation = target => {
+ target.style.animation = "cssanimation 1s";
+ return target.getAnimations()[0];
+ }
+ checkUnanimatedComputedStyle(property, initialStyle, null,
+ expectedInitialStyle, expectedInitialStyle,
+ cssAnimation, "CSS Animations");
+ deleteStyle();
+
+ // We don't support discrete animations for CSS Transitions yet.
+ // (bug 1320854)
+ if (!isDiscrete) {
+ const cssTransition = target => {
+ target.style[property] = keyframes[0];
+ target.style.transition =
+ `${ property } 1s`;
+ window.getComputedStyle(target)[property];
+ target.style[property] = keyframes[1];
+ return target.getAnimations()[0];
+ }
+ checkUnanimatedComputedStyle(property, initialStyle, null,
+ expectedInitialStyle,
+ expectedDuringTransitionStyle,
+ cssTransition, "CSS Transitions");
+ }
+
+ addStyle([cssAnimationStyle,
+ ".pseudo::before { content: '' }",
+ ".animation::before { animation: cssanimation 1s }"]);
+ const pseudoAnimation = target => {
+ target.classList.add("animation");
+ return target.getAnimations({ subtree: true })[0];
+ }
+ checkUnanimatedComputedStyle(property, initialStyle, "::before",
+ expectedInitialStyle, expectedInitialStyle,
+ pseudoAnimation, "Animation at pseudo");
+ deleteStyle();
+ });
+ });
+
+ const div = document.createElement("div");
+ document.body.appendChild(div);
+
+ SimpleTest.doesThrow(
+ () => utils.getUnanimatedComputedStyle(div, null, "background", utils.FLUSH_NONE),
+ "NS_ERROR_INVALID_ARG",
+ "Shorthand property should throw");
+
+ SimpleTest.doesThrow(
+ () => utils.getUnanimatedComputedStyle(div, null, "invalid", utils.FLUSH_NONE),
+ "NS_ERROR_INVALID_ARG",
+ "Invalid property should throw");
+
+ SimpleTest.doesThrow(
+ () => utils.getUnanimatedComputedStyle(null, null, "opacity", utils.FLUSH_NONE),
+ "NS_ERROR_INVALID_ARG",
+ "Null element should throw");
+
+ SimpleTest.doesThrow(
+ () => utils.getUnanimatedComputedStyle(div, null, "opacity", utils.FLUSH_LAYOUT),
+ "NS_ERROR_INVALID_ARG",
+ "FLUSH_LAYOUT option should throw");
+
+ SimpleTest.doesThrow(
+ () => utils.getUnanimatedComputedStyle(div, null, "opacity", utils.FLUSH_DISPLAY),
+ "NS_ERROR_INVALID_ARG",
+ "FLUSH_DISPLAY option should throw");
+
+ SimpleTest.doesThrow(
+ () => utils.getUnanimatedComputedStyle(div, "::before", "opacity", utils.FLUSH_NONE),
+ "NS_ERROR_FAILURE",
+ "Non-existent pseudo should throw");
+
+ // Flush styles since getUnanimatedComputedStyle flushes pending styles even
+ // with FLUSH_NONE option if the element hasn't yet styled.
+ getComputedStyle(div).opacity;
+
+ div.style.opacity = "0";
+ is(utils.getUnanimatedComputedStyle(div, null, "opacity", utils.FLUSH_NONE),
+ "1",
+ "getUnanimatedComputedStyle with FLUSH_NONE should not flush pending styles");
+
+ is(utils.getUnanimatedComputedStyle(div, null, "opacity", utils.FLUSH_STYLE),
+ "0",
+ "getUnanimatedComputedStyle with FLUSH_STYLE should flush pending styles");
+
+ div.remove();
+
+ test_needsFlushWithThrottledAnimations();
+}
+
+function checkUnanimatedComputedStyle(property, initialStyle, pseudoType,
+ expectedBeforeAnimation,
+ expectedDuringAnimation,
+ animate, animationType) {
+ const div = document.createElement("div");
+ document.body.appendChild(div);
+
+ if (initialStyle) {
+ div.style[property] = initialStyle;
+ }
+ if (pseudoType) {
+ div.classList.add("pseudo");
+ }
+
+ is(utils.getUnanimatedComputedStyle(div, pseudoType, property, utils.FLUSH_STYLE),
+ expectedBeforeAnimation,
+ `'${ property }' property with '${ initialStyle }' style `
+ + `should be '${ expectedBeforeAnimation }' `
+ + `before animating by ${ animationType }`);
+
+ const animation = animate(div);
+ animation.currentTime = 500;
+ is(utils.getUnanimatedComputedStyle(div, pseudoType, property, utils.FLUSH_STYLE),
+ expectedDuringAnimation,
+ `'${ property }' property with '${ initialStyle }' style `
+ + `should be '${ expectedDuringAnimation }' `
+ + `even while animating by ${ animationType }`);
+
+ div.remove();
+}
+
+function test_needsFlushWithThrottledAnimations() {
+ const div = document.createElement("div");
+ div.style = "width: 100px; height: 100px; background-color: blue;";
+ document.body.appendChild(div);
+
+ const animation = div.animate({ opacity: [ 0, 1 ] },
+ { duration: 100000, iterations: Infinity });
+ waitForAnimationReadyToRestyle(animation).then(() => {
+ ok(SpecialPowers.wrap(animation).isRunningOnCompositor,
+ "Opacity animation should run on the compositor");
+
+ // FIXME! Bug 1442861: We should make sure needsFlush() returns true
+ // before flusing layout.
+ //ok(utils.needsFlush(SpecialPowers.Ci.nsIDOMWindowUtils.FLUSH_STYLE),
+ // "needsFlush should return true if there is an animation on the compositor");
+
+ // Flush layout.
+ document.documentElement.getBoundingClientRect();
+
+ ok(!utils.needsFlush(SpecialPowers.Ci.nsIDOMWindowUtils.FLUSH_STYLE),
+ "needsFlush should return false after flushing layout");
+
+ div.remove();
+ next();
+ window.close();
+ });
+}
+
+window.addEventListener("load", test_getUnanimatedComputedStyle);
+
+</script>
+</body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-30 22:32:10 +0000