diff options
Diffstat (limited to 'tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-transform-style.htm')
| -rw-r--r-- | tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-transform-style.htm | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-transform-style.htm b/tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-transform-style.htm new file mode 100644 index 00000000000..98b33115c2a --- /dev/null +++ b/tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-transform-style.htm @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html><head> + <meta charset="utf-8"> + <title>CSS Transforms Test: rotateY with transform-style on nested elements</title> + <link href="http://www.intel.com" rel="author" title="Intel"> + <link href="http://www.w3.org/TR/css-transforms-1/#transform-style-property" rel="help"> + <link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help"> + <link href="reference/css-transform-3d-transform-style-ref.htm" rel="match"> + <meta content="" name="flags"> + <meta content="Test checks that rotate the nested div with transform-style preserve-3d, rotated parent div for -60 degree on Y-axis then and rotated child div for 120 degree, at this time the parent and child should have equal width, then child div could cover the red box." name="assert"> + <style> + div { + position: absolute; + } + div.container { + background-color: gray; + height: 200px; + width: 200px; + left: 65px; + top: 45px; + } + div.blue { + background-color: blue; + height: 180px; + width: 180px; + left: 10px; + top: 10px; + transform: rotateY(-60deg); + transform-style: preserve-3d; + } + div.green { + background-color: green; + left: 40px; + top: 0px; + height: 180px; + width: 180px; + transform: rotateY(120deg); + } + div.red{ + background-color: red; + left: 140px; + top: 10px; + height: 180px; + width: 20px; + } + </style> + </head> + <body> + <p>Test passes if there is a gray square with <b>one blue</b> and <b>one green</b> box <b>inside</b>, and no any red.</p> + <div class="container"> + <div class="red"></div> + <div class="blue"> + <div class="green"></div> + </div> + </div> + + +</body></html>
\ No newline at end of file |