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)

Product:
Core
Component:
CSS Parsing and Computation
Type:
defect

Tracking

()

Status:
VERIFIED FIXED
Milestone:
mozilla56
Tracking Flags:
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)

Fx56.0a1(2017-07-25).png
3.01 KB, image/png
Details
Fx54.0.1.png (as reference)
2.82 KB, image/png
Details
Reduced test case
410 bytes, text/html
Details
Bug 1384410 - Fix rotate_to_matrix.
59 bytes, text/x-review-board-request
canova
: review+
Details
Servo PR
41 bytes, text/x-github-pull-request
Details | Review 
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.
Blocks: stylo-site-issues
URL: https://bugzilla.mozilla.org/attachme...
Status: UNCONFIRMED → NEW
Has STR: --- → yes
Ever confirmed: true
Keywords: nightly-community

    
    

    
  

      
      
      
      

        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

          status-firefox56:
          --- → fixed
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.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: