diff options
Diffstat (limited to 'tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-inherit-rotate.htm')
| -rw-r--r-- | tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-inherit-rotate.htm | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-inherit-rotate.htm b/tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-inherit-rotate.htm new file mode 100644 index 00000000000..d7f248dca9a --- /dev/null +++ b/tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-inherit-rotate.htm @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html><head> + <title>CSS Transforms Test: CSS transforms rotate inheritance on div element</title> + <link href="mailto:gaodl@uw.edu" rel="author" title="Delong Gao"> + <link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck"> + <link href="http://www.w3.org/TR/css-transforms-1/#transform-property" rel="help"> + <link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help"> + <!--<link rel="match" href="reference/ttwf-reftest-tutorial-ref.html"> + <meta name="flags" content="svg">--> + <meta content="Rotation on parent element will not be inherited by child element, unless declared. The test is passed if there is a green square and no red. And it is rotated 45 degree." name="assert"> + <style type="text/css"> + * { + margin: 0; + padding: 0; + } + .flag { + position: absolute; + top: 100px; + left: 100px; + width: 100px; + height: 100px; + background-color: green; + z-index: 2; + }/*This div is used to show the red square*/ + .parentSquare { + position: absolute; + top: 50px; + left: 50px; + width: 200px; + height: 200px; + transform: rotate(45deg); + background-color: green; + } + .childSquare { + position: absolute; + top: 50px; + left: 50px; + width: 100px; + height: 100px; + background-color: red; + transform: inherit;/*While inherited, the child div should rotate 90 degree instead of 45*/ + } + p { + position: absolute; + top: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red. And it is rotated 45 degree.</p> + <div class="flag"></div> + <div class="parentSquare"> + <div class="childSquare"></div> + </div> + +</body></html>
\ No newline at end of file |