| <html> |
| <head> |
| <title>CSS3 media query test: media query testing aspect-ratio feature.</title> |
| <style type="text/css"> |
| @media screen and (aspect-ratio:800/600) { |
| #a { color: green } |
| } |
| @media screen and (min-aspect-ratio:1/1) { |
| #b { color: green } |
| } |
| @media screen and (max-aspect-ratio:1/1) { |
| #c { color: green } |
| } |
| @media screen and (min-aspect-ratio:16/9) { |
| #d { color: green } |
| } |
| </style> |
| </head> |
| <body> |
| <p id="a">This text should be green if the viewport is 800:600 ratio. This is unlikely to happen |
| by chance, but the layout testing sets this size</p> |
| <p id="b">This text should be green if the viewport is landscape (minimum aspect ratio of 1:1).</p> |
| <p id="c">This text should be green if the viewport is portrait (maximum aspect ratio of 1:1).</p> |
| <p id="d">This text should be green if the viewport aspect ratio is greater than 16:9.</p> |
| </body> |
| </html> |
