Index: third_party/WebKit/Source/core/html/HTMLMarqueeElement.js |
diff --git a/third_party/WebKit/Source/core/html/HTMLMarqueeElement.js b/third_party/WebKit/Source/core/html/HTMLMarqueeElement.js |
deleted file mode 100644 |
index fbaff76581a9593f39838fe25f376c1723478133..0000000000000000000000000000000000000000 |
--- a/third_party/WebKit/Source/core/html/HTMLMarqueeElement.js |
+++ /dev/null |
@@ -1,402 +0,0 @@ |
-// 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'; |
- |
-privateScriptController.installClass('HTMLMarqueeElement', function(HTMLMarqueeElementPrototype) { |
- |
- 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', |
- ]; |
- |
- function convertHTMLLengthToCSSLength(value) { |
- var match = value.match(/^\s*([\d.]+)(%)?\s*/); |
- if (match) |
- return match[2] === '%' ? match[1] + '%' : match[1] + 'px'; |
- return null; |
- } |
- |
- // FIXME: Consider moving these utility functions to PrivateScriptRunner.js. |
- var kInt32Max = Math.pow(2, 31); |
- |
- function convertToLong(n) { |
- // Using parseInt() is wrong but this aligns with the existing behavior of StringImpl::toInt(). |
- // FIXME: Implement a correct algorithm of the Web IDL value conversion. |
- var value = parseInt(n); |
- if (!isNaN(value) && -kInt32Max <= value && value < kInt32Max) |
- return value; |
- return NaN; |
- } |
- |
- 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) { |
- Object.defineProperty(prototype, propertyName, { |
- get: function() { |
- return this.getAttribute(attributeName); |
- }, |
- set: function(value) { |
- if (value) |
- this.setAttribute(attributeName, ''); |
- else |
- this.removeAttribute(attributeName); |
- }, |
- }); |
- } |
- |
- 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'); |
- |
- 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; white-space: nowrap; }' |
- + ':host([direction="up"]), :host([direction="down"]) { overflow: initial; overflow-y: hidden; white-space: initial; }'; |
- 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; |
- }; |
- |
- 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': |
- this.style.backgroundColor = newValue; |
- break; |
- case 'height': |
- this.style.height = convertHTMLLengthToCSSLength(newValue); |
- break; |
- case 'hspace': |
- var margin = convertHTMLLengthToCSSLength(newValue); |
- this.style.marginLeft = margin; |
- this.style.marginRight = margin; |
- break; |
- 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. |
- break; |
- } |
- }; |
- |
- HTMLMarqueeElementPrototype.initializeAttribute_ = function(name) { |
- var value = this.getAttribute(name); |
- if (value === null) |
- return; |
- this.attributeChangedCallback(name, null, value); |
- }; |
- |
- Object.defineProperty(HTMLMarqueeElementPrototype, 'scrollAmount', { |
- get: function() { |
- var value = this.getAttribute('scrollamount'); |
- var scrollAmount = convertToLong(value); |
- if (isNaN(scrollAmount) || scrollAmount < 0) |
- return kDefaultScrollAmount; |
- return scrollAmount; |
- }, |
- set: function(value) { |
- if (value < 0) |
- privateScriptController.throwException(privateScriptController.DOMException.IndexSizeError, "The provided value (" + value + ") is negative."); |
- this.setAttribute('scrollamount', value); |
- }, |
- }); |
- |
- Object.defineProperty(HTMLMarqueeElementPrototype, 'scrollDelay', { |
- get: function() { |
- var value = this.getAttribute('scrolldelay'); |
- var scrollDelay = convertToLong(value); |
- if (isNaN(scrollDelay) || scrollDelay < 0) |
- return kDefaultScrollDelayMS; |
- return scrollDelay; |
- }, |
- set: function(value) { |
- if (value < 0) |
- privateScriptController.throwException(privateScriptController.DOMException.IndexSizeError, "The provided value (" + value + ") is negative."); |
- this.setAttribute('scrolldelay', value); |
- }, |
- }); |
- |
- Object.defineProperty(HTMLMarqueeElementPrototype, 'loop', { |
- get: function() { |
- var value = this.getAttribute('loop'); |
- var loop = convertToLong(value); |
- if (isNaN(loop) || loop <= 0) |
- return kDefaultLoopLimit; |
- return loop; |
- }, |
- set: function(value) { |
- if (value <= 0 && value != -1) |
- privateScriptController.throwException(privateScriptController.DOMException.IndexSizeError, "The provided value (" + value + ") is neither positive nor -1."); |
- this.setAttribute('loop', value); |
- }, |
- }); |
- |
- HTMLMarqueeElementPrototype.getGetMetrics_ = function() { |
- var direction = this.direction.toLowerCase(); |
- if (direction === 'up' || 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); |
- |
- if (direction === 'up' || 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 = {}; |
- var direction = this.direction.toLowerCase(); |
- |
- switch (this.behavior) { |
- case kBehaviorScroll: |
- default: |
- switch (direction) { |
- case kDirectionLeft: |
- default: |
- parameters.transformBegin = 'translateX(' + metrics.marqueeWidth + 'px)'; |
- 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)'; |
- parameters.distance = totalHeight; |
- break; |
- case kDirectionDown: |
- parameters.transformBegin = 'translateY(-' + metrics.contentHeight + 'px)'; |
- parameters.transformEnd = 'translateY(' + metrics.marqueeHeight + 'px)'; |
- parameters.distance = totalHeight; |
- break; |
- } |
- break; |
- case kBehaviorAlternate: |
- switch (direction) { |
- case kDirectionLeft: |
- default: |
- parameters.transformBegin = 'translateX(' + (innerWidth >= 0 ? innerWidth : 0) + 'px)'; |
- parameters.transformEnd = 'translateX(' + (innerWidth >= 0 ? 0 : innerWidth) + 'px)'; |
- parameters.distance = Math.abs(innerWidth); |
- break; |
- case kDirectionRight: |
- parameters.transformBegin = 'translateX(' + (innerWidth >= 0 ? 0 : innerWidth) + 'px)'; |
- parameters.transformEnd = 'translateX(' + (innerWidth >= 0 ? innerWidth : 0) + 'px)'; |
- parameters.distance = Math.abs(innerWidth); |
- break; |
- case kDirectionUp: |
- parameters.transformBegin = 'translateY(' + (innerHeight >= 0 ? innerHeight : 0) + 'px)'; |
- parameters.transformEnd = 'translateY(' + (innerHeight >= 0 ? 0 : innerHeight) + 'px)'; |
- parameters.distance = Math.abs(innerHeight); |
- break; |
- case kDirectionDown: |
- parameters.transformBegin = 'translateY(' + (innerHeight >= 0 ? 0 : innerHeight) + 'px)'; |
- parameters.transformEnd = 'translateY(' + (innerHeight >= 0 ? innerHeight : 0) + 'px)'; |
- parameters.distance = Math.abs(innerHeight); |
- break; |
- } |
- |
- if (this.loopCount_ % 2) { |
- var transform = parameters.transformBegin; |
- parameters.transformBegin = parameters.transformEnd; |
- parameters.transformEnd = transform; |
- } |
- |
- break; |
- case kBehaviorSlide: |
- switch (direction) { |
- case kDirectionLeft: |
- default: |
- parameters.transformBegin = 'translateX(' + metrics.marqueeWidth + 'px)'; |
- parameters.transformEnd = 'translateX(0)'; |
- parameters.distance = metrics.marqueeWidth; |
- break; |
- case kDirectionRight: |
- parameters.transformBegin = 'translateX(-' + metrics.contentWidth + 'px)'; |
- parameters.transformEnd = 'translateX(' + innerWidth + 'px)'; |
- parameters.distance = metrics.marqueeWidth; |
- break; |
- case kDirectionUp: |
- parameters.transformBegin = 'translateY(' + metrics.marqueeHeight + 'px)'; |
- parameters.transformEnd = 'translateY(0)'; |
- parameters.distance = metrics.marqueeHeight; |
- break; |
- case kDirectionDown: |
- parameters.transformBegin = 'translateY(-' + metrics.contentHeight + 'px)'; |
- 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_()) { |
- 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 duration = 0; |
- if (this.scrollAmount && !isNaN(parameters.distance)) |
- duration = parameters.distance * scrollDelay / this.scrollAmount; |
- var player = this.mover_.animate([ |
- { transform: parameters.transformBegin }, |
- { transform: parameters.transformEnd }, |
- ], { |
- duration, |
- fill: 'forwards', |
- }); |
- player.marquee_ = this; |
- player.onfinish = animationFinished_; |
- |
- this.player_ = player; |
- }; |
- |
- HTMLMarqueeElementPrototype.start = function() { |
- // User script must not run in a SVGImage, but it's okay to run user |
- // agent's script such as <marquee>. However, a function scheduled with |
- // requestAnimationFrame is indistinguishable if it's scheduled by user |
- // script or user agent's script. Thus we disallow scheduling a task |
- // in svg (not limited to SVGImage) entirely. |
- if (document.rootElement instanceof SVGElement) |
- return; |
- |
- if (this.continueCallback_) |
- return; |
- this.continueCallback_ = requestAnimationFrame(function() { |
- this.continueCallback_ = null; |
- this.continue_(); |
- }.bind(this)); |
- }; |
- |
- HTMLMarqueeElementPrototype.stop = function() { |
- if (this.continueCallback_) { |
- cancelAnimationFrame(this.continueCallback_); |
- this.continueCallback_ = null; |
- return; |
- } |
- |
- if (this.player_) { |
- this.player_.pause(); |
- } |
- }; |
-}); |