svg-rotate-angle-90-006.html (1346B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Transforms Test: SVG presentation attribute and rotate with negative, unit less turn</title> 5 <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle"> 8 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> 9 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"> 10 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> 11 <link rel="match" href="reference/svg-rotate-angle-90-ref.html"> 12 <meta name="flags" content="svg"> 13 <meta name="assert" content="The rotate transform function must support negative unit less angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect."> 14 <style type="text/css"> 15 svg { 16 width: 200px; 17 height: 200px; 18 } 19 </style> 20 </head> 21 <body> 22 <p>The test passes if there is a green square and no red.</p> 23 <svg> 24 <rect x="1" y="1" width="98" height="98" fill="red"/> 25 <rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(-270)"/> 26 </svg> 27 </body> 28 </html>