summaryrefslogtreecommitdiffstats
path: root/layout/style/test
diff options
context:
space:
mode:
authorMoonchild <mcwerewolf@gmail.com>2018-04-29 18:48:43 +0200
committerGitHub <noreply@github.com>2018-04-29 18:48:43 +0200
commitb83c51a1a51f58a7a68d1a4877b0f0a8f03a939e (patch)
tree8ba5cabbaa5390ce5bffb1af3b31a4e49a8def09 /layout/style/test
parent3fe37f6ae848f7d88e2316857a1a95d9c2abae14 (diff)
parent35c61a027dc6f4d58ca9d33e06da79adf2503ebd (diff)
downloadUXP-b83c51a1a51f58a7a68d1a4877b0f0a8f03a939e.tar
UXP-b83c51a1a51f58a7a68d1a4877b0f0a8f03a939e.tar.gz
UXP-b83c51a1a51f58a7a68d1a4877b0f0a8f03a939e.tar.lz
UXP-b83c51a1a51f58a7a68d1a4877b0f0a8f03a939e.tar.xz
UXP-b83c51a1a51f58a7a68d1a4877b0f0a8f03a939e.zip
Merge pull request #296 from janekptacijarabaci/js_dom_animationcancel_1
DOM - implement animationcancel event
Diffstat (limited to 'layout/style/test')
-rw-r--r--layout/style/test/test_animations.html3
-rw-r--r--layout/style/test/test_animations_event_handler_attribute.html40
-rw-r--r--layout/style/test/test_animations_event_order.html117
-rw-r--r--layout/style/test/test_animations_omta.html3
4 files changed, 137 insertions, 26 deletions
diff --git a/layout/style/test/test_animations.html b/layout/style/test/test_animations.html
index eaccba122..4019af77f 100644
--- a/layout/style/test/test_animations.html
+++ b/layout/style/test/test_animations.html
@@ -1195,9 +1195,6 @@ is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.4), 0.01,
"large negative delay test at 0ms");
check_events([{ type: 'animationstart', target: div,
animationName: 'anim2', elapsedTime: 3.6,
- pseudoElement: "" },
- { type: 'animationiteration', target: div,
- animationName: 'anim2', elapsedTime: 3.6,
pseudoElement: "" }],
"right after start in large negative delay test");
advance_clock(380);
diff --git a/layout/style/test/test_animations_event_handler_attribute.html b/layout/style/test/test_animations_event_handler_attribute.html
index e5def2b34..036a77779 100644
--- a/layout/style/test/test_animations_event_handler_attribute.html
+++ b/layout/style/test/test_animations_event_handler_attribute.html
@@ -88,21 +88,55 @@ checkReceivedEvents("animationend", targets);
targets.forEach(div => { div.remove(); });
-// 2. Test CSS Transition event handlers.
+// 2a. Test CSS Transition event handlers (without transitioncancel)
-var targets = createAndRegisterTargets([ 'ontransitionend' ]);
+var targets = createAndRegisterTargets([ 'ontransitionrun',
+ 'ontransitionstart',
+ 'ontransitionend',
+ 'ontransitioncancel' ]);
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);
targets.forEach(div => { div.remove(); });
+// 2b. Test CSS Transition cancel event handler.
+
+var targets = createAndRegisterTargets([ 'ontransitioncancel' ]);
+targets.forEach(div => {
+ div.style.transition = 'margin-left 100ms 200ms';
+ getComputedStyle(div).marginLeft; // flush
+ div.style.marginLeft = "200px";
+ getComputedStyle(div).marginLeft; // flush
+});
+
+advance_clock(200);
+
+targets.forEach(div => {
+ div.style.display = "none"
+});
+getComputedStyle(targets[0]).display; // flush
+
+advance_clock(0);
+checkReceivedEvents("transitioncancel", targets);
+
+advance_clock(100);
+targets.forEach( div => { is(div.receivedEventType, undefined); });
+
+targets.forEach(div => { div.remove(); });
+
// 3. Test prefixed CSS Animation event handlers.
var targets = createAndRegisterTargets([ 'onwebkitanimationstart',
diff --git a/layout/style/test/test_animations_event_order.html b/layout/style/test/test_animations_event_order.html
index 5af7639cc..7204934d2 100644
--- a/layout/style/test/test_animations_event_order.html
+++ b/layout/style/test/test_animations_event_order.html
@@ -46,7 +46,10 @@ var gDisplay = document.getElementById('display');
[ 'animationstart',
'animationiteration',
'animationend',
- 'transitionend' ]
+ 'transitionrun',
+ 'transitionstart',
+ 'transitionend',
+ 'transitioncancel' ]
.forEach(event =>
gDisplay.addEventListener(event,
event => gEventsReceived.push(event),
@@ -322,9 +325,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 +367,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 +421,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 +462,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 +493,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 +521,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 +553,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 +581,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 +613,50 @@ 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 = [];
+
+// 4j. Test sorting transitions with cancel
+// The order of transitioncancel is based on StyleManager.
+// So this test looks like wrong result at a glance. However
+// the gecko will cancel div1's transition before div2 in this case.
+
+divs = [ document.createElement('div'),
+ document.createElement('div') ];
+divs.forEach((div, i) => {
+ gDisplay.appendChild(div);
+ div.style.marginLeft = '0px';
+ div.setAttribute('id', 'div' + i);
+});
+
+divs[0].style.transition = 'margin-left 10s 5s';
+divs[1].style.transition = 'margin-left 10s';
+
+getComputedStyle(divs[0]).marginLeft;
+divs.forEach(div => div.style.marginLeft = '100px');
+getComputedStyle(divs[0]).marginLeft;
+
+advance_clock(0);
+advance_clock(5 * 1000);
+divs.forEach(div => div.style.display = 'none' );
+getComputedStyle(divs[0]).display;
+advance_clock(10 * 1000);
+
+checkEventOrder([ divs[0], 'transitionrun' ],
+ [ divs[1], 'transitionrun' ],
+ [ divs[1], 'transitionstart' ],
+ [ divs[0], 'transitionstart' ],
+ [ divs[1], 'transitioncancel' ],
+ [ divs[0], 'transitioncancel' ],
+ 'Simultaneous transitionrun/start/cancel on siblings');
divs.forEach(div => div.remove());
divs = [];
diff --git a/layout/style/test/test_animations_omta.html b/layout/style/test/test_animations_omta.html
index 4b276c896..0b2a61ecc 100644
--- a/layout/style/test/test_animations_omta.html
+++ b/layout/style/test/test_animations_omta.html
@@ -1408,9 +1408,6 @@ addAsyncAnimTest(function *() {
"large negative delay test at 0ms");
check_events([{ type: 'animationstart', target: gDiv,
animationName: 'anim2', elapsedTime: 3.6,
- pseudoElement: "" },
- { type: 'animationiteration', target: gDiv,
- animationName: 'anim2', elapsedTime: 3.6,
pseudoElement: "" }],
"right after start in large negative delay test");
advance_clock(380);