Implement HTMLMarqueeElement's animation in private scripts

Source/core/html/HTMLMarqueeElement.js

Index: Source/core/html/HTMLMarqueeElement.js
diff --git a/Source/core/html/HTMLMarqueeElement.js b/Source/core/html/HTMLMarqueeElement.js
index aecd5d7adca910af62e4779997dbb423a2c8ba4c..3adb1101eee802985e2f3c579bff730ed3d7993c 100644
--- a/Source/core/html/HTMLMarqueeElement.js
+++ b/Source/core/html/HTMLMarqueeElement.js
@@ -81,32 +81,6 @@ installClass('HTMLMarqueeElement', function(HTMLMarqueeElementPrototype) {
         });
     }
 
-    function defineInlineEventHandler(prototype, eventName) {
-        var propertyName = 'on' + eventName;
-        // FIXME: We should use symbols here instead.
-        var functionPropertyName = propertyName + 'Function_';
-        var eventHandlerPropertyName = propertyName + 'EventHandler_';
-        Object.defineProperty(prototype, propertyName, {
-            get: function() {
-                var func = this[functionPropertyName];
-                return func || null;
-            },
-            set: function(value) {
-                var oldEventHandler = this[eventHandlerPropertyName];
-                if (oldEventHandler)
-                    this.removeEventListener(eventName, oldEventHandler);
-                // Notice that we wrap |value| in an anonymous function so that the
-                // author can't call removeEventListener themselves to unregister the
-                // inline event handler.
-                var newEventHandler = value ? function() { value.apply(this, arguments) } : null;
-                if (newEventHandler)
-                    this.addEventListener(eventName, newEventHandler);
-                this[functionPropertyName] = value;
-                this[eventHandlerPropertyName] = newEventHandler;
-            },
-        });
-    }
-
     reflectAttribute(HTMLMarqueeElementPrototype, 'behavior', 'behavior');
     reflectAttribute(HTMLMarqueeElementPrototype, 'bgcolor', 'bgColor');
     reflectAttribute(HTMLMarqueeElementPrototype, 'direction', 'direction');
@@ -116,14 +90,10 @@ installClass('HTMLMarqueeElement', function(HTMLMarqueeElementPrototype) {
     reflectAttribute(HTMLMarqueeElementPrototype, 'width', 'width');
     reflectBooleanAttribute(HTMLMarqueeElementPrototype, 'truespeed', 'trueSpeed');
 
-    defineInlineEventHandler(HTMLMarqueeElementPrototype, 'start');
-    defineInlineEventHandler(HTMLMarqueeElementPrototype, 'finish');
-    defineInlineEventHandler(HTMLMarqueeElementPrototype, 'bounce');
-
     HTMLMarqueeElementPrototype.createdCallback = function() {
         var shadow = this.createShadowRoot();
         var style = document.createElement('style');
-    style.textContent = ':host { display: inline-block; width: -webkit-fill-available; overflow: hidden; text-align: initial; }' +
+        style.textContent = ':host { display: inline-block; width: -webkit-fill-available; overflow: hidden; text-align: initial; }' +
             ':host([direction="up"]), :host([direction="down"]) { height: 200px; }';
         shadow.appendChild(style);
 
@@ -136,12 +106,12 @@ installClass('HTMLMarqueeElement', function(HTMLMarqueeElementPrototype) {
         this.mover_ = mover;
         this.player_ = null;
         this.continueCallback_ = null;
+    };
 
+    HTMLMarqueeElementPrototype.attachedCallback = function() {
         for (var i = 0; i < kPresentationalAttributes.length; ++i)
             this.initializeAttribute_(kPresentationalAttributes[i]);
-    };
 
-    HTMLMarqueeElementPrototype.attachedCallback = function() {
         this.start();
     };
 
@@ -172,9 +142,11 @@ installClass('HTMLMarqueeElement', function(HTMLMarqueeElementPrototype) {
             break;
         case 'behavior':
         case 'direction':
-            this.stop();
-            this.loopCount_ = 0;
-            this.start();
+        case 'loop':
+        case 'scrollAmount':
+        case 'scrollDelay':
+        case 'trueSpeed':
+            // FIXME: Not implemented.

[haraken, 2014/09/26 07:53:06]

This is the only regression this CL may cause. This CL doesn't support a case
where the animation attributes are changed dynamically.

What we need to do here is to pause the animation, reconfigure the animation
attributes, and then restart the animation. However, there is no easy way to do
that. For example, when scrollAmount is changed, we need to update
AnimationNode.duration of the ongoing animation. However, AnimationNode.duration
is a readonly attribute.

I'm not sure if not supporting the attribute update causes any real issue (I
hope not). I think we can land this and see how it goes.

             break;
         }
     };
@@ -231,7 +203,7 @@ installClass('HTMLMarqueeElement', function(HTMLMarqueeElementPrototype) {
         },
     });
 
-    HTMLMarqueeElementPrototype.getGetMetrics_ = function() {
+     HTMLMarqueeElementPrototype.getGetMetrics_ = function() {
         this.mover_.style.width = '-webkit-max-content';
 
         var moverStyle = getComputedStyle(this.mover_);
@@ -265,7 +237,7 @@ installClass('HTMLMarqueeElement', function(HTMLMarqueeElementPrototype) {
             case kDirectionLeft:
             default:
                 parameters.transformBegin = 'translateX(' + metrics.marqueeWidth + 'px)';
-                parameters.transformEnd = 'translateX(-100%)';
+                parameters.transformEnd = 'translateX(-' + metrics.contentWidth + 'px)';
                 parameters.distance = totalWidth;
                 break;
             case kDirectionRight:
@@ -347,6 +319,13 @@ installClass('HTMLMarqueeElement', function(HTMLMarqueeElementPrototype) {
         return parameters
     };
 
+    function animationFinished_(event) {
+        var player = event.target;
+        var marquee = player.marquee_;
+        marquee.loopCount_++;
+        marquee.start();
+    };
+
     HTMLMarqueeElementPrototype.shouldContinue_ = function() {
         var loop = this.loop;
 
@@ -361,66 +340,49 @@ installClass('HTMLMarqueeElement', function(HTMLMarqueeElementPrototype) {
 
     HTMLMarqueeElementPrototype.continue_ = function() {
         if (!this.shouldContinue_()) {
-            this.player_ = null;
-            this.dispatchEvent(new Event('finish', false, true));
             return;
         }
 
-        var parameters = this.getAnimationParameters_();
+        if (this.player_ && this.player_.playState === "paused") {
+            this.player_.play();
+            return;
+        }
 
+        var parameters = this.getAnimationParameters_();
+        var scrollDelay = this.scrollDelay;
+        if (scrollDelay < kMinimumScrollDelayMS && !this.trueSpeed)
+            scrollDelay = kDefaultScrollDelayMS;
         var player = this.mover_.animate([
             { transform: parameters.transformBegin },
             { transform: parameters.transformEnd },
         ], {
-            duration: parameters.distance * this.scrollDelay / this.scrollAmount,
+            duration: parameters.distance * scrollDelay / this.scrollAmount,
             fill: 'forwards',
         });
+        player.marquee_ = this;
+        player.onfinish = animationFinished_;
 
         this.player_ = player;
-
-        player.addEventListener('finish', function() {
-            if (player != this.player_)
-                return;
-            ++this.loopCount_;
-            this.continue_();
-            if (this.player_ && this.behavior === kBehaviorAlternate)
-                this.dispatchEvent(new Event('bounce', false, true));
-        }.bind(this));
     };
 
     HTMLMarqueeElementPrototype.start = function() {
-        if (this.continueCallback_ || this.player_)
+        if (this.continueCallback_)
             return;
         this.continueCallback_ = requestAnimationFrame(function() {
             this.continueCallback_ = null;
             this.continue_();
         }.bind(this));
-        this.dispatchEvent(new Event('start', false, true));
     };
 
     HTMLMarqueeElementPrototype.stop = function() {
-        if (!this.continueCallback_ && !this.player_)
-            return;
-
         if (this.continueCallback_) {
             cancelAnimationFrame(this.continueCallback_);
             this.continueCallback_ = null;
             return;
         }
 
-        // FIXME: Rather than canceling the animation, we really should just
-        // pause the animation, but the pause function is still flagged as
-        // experimental.
         if (this.player_) {
-            var player = this.player_;
-            this.player_ = null;
-            player.cancel();
+            this.player_.pause();
         }
     };
-
-    // FIXME: We have to inject this HTMLMarqueeElement as a custom element in order to make
-    // createdCallback, attachedCallback, detachedCallback and attributeChangedCallback workable.
-    // document.registerElement('i-marquee', {
-    //    prototype: HTMLMarqueeElementPrototype,
-    // });
 });