Closed Bug 1384410 Opened 7 years ago Closed 7 years ago

Stylo: wrong rotate angle in animation

Categories

(Core :: CSS Parsing and Computation, defect, P2)

defect

Tracking

()

VERIFIED FIXED
mozilla56
Tracking Status
firefox56 --- fixed

People

(Reporter: 5.5, Assigned: hiro)

References

(Blocks 1 open bug)

Details

(Keywords: nightly-community)

Attachments

(5 files, 3 obsolete files)

The following HTML is rendered by the nightly as different from Fx 54.
Wrong RotateY angle (opposite sign of angle).
If we change "transform: none" to "transform: rotateY(0deg)" in "@keyframes tilt ", it will be correct.


<!DOCTYPE html>
<meta charset="utf-8">
<title>3D-rotation</title>
<style>
* {
  margin: 0;
  padding: 0
}
body {
  font-family: arial, sans-serif;
  font-size: 80px;
  font-weight: bold;
  perspective: 1200px;
}
.board {
  animation: 1s ease 4s both tilt;
  margin: 200px 0 0;
  text-align: center;
  position: relative;
  overflow: hidden
}
.content {
  position: relative;
  animation: 1s slidein;
}

@keyframes tilt {
  from {transform: rotateY(30deg)}
  to {transform: none}
}

@keyframes slidein {
  from {left: -20em}
  to {left: 0}
}
</style>
<div class="board">
  <div class="content">Firefox</div>
</div>
Thank you! :)
Confirmed in Nightly 56 x64 20170725144053 @ Debian Testing.
attachment 8890278 [details]
with stylo: The text is looking over my left shoulder, then on my face.
without stylo: The text is looking over my right shoulder, then on my face.
Status: UNCONFIRMED → NEW
Has STR: --- → yes
Ever confirmed: true
Attached file Reduced test case
The 'left' animation needs for running the transform animation on the main thread since we are still using gecko's interpolation code on the compositor.

I think we have a bug that gecko's transform interpolation (with quarternion?) does not comply the spec, but I can't find it and I am not sure that is related to this bug.
Attachment #8890278 - Attachment is obsolete: true
OK, recomposing 3D matrix was wrong.
Assignee: nobody → hikezoe
Status: NEW → ASSIGNED
there seems to be another mistake in transform matrix handling.  Fixing this makes a wpt failure.
Priority: -- → P2
Attached file A WIP patch (obsolete) —
FWIW here is a WIP patch that fixes this bug case but makes a test [1] failure.  This change makes the rotation in the test case opposite direction.

[1] https://hg.mozilla.org/mozilla-central/file/e5693cea1ec9/testing/web-platform/tests/web-animations/animation-model/animation-types/property-types.js#l878
I was wrong. Recomposing was not wrong. rotate_to_matrix returned transposed matrix.

https://treeherder.mozilla.org/#/jobs?repo=try&revision=ab8c4ff551972c43e0ec1d74a1e647275d07e4b7
Comment on attachment 8891537 [details]
Bug 1384410 - Fix multiply matrix order for skew.

https://reviewboard.mozilla.org/r/162656/#review168026

Thanks for fixing that!
Attachment #8891537 - Flags: review?(canaltinova) → review+
Though we should investigate this a little further after that bug and report to the csswg if these are spec bugs. FWIW, there is already one for that: https://github.com/w3c/csswg-drafts/issues/483
Thank you!

I think bug 769892 is the same issue for gecko, but it seems to be already solved to me.
Filed a meta bug to grasping transform interpolation bugs.
bug 1385477.
Attachment #8891537 - Attachment is obsolete: true
Attached file Servo PR
Attachment #8890783 - Attachment is obsolete: true
Pushed by hikezoe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/cce87afe3904
Fix rotate_to_matrix. r=canaltinova
https://hg.mozilla.org/mozilla-central/rev/cce87afe3904
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Flags: in-testsuite+
Resolution: --- → FIXED
Target Milestone: --- → mozilla56
(In reply to Darkspirit from comment #3)
> Confirmed in Nightly 56 x64 20170725144053 @ Debian Testing.
> attachment 8890278 [details]
> with stylo: The text is looking over my left shoulder, then on my face.
> without stylo: The text is looking over my right shoulder, then on my face.

Verified fixed in Nightly 56 x64 20170730100307 @ Debian Testing.
Stylo behaves now like Gecko.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.