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