Move <marquee> implementation to HTMLMarqueeElement.cpp

third_party/WebKit/Source/core/html/HTMLMarqueeElement.cpp

 /*
  * Copyright (C) 1999 Lars Knoll (knoll@kde.org)
  *           (C) 1999 Antti Koivisto (koivisto@kde.org)
  * Copyright (C) 2003, 2007, 2010 Apple Inc. All rights reserved.
  *
  * This library is free software; you can redistribute it and/or
  * modify it under the terms of the GNU Library General Public
  * License as published by the Free Software Foundation; either
  * version 2 of the License, or (at your option) any later version.
  *
  * This library is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  * Library General Public License for more details.
  *
  * You should have received a copy of the GNU Library General Public License
  * along with this library; see the file COPYING.LIB.  If not, write to
  * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
  * Boston, MA 02110-1301, USA.
  *
  */
 
 #include "core/html/HTMLMarqueeElement.h"
 
-#include "bindings/core/v8/PrivateScriptRunner.h"
+#include "bindings/core/v8/ExceptionStatePlaceholder.h"
 #include "bindings/core/v8/V8HTMLMarqueeElement.h"
+#include "core/CSSPropertyNames.h"
 #include "core/HTMLNames.h"
+#include "core/animation/DocumentTimeline.h"
+#include "core/animation/KeyframeEffect.h"
+#include "core/animation/KeyframeEffectModel.h"
+#include "core/animation/KeyframeEffectOptions.h"
+#include "core/animation/StringKeyframe.h"
+#include "core/animation/TimingInput.h"
+#include "core/css/CSSStyleDeclaration.h"
 #include "core/dom/Document.h"
+#include "core/dom/shadow/ShadowRoot.h"
+#include "core/frame/LocalDOMWindow.h"
 #include "core/frame/UseCounter.h"
-#include "platform/ScriptForbiddenScope.h"
+#include "core/html/HTMLDimension.h"
+#include <cstdlib>
 
 namespace blink {
 
+namespace {
+
+String convertHTMLLengthToCSSLength(const String& htmlLength) {
+  HTMLDimension dimension;
+  parseDimensionValue(htmlLength, dimension);
+  if (dimension.isRelative())
+    return String();
+  CSSPrimitiveValue* cssValue = CSSPrimitiveValue::create(
+      dimension.value(), dimension.isPercentage()
+                             ? CSSPrimitiveValue::UnitType::Percentage
+                             : CSSPrimitiveValue::UnitType::Pixels);
+  return cssValue->customCSSText();
+}
+
+}  // namespace
+
 inline HTMLMarqueeElement::HTMLMarqueeElement(Document& document)
     : HTMLElement(HTMLNames::marqueeTag, document) {
-  if (document.contextDocument()) {
-    ScriptForbiddenScope::AllowUserAgentScript script;
-    v8::Local<v8::Value> classObject =
-        PrivateScriptRunner::installClassIfNeeded(&document,
-                                                  "HTMLMarqueeElement");
-    RELEASE_ASSERT(!classObject.IsEmpty());
-  }
   UseCounter::count(document, UseCounter::HTMLMarqueeElement);
+  ShadowRoot* shadow =
+      createShadowRootInternal(ShadowRootType::V0, ASSERT_NO_EXCEPTION);

[jbroman, 2016/12/01 22:22:52]

Ultimately this should probably be a user agent shadow root, in which case the
usual pattern is to call ensureUserAgentShadowRoot in/after the constructor, and
then do the setup of the shadow root in an override of
didAddUserAgentShadowRoot.

To me this is essentially equivalent to the public APIs (except that it creates
a UA root, which we probably should have anyhow -- there's a bug to that
effect). I'd be OK with this in a followup.

[adithyas, 2016/12/02 19:29:49]

Yup, I'd prefer to do this is in a follow-up, especially if it's fixing a bug. I
did however want to make sure that calling createShadowRootInternal matches
current behaviour. I could not call createShadowRoot() directly as it requires a
ScriptState object which I don't have access to.

+  Element* style = document.createElement("style");
+  style->setTextContent(
+      ":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; }"
+      ":host > div { will-change: transform; }");

[adithyas, 2016/12/01 20:30:48]

"will-change: transform" is added in to force an additional layer for the div to
be created. The layers created in
fast/block/float/marquee-shrink-to-avoid-float.html will not match with the
expected result without this (the div gets absorbed into the marquee's layer).

[jbroman, 2016/12/01 22:22:52]

To elaborate slightly, this layer gets created anyhow when the animation begins.
We believe the issue is a timing issue with when that style actually applies.
It's simpler to have the creation of a paint layer be stable, anyhow.

+  shadow->appendChild(style);
+
+  Element* mover = document.createElement("div");
+  shadow->appendChild(mover);
+
+  mover->appendChild(document.createElement("content"));
+  m_mover = mover;
 }
 
 HTMLMarqueeElement* HTMLMarqueeElement::create(Document& document) {
-  HTMLMarqueeElement* marqueeElement = new HTMLMarqueeElement(document);
-  V8HTMLMarqueeElement::PrivateScript::createdCallbackMethod(document.frame(),
-                                                             marqueeElement);
-  return marqueeElement;
+  return new HTMLMarqueeElement(document);
 }
 
 void HTMLMarqueeElement::attributeChanged(const QualifiedName& name,
                                           const AtomicString& oldValue,
                                           const AtomicString& newValue,
                                           AttributeModificationReason reason) {
   HTMLElement::attributeChanged(name, oldValue, newValue, reason);
-  V8HTMLMarqueeElement::PrivateScript::attributeChangedCallbackMethod(
-      document().frame(), this, name.toString(), oldValue, newValue);
+  attributeChangedCallback(name, newValue);
 }
 
 Node::InsertionNotificationRequest HTMLMarqueeElement::insertedInto(
     ContainerNode* insertionPoint) {
   HTMLElement::insertedInto(insertionPoint);
+
   if (isConnected()) {
-    V8HTMLMarqueeElement::PrivateScript::attachedCallbackMethod(
-        document().frame(), this);
+    std::vector<QualifiedName> presentationalAttributes = {

[jbroman, 2016/12/01 22:22:52]

as a rule we prefer WTF::Vector to std::vector inside Blink. In this particular
case, an array of const pointers will do:

static const QualifiedName* presentationalAttributes[] = {
  &HTMLNames::bgcolorAttr, &HTMLNames::heightAttr, ...
};
for (const auto* attr : presentationalAttributes) {
  initializeAttribute(*attr);
}

[adithyas, 2016/12/02 19:29:49]

Fixed.

+        HTMLNames::bgcolorAttr, HTMLNames::heightAttr, HTMLNames::hspaceAttr,
+        HTMLNames::vspaceAttr, HTMLNames::widthAttr};
+    for (auto attr : presentationalAttributes) {
+      initializeAttribute(attr);
+    }
+
+    this->start();

[jbroman, 2016/12/01 22:22:52]

nit: in C++, prefer "start();" to "this->start();" (and similar cases elsewhere,
except where it's not legal due to variable name collision)

[adithyas, 2016/12/02 19:29:49]

Fixed, here and everywhere else.

   }
   return InsertionDone;
 }
 
 void HTMLMarqueeElement::removedFrom(ContainerNode* insertionPoint) {
   HTMLElement::removedFrom(insertionPoint);
   if (insertionPoint->isConnected()) {
-    V8HTMLMarqueeElement::PrivateScript::detachedCallbackMethod(
-        insertionPoint->document().frame(), this);
+    this->stop();
   }
 }
 
 bool HTMLMarqueeElement::isHorizontal() const {
-  AtomicString direction = getAttribute(HTMLNames::directionAttr);
-  return direction != "down" && direction != "up";
+  Direction direction = this->direction();
+  return direction != Up && direction != Down;
+}
+
+int HTMLMarqueeElement::scrollAmount() {
+  bool ok;
+  int scrollAmount = getAttribute(HTMLNames::scrollamountAttr).toInt(&ok);
+  if (!ok || scrollAmount < 0) {

[jbroman, 2016/12/01 22:22:52]

not-really-a-nit: Here and elsewhere, you're free to omit the braces around
one-line if statements. Up to you.

[adithyas, 2016/12/02 19:29:49]

Removed the braces everywhere I didn't need them. Sorry, I'm just very
inconsistent with these :P

+    return kDefaultScrollAmount;
+  }
+  return scrollAmount;
+}
+
+void HTMLMarqueeElement::setScrollAmount(int value,
+                                         ExceptionState& exceptionState) {
+  if (value < 0) {
+    exceptionState.throwDOMException(

[jbroman, 2016/12/01 22:22:52]

Here and elsewhere: ExceptionState::throwDOMException prepares to throw an
exception, but it doesn't actually stop execution of the current one (we don't
have real exceptions in C++). You should return after each of these, if you
don't want the rest of the function to execute.

[adithyas, 2016/12/02 19:29:49]

Forgot about that! Fixed.

+        IndexSizeError,
+        "The provided value (" + String::number(value) + ") is negative.");
+  }
+  setIntegralAttribute(HTMLNames::scrollamountAttr, value);
+}
+
+int HTMLMarqueeElement::scrollDelay() {
+  bool ok;
+  int scrollDelay = getAttribute(HTMLNames::scrolldelayAttr).toInt(&ok);
+  if (!ok || scrollDelay < 0) {
+    return kDefaultScrollDelayMS;
+  }
+  return scrollDelay;
+}
+
+void HTMLMarqueeElement::setScrollDelay(int value,
+                                        ExceptionState& exceptionState) {
+  if (value < 0) {
+    exceptionState.throwDOMException(
+        IndexSizeError,
+        "The provided value (" + String::number(value) + ") is negative.");
+  }
+  setIntegralAttribute(HTMLNames::scrolldelayAttr, value);
+}
+
+int HTMLMarqueeElement::loop() {
+  bool ok;
+  int loop = getAttribute(HTMLNames::loopAttr).toInt(&ok);
+  if (!ok || loop <= 0) {
+    return kDefaultLoopLimit;
+  }
+  return loop;
+}
+
+void HTMLMarqueeElement::setLoop(int value, ExceptionState& exceptionState) {
+  if (value <= 0 && value != -1) {
+    exceptionState.throwDOMException(
+        IndexSizeError, "The provided value (" + String::number(value) +
+                            ") is neither positive nor -1.");
+  }
+  setIntegralAttribute(HTMLNames::loopAttr, value);
+}
+
+void HTMLMarqueeElement::start() {
+  // 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().hasSVGRootNode())

[jbroman, 2016/12/01 22:22:52]

I wonder if this still applies. Keeping it for now would be reasonable (besides,
I suspect html:marquee tags in svg are essentially nonexistent), but this no
longer runs script, so if that's the constraint this might not be necessary
anymore.

[adithyas, 2016/12/02 19:29:49]

Removed it, it's not necessary anymore.

+    return;
+
+  if (m_continueCallbackRequestId) {
+    return;
+  }
+  RequestAnimationFrameCallback* callback =
+      new RequestAnimationFrameCallback(this);
+  m_continueCallbackRequestId = document().requestAnimationFrame(callback);
+}
+
+void HTMLMarqueeElement::stop() {
+  if (m_continueCallbackRequestId) {
+    document().cancelAnimationFrame(m_continueCallbackRequestId);
+    m_continueCallbackRequestId = 0;
+    return;
+  }
+
+  if (m_player) {
+    m_player->pause();
+  }
+}
+
+void HTMLMarqueeElement::initializeAttribute(const QualifiedName& attr) {
+  const AtomicString& value = getAttribute(attr);
+  if (value.isNull())
+    return;
+  attributeChangedCallback(attr, value);
+}
+
+void HTMLMarqueeElement::attributeChangedCallback(const QualifiedName& attr,
+                                                  const String& newValue) {
+  if (attr == HTMLNames::bgcolorAttr) {
+    style()->setProperty("bgcolor", newValue, String(), ASSERT_NO_EXCEPTION);

[jbroman, 2016/12/01 22:22:52]

The CSS property is background-color, not bgcolor.

Also, below, I thought setProperty took hyphenated-names rather than camelCase
ones like we expose to script (V8CSSStyleDeclarationCustom.cpp does the
conversion for JS), so "margin-left", "margin-right", etc. below.

nit (but wait for someone else to weight in): This is closer to the web API, but
we would ordinarily use Element::setInlineStyleProperty in C++ (which takes a
CSSPropertyID enum, and and so makes this particular bug a compile error).

[adithyas, 2016/12/02 19:29:49]

You are correct, they do use the hyphenated names, the hspace/vspace attributes
did not work with the camel case versions. I think based on this, I'd much
prefer using Element::setInlineStyleProperty, but I'll wait.

+  } else if (attr == HTMLNames::heightAttr) {
+    style()->setProperty("height", convertHTMLLengthToCSSLength(newValue),
+                         String(), ASSERT_NO_EXCEPTION);
+  } else if (attr == HTMLNames::hspaceAttr) {
+    style()->setProperty("marginLeft", convertHTMLLengthToCSSLength(newValue),
+                         String(), ASSERT_NO_EXCEPTION);
+    style()->setProperty("marginRight", convertHTMLLengthToCSSLength(newValue),
+                         String(), ASSERT_NO_EXCEPTION);
+  } else if (attr == HTMLNames::vspaceAttr) {
+    style()->setProperty("marginTop", convertHTMLLengthToCSSLength(newValue),
+                         String(), ASSERT_NO_EXCEPTION);
+    style()->setProperty("marginBottom", convertHTMLLengthToCSSLength(newValue),
+                         String(), ASSERT_NO_EXCEPTION);
+  } else if (attr == HTMLNames::widthAttr) {
+    style()->setProperty("width", convertHTMLLengthToCSSLength(newValue),
+                         String(), ASSERT_NO_EXCEPTION);
+  }
+}
+
+void HTMLMarqueeElement::RequestAnimationFrameCallback::handleEvent(double) {
+  m_marquee->m_continueCallbackRequestId = 0;
+  m_marquee->continueAnimation();
+}
+
+void HTMLMarqueeElement::AnimationFinished::handleEvent(
+    ExecutionContext* context,
+    Event* event) {
+  ++m_marquee->m_loopCount;
+  m_marquee->start();
+}
+
+StringKeyframeEffectModel* HTMLMarqueeElement::createEffectModel(
+    AnimationParameters& parameters) {
+  StringKeyframeVector keyframes;
+  StyleSheetContents* styleSheetContents =
+      m_mover->document().elementSheet().contents();
+
+  RefPtr<StringKeyframe> keyframe1 = StringKeyframe::create();
+  keyframe1->setCSSPropertyValue(CSSPropertyTransform,
+                                 parameters.transformBegin, styleSheetContents);
+  keyframes.append(keyframe1);

[jbroman, 2016/12/01 22:22:52]

nit: when passing ownership of a RefPtr, prefer to move it to avoid having to
increment and decrement the ref count:

keyframes.append(std::move(keyframe1));

super-nit: Or if you want to be slightly more fancy, you could even just pass
{std::move(keyframe1), std::move(keyframe2)} in the place of having a
|keyframes| variable.

aside: We could use a more type-safe type of keyframe here (using
AnimatableTransform), but I have no strong feelings one way or another (this way
is closer to the web's view, so this seems fine).

[adithyas, 2016/12/02 19:29:49]

Fixed! I'm going to keep using StringKeyFrame unless anyone has any strong
objections.

+
+  RefPtr<StringKeyframe> keyframe2 = StringKeyframe::create();
+  keyframe2->setCSSPropertyValue(CSSPropertyTransform, parameters.transformEnd,
+                                 styleSheetContents);
+  keyframes.append(keyframe2);
+
+  StringKeyframeEffectModel* effectModel = StringKeyframeEffectModel::create(
+      keyframes, LinearTimingFunction::shared());
+  return effectModel;

[jbroman, 2016/12/01 22:22:52]

super-nit: might as well just

return StringKeyframeEffectModel::create(keyframes,
LinearTimingFunction::shared());

[adithyas, 2016/12/02 19:29:49]

Fixed.

+}
+
+// static
+void HTMLMarqueeElement::initializeTiming(Timing& timing, double duration) {

[jbroman, 2016/12/01 22:22:51]

You can just return Timing from this method. Or better yet, just inline it
(especially if the below things just make it small).

[adithyas, 2016/12/02 19:29:49]

removed the method

+  TimingInput::setFillMode(timing, "forwards");

[jbroman, 2016/12/01 22:22:52]

I'd just use the enum etc here instead of converting from known strings. We're
pretty close to the exact web APIs already here; I think the difference is just
a matter of JavaScript APIs liking strings and C++ APIs liking enums.

timing.fillMode = Timing::FillMode::FORWARDS;
timing.iterationDuration = duration;

(assuming you've already ruled out negative numbers and NaN)

[adithyas, 2016/12/02 19:29:49]

I've changed it to use the enum directly for fill mode. I'm still going to use
TimingInput::setIterationDuration though, because iterationDuration needs to be
microseconds and duration is in milliseconds (and this wasn't obvious to me).
setIterationDuration does the conversion.

[jbroman, 2016/12/03 23:47:31]

Ah, OK.

+  UnrestrictedDoubleOrString iterDuration;
+  iterDuration.setUnrestrictedDouble(duration);
+  TimingInput::setIterationDuration(timing, iterDuration, ASSERT_NO_EXCEPTION);
+}
+
+void HTMLMarqueeElement::continueAnimation() {
+  if (!shouldContinue()) {
+    return;
+  }
+  if (m_player && m_player->playState() == "paused") {
+    m_player->play();
+    return;
+  }
+
+  AnimationParameters parameters = getAnimationParameters();
+  int scrollDelay = this->scrollDelay();
+  int scrollAmount = this->scrollAmount();
+
+  if (scrollDelay < kMinimumScrollDelayMS && !trueSpeed())
+    scrollDelay = kDefaultScrollDelayMS;
+  double duration = 0;
+  if (scrollAmount)
+    duration = parameters.distance * scrollDelay / scrollAmount;
+  if (!duration)
+    return;
+
+  StringKeyframeEffectModel* effectModel = createEffectModel(parameters);
+  Timing timing;
+  initializeTiming(timing, duration);
+  KeyframeEffect* keyframeEffect =
+      KeyframeEffect::create(m_mover, effectModel, timing);
+  Animation* player = m_mover->document().timeline().play(keyframeEffect);
+  player->setId("");

[jbroman, 2016/12/01 22:22:52]

nit: "player->setId(emptyString);" is slightly more explicit and slightly more
efficient

[adithyas, 2016/12/02 19:29:49]

Fixed (assuming you meant emptyString())

[jbroman, 2016/12/03 23:47:31]

Indeed.

+  player->setOnfinish(new AnimationFinished(this));
+
+  m_player = player;
+}
+
+bool HTMLMarqueeElement::shouldContinue() {
+  int lp = loop();
+
+  // By default, slide loops only once.
+  if (lp <= 0 && behavior() == Slide)
+    lp = 1;
+
+  if (lp <= 0)
+    return true;
+  return m_loopCount < lp;
+}
+
+HTMLMarqueeElement::Behavior HTMLMarqueeElement::behavior() const {
+  const AtomicString& bhvr = getAttribute(HTMLNames::behaviorAttr);
+  if (bhvr == "alternate")
+    return Alternate;
+  if (bhvr == "slide")
+    return Slide;
+  return Scroll;
+}
+
+HTMLMarqueeElement::Direction HTMLMarqueeElement::direction() const {
+  const AtomicString& dir = getAttribute(HTMLNames::directionAttr);
+  if (dir == "down")
+    return Down;
+  if (dir == "up")
+    return Up;
+  if (dir == "right")
+    return Right;
+  return Left;
+}
+
+bool HTMLMarqueeElement::trueSpeed() const {
+  return hasAttribute(HTMLNames::truespeedAttr);
+}
+
+HTMLMarqueeElement::Metrics HTMLMarqueeElement::getMetrics() {
+  Metrics metrics;
+  CSSStyleDeclaration* marqueeStyle =
+      document().domWindow()->getComputedStyle(this, String());
+
+  // For marquees that are declared inline, getComputedStyle returns "auto" for
+  // width and height. Setting all the metrics to zero disables animation for
+  // inline marquees.
+  if (marqueeStyle->getPropertyValue("width") == "auto" &&
+      marqueeStyle->getPropertyValue("height") == "auto") {
+    metrics.contentHeight = 0;
+    metrics.contentWidth = 0;
+    metrics.marqueeWidth = 0;
+    metrics.marqueeHeight = 0;
+    return metrics;
+  }
+
+  if (isHorizontal()) {
+    m_mover->style()->setProperty("width", "-webkit-max-content", "important",
+                                  ASSERT_NO_EXCEPTION);
+
+  } else {
+    m_mover->style()->setProperty("height", "-webkit-max-content", "important",
+                                  ASSERT_NO_EXCEPTION);
+  }
+
+  CSSStyleDeclaration* moverStyle =
+      document().domWindow()->getComputedStyle(m_mover, String());
+
+  metrics.contentWidth = moverStyle->getPropertyValue("width").toDouble();
+  metrics.contentHeight = moverStyle->getPropertyValue("height").toDouble();
+  metrics.marqueeWidth = marqueeStyle->getPropertyValue("width").toDouble();
+  metrics.marqueeHeight = marqueeStyle->getPropertyValue("height").toDouble();
+
+  if (isHorizontal()) {
+    m_mover->style()->setProperty("width", "", "important",
+                                  ASSERT_NO_EXCEPTION);
+  } else {
+    m_mover->style()->setProperty("height", "", "important",
+                                  ASSERT_NO_EXCEPTION);
+  }
+
+  return metrics;
+}
+
+HTMLMarqueeElement::AnimationParameters
+HTMLMarqueeElement::getAnimationParameters() {
+  AnimationParameters parameters;
+  Metrics metrics = getMetrics();
+
+  double totalWidth = metrics.marqueeWidth + metrics.contentWidth;
+  double totalHeight = metrics.marqueeHeight + metrics.contentHeight;
+
+  double innerWidth = metrics.marqueeWidth - metrics.contentWidth;
+  double innerHeight = metrics.marqueeHeight - metrics.contentHeight;
+
+  switch (behavior()) {
+    case Alternate:
+      switch (direction()) {
+        case Right:
+          parameters.transformBegin =
+              createTransform(false, innerWidth >= 0 ? 0 : innerWidth);
+          parameters.transformEnd =
+              createTransform(false, innerWidth >= 0 ? innerWidth : 0);
+          parameters.distance = std::abs(innerWidth);
+          break;
+        case Up:
+          parameters.transformBegin =
+              createTransform(false, innerHeight >= 0 ? innerHeight : 0);
+          parameters.transformEnd =
+              createTransform(false, innerHeight >= 0 ? 0 : innerHeight);
+          parameters.distance = std::abs(innerHeight);
+          break;
+        case Down:
+          parameters.transformBegin =
+              createTransform(false, innerHeight >= 0 ? 0 : innerHeight);
+          parameters.transformEnd =
+              createTransform(false, innerHeight >= 0 ? innerHeight : 0);
+          parameters.distance = std::abs(innerHeight);
+          break;
+        case Left:
+        default:
+          parameters.transformBegin =
+              createTransform(false, innerWidth >= 0 ? innerWidth : 0);
+          parameters.transformEnd =
+              createTransform(false, innerWidth >= 0 ? 0 : innerWidth);
+          parameters.distance = std::abs(innerWidth);
+      }
+
+      if (m_loopCount % 2) {
+        AtomicString transform = parameters.transformBegin;
+        parameters.transformBegin = parameters.transformEnd;
+        parameters.transformEnd = transform;
+      }
+
+      break;
+    case Slide:
+      switch (direction()) {
+        case Right:
+          parameters.transformBegin =
+              createTransform(true, metrics.contentWidth);
+          parameters.transformEnd = createTransform(false, innerWidth);
+          parameters.distance = metrics.marqueeWidth;
+          break;
+        case Up:
+          parameters.transformBegin =
+              createTransform(false, metrics.marqueeHeight);
+          parameters.transformEnd = "translateY(0)";
+          parameters.distance = metrics.marqueeHeight;
+          break;
+        case Down:
+          parameters.transformBegin =
+              createTransform(true, metrics.contentHeight);
+          parameters.transformEnd = createTransform(false, innerHeight);
+          parameters.distance = metrics.marqueeHeight;
+          break;
+        case Left:
+        default:
+          parameters.transformBegin =
+              createTransform(false, metrics.marqueeWidth);
+          parameters.transformEnd = "translateX(0)";
+          parameters.distance = metrics.marqueeWidth;
+      }
+      break;
+    case Scroll:
+    default:
+      switch (direction()) {
+        case Right:
+          parameters.transformBegin =
+              createTransform(true, metrics.contentWidth);
+          parameters.transformEnd =
+              createTransform(false, metrics.marqueeWidth);
+          parameters.distance = totalWidth;
+          break;
+        case Up:
+          parameters.transformBegin =
+              createTransform(false, metrics.marqueeHeight);
+          parameters.transformEnd =
+              createTransform(true, metrics.contentHeight);
+          parameters.distance = totalHeight;
+          break;
+        case Down:
+          parameters.transformBegin =
+              createTransform(true, metrics.contentHeight);
+          parameters.transformEnd =
+              createTransform(false, metrics.marqueeHeight);
+          parameters.distance = totalHeight;
+          break;
+        case Left:
+        default:
+          parameters.transformBegin =
+              createTransform(false, metrics.marqueeWidth);
+          parameters.transformEnd = createTransform(true, metrics.contentWidth);
+          parameters.distance = totalWidth;
+      }
+      break;
+  }
+
+  return parameters;
+}
+
+AtomicString HTMLMarqueeElement::createTransform(bool isNegative,
+                                                 double value) const {
+  char axis = isHorizontal() ? 'X' : 'Y';
+  if (isNegative)
+    return AtomicString(String::format("translate%c(-%fpx)", axis, value));
+  return AtomicString(String::format("translate%c(%fpx)", axis, value));
+}
+
+DEFINE_TRACE(HTMLMarqueeElement) {
+  visitor->trace(m_mover);
+  visitor->trace(m_player);
+  HTMLElement::trace(visitor);
 }
 
 }  // namespace blink