diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /layout/reftests/css-transitions | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/css-transitions')
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> |