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

Commit d4d1450

Browse files
haoxliZhiqiang Zhang
haoxli
authored and
Zhiqiang Zhang
committed
Improve rotateX,Y,Z tests for css transforms (#1059)
- 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.
1 parent c24556b commit d4d1450

19 files changed

+152
-228
lines changed

‎css-transforms-1/css-transform-3d-rotate3d-X-negative.html‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,25 @@
55
<title>CSS Transforms Test: rotate3d on div element</title>
66
<link rel="author" title="Intel" href="http://www.intel.com">
77
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
8-
<meta name="flags" content="">
98
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
109
<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.">
1110
<style>
1211
div {
13-
left: 20px;
1412
position: absolute;
15-
top: 35px;
1613
}
1714
div.redsquare {
1815
background-color: red;
19-
border: 5px solid black;
16+
border: 20px solid black;
2017
height: 120px;
21-
left: 15px;
22-
top: 90px;
18+
left: 60px;
19+
top: 60px;
2320
width: 120px;
2421
}
2522
div.green {
2623
background-color: green;
2724
height: 240px;
25+
left: 80px;
26+
top: 20px;
2827
transform: rotate3d(1,0,0,-60deg);
2928
width: 120px;
3029
}

‎css-transforms-1/css-transform-3d-rotate3d-X-positive.html‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,25 @@
55
<title>CSS Transforms Test: rotate3d on div element</title>
66
<link rel="author" title="Intel" href="http://www.intel.com">
77
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
8-
<meta name="flags" content="">
98
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
109
<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.">
1110
<style>
1211
div {
13-
left: 20px;
1412
position: absolute;
15-
top: 35px;
1613
}
1714
div.redsquare {
1815
background-color: red;
19-
border: 5px solid black;
16+
border: 20px solid black;
2017
height: 120px;
21-
left: 15px;
22-
top: 90px;
18+
left: 60px;
19+
top: 60px;
2320
width: 120px;
2421
}
2522
div.green {
2623
background-color: green;
2724
height: 240px;
25+
left: 80px;
26+
top: 20px;
2827
transform: rotate3d(1,0,0,60deg);
2928
width: 120px;
3029
}

‎css-transforms-1/css-transform-3d-rotate3d-Y-negative.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,25 @@
55
<title>CSS Transforms Test: rotate3d on div element</title>
66
<link rel="author" title="Intel" href="http://www.intel.com">
77
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
8-
<meta name="flags" content="">
9-
<link rel="match" href="reference/css-transform-3d-rotateY-ref.html">
8+
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
109
<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.">
1110
<style>
1211
div {
13-
left: 10px;
1412
position: absolute;
15-
top: 50px;
1613
}
1714
div.redsquare {
1815
background-color: red;
19-
border: 5px solid black;
16+
border: 20px solid black;
2017
height: 120px;
21-
left: 65px;
22-
top: 45px;
18+
left: 60px;
19+
top: 60px;
2320
width: 120px;
2421
}
2522
div.green {
2623
background-color: green;
2724
height: 120px;
25+
left: 20px;
26+
top: 80px;
2827
transform: rotate3d(0,1,0,-60deg);
2928
width: 240px;
3029
}

‎css-transforms-1/css-transform-3d-rotate3d-Y-positive.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,25 @@
55
<title>CSS Transforms Test: rotate3d on div element</title>
66
<link rel="author" title="Intel" href="http://www.intel.com">
77
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
8-
<meta name="flags" content="">
9-
<link rel="match" href="reference/css-transform-3d-rotateY-ref.html">
8+
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
109
<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.">
1110
<style>
1211
div {
13-
left: 10px;
1412
position: absolute;
15-
top: 50px;
1613
}
1714
div.redsquare {
1815
background-color: red;
19-
border: 5px solid black;
16+
border: 20px solid black;
2017
height: 120px;
21-
left: 65px;
22-
top: 45px;
18+
left: 60px;
19+
top: 60px;
2320
width: 120px;
2421
}
2522
div.green {
2623
background-color: green;
2724
height: 120px;
25+
left: 20px;
26+
top: 80px;
2827
transform: rotate3d(0,1,0,60deg);
2928
width: 240px;
3029
}

‎css-transforms-1/css-transform-3d-rotate3d-Z-negative.html‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,32 @@
55
<title>CSS Transforms Test: rotate3d on div element</title>
66
<link rel="author" title="Intel" href="http://www.intel.com">
77
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
8-
<meta name="flags" content="">
98
<link rel="match" href="reference/css-transform-3d-rotateZ-ref.html">
109
<meta name="assert" content="Test checks that rotate a vertical rectangle for -90 degree on Z-axis will cover the horizontal red rectangle.">
1110
<style>
1211
div {
13-
height: 240px;
14-
left: 70px;
12+
height: 100px;
13+
left: 80px;
1514
position: absolute;
16-
top: 100px;
17-
width: 240px;
15+
top: 80px;
16+
width: 100px;
1817
}
1918
div.origin {
2019
background-color: green;
2120
}
2221
div.redsquare {
2322
background-color: red;
24-
height: 60px;
25-
left: 70px;
26-
top: 190px;
27-
width: 240px;
23+
height: 38px;
24+
left: 80px;
25+
top: 111px;
26+
width: 100px;
2827
}
2928
div.greensquare {
3029
background-color: green;
31-
height: 240px;
32-
left: 160px;
33-
top: 100px;
34-
width: 60px;
30+
height: 100px;
31+
left: 110px;
32+
top: 80px;
33+
width: 40px;
3534
transform: rotate3d(0,0,1,-90deg);
3635
}
3736
</style>

‎css-transforms-1/css-transform-3d-rotate3d-Z-positive.html‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,32 @@
55
<title>CSS Transforms Test: rotate3d on div element</title>
66
<link rel="author" title="Intel" href="http://www.intel.com">
77
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
8-
<meta name="flags" content="">
98
<link rel="match" href="reference/css-transform-3d-rotateZ-ref.html">
109
<meta name="assert" content="Test checks that rotate a vertical rectangle for 90 degree on Z-axis would cover the horizontal red rectangle.">
1110
<style>
1211
div {
13-
height: 240px;
14-
left: 70px;
12+
height: 100px;
13+
left: 80px;
1514
position: absolute;
16-
top: 100px;
17-
width: 240px;
15+
top: 80px;
16+
width: 100px;
1817
}
1918
div.origin {
2019
background-color: green;
2120
}
2221
div.redsquare {
2322
background-color: red;
24-
height: 60px;
25-
left: 70px;
26-
top: 190px;
27-
width: 240px;
23+
height: 38px;
24+
left: 80px;
25+
top: 111px;
26+
width: 100px;
2827
}
2928
div.greensquare {
3029
background-color: green;
31-
height: 240px;
32-
left: 160px;
33-
top: 100px;
34-
width: 60px;
30+
height: 100px;
31+
left: 110px;
32+
top: 80px;
33+
width: 40px;
3534
transform: rotate3d(0,0,1,90deg);
3635
}
3736
</style>

‎css-transforms-1/css-transform-3d-rotateX-negative.html‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,24 @@
66
<link rel="author" title="Intel" href="http://www.intel.com">
77
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
88
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
9-
<meta name="flags" content="">
109
<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.">
1110
<style>
1211
div {
13-
left: 20px;
1412
position: absolute;
15-
top: 35px;
1613
}
1714
div.redsquare {
1815
background-color: red;
19-
border: 5px solid black;
16+
border: 20px solid black;
2017
height: 120px;
21-
left: 15px;
22-
top: 90px;
18+
left: 60px;
19+
top: 60px;
2320
width: 120px;
2421
}
2522
div.green {
2623
background-color: green;
2724
height: 240px;
25+
left: 80px;
26+
top: 20px;
2827
transform: rotateX(-60deg);
2928
width: 120px;
3029
}

‎css-transforms-1/css-transform-3d-rotateX-positive.html‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,24 @@
66
<link rel="author" title="Intel" href="http://www.intel.com">
77
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
88
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
9-
<meta name="flags" content="">
109
<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.">
1110
<style>
1211
div {
13-
left: 20px;
1412
position: absolute;
15-
top: 35px;
1613
}
1714
div.redsquare {
1815
background-color: red;
19-
border: 5px solid black;
16+
border: 20px solid black;
2017
height: 120px;
21-
left: 15px;
22-
top: 90px;
18+
left: 60px;
19+
top: 60px;
2320
width: 120px;
2421
}
2522
div.green {
2623
background-color: green;
2724
height: 240px;
25+
left: 80px;
26+
top: 20px;
2827
transform: rotateX(60deg);
2928
width: 120px;
3029
}

‎css-transforms-1/css-transform-3d-rotateY-negative.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,25 @@
55
<title>CSS Transforms Test: rotateY on div element</title>
66
<link rel="author" title="Intel" href="http://www.intel.com">
77
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
8-
<link rel="match" href="reference/css-transform-3d-rotateY-ref.html">
9-
<meta name="flags" content="">
8+
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
109
<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.">
1110
<style>
1211
div {
13-
left: 10px;
1412
position: absolute;
15-
top: 50px;
1613
}
1714
div.redsquare {
1815
background-color: red;
19-
border: 5px solid black;
16+
border: 20px solid black;
2017
height: 120px;
21-
left: 65px;
22-
top: 45px;
18+
left: 60px;
19+
top: 60px;
2320
width: 120px;
2421
}
2522
div.green {
2623
background-color: green;
2724
height: 120px;
25+
left: 20px;
26+
top: 80px;
2827
transform: rotateY(-60deg);
2928
width: 240px;
3029
}

‎css-transforms-1/css-transform-3d-rotateY-positive.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,25 @@
55
<title>CSS Transforms Test: rotateY on div element</title>
66
<link rel="author" title="Intel" href="http://www.intel.com">
77
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions">
8-
<link rel="match" href="reference/css-transform-3d-rotateY-ref.html">
9-
<meta name="flags" content="">
8+
<link rel="match" href="reference/css-transform-3d-rotateX-ref.html">
109
<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.">
1110
<style>
1211
div {
13-
left: 10px;
1412
position: absolute;
15-
top: 50px;
1613
}
1714
div.redsquare {
1815
background-color: red;
19-
border: 5px solid black;
16+
border: 20px solid black;
2017
height: 120px;
21-
left: 65px;
22-
top: 45px;
18+
left: 60px;
19+
top: 60px;
2320
width: 120px;
2421
}
2522
div.green {
2623
background-color: green;
2724
height: 120px;
25+
left: 20px;
26+
top: 80px;
2827
transform: rotateY(60deg);
2928
width: 240px;
3029
}

0 commit comments

Comments
 (0)