Unprefixed transitionend event doesn't seem to be implemented, which breaks many sites
https://bugs.webkit.org/show_bug.cgi?id=105647
Reviewed by Julien Chaffraix.
Source/WebCore:
Add support for transitionend event delivery as part as the unprefixing
work on CSS Transitions. This patch adds some code in EventTarget to
figure out if the current event to dispatch has a prefixed version or
not. Then from the list of listeners we deduce which event should be delivered
(prefixed or unprefixed).
In the case of the CSS Transitions, WebKit will now behave as follow :
if an event listener is attached to the prefixed version of the
transition end event then only the prefixed event will be send.
If an event listener is attached to the unprefixed version
of the transition end event then only the unprefixed event will be
send. If there are event listeners on both unprefixed and prefixed
events then only the unprefixed event will be send.
The behavior was discussed here :
http://lists.webkit.org/pipermail/webkit-dev/2013-January/023301.html.
Tests: transitions/transition-end-event-unprefixed-01.html
transitions/transition-end-event-unprefixed-02.html
* dom/Document.cpp:
(WebCore::Document::addListenerTypeIfNeeded): Register the prefixed
listener too as transitionend listeners so that we properly dispatch
events for them.
* dom/EventNames.h:
(WebCore): Add the new transitionend name.
* dom/EventTarget.cpp:
(WebCore::createMatchingPrefixedEvent):
(WebCore::prefixedType):
(WebCore::EventTarget::fireEventListeners): Find out if somebody is
listening for unprefixed events, if so we always send the unprefixed
event, if not then we create a prefixed event and send it.
* page/animation/AnimationController.cpp:
(WebCore::AnimationControllerPrivate::fireEventsAndUpdateStyle):
* page/animation/ImplicitAnimation.cpp:
(WebCore::ImplicitAnimation::sendTransitionEvent): Always create by
default unprefixed events.
LayoutTests:
Cover that event delivery is correct : we received unprefixed events.
* transitions/transition-end-event-helpers.js:
(recordTransitionEndEvent):
* transitions/transition-end-event-unprefixed-01-expected.txt: Added.
* transitions/transition-end-event-unprefixed-01.html: Added.
* transitions/transition-end-event-unprefixed-02-expected.txt: Added.
* transitions/transition-end-event-unprefixed-02.html: Added.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@139762 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index c8999be..06b10a3 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,19 @@
+2013-01-15 Alexis Menard <alexis@webkit.org>
+
+ Unprefixed transitionend event doesn't seem to be implemented, which breaks many sites
+ https://bugs.webkit.org/show_bug.cgi?id=105647
+
+ Reviewed by Julien Chaffraix.
+
+ Cover that event delivery is correct : we received unprefixed events.
+
+ * transitions/transition-end-event-helpers.js:
+ (recordTransitionEndEvent):
+ * transitions/transition-end-event-unprefixed-01-expected.txt: Added.
+ * transitions/transition-end-event-unprefixed-01.html: Added.
+ * transitions/transition-end-event-unprefixed-02-expected.txt: Added.
+ * transitions/transition-end-event-unprefixed-02.html: Added.
+
2013-01-15 Zan Dobersek <zdobersek@igalia.com>
Unreviewed GTK gardening.
diff --git a/LayoutTests/transitions/transition-end-event-helpers.js b/LayoutTests/transitions/transition-end-event-helpers.js
index d77735b..fa5f352 100644
--- a/LayoutTests/transitions/transition-end-event-helpers.js
+++ b/LayoutTests/transitions/transition-end-event-helpers.js
@@ -10,12 +10,12 @@
/* Call this function to record manually transition end events:
Function parameters:
- event [required]: the event passed with "webkitTransitionEnd"
+ event [required]: the event passed with "webkitTransitionEnd" or "transitionend"
*/
function recordTransitionEndEvent(event)
{
- if (event.type != "webkitTransitionEnd")
+ if (event.type != "webkitTransitionEnd" && event.type != "transitionend" )
throw("Invalid transition end event!");
_recordedEvents.push([
diff --git a/LayoutTests/transitions/transition-end-event-unprefixed-01-expected.txt b/LayoutTests/transitions/transition-end-event-unprefixed-01-expected.txt
new file mode 100644
index 0000000..d7a4803
--- /dev/null
+++ b/LayoutTests/transitions/transition-end-event-unprefixed-01-expected.txt
@@ -0,0 +1,4 @@
+Initiating a transition and catching the transition unprefixed event.
+
+PASS --- [Expected] Property: left Target: box1 Elapsed Time: 0.5
+
diff --git a/LayoutTests/transitions/transition-end-event-unprefixed-01.html b/LayoutTests/transitions/transition-end-event-unprefixed-01.html
new file mode 100644
index 0000000..37710cf
--- /dev/null
+++ b/LayoutTests/transitions/transition-end-event-unprefixed-01.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ .box {
+ position: relative;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ margin: 10px;
+ background-color: blue;
+ transition-property: left;
+ transition-duration: 0.5s;
+ -webkit-transition-property: left;
+ -webkit-transition-duration: 0.5s;
+ }
+ </style>
+ <script src="transition-end-event-helpers.js"></script>
+ <script type="text/javascript">
+
+ var expectedEndEvents = [
+ // [property-name, element-id, elapsed-time, listen]
+ ["left", "box1", 0.5, false]
+ ];
+
+ function setupTest()
+ {
+ var box = document.getElementById('box1');
+ document.addEventListener('transitionend', recordTransitionEndEvent, false);
+ box.style.left = '200px';
+ }
+
+ runTransitionTest(expectedEndEvents, setupTest);
+ </script>
+</head>
+<body>
+
+<p>Initiating a transition and catching the transition unprefixed event.</p>
+
+<div id="container">
+ <div id="box1" class="box"></div>
+</div>
+
+<div id="result"></div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/transitions/transition-end-event-unprefixed-02-expected.txt b/LayoutTests/transitions/transition-end-event-unprefixed-02-expected.txt
new file mode 100644
index 0000000..9ee174d
--- /dev/null
+++ b/LayoutTests/transitions/transition-end-event-unprefixed-02-expected.txt
@@ -0,0 +1,4 @@
+Initiating a transition catching one transition event only despite listening the prefixed and unprefixed event.
+
+PASS --- [Expected] Property: left Target: box1 Elapsed Time: 0.5
+
diff --git a/LayoutTests/transitions/transition-end-event-unprefixed-02.html b/LayoutTests/transitions/transition-end-event-unprefixed-02.html
new file mode 100644
index 0000000..8bde0b9
--- /dev/null
+++ b/LayoutTests/transitions/transition-end-event-unprefixed-02.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ .box {
+ position: relative;
+ left: 0;
+ height: 100px;
+ width: 100px;
+ margin: 10px;
+ background-color: blue;
+ transition-property: left;
+ transition-duration: 0.5s;
+ -webkit-transition-property: left;
+ -webkit-transition-duration: 0.5s;
+ }
+ </style>
+ <script src="transition-end-event-helpers.js"></script>
+ <script type="text/javascript">
+
+ var expectedEndEvents = [
+ // [property-name, element-id, elapsed-time, listen]
+ ["left", "box1", 0.5, false]
+ ];
+
+ function setupTest()
+ {
+ var box = document.getElementById('box1');
+ document.addEventListener('webkitTransitionEnd', recordTransitionEndEvent, false);
+ document.addEventListener('transitionend', recordTransitionEndEvent, false);
+ box.style.left = '200px';
+ }
+
+ runTransitionTest(expectedEndEvents, setupTest);
+ </script>
+</head>
+<body>
+
+<p>Initiating a transition catching one transition event only despite listening the prefixed and unprefixed event.</p>
+
+<div id="container">
+ <div id="box1" class="box"></div>
+</div>
+
+<div id="result"></div>
+
+</body>
+</html>
\ No newline at end of file
