Implement reflected attributes of HTMLMarqueeElement in Blink-in-JS

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';
 
-(function(global) {
+installClass('HTMLMarqueeElement', function(global) {
 
     var kDefaultScrollAmount = 6;
     var kDefaultScrollDelayMS = 85;
     var kMinimumScrollDelayMS = 60;
 
     var kDefaultLoopLimit = -1;
 
     var kBehaviorScroll = 'scroll';
     var kBehaviorSlide = 'slide';
     var kBehaviorAlternate = 'alternate';
 
     var kDirectionLeft = 'left';
     var kDirectionRight = 'right';
     var kDirectionUp = 'up';
     var kDirectionDown = 'down';
 
     var kPresentationalAttributes = [
         'bgcolor',
         'height',
         'hspace',
         'vspace',
         'width',
     ];
 
     var pixelLengthRegexp = /^\s*([\d.]+)\s*$/;
     var percentageLengthRegexp = /^\s*([\d.]+)\s*%\s*$/;
 
-    function convertHTMLLengthToCSSLength(value)
-    {
+    function convertHTMLLengthToCSSLength(value) {
         var pixelMatch = value.match(pixelLengthRegexp);
         if (pixelMatch)
             return pixelMatch[1] + 'px';
         var percentageMatch = value.match(percentageLengthRegexp);
         if (percentageMatch)
             return percentageMatch[1] + '%';
         return null;
     }
 
-    function reflectAttribute(prototype, attributeName, propertyName)
-    {
+    // FIXME: Consider moving these utility functions to PrivateScriptUtils.js.
+    function reflectAttribute(prototype, attributeName, propertyName) {
         Object.defineProperty(prototype, propertyName, {
             get: function() {
                 return this.getAttribute(attributeName) || '';
             },
             set: function(value) {
                 this.setAttribute(attributeName, value);
             },
+            configurable: true,
+            enumerable: true,
         });
     }
 
-    function reflectBooleanAttribute(prototype, attributeName, propertyName)
-    {
+    function reflectBooleanAttribute(prototype, attributeName, propertyName) {
         Object.defineProperty(prototype, propertyName, {
             get: function() {
                 return this.hasAttribute(attributeName);
             },
             set: function(value) {
-                this.setAttribute(attributeName, value ? '' : null);
+                if (value.valueOf() === false)

[arv (Not doing code reviews), 2014/07/14 14:49:09]

This will fail when set to null or undefined.

The boolean reflect is just falsey so this should be:

if (!value) {

(Using .valueOf() is most likely a bug. Real code hardly ever uses it.)

+                    this.removeAttribute(attributeName);
+                else
+                    this.setAttribute(attributeName, value ? '' : null);

[arv (Not doing code reviews), 2014/07/14 14:49:09]

You already handled the the falsey case.

this.setAttribute(attributeName, '');

             },
         });
     }
 
-    function defineInlineEventHandler(prototype, eventName)
-    {
+    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) {
@@ skipping 308 matching lines @@
         // 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();
         }
     };
 
-    global.document.registerElement('i-marquee', {
-        prototype: HTMLMarqueeElementPrototype,
-    });
+    // 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,
+    // });
 
-})(this);
+    return HTMLMarqueeElementPrototype;
+});