transform-percent-008.html (1191B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test (Transforms): Percentages (border box)</title> 5 <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> 7 <meta name="assert" content="This is part of a series of tests that check 8 that percentages in 'transform' values are evaluated relative to the 9 transformed element's border box. This test adds a thicker border plus 10 margin and padding to make any discrepancies more evident."> 11 <link rel="match" href="transform-percent-ref.html"> 12 <meta name="fuzzy" content="maxDifference=0-102;totalPixels=0-560"> 13 <link rel="mismatch" href="transform-percent-notref.html"> 14 <style> 15 div { 16 width: 60px; 17 height: 10px; 18 padding: 10px; 19 border: 10px solid gold; 20 margin: 10px; 21 background: gold; 22 position: absolute; 23 left: 90px; 24 top: 90px; 25 transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(100%) 26 skewx(10deg) translate(25px, 25px); 27 } 28 </style> 29 </head> 30 <body> 31 <div></div> 32 </body> 33 </html>