device-aspect-ratio-003.html (1103B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Media Queries Test: min-device-aspect-ratio - 1279/1024 ('device-aspect-ratio' property with prefix 'min')</title> 4 <link rel="author" title="Intel" href="http://www.intel.com/"> 5 <link rel="author" title="Xin Liu" href="mailto:xinx.liu@intel.com"> 6 <link rel="help" title="4.7. device-aspect-ratio" href="http://www.w3.org/TR/css3-mediaqueries/#device-aspect-ratio"> 7 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 8 <meta name="assert" content="The 'device-aspect-ratio' property with prefix 'min' set '1279/1024' means that the minimum of ratio is '1279/1024', only and only if the device value of 'width' to value of 'height' is greater than value of 'min-device-aspect-ratio', the style sheet will be applied."> 9 <style> 10 div { 11 background-color: red; 12 height: 100px; 13 width: 100px; 14 } 15 @media screen and (min-device-aspect-ratio: 1279/1024) { 16 div { 17 background-color: green; 18 } 19 } 20 </style> 21 <body> 22 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 23 <div></div> 24 </body>