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 /testing/web-platform/tests/css/css-transitions/non-rendered-element-002.html | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-transitions/non-rendered-element-002.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-transitions/non-rendered-element-002.html | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-transitions/non-rendered-element-002.html b/testing/web-platform/tests/css/css-transitions/non-rendered-element-002.html new file mode 100644 index 0000000000..accf141037 --- /dev/null +++ b/testing/web-platform/tests/css/css-transitions/non-rendered-element-002.html @@ -0,0 +1,57 @@ +<!doctype html> +<html> +<head> +<meta charset=utf-8> +<title>CSS Transitions Test: Transitions do not run for a pseudo-element that is not being rendered</title> +<link rel="help" title="Starting transitions" + href="https://drafts.csswg.org/css-transitions/#starting"> + +<script src="/resources/testharness.js" type="text/javascript"></script> +<script src="/resources/testharnessreport.js" type="text/javascript"></script> +<script src="./support/helper.js" type="text/javascript"></script> + +</head> +<body> +<div id="log"></div> + +<script> + +promise_test(async t => { + for (const pseudoType of ['before', 'after']) { + const style = addStyle(t, { + [`.init::${pseudoType}`]: 'content: ""; width: 0px; transition: width 100s;', + [`.change::${pseudoType}`]: 'width: 100px;', + [`.cancel::${pseudoType}`]: 'content: none', + }); + + // Create element (and pseudo-element) and attach event listeners + const div = addDiv(t); + div.classList.add('init'); + + const eventWatcher = new EventWatcher(t, div, [ + 'transitionrun', + 'transitioncancel', + ]); + + // Trigger transition + getComputedStyle(div).width; + div.classList.add('change'); + getComputedStyle(div).width; + + await eventWatcher.wait_for('transitionrun'); + + // Make the pseudo-element no longer rendered + div.classList.add('cancel'); + + await eventWatcher.wait_for('transitioncancel'); + + div.remove(); + style.remove(); + } +}, 'Transitions on ::before/::after pseudo-elements are canceled when the' + + ' content property is cleared'); + +</script> + +</body> +</html> |