Skip to content
This repository has been archived by the owner on Dec 18, 2018. It is now read-only.

Commit

Permalink
Improve rotateX,Y,Z tests for css transforms (#1059)
Browse files Browse the repository at this point in the history 
- Avoid using odd pixels
- Unify transform-3d-rotateX-ref and css-transform-3d-rotateY-ref
- Remove useless flag
- Remove help link from css3-transform-rotateY-ref.html since reference must not have specification links.
  • Loading branch information
@haoxli
haoxli authored and Zhiqiang Zhang committed May 16, 2016
1 parent c24556b commit d4d1450
Show file tree
Hide file tree
Showing 19 changed files with 152 additions and 228 deletions.
11 changes: 5 additions & 6 deletions css-transforms-1/css-transform-3d-rotate3d-X-negative.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,25 @@
<title>CSS Transforms Test: rotate3d on div element</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
<meta name="flags" content="">
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
<meta name="assert" content="Test checks that rotate the 2:1 rectangle on X-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square.">
<style>
div {
left: 20px;
position: absolute;
top: 35px;
}
div.redsquare {
background-color: red;
border: 5px solid black;
border: 20px solid black;
height: 120px;
left: 15px;
top: 90px;
left: 60px;
top: 60px;
width: 120px;
}
div.green {
background-color: green;
height: 240px;
left: 80px;
top: 20px;
transform: rotate3d(1,0,0,-60deg);
width: 120px;
}
Expand Down
11 changes: 5 additions & 6 deletions css-transforms-1/css-transform-3d-rotate3d-X-positive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,25 @@
<title>CSS Transforms Test: rotate3d on div element</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
<meta name="flags" content="">
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
<meta name="assert" content="Test checks that rotate a 2:1 rectangle on X-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square.">
<style>
div {
left: 20px;
position: absolute;
top: 35px;
}
div.redsquare {
background-color: red;
border: 5px solid black;
border: 20px solid black;
height: 120px;
left: 15px;
top: 90px;
left: 60px;
top: 60px;
width: 120px;
}
div.green {
background-color: green;
height: 240px;
left: 80px;
top: 20px;
transform: rotate3d(1,0,0,60deg);
width: 120px;
}
Expand Down
13 changes: 6 additions & 7 deletions css-transforms-1/css-transform-3d-rotate3d-Y-negative.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,25 @@
<title>CSS Transforms Test: rotate3d on div element</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
<meta name="flags" content="">
<link rel="match" href="reference/css-transform-3d-rotateY-ref.html">
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
<meta name="assert" content="Test checks that rotate a 2:1 rectangle on Y-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square.">
<style>
div {
left: 10px;
position: absolute;
top: 50px;
}
div.redsquare {
background-color: red;
border: 5px solid black;
border: 20px solid black;
height: 120px;
left: 65px;
top: 45px;
left: 60px;
top: 60px;
width: 120px;
}
div.green {
background-color: green;
height: 120px;
left: 20px;
top: 80px;
transform: rotate3d(0,1,0,-60deg);
width: 240px;
}
Expand Down
13 changes: 6 additions & 7 deletions css-transforms-1/css-transform-3d-rotate3d-Y-positive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,25 @@
<title>CSS Transforms Test: rotate3d on div element</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
<meta name="flags" content="">
<link rel="match" href="reference/css-transform-3d-rotateY-ref.html">
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
<meta name="assert" content="Test checks that rotate a 2:1 rectangle on Y-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square.">
<style>
div {
left: 10px;
position: absolute;
top: 50px;
}
div.redsquare {
background-color: red;
border: 5px solid black;
border: 20px solid black;
height: 120px;
left: 65px;
top: 45px;
left: 60px;
top: 60px;
width: 120px;
}
div.green {
background-color: green;
height: 120px;
left: 20px;
top: 80px;
transform: rotate3d(0,1,0,60deg);
width: 240px;
}
Expand Down
25 changes: 12 additions & 13 deletions css-transforms-1/css-transform-3d-rotate3d-Z-negative.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,32 @@
<title>CSS Transforms Test: rotate3d on div element</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
<meta name="flags" content="">
<link rel="match" href="reference/css-transform-3d-rotateZ-ref.html">
<meta name="assert" content="Test checks that rotate a vertical rectangle for -90 degree on Z-axis will cover the horizontal red rectangle.">
<style>
div {
height: 240px;
left: 70px;
height: 100px;
left: 80px;
position: absolute;
top: 100px;
width: 240px;
top: 80px;
width: 100px;
}
div.origin {
background-color: green;
}
div.redsquare {
background-color: red;
height: 60px;
left: 70px;
top: 190px;
width: 240px;
height: 38px;
left: 80px;
top: 111px;
width: 100px;
}
div.greensquare {
background-color: green;
height: 240px;
left: 160px;
top: 100px;
width: 60px;
height: 100px;
left: 110px;
top: 80px;
width: 40px;
transform: rotate3d(0,0,1,-90deg);
}
</style>
Expand Down
25 changes: 12 additions & 13 deletions css-transforms-1/css-transform-3d-rotate3d-Z-positive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,32 @@
<title>CSS Transforms Test: rotate3d on div element</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
<meta name="flags" content="">
<link rel="match" href="reference/css-transform-3d-rotateZ-ref.html">
<meta name="assert" content="Test checks that rotate a vertical rectangle for 90 degree on Z-axis would cover the horizontal red rectangle.">
<style>
div {
height: 240px;
left: 70px;
height: 100px;
left: 80px;
position: absolute;
top: 100px;
width: 240px;
top: 80px;
width: 100px;
}
div.origin {
background-color: green;
}
div.redsquare {
background-color: red;
height: 60px;
left: 70px;
top: 190px;
width: 240px;
height: 38px;
left: 80px;
top: 111px;
width: 100px;
}
div.greensquare {
background-color: green;
height: 240px;
left: 160px;
top: 100px;
width: 60px;
height: 100px;
left: 110px;
top: 80px;
width: 40px;
transform: rotate3d(0,0,1,90deg);
}
</style>
Expand Down
11 changes: 5 additions & 6 deletions css-transforms-1/css-transform-3d-rotateX-negative.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,24 @@
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test checks that rotate a 2:1 rectangle on X-axis for -60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square.">
<style>
div {
left: 20px;
position: absolute;
top: 35px;
}
div.redsquare {
background-color: red;
border: 5px solid black;
border: 20px solid black;
height: 120px;
left: 15px;
top: 90px;
left: 60px;
top: 60px;
width: 120px;
}
div.green {
background-color: green;
height: 240px;
left: 80px;
top: 20px;
transform: rotateX(-60deg);
width: 120px;
}
Expand Down
11 changes: 5 additions & 6 deletions css-transforms-1/css-transform-3d-rotateX-positive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,24 @@
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
<meta name="flags" content="">
<meta name="assert" content="Test checks that rotate a 2:1 rectangle on X-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square.">
<style>
div {
left: 20px;
position: absolute;
top: 35px;
}
div.redsquare {
background-color: red;
border: 5px solid black;
border: 20px solid black;
height: 120px;
left: 15px;
top: 90px;
left: 60px;
top: 60px;
width: 120px;
}
div.green {
background-color: green;
height: 240px;
left: 80px;
top: 20px;
transform: rotateX(60deg);
width: 120px;
}
Expand Down
13 changes: 6 additions & 7 deletions css-transforms-1/css-transform-3d-rotateY-negative.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,25 @@
<title>CSS Transforms Test: rotateY on div element</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
<link rel="match" href="reference/css-transform-3d-rotateY-ref.html">
<meta name="flags" content="">
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
<meta name="assert" content="Test checks that rotate a 2:1 rectangle on Y-axis for -60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square.">
<style>
div {
left: 10px;
position: absolute;
top: 50px;
}
div.redsquare {
background-color: red;
border: 5px solid black;
border: 20px solid black;
height: 120px;
left: 65px;
top: 45px;
left: 60px;
top: 60px;
width: 120px;
}
div.green {
background-color: green;
height: 120px;
left: 20px;
top: 80px;
transform: rotateY(-60deg);
width: 240px;
}
Expand Down
13 changes: 6 additions & 7 deletions css-transforms-1/css-transform-3d-rotateY-positive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,25 @@
<title>CSS Transforms Test: rotateY on div element</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
<link rel="match" href="reference/css-transform-3d-rotateY-ref.html">
<meta name="flags" content="">
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
<meta name="assert" content="Test checks that rotate a 2:1 rectangle on Y-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square.">
<style>
div {
left: 10px;
position: absolute;
top: 50px;
}
div.redsquare {
background-color: red;
border: 5px solid black;
border: 20px solid black;
height: 120px;
left: 65px;
top: 45px;
left: 60px;
top: 60px;
width: 120px;
}
div.green {
background-color: green;
height: 120px;
left: 20px;
top: 80px;
transform: rotateY(60deg);
width: 240px;
}
Expand Down
25 changes: 12 additions & 13 deletions css-transforms-1/css-transform-3d-rotateZ-negative.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,32 @@
<title>CSS Transforms Test: rotate3d on div element</title>
<link rel="author" title="Intel" href="http://www.intel.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
<meta name="flags" content="">
<link rel="match" href="reference/css-transform-3d-rotateZ-ref.html">
<meta name="assert" content="Test checks that rotate a vertical rectangle for -90 degree on Z-axis will cover the horizontal red rectangle.">
<style>
div {
height: 240px;
left: 70px;
height: 100px;
left: 80px;
position: absolute;
top: 100px;
width: 240px;
top: 80px;
width: 100px;
}
div.origin {
background-color: green;
}
div.redsquare {
background-color: red;
height: 60px;
left: 70px;
top: 190px;
width: 240px;
height: 38px;
left: 80px;
top: 111px;
width: 100px;
}
div.greensquare {
background-color: green;
height: 240px;
left: 160px;
top: 100px;
width: 60px;
height: 100px;
left: 110px;
top: 80px;
width: 40px;
transform: rotateZ(-90deg);
}
</style>
Expand Down
Loading

0 comments on commit d4d1450

Please sign in to comment.