summaryrefslogtreecommitdiffstats
path: root/layout/reftests/css-transitions
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 /layout/reftests/css-transitions
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 'layout/reftests/css-transitions')
-rw-r--r--layout/reftests/css-transitions/background-color-with-opacity-ref.html12
-rw-r--r--layout/reftests/css-transitions/background-color-with-opacity.html24
-rw-r--r--layout/reftests/css-transitions/no-stacking-context-transition-ref.html20
-rw-r--r--layout/reftests/css-transitions/reframe-and-transition-starts-at-the-same-time-ref.html13
-rw-r--r--layout/reftests/css-transitions/reframe-and-transition-starts-at-the-same-time.html26
-rw-r--r--layout/reftests/css-transitions/reftest.list12
-rw-r--r--layout/reftests/css-transitions/stacking-context-opacity-lose-to-animation.html44
-rw-r--r--layout/reftests/css-transitions/stacking-context-opacity-wins-over-important-style.html40
-rw-r--r--layout/reftests/css-transitions/stacking-context-transform-lose-to-animation.html44
-rw-r--r--layout/reftests/css-transitions/stacking-context-transform-wins-over-important-style.html40
-rw-r--r--layout/reftests/css-transitions/stacking-context-transition-ref.html19
-rw-r--r--layout/reftests/css-transitions/style-change-during-transition-ref.html9
-rw-r--r--layout/reftests/css-transitions/style-change-during-transition.html32
-rw-r--r--layout/reftests/css-transitions/transition-and-animation-with-different-durations-ref.html9
-rw-r--r--layout/reftests/css-transitions/transition-and-animation-with-different-durations.html31
-rw-r--r--layout/reftests/css-transitions/transitions-inline-already-wrapped-1.html23
-rw-r--r--layout/reftests/css-transitions/transitions-inline-already-wrapped-2.html28
-rw-r--r--layout/reftests/css-transitions/transitions-inline-ref.html7
-rw-r--r--layout/reftests/css-transitions/transitions-inline-rewrap-1.html25
-rw-r--r--layout/reftests/css-transitions/transitions-inline-rewrap-2.html31
20 files changed, 489 insertions, 0 deletions
diff --git a/layout/reftests/css-transitions/background-color-with-opacity-ref.html b/layout/reftests/css-transitions/background-color-with-opacity-ref.html
new file mode 100644
index 0000000000..0ec114ca69
--- /dev/null
+++ b/layout/reftests/css-transitions/background-color-with-opacity-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<style>
+#target {
+ background-color: green;
+ width: 100px;
+ height: 100px;
+ opacity: 0.5;
+}
+</style>
+<div id="target"></div>
+</html>
diff --git a/layout/reftests/css-transitions/background-color-with-opacity.html b/layout/reftests/css-transitions/background-color-with-opacity.html
new file mode 100644
index 0000000000..bbbd6524f9
--- /dev/null
+++ b/layout/reftests/css-transitions/background-color-with-opacity.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<style>
+#target {
+ background-color: green;
+ width: 100px;
+ height: 100px;
+ transition: background-color 100s steps(1, end);
+ opacity: 0.5;
+}
+#target.hover {
+ background-color: white;
+}
+</style>
+<div id="target"></div>
+<script>
+document.addEventListener('MozReftestInvalidate', () => {
+ target.className = 'hover';
+ target.addEventListener('transitionstart', () => {
+ document.documentElement.classList.remove('reftest-wait');
+ });
+}, false);
+</script>
+</html>
diff --git a/layout/reftests/css-transitions/no-stacking-context-transition-ref.html b/layout/reftests/css-transitions/no-stacking-context-transition-ref.html
new file mode 100644
index 0000000000..efc029d03e
--- /dev/null
+++ b/layout/reftests/css-transitions/no-stacking-context-transition-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>
+Reference of testcases which don't create a stacking context for bug 1278136
+</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ background: green;
+ position: fixed;
+ top: 50px;
+}
+#test {
+ height: 100px;
+ width: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-transitions/reframe-and-transition-starts-at-the-same-time-ref.html b/layout/reftests/css-transitions/reframe-and-transition-starts-at-the-same-time-ref.html
new file mode 100644
index 0000000000..65387b5998
--- /dev/null
+++ b/layout/reftests/css-transitions/reframe-and-transition-starts-at-the-same-time-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<style>
+#target::before {
+ content: '';
+ background-color: rgb(255, 255, 255);
+ height: 100px;
+ width: 100px;
+ position: absolute;
+}
+</style>
+<div id="target"></div>
+</html>
diff --git a/layout/reftests/css-transitions/reframe-and-transition-starts-at-the-same-time.html b/layout/reftests/css-transitions/reframe-and-transition-starts-at-the-same-time.html
new file mode 100644
index 0000000000..e3eee44886
--- /dev/null
+++ b/layout/reftests/css-transitions/reframe-and-transition-starts-at-the-same-time.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+#target::before {
+ transition: background-color 100s steps(1, end);
+ content: 'initial';
+ background-color: rgb(255, 255, 255);
+ height: 100px;
+ width: 100px;
+ position: absolute;
+}
+#target.hover::before{
+ background-color: rgb(0, 0, 0);
+ content: '';
+}
+</style>
+<div id="target"></div>
+<script>
+window.addEventListener("load", () => {
+ target.className = 'hover';
+ target.addEventListener('transitionstart', () => {
+ document.documentElement.classList.remove('reftest-wait');
+ });
+});
+</script>
+</html>
diff --git a/layout/reftests/css-transitions/reftest.list b/layout/reftests/css-transitions/reftest.list
new file mode 100644
index 0000000000..0a177dc242
--- /dev/null
+++ b/layout/reftests/css-transitions/reftest.list
@@ -0,0 +1,12 @@
+pref(gfx.omta.background-color,true) fuzzy(0-1,0-10000) == background-color-with-opacity.html background-color-with-opacity-ref.html
+== transitions-inline-already-wrapped-1.html transitions-inline-ref.html
+== transitions-inline-already-wrapped-2.html transitions-inline-ref.html
+== transitions-inline-rewrap-1.html transitions-inline-ref.html
+== transitions-inline-rewrap-2.html transitions-inline-ref.html
+== stacking-context-opacity-lose-to-animation.html stacking-context-transition-ref.html
+== stacking-context-transform-lose-to-animation.html stacking-context-transition-ref.html
+== stacking-context-opacity-wins-over-important-style.html stacking-context-transition-ref.html
+== stacking-context-transform-wins-over-important-style.html stacking-context-transition-ref.html
+== transition-and-animation-with-different-durations.html transition-and-animation-with-different-durations-ref.html
+== reframe-and-transition-starts-at-the-same-time.html reframe-and-transition-starts-at-the-same-time-ref.html
+== style-change-during-transition.html style-change-during-transition-ref.html
diff --git a/layout/reftests/css-transitions/stacking-context-opacity-lose-to-animation.html b/layout/reftests/css-transitions/stacking-context-opacity-lose-to-animation.html
new file mode 100644
index 0000000000..dd1c02f465
--- /dev/null
+++ b/layout/reftests/css-transitions/stacking-context-opacity-lose-to-animation.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Opacity transition and animation overridden by !important rule creates a
+stacking context
+</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+@keyframes Opacity0 {
+ from, to { opacity: 0; }
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+ opacity: 0 ! important;
+ transition: opacity 100s steps(1, start);
+ animation: Opacity0 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+window.addEventListener("load", () => {
+ var target = document.getElementById("test");
+ getComputedStyle(target).opacity;
+
+ // Change the opacity style to 100%.
+ target.style.setProperty("opacity", "1", "important");
+ // Important style is changed but there is a CSS animation,
+ // so transition won't be visible and the CSS animation is overridden by
+ // the !important rule. As a result opacity style here should be 100%
+ // specified by the important rule, but we should create a stacking
+ // context for it because there are animations.
+
+ getComputedStyle(target).opacity;
+ document.documentElement.classList.remove("reftest-wait");
+});
+</script>
diff --git a/layout/reftests/css-transitions/stacking-context-opacity-wins-over-important-style.html b/layout/reftests/css-transitions/stacking-context-opacity-wins-over-important-style.html
new file mode 100644
index 0000000000..d36bcc1089
--- /dev/null
+++ b/layout/reftests/css-transitions/stacking-context-opacity-wins-over-important-style.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Opacity transition winning over !important rule creates a stacking context
+</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+ /*
+ * On the compositor we use a previous vsync time stamp rather than the
+ * current time stamp, as a result sometimes transition may be still in
+ * before phase after waiting a frame. To compose the same opacity value
+ * regardless of whether the transition is in before or active phase, we use
+ * steps(1, end) here.
+ */
+ transition: opacity 100s steps(1, end);
+ opacity: 1 ! important;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+window.addEventListener("load", () => {
+ var target = document.getElementById("test");
+ getComputedStyle(target).opacity;
+
+ target.style.setProperty("opacity", "0", "important");
+ getComputedStyle(target).opacity;
+
+ document.documentElement.classList.remove("reftest-wait");
+});
+</script>
diff --git a/layout/reftests/css-transitions/stacking-context-transform-lose-to-animation.html b/layout/reftests/css-transitions/stacking-context-transform-lose-to-animation.html
new file mode 100644
index 0000000000..888d4e6ba1
--- /dev/null
+++ b/layout/reftests/css-transitions/stacking-context-transform-lose-to-animation.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Transform transition and animation overridden by !important rule create
+a stacking context
+</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+@keyframes Transform100px {
+ from, to { transform: translateX(100px); }
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+ transform: translateX(200px) ! important;
+ transition: transform 100s steps(1, start);
+ animation: Transform100px 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+window.addEventListener("load", () => {
+ var target = document.getElementById("test");
+ getComputedStyle(target).transform;
+
+ // Change the transform style to 'none'.
+ target.style.setProperty("transform", "none", "important");
+ // Important style is changed but there is a CSS animation,
+ // so transition won't be visible and the CSS animation is overridden by
+ // the !important rule. As a result transform style here should be 'none'
+ // specified by the important rule, but we should create a stacking
+ // context for it because there are animations.
+
+ getComputedStyle(target).transform;
+ document.documentElement.classList.remove("reftest-wait");
+});
+</script>
diff --git a/layout/reftests/css-transitions/stacking-context-transform-wins-over-important-style.html b/layout/reftests/css-transitions/stacking-context-transform-wins-over-important-style.html
new file mode 100644
index 0000000000..4d31df27ad
--- /dev/null
+++ b/layout/reftests/css-transitions/stacking-context-transform-wins-over-important-style.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Transform transition winning over !important rule creates a stacking context
+</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ position: fixed;
+ background: green;
+ top: 50px;
+}
+#test {
+ width: 100px; height: 100px;
+ background: blue;
+ /*
+ * On the compositor we use a previous vsync time stamp rather than the
+ * current time stamp, as a result sometimes transition may be still in
+ * before phase after waiting a frame. To compose the same transform value
+ * regardless of whether the transition is in before or active phase, we use
+ * steps(1, end) here.
+ */
+ transition: transform 100s steps(1, end);
+ transform: none ! important;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+window.addEventListener("load", () => {
+ var target = document.getElementById("test");
+ getComputedStyle(target).transform;
+
+ target.style.setProperty("transform", "translateX(200px)", "important");
+ getComputedStyle(target).transform;
+
+ document.documentElement.classList.remove("reftest-wait");
+});
+</script>
diff --git a/layout/reftests/css-transitions/stacking-context-transition-ref.html b/layout/reftests/css-transitions/stacking-context-transition-ref.html
new file mode 100644
index 0000000000..817056c1ce
--- /dev/null
+++ b/layout/reftests/css-transitions/stacking-context-transition-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>Reference of testcases for bug 1273042</title>
+<style>
+span {
+ height: 100px;
+ width: 100px;
+ background: green;
+ position: fixed;
+ top: 50px;
+ z-index: -1;
+}
+#test {
+ height: 100px;
+ width: 100px;
+ background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-transitions/style-change-during-transition-ref.html b/layout/reftests/css-transitions/style-change-during-transition-ref.html
new file mode 100644
index 0000000000..394894e2af
--- /dev/null
+++ b/layout/reftests/css-transitions/style-change-during-transition-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<div>
+ <div>
+ <div>
+ <strong>Text</strong>
+ </div>
+ </div>
+</div>
diff --git a/layout/reftests/css-transitions/style-change-during-transition.html b/layout/reftests/css-transitions/style-change-during-transition.html
new file mode 100644
index 0000000000..e539a82093
--- /dev/null
+++ b/layout/reftests/css-transitions/style-change-during-transition.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+.container {
+ visibility: visible;
+ transition: visibility .2s;
+}
+
+.hidden {
+ visibility: hidden;
+}
+</style>
+<div id="tooltip" class="container hidden">
+ <div>
+ <div>
+ <strong>Text</strong>
+ </div>
+ </div>
+</div>
+<script>
+window.addEventListener("load", () => {
+ requestIdleCallback(() => {
+ tooltip.classList.remove("hidden");
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ tooltip.style.zIndex = 2;
+ document.documentElement.classList.remove("reftest-wait");
+ });
+ });
+ });
+});
+</script>
diff --git a/layout/reftests/css-transitions/transition-and-animation-with-different-durations-ref.html b/layout/reftests/css-transitions/transition-and-animation-with-different-durations-ref.html
new file mode 100644
index 0000000000..e6850238af
--- /dev/null
+++ b/layout/reftests/css-transitions/transition-and-animation-with-different-durations-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<title>A reference of 100x100 blue box</title>
+<style>
+div {
+ width: 100px; height: 100px;
+ background: blue;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-transitions/transition-and-animation-with-different-durations.html b/layout/reftests/css-transitions/transition-and-animation-with-different-durations.html
new file mode 100644
index 0000000000..9bc692eeab
--- /dev/null
+++ b/layout/reftests/css-transitions/transition-and-animation-with-different-durations.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Transform animation and opacity transition with different durations
+</title>
+<style>
+div {
+ width: 100px; height: 100px;
+ background: blue;
+}
+@keyframes translate {
+ from { transform: translateY(0px); }
+ to { transform: translateY(0px); }
+}
+</style>
+<div id="target"></div>
+<script>
+window.addEventListener("load", () => {
+ var target = document.getElementById("target");
+ target.style = "opacity: 0;";
+
+ getComputedStyle(target).transform;
+
+ target.style = "transition: opacity 0.2s; opacity: 1; " +
+ "animation: translate 0.1s;";
+
+ target.addEventListener("transitionend", () => {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+});
+</script>
diff --git a/layout/reftests/css-transitions/transitions-inline-already-wrapped-1.html b/layout/reftests/css-transitions/transitions-inline-already-wrapped-1.html
new file mode 100644
index 0000000000..f7533f6506
--- /dev/null
+++ b/layout/reftests/css-transitions/transitions-inline-already-wrapped-1.html
@@ -0,0 +1,23 @@
+<html class="reftest-wait">
+<title>Test for CSS transitions and re-wrapping of inlines</title>
+<style type="text/css">
+#test { transition: 5s color linear 200s; }
+</style>
+<script type="text/javascript">
+
+window.onload = run;
+
+function run() {
+ var test = document.getElementById("test");
+ var unused = test.offsetWidth;
+ test.style.color = "red";
+ unused = test.offsetWidth;
+ document.documentElement.removeAttribute("class");
+}
+
+</script>
+<div style="width: 3em">
+<span id="test" style="color: green">
+This is some text with a transition.
+</span>
+</div>
diff --git a/layout/reftests/css-transitions/transitions-inline-already-wrapped-2.html b/layout/reftests/css-transitions/transitions-inline-already-wrapped-2.html
new file mode 100644
index 0000000000..9adf491922
--- /dev/null
+++ b/layout/reftests/css-transitions/transitions-inline-already-wrapped-2.html
@@ -0,0 +1,28 @@
+<html class="reftest-wait">
+<title>Test for CSS transitions and re-wrapping of inlines</title>
+<style type="text/css">
+#test { transition: 20ms color linear 0; }
+</style>
+<script type="text/javascript">
+
+window.onload = run;
+
+function run() {
+ var test = document.getElementById("test");
+ var unused = test.offsetWidth;
+ unused = getComputedStyle(test, "").color;
+ test.style.color = "green";
+ unused = test.offsetWidth;
+ unused = getComputedStyle(test, "").color;
+ setTimeout(step2, 100); // give transition time to run
+}
+function step2() {
+ document.documentElement.removeAttribute("class");
+}
+
+</script>
+<div style="width: 3em">
+<span id="test" style="color: red">
+This is some text with a transition.
+</span>
+</div>
diff --git a/layout/reftests/css-transitions/transitions-inline-ref.html b/layout/reftests/css-transitions/transitions-inline-ref.html
new file mode 100644
index 0000000000..16ade1cfe7
--- /dev/null
+++ b/layout/reftests/css-transitions/transitions-inline-ref.html
@@ -0,0 +1,7 @@
+<html>
+<title>Test for CSS transitions and re-wrapping of inlines</title>
+<div style="width: 3em">
+<span id="test" style="color: green">
+This is some text with a transition.
+</span>
+</div>
diff --git a/layout/reftests/css-transitions/transitions-inline-rewrap-1.html b/layout/reftests/css-transitions/transitions-inline-rewrap-1.html
new file mode 100644
index 0000000000..b5ce43cd37
--- /dev/null
+++ b/layout/reftests/css-transitions/transitions-inline-rewrap-1.html
@@ -0,0 +1,25 @@
+<html class="reftest-wait">
+<title>Test for CSS transitions and re-wrapping of inlines</title>
+<style type="text/css">
+#test { transition: 5s color linear 200s; }
+</style>
+<script type="text/javascript">
+
+window.onload = run;
+
+function run() {
+ var test = document.getElementById("test");
+ var unused = test.offsetWidth;
+ test.style.color = "red";
+ unused = test.offsetWidth;
+ test.parentNode.style.width = "3em";
+ unused = test.offsetWidth;
+ document.documentElement.removeAttribute("class");
+}
+
+</script>
+<div style="width: 50em">
+<span id="test" style="color: green">
+This is some text with a transition.
+</span>
+</div>
diff --git a/layout/reftests/css-transitions/transitions-inline-rewrap-2.html b/layout/reftests/css-transitions/transitions-inline-rewrap-2.html
new file mode 100644
index 0000000000..728a018747
--- /dev/null
+++ b/layout/reftests/css-transitions/transitions-inline-rewrap-2.html
@@ -0,0 +1,31 @@
+<html class="reftest-wait">
+<title>Test for CSS transitions and re-wrapping of inlines</title>
+<style type="text/css">
+#test { transition: 20ms color linear 0; }
+</style>
+<script type="text/javascript">
+
+window.onload = run;
+
+function run() {
+ var test = document.getElementById("test");
+ var unused = test.offsetWidth;
+ unused = getComputedStyle(test, "").color;
+ test.style.color = "green";
+ unused = test.offsetWidth;
+ unused = getComputedStyle(test, "").color;
+ test.parentNode.style.width = "3em";
+ unused = test.offsetWidth;
+ unused = getComputedStyle(test, "").color;
+ setTimeout(step2, 100); // give transition time to run
+}
+function step2() {
+ document.documentElement.removeAttribute("class");
+}
+
+</script>
+<div style="width: 50em">
+<span id="test" style="color: red">
+This is some text with a transition.
+</span>
+</div>