transform-origin-013.html (989B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Reftest Reference</title> 5 <link rel="author" title="Jaffe Worley" href="mailto:jaffe75@gmail.com"> 6 <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-origin-property"> 8 <link rel="match" href="transform-origin-013-ref.html"> 9 <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4000"> 10 <style type="text/css"> 11 div { 12 width: 100px; 13 height: 100px; 14 } 15 .gradient{ 16 background-image: linear-gradient(orange 50%, fuchsia 50%); 17 transform: rotate(90deg); 18 transform-origin: top right; 19 } 20 21 .red { 22 width: 98px; 23 height: 98px; 24 background: red; 25 } 26 </style> 27 </head> 28 <body> 29 <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> 30 <div class="red"></div> 31 <div class="gradient"></div> 32 </body> 33 </html>