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 b18756327e29177580caa63a03ee0f0a09b72ccc..7f4737d33cb24f650c6da6c21db5f62ce34e54be 100644
--- a/Source/core/html/HTMLMarqueeElement.js
+++ b/Source/core/html/HTMLMarqueeElement.js
@@ -4,7 +4,7 @@
 
 'use strict';
 
-installClass('HTMLMarqueeElement', function(global) {
+installClass('HTMLMarqueeElement', function(global, HTMLMarqueeElementPrototype) {
 
     var kDefaultScrollAmount = 6;
     var kDefaultScrollDelayMS = 85;
@@ -81,34 +81,6 @@ installClass('HTMLMarqueeElement', function(global) {
         });
     }
 
-    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;
-            },
-        });
-    }
-
-    var HTMLMarqueeElementPrototype = Object.create(HTMLElement.prototype);
-
     reflectAttribute(HTMLMarqueeElementPrototype, 'behavior', 'behavior');
     reflectAttribute(HTMLMarqueeElementPrototype, 'bgcolor', 'bgColor');
     reflectAttribute(HTMLMarqueeElementPrototype, 'direction', 'direction');
@@ -118,14 +90,10 @@ installClass('HTMLMarqueeElement', function(global) {
     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 = global.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);
 
@@ -138,12 +106,12 @@ installClass('HTMLMarqueeElement', function(global) {
         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();
     };
 
@@ -174,9 +142,11 @@ installClass('HTMLMarqueeElement', function(global) {
             break;
         case 'behavior':
         case 'direction':
-            this.stop();
-            this.loopCount_ = 0;
-            this.start();
+        case 'loop':
+        case 'scrollAmount':
+        case 'scrollDelay':
+        case 'trueSpeed':
+            // FIXME: Not implemented.
             break;
         }
     };
@@ -233,7 +203,7 @@ installClass('HTMLMarqueeElement', function(global) {
         },
     });
 
-    HTMLMarqueeElementPrototype.getGetMetrics_ = function() {
+     HTMLMarqueeElementPrototype.getGetMetrics_ = function() {
         this.mover_.style.width = '-webkit-max-content';
 
         var moverStyle = global.getComputedStyle(this.mover_);
@@ -267,7 +237,7 @@ installClass('HTMLMarqueeElement', function(global) {
             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:
@@ -349,6 +319,13 @@ installClass('HTMLMarqueeElement', function(global) {
         return parameters
     };
 
+    function animationFinished_(event) {
+        var player = event.target;
+        var marquee = player.marquee_;
+        marquee.loopCount_++;
+        marquee.start();
+    };
+
     HTMLMarqueeElementPrototype.shouldContinue_ = function() {
         var loop = this.loop;
 
@@ -363,68 +340,51 @@ installClass('HTMLMarqueeElement', function(global) {
 
     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_.paused) {
+            // FIXME: This needs the WebAnimationsAPI flag enabled.
+            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_ = global.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_) {
             global.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();
+            // FIXME: This needs the WebAnimationsAPI flag enabled.
+            this.player_.pause();
         }
     };
-
-    // FIXME: We have to inject this HTMLMarqueeElement as a custom element in order to make
-    // createdCallback, attachedCallback, detachedCallback and attributeChangedCallback workable.
-    // global.document.registerElement('i-marquee', {
-    //    prototype: HTMLMarqueeElementPrototype,
-    // });
-
-    return HTMLMarqueeElementPrototype;
 });