Bug 257907 – <animateMotion> non-path animations should apply the 'rotate' attribute

• Status: NEW
• Component: SVG

[Ahmad Saleem]

Hi Team,

This is another WPT test failure unique to Safari / WebKit and it would be good to track and fix it in future.

WPT Test Link: https://wpt.fyi/results/svg/animations/animateMotion-from-to-rotate-auto.html?label=experimental&label=master&aligned

WPT Live Link: http://wpt.live/svg/animations/animateMotion-from-to-rotate-auto.html

Blink Link: https://chromium.googlesource.com/chromium/src/+/7f43c0d43ff1b00697461a588118d69e8d86238a

Just wanted to raise so we can fix it.

Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/110915794>

[Ahmad Saleem]

Fixes this:

void SVGAnimateMotionElement::calculateAnimatedValue(float percentage, unsigned repeatCount)
{
    RefPtr targetElement = this->targetElement();
    if (!targetElement)
        return;

    auto* transform = targetElement->ensureSupplementalTransform();
    if (!transform)
        return;

    FloatPoint position;
    float tangentInDegrees = 0;

    if (animationMode() != AnimationMode::Path) {
        FloatPoint toPointAtEndOfDuration = m_toPointAtEndOfDuration ? *m_toPointAtEndOfDuration : m_toPoint;

        float animatedX = 0;
        animateAdditiveNumber(percentage, repeatCount, m_fromPoint.x(), m_toPoint.x(), toPointAtEndOfDuration.x(), animatedX);

        float animatedY = 0;
        animateAdditiveNumber(percentage, repeatCount, m_fromPoint.y(), m_toPoint.y(), toPointAtEndOfDuration.y(), animatedY);

        position = FloatPoint(animatedX, animatedY);
        tangentInDegrees = rad2deg(atan2(m_toPoint.y() - m_fromPoint.y(), m_toPoint.x() - m_fromPoint.x()));
    } else {
        ASSERT(!m_animationPath.isEmpty());
        const float pathLength = m_animationPath.length();
        const float positionOnPath = pathLength * percentage;

        auto traversalState = m_animationPath.traversalStateAtLength(positionOnPath);
        if (!traversalState.success())
            return;

        position = traversalState.current();
        tangentInDegrees = traversalState.normalAngle();

        // Handle accumulate="sum" by offsetting by the end-of-path point
        if (repeatCount && isAccumulated()) {
            FloatPoint positionAtEndOfDuration = m_animationPath.pointAtLength(pathLength);
            position += FloatSize(positionAtEndOfDuration.x() * repeatCount, positionAtEndOfDuration.y() * repeatCount);
        }
    }

    if (!isAdditive())
        transform->makeIdentity();

    transform->translate(position.x(), position.y());

    RotateMode rotateMode = this->rotateMode();
    switch (rotateMode) {
    case RotateAuto:
        break;
    case RotateAutoReverse:
        tangentInDegrees += 180;
        break;
    case RotateAngle:
        tangentInDegrees = 0;
        break;
    }
    transform->rotate(tangentInDegrees);
}

I carved out part of it here - https://github.com/WebKit/WebKit/pull/48748

[Ahmad Saleem]

Pull request: https://github.com/WebKit/WebKit/pull/49821