device-aspect-ratio-002.html (1014B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Media Queries Test: max-device-aspect-ratio - 0/0 ('device-aspect-ratio' property with prefix 'max')</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 'max' set '0/0' (which is converted into '1/0') is infinite that means the style sheet specified by 'max-device-aspect-ratio' will be applied."> 9 <style> 10 div { 11 background-color: red; 12 height: 100px; 13 width: 100px; 14 } 15 @media screen and (max-device-aspect-ratio: 0/0) { 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>