summaryrefslogtreecommitdiffstats
path: root/layout/style
diff options
context:
space:
mode:
Diffstat (limited to 'layout/style')
-rw-r--r--layout/style/nsTransitionManager.cpp39
-rw-r--r--layout/style/test/test_animations_event_handler_attribute.html12
-rw-r--r--layout/style/test/test_animations_event_order.html77
3 files changed, 107 insertions, 21 deletions
diff --git a/layout/style/nsTransitionManager.cpp b/layout/style/nsTransitionManager.cpp
index 4a1a5b7ad..d40e26a82 100644
--- a/layout/style/nsTransitionManager.cpp
+++ b/layout/style/nsTransitionManager.cpp
@@ -211,6 +211,7 @@ CSSTransition::QueueEvents()
// perhaps even with different timelines.
// The zero timestamp is for transitionrun events where we ignore the delay
// for the purpose of ordering events.
+ TimeStamp zeroTimeStamp = AnimationTimeToTimeStamp(zeroDuration);
TimeStamp startTimeStamp = ElapsedTimeToTimeStamp(intervalStartTime);
TimeStamp endTimeStamp = ElapsedTimeToTimeStamp(intervalEndTime);
@@ -227,7 +228,25 @@ CSSTransition::QueueEvents()
AutoTArray<TransitionEventParams, 3> events;
switch (mPreviousTransitionPhase) {
case TransitionPhase::Idle:
- if (currentPhase == TransitionPhase::After) {
+ if (currentPhase == TransitionPhase::Pending ||
+ currentPhase == TransitionPhase::Before) {
+ events.AppendElement(TransitionEventParams{ eTransitionRun,
+ intervalStartTime,
+ zeroTimeStamp });
+ } else if (currentPhase == TransitionPhase::Active) {
+ events.AppendElement(TransitionEventParams{ eTransitionRun,
+ intervalStartTime,
+ zeroTimeStamp });
+ events.AppendElement(TransitionEventParams{ eTransitionStart,
+ intervalStartTime,
+ startTimeStamp });
+ } else if (currentPhase == TransitionPhase::After) {
+ events.AppendElement(TransitionEventParams{ eTransitionRun,
+ intervalStartTime,
+ zeroTimeStamp });
+ events.AppendElement(TransitionEventParams{ eTransitionStart,
+ intervalStartTime,
+ startTimeStamp });
events.AppendElement(TransitionEventParams{ eTransitionEnd,
intervalEndTime,
endTimeStamp });
@@ -236,7 +255,14 @@ CSSTransition::QueueEvents()
case TransitionPhase::Pending:
case TransitionPhase::Before:
- if (currentPhase == TransitionPhase::After) {
+ if (currentPhase == TransitionPhase::Active) {
+ events.AppendElement(TransitionEventParams{ eTransitionStart,
+ intervalStartTime,
+ startTimeStamp });
+ } else if (currentPhase == TransitionPhase::After) {
+ events.AppendElement(TransitionEventParams{ eTransitionStart,
+ intervalStartTime,
+ startTimeStamp });
events.AppendElement(TransitionEventParams{ eTransitionEnd,
intervalEndTime,
endTimeStamp });
@@ -256,7 +282,14 @@ CSSTransition::QueueEvents()
break;
case TransitionPhase::After:
- if (currentPhase == TransitionPhase::Before) {
+ if (currentPhase == TransitionPhase::Active) {
+ events.AppendElement(TransitionEventParams{ eTransitionStart,
+ intervalEndTime,
+ startTimeStamp });
+ } else if (currentPhase == TransitionPhase::Before) {
+ events.AppendElement(TransitionEventParams{ eTransitionStart,
+ intervalEndTime,
+ startTimeStamp });
events.AppendElement(TransitionEventParams{ eTransitionEnd,
intervalStartTime,
endTimeStamp });
diff --git a/layout/style/test/test_animations_event_handler_attribute.html b/layout/style/test/test_animations_event_handler_attribute.html
index e5def2b34..23a749daa 100644
--- a/layout/style/test/test_animations_event_handler_attribute.html
+++ b/layout/style/test/test_animations_event_handler_attribute.html
@@ -90,14 +90,22 @@ targets.forEach(div => { div.remove(); });
// 2. Test CSS Transition event handlers.
-var targets = createAndRegisterTargets([ 'ontransitionend' ]);
+var targets = createAndRegisterTargets([ 'ontransitionrun',
+ 'ontransitionstart',
+ 'ontransitionend' ]);
targets.forEach(div => {
- div.style.transition = 'margin-left 100ms';
+ div.style.transition = 'margin-left 100ms 200ms';
getComputedStyle(div).marginLeft; // flush
div.style.marginLeft = "200px";
getComputedStyle(div).marginLeft; // flush
});
+advance_clock(0);
+checkReceivedEvents("transitionrun", targets);
+
+advance_clock(200);
+checkReceivedEvents("transitionstart", targets);
+
advance_clock(100);
checkReceivedEvents("transitionend", targets);
diff --git a/layout/style/test/test_animations_event_order.html b/layout/style/test/test_animations_event_order.html
index 5af7639cc..f948bf0a5 100644
--- a/layout/style/test/test_animations_event_order.html
+++ b/layout/style/test/test_animations_event_order.html
@@ -46,6 +46,8 @@ var gDisplay = document.getElementById('display');
[ 'animationstart',
'animationiteration',
'animationend',
+ 'transitionrun',
+ 'transitionstart',
'transitionend' ]
.forEach(event =>
gDisplay.addEventListener(event,
@@ -322,9 +324,13 @@ getComputedStyle(divs[0]).marginLeft;
advance_clock(0);
advance_clock(10000);
-checkEventOrder([ divs[0], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+ [ divs[0], 'transitionstart' ],
+ [ divs[1], 'transitionrun' ],
+ [ divs[1], 'transitionstart' ],
+ [ divs[0], 'transitionend' ],
[ divs[1], 'transitionend' ],
- 'Simultaneous transitionend on siblings');
+ 'Simultaneous transitionrun/start/end on siblings');
divs.forEach(div => div.remove());
divs = [];
@@ -360,10 +366,16 @@ getComputedStyle(divs[0]).marginLeft;
advance_clock(0);
advance_clock(10000);
-checkEventOrder([ divs[0], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+ [ divs[0], 'transitionstart' ],
+ [ divs[2], 'transitionrun' ],
+ [ divs[2], 'transitionstart' ],
+ [ divs[1], 'transitionrun' ],
+ [ divs[1], 'transitionstart' ],
+ [ divs[0], 'transitionend' ],
[ divs[2], 'transitionend' ],
[ divs[1], 'transitionend' ],
- 'Simultaneous transitionend on children');
+ 'Simultaneous transitionrun/start/end on children');
divs.forEach(div => div.remove());
divs = [];
@@ -408,11 +420,19 @@ getComputedStyle(divs[0]).marginLeft;
advance_clock(0);
advance_clock(10000);
-checkEventOrder([ divs[0], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+ [ divs[0], 'transitionstart' ],
+ [ divs[0], '::before', 'transitionrun' ],
+ [ divs[0], '::before', 'transitionstart' ],
+ [ divs[0], '::after', 'transitionrun' ],
+ [ divs[0], '::after', 'transitionstart' ],
+ [ divs[1], 'transitionrun' ],
+ [ divs[1], 'transitionstart' ],
+ [ divs[0], 'transitionend' ],
[ divs[0], '::before', 'transitionend' ],
[ divs[0], '::after', 'transitionend' ],
[ divs[1], 'transitionend' ],
- 'Simultaneous transitionend on pseudo-elements');
+ 'Simultaneous transitionrun/start/end on pseudo-elements');
divs.forEach(div => div.remove());
divs = [];
@@ -441,9 +461,13 @@ getComputedStyle(divs[0]).marginLeft;
advance_clock(0);
advance_clock(10000);
-checkEventOrder([ divs[1], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+ [ divs[0], 'transitionstart' ],
+ [ divs[1], 'transitionrun' ],
+ [ divs[1], 'transitionstart' ],
+ [ divs[1], 'transitionend' ],
[ divs[0], 'transitionend' ],
- 'Sorting of transitionend events by time');
+ 'Sorting of transitionrun/start/end events by time');
divs.forEach(div => div.remove());
divs = [];
@@ -468,9 +492,13 @@ getComputedStyle(divs[0]).marginLeft;
advance_clock(0);
advance_clock(10 * 1000);
-checkEventOrder([ divs[1], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+ [ divs[1], 'transitionrun' ],
+ [ divs[1], 'transitionstart' ],
+ [ divs[0], 'transitionstart' ],
+ [ divs[1], 'transitionend' ],
[ divs[0], 'transitionend' ],
- 'Sorting of transitionend events by time' +
+ 'Sorting of transitionrun/start/end events by time' +
'(including delay)');
divs.forEach(div => div.remove());
@@ -492,9 +520,14 @@ getComputedStyle(div).marginLeft;
advance_clock(0);
advance_clock(10000);
-checkEventOrder([ 'margin-left', 'transitionend' ],
+checkEventOrder([ 'margin-left', 'transitionrun' ],
+ [ 'margin-left', 'transitionstart' ],
+ [ 'opacity', 'transitionrun' ],
+ [ 'opacity', 'transitionstart' ],
+ [ 'margin-left', 'transitionend' ],
[ 'opacity', 'transitionend' ],
- 'Sorting of transitionend events by transition-property')
+ 'Sorting of transitionrun/start/end events by ' +
+ 'transition-property')
div.remove();
div = undefined;
@@ -519,7 +552,11 @@ getComputedStyle(divs[0]).marginLeft;
advance_clock(0);
advance_clock(10000);
-checkEventOrder([ divs[0], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+ [ divs[0], 'transitionstart' ],
+ [ divs[1], 'transitionrun' ],
+ [ divs[1], 'transitionstart' ],
+ [ divs[0], 'transitionend' ],
[ divs[1], 'transitionend' ],
'Transition events are sorted by document position first, ' +
'before transition-property');
@@ -543,7 +580,11 @@ getComputedStyle(div).marginLeft;
advance_clock(0);
advance_clock(10000);
-checkEventOrder([ 'opacity', 'transitionend' ],
+checkEventOrder([ 'margin-left', 'transitionrun' ],
+ [ 'margin-left', 'transitionstart' ],
+ [ 'opacity', 'transitionrun' ],
+ [ 'opacity', 'transitionstart' ],
+ [ 'opacity', 'transitionend' ],
[ 'margin-left', 'transitionend' ],
'Transition events are sorted by time first, before ' +
'transition-property');
@@ -571,9 +612,13 @@ getComputedStyle(divs[0]).marginLeft;
advance_clock(0);
advance_clock(15 * 1000);
-checkEventOrder([ divs[1], 'transitionend' ],
+checkEventOrder([ divs[0], 'transitionrun' ],
+ [ divs[1], 'transitionrun' ],
+ [ divs[1], 'transitionstart' ],
+ [ divs[0], 'transitionstart' ],
+ [ divs[1], 'transitionend' ],
[ divs[0], 'transitionend' ],
- 'Simultaneous transitionend on siblings');
+ 'Simultaneous transitionrun/start/end on siblings');
divs.forEach(div => div.remove());
divs = [];