Open Bug 1135894 Opened 9 years ago Updated 2 years ago

Rotation using matrix3d doesn't interpolate angles along the shorted path

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Version:
35 Branch
Platform:
x86_64
Windows 7
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: ninjaqe, Unassigned)

References

Details

(Keywords: testcase)

Attachments

(1 file)

3d-rotation-animation.html
1.33 KB, text/html
Details 
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.111 Safari/537.36
Keywords: regression, testcase
If this is a regression, when from?  Where is the testcase?
Flags: needinfo?(ninjaqe)
Compared the rotation between Chrome and Firefox.  The rotation in Firefox is incorrect compare to Chrome.  I have attached a simple file and please take a look at the spec

http://www.w3.org/TR/css3-transforms/#interpolation-of-3d-matrices
Flags: needinfo?(ninjaqe)
Comment on attachment 8570584 [details]
3d-rotation-animation.html

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: myfirst 5s;
    -moz-animation: myfirst 5s;
    -ms-animation: myfirst 5s;
    animation: myfirst 5s;
}

/* Firefox */
@-moz-keyframes myfirst {
    0%   {
	-moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	
	}
    25%  {
	-moz-transform: matrix3d(0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1);
	
	}
    50%  {
	-moz-transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);

	}
    75% {
	-moz-transform: matrix3d(0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 0, 1);
	 }
	
	100% {
	-moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	 }
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {
	-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	
	}
    25%  {
	-webkit-transform: matrix3d(0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1);
	}
    50%  {
	-webkit-transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);
	}
	
	75% {
	-webkit-transform: matrix3d(0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 0, 1);
	}
	
    100% {
	-webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	}
}

/* IE */
@-ms-keyframes myfirst {
    0%   {
	-ms-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	
	}
    25%  {
	-ms-transform: matrix3d(0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1);
	
	}
    50%  {
	-ms-transform: matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1);

	}
    75% {
	-ms-transform: matrix3d(0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 0, 1);
	 }
	
	100% {
	-ms-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	 }
}


</style>
</head>
<body>

<p><b>Firefox rotates the div differently</b> 
<div></div>

</body>
</html>
Thank you.  So not a regression and likely a duplicate of bug 937494.
Depends on: 937494
Keywords: regression
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: