summaryrefslogtreecommitdiffstats
path: root/layout/style/test/test_transitions_events.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /layout/style/test/test_transitions_events.html
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/style/test/test_transitions_events.html')
-rw-r--r--layout/style/test/test_transitions_events.html294
1 files changed, 294 insertions, 0 deletions
diff --git a/layout/style/test/test_transitions_events.html b/layout/style/test/test_transitions_events.html
new file mode 100644
index 0000000000..d04348bc0a
--- /dev/null
+++ b/layout/style/test/test_transitions_events.html
@@ -0,0 +1,294 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=531585
+-->
+<head>
+ <title>Test for Bug 531585 (transitionend event)</title>
+ <script src="/tests/SimpleTest/SimpleTest.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<style type="text/css">
+
+.bar { margin: 10px; }
+
+#one { transition-duration: 500ms; transition-property: all; }
+#two { transition: margin-left 1s; }
+#three { transition: margin 0.5s 0.25s; }
+
+#four, #five, #six, #seven::before, #seven::after {
+ transition: 500ms color;
+ border-color: black; /* don't derive from color */
+ column-rule-color: black; /* don't derive from color */
+ text-decoration-color: black; /* don't derive from color */
+ outline-color: black; /* don't derive from color */
+}
+
+#four {
+ /* give the reversing transition a long duration; the reversing will
+ still be quick */
+ transition-duration: 30s;
+ transition-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+#seven::before, #seven::after {
+ content: "x";
+ transition-duration: 50ms;
+}
+#seven[foo]::before, #seven[foo]::after { color: lime; }
+
+</style>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=531585">Mozilla Bug 531585</a>
+<p id="display">
+
+<span id="one" style="color:blue"></span>
+<span id="two"></span>
+<span id="three"></span>
+<span id="four" style="color: blue"></span>
+<span id="five" style="color: blue"></span>
+<span id="six" style="color: blue"></span>
+<span id="seven" style="color: blue"></span>
+
+</p>
+<pre id="test">
+<script type="application/javascript">
+
+/** Test for Bug 531585 (transitionend event) **/
+
+SimpleTest.waitForExplicitFinish();
+SimpleTest.requestFlakyTimeout("untriaged");
+var gTestCount = 0;
+function started_test() { ++gTestCount; }
+function finished_test() { if (--gTestCount == 0) { SimpleTest.finish(); } }
+
+function $(id) { return document.getElementById(id); }
+function cs(id) { return getComputedStyle($(id), ""); }
+
+var got_one_root = false;
+var got_one_target = false;
+var got_two_target = false;
+var got_three_top = false;
+var got_three_right = false;
+var got_three_bottom = false;
+var got_three_left = false;
+var got_four_root = false;
+var got_body = false;
+var did_finish_five = false;
+var did_finish_six = false;
+var got_before = false;
+var got_after = false;
+
+// Flush layout to guarantee consistent transitions.
+document.body.getBoundingClientRect();
+
+document.documentElement.addEventListener("transitionend",
+ function(event) {
+ if (event.target == $("one")) {
+ ok(!got_one_root, "transitionend on one on root");
+ is(event.propertyName, "border-right-color",
+ "propertyName for transitionend on one");
+ is(event.elapsedTime, 0.5,
+ "elapsedTime for transitionend on one");
+ is(cs("one").borderRightColor, "rgb(0, 255, 0)",
+ "computed style for transitionend on one");
+ got_one_root = true;
+ finished_test();
+ } else if (event.target == $("four")) {
+ ok(!got_four_root, "transitionend on four on root");
+ is(event.propertyName, "color",
+ "propertyName for transitionend on four");
+ // Reported time should (really?) be shortened by reversing.
+ ok(event.elapsedTime < 30,
+ "elapsedTime for transitionend on four");
+ is(cs("four").color, "rgb(0, 0, 255)",
+ "computed style for transitionend on four (end of reverse transition)");
+ got_four_root = true;
+ finished_test();
+ } else if (event.target == document.body) {
+ // A synthesized event.
+ ok(!got_body, "transitionend on body on root");
+ is(event.propertyName, "some-unknown-prop",
+ "propertyName for transitionend on body");
+ // Reported time should (really?) be shortened by reversing.
+ is(event.elapsedTime, 0.5,
+ "elapsedTime for transitionend on body");
+ got_body = true;
+ finished_test();
+ } else if (event.target == $("seven")) {
+ if (!got_before) {
+ got_before = true;
+ is(event.pseudoElement, "::before");
+ } else {
+ ok(!got_after, "transitionend on #seven::after");
+ got_after = true;
+ is(event.pseudoElement, "::after");
+ }
+ is(event.propertyName, "color");
+ is(event.isTrusted, true);
+ finished_test();
+ } else {
+ if ((event.target == $("five") && did_finish_five) ||
+ (event.target == $("six") && did_finish_six)) {
+ todo(false,
+ "it seems that transitionstart and transitionend had been " +
+ "processed in the same frame");
+ return;
+ }
+ ok(false,
+ "unexpected event on " + event.target.nodeName +
+ " element with id '" + event.target.id + "' " +
+ "elapsedTime=" + event.elapsedTime +
+ " propertyName='" + event.propertyName + "'");
+ }
+ });
+
+$("one").addEventListener("transitionend",
+ function(event) {
+ is(event.propertyName, "color", "unexpected " +
+ "property name for transitionend on one on target");
+ ok(!got_one_target,
+ "transitionend on one on target (color)");
+ got_one_target = true;
+ event.stopPropagation();
+ is(event.elapsedTime, 0.5,
+ "elapsedTime for transitionend on one");
+ is(cs("one").getPropertyValue(event.propertyName), "rgb(0, 255, 0)",
+ "computed style of " + event.propertyName + " for transitionend on one");
+ finished_test();
+ });
+
+started_test(); // color on #one
+$("one").style.color = "lime";
+
+
+$("two").addEventListener("transitionend",
+ function(event) {
+ event.stopPropagation();
+
+ ok(!got_two_target, "transitionend on two on target");
+ is(event.propertyName, "margin-left",
+ "propertyName for transitionend on two");
+ is(event.elapsedTime, 1,
+ "elapsedTime for transitionend on two");
+ is(event.bubbles, true,
+ "transitionend events should bubble");
+ is(event.cancelable, false,
+ "transitionend events should not be cancelable");
+ is(cs("two").marginLeft, "10px",
+ "computed style for transitionend on two");
+ got_two_target = true;
+ finished_test();
+ });
+
+started_test(); // #two
+$("two").className = "bar";
+
+$("three").addEventListener("transitionend",
+ function(event) {
+ event.stopPropagation();
+
+ switch (event.propertyName) {
+ case "margin-top":
+ ok(!got_three_top, "should only get margin-top once");
+ got_three_top = true;
+ break;
+ case "margin-right":
+ ok(!got_three_right, "should only get margin-right once");
+ got_three_right = true;
+ break;
+ case "margin-bottom":
+ ok(!got_three_bottom, "should only get margin-bottom once");
+ got_three_bottom = true;
+ break;
+ case "margin-left":
+ ok(!got_three_left, "should only get margin-left once");
+ got_three_left = true;
+ break;
+ default:
+ ok(false, "unexpected property name " + event.propertyName +
+ " for transitionend on three");
+ }
+ is(event.elapsedTime, 0.5,
+ "elapsedTime for transitionend on three");
+ is(cs("three").getPropertyValue(event.propertyName), "10px",
+ "computed style for transitionend on three");
+ finished_test();
+ }, true);
+
+started_test(); // margin-top on #three
+started_test(); // margin-right on #three
+started_test(); // margin-bottom on #three
+started_test(); // margin-left on #three
+$("three").className = "bar";
+
+// We reverse the transition on four, and we should only get an event
+// at the end of the second transition.
+started_test(); // #four (listener on root)
+$("four").style.color = "lime";
+
+// We cancel the transition on five by changing 'transition-property',
+// and should thus get no event.
+$("five").style.color = "lime";
+
+// We cancel the transition on six by changing 'transition-duration' and
+// then changing the value, so we should get no event.
+$("six").style.color = "lime";
+
+started_test(); // #seven::before (listener on root)
+started_test(); // #seven::after (listener on root)
+$("seven").setAttribute("foo", "bar");
+
+$("five").addEventListener("transitionstart", function() {
+ if (cs("five").color == "rgb(0, 255, 0)") {
+ // The transition has finished already.
+ did_finish_five = true;
+ }
+ $("five").style.transitionProperty = "margin-left";
+});
+
+$("six").addEventListener("transitionstart", function() {
+ if (cs("six").color == "rgb(0, 255, 0)") {
+ // The transition has finished already.
+ did_finish_six = true;
+ }
+ $("six").style.transitionDuration = "0s";
+ $("six").style.transitionDelay = "0s";
+ $("six").style.color = "blue";
+});
+
+function poll_start_reversal() {
+ if (cs("four").color != "rgb(0, 0, 255)") {
+ // The forward transition has started.
+ $("four").style.color = "blue";
+ } else {
+ // The forward transition has not started yet.
+ setTimeout(poll_start_reversal, 20);
+ }
+}
+setTimeout(poll_start_reversal, 200);
+
+// And make our own event to dispatch to the body.
+started_test(); // synthesized event to body (listener on root)
+
+var e = new TransitionEvent("transitionend",
+ {
+ bubbles: true,
+ cancelable: true,
+ propertyName: "some-unknown-prop",
+ elapsedTime: 0.5,
+ pseudoElement: "pseudo"
+ });
+is(e.bubbles, true);
+is(e.cancelable, true);
+is(e.propertyName, "some-unknown-prop");
+is(e.elapsedTime, 0.5);
+is(e.pseudoElement, "pseudo");
+is(e.isTrusted, false)
+
+document.body.dispatchEvent(e);
+
+</script>
+</pre>
+</body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-06-20 16:36:24 +0000