Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-11 00:15:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

CSS 'transformation: skew()' should take <angle> type as parameters

Browse source 
Current implementation is taking <number> type as parameter so skew()
does not work properly. Let the skew() to get <angle> as specification
described.

Fixes #6237.
This commit is contained in:
Jinwoo Song 2015-06-01 11:35:14 +09:00 • committed by Anthony Ramine
parent f11fcebd9c
commit d524601cf5
6 changed files with 133 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

1
tests/ref/basic.list
View file

@ -371,6 +371,7 @@ flaky_cpu == linebreak_simple_a.html linebreak_simple_b.html
== transform_3d.html transform_3d_ref.html
== transform_optimization.html transform_optimization_ref.html
== transform_simple_a.html transform_simple_ref.html
== transform_skew_a.html transform_skew_ref.html
== transform_stacking_context_a.html transform_stacking_context_ref.html
== upper_id_attr.html upper_id_attr_ref.html
flaky_cpu,prefs:"layout.writing-mode.enabled" == vertical-lr-blocks.html vertical-lr-blocks_ref.html

51
tests/ref/transform_skew_a.html Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
width: 150px;
}
div>div {
background-color: blue;
}
.container {
border: 1px solid black;
margin: 20px;
}
.transformed1 {
transform: skewX(0.3rad);
}
.transformed2 {
transform: skewY(0.5rad);
}
.transformed3 {
transform: skew(0.3rad, 0.5rad);
}
</style>
</head>
<body>
<p>
<div class="container">
<div class="transformed1"></div>
</div>
</p>
<p>
<div class="container">
<div class="transformed2"></div>
</div>
</p>
<p>
<div class="container">
<div class="transformed3"></div>
</div>
</p>
</body>
</html>

52
tests/ref/transform_skew_ref.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
width: 150px;
}
div>div {
background-color: blue;
}
.container {
border: 1px solid black;
margin: 20px;
}
.transformed1_ref {
transform: matrix(1, 0, 0.30933624961, 1, 0, 0);
}
.transformed2_ref {
transform: matrix(1, 0.54630248984, 0, 1, 0, 0);
}
.transformed3_ref {
transform: matrix(1, 0.54630248984, 0.30933624961, 1, 0, 0);
}
</style>
</head>
<body>
<p>
<div class="container">
<div class="transformed1_ref"></div>
</div>
</p>
<p>
<div class="container">
<div class="transformed2_ref"></div>
</div>
</p>
<p>
<div class="container">
<div class="transformed3_ref"></div>
</div>
</p>
</body>
</html>