transform-input-018.html (1599B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test (Transforms): Input (type=radio)</title> 5 <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> 6 <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> 8 <meta name="assert" content='The input element is an atomic inline element, 9 so it falls under the definition of transformable and should be affected by 10 transformations as usual. This is one in a series of tests that verify 11 that a few simple transforms have the expected effect on various types of 12 inputs. (They only test a few very specific transforms because it would be 13 difficult to construct a correct reference file for more complex 14 transforms.)'> 15 <link rel="match" href="transform-input-018-ref.html"> 16 <style> 17 input { 18 /* Margin to avoid overlap of translated inputs */ 19 margin: 10px; 20 } 21 p + input { 22 transform: rotate(360deg); 23 } 24 p + input + input { 25 transform: translateX(-10px); 26 } 27 p + input + input + input { 28 transform: translateX(10px); 29 } 30 p + input + input + input + input { 31 transform: translateY(-10px); 32 } 33 p + input + input + input + input + input { 34 transform: translateY(10px); 35 } 36 </style> 37 </head> 38 <body> 39 <p>type=radio</p> 40 <input type="radio" checked> 41 <input type="radio"> 42 <input type="radio" checked> 43 <input type="radio"> 44 <input type="radio" checked> 45 </body> 46 </html>