mirror of
https://github.com/servo/servo.git
synced 2025-08-09 15:35:34 +01:00
layout: Implement 2D CSS transforms per CSS-TRANSFORMS § 5, 6, 7, and 8.
This commit is contained in:
parent
7bd6cb0091
commit
d10627a2b3
14 changed files with 964 additions and 35 deletions
|
@ -266,6 +266,8 @@ experimental == rtl_simple.html rtl_simple_ref.html
|
|||
== text_transform_lowercase_a.html text_transform_lowercase_ref.html
|
||||
== text_transform_none_a.html text_transform_none_ref.html
|
||||
== text_transform_uppercase_a.html text_transform_uppercase_ref.html
|
||||
== transform_simple_a.html transform_simple_ref.html
|
||||
== transform_stacking_context_a.html transform_stacking_context_ref.html
|
||||
== upper_id_attr.html upper_id_attr_ref.html
|
||||
flaky_cpu,experimental == vertical-lr-blocks.html vertical-lr-blocks_ref.html
|
||||
== vertical_align_bottom_a.html vertical_align_bottom_ref.html
|
||||
|
|
49
tests/ref/transform_simple_a.html
Normal file
49
tests/ref/transform_simple_a.html
Normal file
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Tests that basic CSS transforms work. -->
|
||||
<style>
|
||||
section {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 25px;
|
||||
left: 50px;
|
||||
transform: rotate(90deg) scale(1, 2);
|
||||
}
|
||||
div {
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
#a {
|
||||
background: cyan;
|
||||
}
|
||||
#b {
|
||||
background: magenta;
|
||||
}
|
||||
#c {
|
||||
background: yellow;
|
||||
}
|
||||
#d {
|
||||
background: black;
|
||||
}
|
||||
#a, #b {
|
||||
top: 0;
|
||||
}
|
||||
#c, #d {
|
||||
top: 25px;
|
||||
}
|
||||
#a, #c {
|
||||
left: 0;
|
||||
}
|
||||
#b, #d {
|
||||
left: 25px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section><div id=a></div><div id=b></div><div id=c></div><div id=d></div></section>
|
||||
</body>
|
||||
</html>
|
||||
|
49
tests/ref/transform_simple_ref.html
Normal file
49
tests/ref/transform_simple_ref.html
Normal file
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Tests that basic CSS transforms work. -->
|
||||
<style>
|
||||
section {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
}
|
||||
div {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
}
|
||||
#a {
|
||||
background: yellow;
|
||||
}
|
||||
#b {
|
||||
background: cyan;
|
||||
}
|
||||
#c {
|
||||
background: black;
|
||||
}
|
||||
#d {
|
||||
background: magenta;
|
||||
}
|
||||
#a, #b {
|
||||
top: 0;
|
||||
}
|
||||
#c, #d {
|
||||
top: 25px;
|
||||
}
|
||||
#a, #c {
|
||||
left: 0;
|
||||
}
|
||||
#b, #d {
|
||||
left: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section><div id=a></div><div id=b></div><div id=c></div><div id=d></div></section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
54
tests/ref/transform_stacking_context_a.html
Normal file
54
tests/ref/transform_stacking_context_a.html
Normal file
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Tests that `transform` causes a new stacking context to be formed. -->
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
section {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#a {
|
||||
background: red;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#b {
|
||||
background: #00ff00;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#c {
|
||||
background: blue;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#container {
|
||||
transform: matrix(1, 0, 0, 1, 0, 0);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id=a></section>
|
||||
<section id=c></section>
|
||||
<div id=container>
|
||||
<section id=b></section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
41
tests/ref/transform_stacking_context_ref.html
Normal file
41
tests/ref/transform_stacking_context_ref.html
Normal file
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- Tests that `transform` causes a new stacking context to be formed. -->
|
||||
<style>
|
||||
section {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#a {
|
||||
background: red;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#b {
|
||||
background: #00ff00;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#c {
|
||||
background: blue;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
z-index: 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id=a></section>
|
||||
<section id=c></section>
|
||||
<section id=b></section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
Loading…
Add table
Add a link
Reference in a new issue