Implement HTMLMarqueeElement's animation in private scripts

Source/core/html/HTMLMarqueeElement.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 'use strict';
 
 installClass('HTMLMarqueeElement', function(HTMLMarqueeElementPrototype) {
 
     var kDefaultScrollAmount = 6;
     var kDefaultScrollDelayMS = 85;
@@ skipping 52 matching lines @@
                 this.setAttribute(attributeName, value);
             },
             configurable: true,
             enumerable: true,
         });
     }
 
     function reflectBooleanAttribute(prototype, attributeName, propertyName) {
         Object.defineProperty(prototype, propertyName, {
             get: function() {
-                return this.hasAttribute(attributeName);
+                return this.getAttribute(attributeName);
             },
             set: function(value) {
                 if (value)
                     this.setAttribute(attributeName, '');
                 else
                     this.removeAttribute(attributeName);
             },
         });
     }
 
-    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');
     reflectAttribute(HTMLMarqueeElementPrototype, 'height', 'height');
     reflectAttribute(HTMLMarqueeElementPrototype, 'hspace', 'hspace');
     reflectAttribute(HTMLMarqueeElementPrototype, 'vspace', 'vspace');
     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; }' +
-            ':host([direction="up"]), :host([direction="down"]) { height: 200px; }';
+        style.textContent = ':host { display: inline-block; width: -webkit-fill-available; overflow: hidden; text-align: initial; }'
+            + ':host([direction="up"]), :host([direction="down"]) { overflow: initial; overflow-y: hidden; }';
         shadow.appendChild(style);
 
         var mover = document.createElement('div');
         shadow.appendChild(mover);
 
         mover.appendChild(document.createElement('content'));
 
         this.loopCount_ = 0;
         this.mover_ = mover;
         this.player_ = null;
         this.continueCallback_ = null;
-
-        for (var i = 0; i < kPresentationalAttributes.length; ++i)
-            this.initializeAttribute_(kPresentationalAttributes[i]);
     };
 
     HTMLMarqueeElementPrototype.attachedCallback = function() {
+        for (var i = 0; i < kPresentationalAttributes.length; ++i) {
+            this.initializeAttribute_(kPresentationalAttributes[i]);
+        }
+
         this.start();
     };
 
     HTMLMarqueeElementPrototype.detachedCallback = function() {
         this.stop();
     };
 
     HTMLMarqueeElementPrototype.attributeChangedCallback = function(name, oldValue, newValue) {
         switch (name) {
         case 'bgcolor':
@@ skipping 10 matching lines @@
         case 'vspace':
             var margin = convertHTMLLengthToCSSLength(newValue);
             this.style.marginTop = margin;
             this.style.marginBottom = margin;
             break;
         case 'width':
             this.style.width = convertHTMLLengthToCSSLength(newValue);
             break;
         case 'behavior':
         case 'direction':
+        case 'loop':
+        case 'scrollAmount':
+        case 'scrollDelay':
+        case 'trueSpeed':
+            // FIXME: Not implemented.
             this.stop();
-            this.loopCount_ = 0;
             this.start();
             break;
         }
     };
 
     HTMLMarqueeElementPrototype.initializeAttribute_ = function(name) {
         var value = this.getAttribute(name);
         if (value === null)
             return;
         this.attributeChangedCallback(name, null, value);
@@ skipping 38 matching lines @@
             return loop;
         },
         set: function(value) {
             if (value <= 0 && value != -1)
                 throwException(PrivateScriptDOMException.IndexSizeError, "The provided value (" + value + ") is neither positive nor -1.");
             this.setAttribute('loop', value);
         },
     });
 
     HTMLMarqueeElementPrototype.getGetMetrics_ = function() {
-        this.mover_.style.width = '-webkit-max-content';
+        if (this.direction === 'up' || this.direction === 'down')
+            this.mover_.style.height = '-webkit-max-content';
+        else
+            this.mover_.style.width = '-webkit-max-content';
 
         var moverStyle = getComputedStyle(this.mover_);
         var marqueeStyle = getComputedStyle(this);
 
         var metrics = {};
         metrics.contentWidth = parseInt(moverStyle.width);
         metrics.contentHeight = parseInt(moverStyle.height);
         metrics.marqueeWidth = parseInt(marqueeStyle.width);
         metrics.marqueeHeight = parseInt(marqueeStyle.height);
 
-        this.mover_.style.width = '';
+        if (this.direction === 'up' || this.direction === 'down')
+            this.mover_.style.height = '';
+        else
+            this.mover_.style.width = '';
         return metrics;
     };
 
     HTMLMarqueeElementPrototype.getAnimationParameters_ = function() {
         var metrics = this.getGetMetrics_();
 
         var totalWidth = metrics.marqueeWidth + metrics.contentWidth;
         var totalHeight = metrics.marqueeHeight + metrics.contentHeight;
 
         var innerWidth = metrics.marqueeWidth - metrics.contentWidth;
         var innerHeight = metrics.marqueeHeight - metrics.contentHeight;
 
         var parameters = {};
 
         switch (this.behavior) {
         case kBehaviorScroll:
         default:
             switch (this.direction) {
             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:
                 parameters.transformBegin = 'translateX(-' + metrics.contentWidth + 'px)';
                 parameters.transformEnd = 'translateX(' + metrics.marqueeWidth + 'px)';
                 parameters.distance = totalWidth;
                 break;
             case kDirectionUp:
                 parameters.transformBegin = 'translateY(' + metrics.marqueeHeight + 'px)';
                 parameters.transformEnd = 'translateY(-' + metrics.contentHeight + 'px)';
@@ skipping 61 matching lines @@
                 parameters.transformEnd = 'translateY(' + innerHeight + 'px)';
                 parameters.distance = metrics.marqueeHeight;
                 break;
             }
             break;
         }
 
         return parameters
     };
 
+    function animationFinished_(event) {
+        var player = event.target;
+        var marquee = player.marquee_;
+        marquee.loopCount_++;
+        marquee.start();
+    };
+
     HTMLMarqueeElementPrototype.shouldContinue_ = function() {
         var loop = this.loop;
 
         // By default, slide loops only once.
         if (loop <= 0 && this.behavior === kBehaviorSlide)
             loop = 1;
 
         if (loop <= 0)
             return true;
         return this.loopCount_ < loop;
     };
 
     HTMLMarqueeElementPrototype.continue_ = function() {
         if (!this.shouldContinue_()) {
-            this.player_ = null;
-            this.dispatchEvent(new Event('finish', false, true));
+            return;
+        }
+
+        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: this.scrollAmount == 0 ? 0 : 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,
-    // });
 });