transform-input-014.html (1854B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test (Transforms): Input (type=number)</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 <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-014-ref.html"> 16 <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-866"> 17 <style> 18 input { 19 /* Margin to avoid overlap of translated inputs */ 20 margin: 10px; 21 } 22 p + input { 23 transform: rotate(360deg); 24 } 25 p + input + input { 26 transform: translateX(-10px); 27 } 28 p + input + input + input { 29 transform: translateX(10px); 30 } 31 p + input + input + input + input { 32 transform: translateY(-10px); 33 } 34 p + input + input + input + input + input { 35 transform: translateY(10px); 36 } 37 </style> 38 </head> 39 <body> 40 <p>type=number</p> 41 <input value="613" min="0" max="1000" step="1" type="number"> 42 <input value="613" min="0" max="1000" step="1" type="number"> 43 <input value="613" min="0" max="1000" step="1" type="number"> 44 <input value="613" min="0" max="1000" step="1" type="number"> 45 <input value="613" min="0" max="1000" step="1" type="number"> 46 </body> 47 </html>