css-transform-inherit-rotate.html (1738B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Transforms Test: CSS transforms rotate inheritance on div element</title> 5 <link rel="author" title="Delong Gao" href="mailto:gaodl@uw.edu"> 6 <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> 8 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> 9 <!--<link rel="match" href="reference/ttwf-reftest-tutorial-ref.html"> 10 <meta name="flags" content="svg">--> 11 <meta name="assert" 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."> 12 <style type="text/css"> 13 * { 14 margin: 0; 15 padding: 0; 16 } 17 .flag { 18 position: absolute; 19 top: 100px; 20 left: 100px; 21 width: 100px; 22 height: 100px; 23 background-color: green; 24 z-index: 2; 25 }/*This div is used to show the red square*/ 26 .parentSquare { 27 position: absolute; 28 top: 50px; 29 left: 50px; 30 width: 200px; 31 height: 200px; 32 transform: rotate(45deg); 33 background-color: green; 34 } 35 .childSquare { 36 position: absolute; 37 top: 50px; 38 left: 50px; 39 width: 100px; 40 height: 100px; 41 background-color: red; 42 transform: inherit;/*While inherited, the child div should rotate 90 degree instead of 45*/ 43 } 44 p { 45 position: absolute; 46 top: 300px; 47 } 48 </style> 49 </head> 50 <body> 51 <p>The test passes if there is a green square and no red. And it is rotated 45 degree.</p> 52 <div class="flag"></div> 53 <div class="parentSquare"> 54 <div class="childSquare"></div> 55 </div> 56 </body> 57 </html>