third_party/WebKit/LayoutTests/fast/media/mq-aspect-ratio.html

   1 <html>
   2 <head>
   3 <title>CSS3 media query test: media query testing aspect-ratio feature.</title>
   4 <style type="text/css">
   5 @media screen and (aspect-ratio:800/600) {
   6 #a { color: green }
   7 }
   8 @media screen and (min-aspect-ratio:1/1) {
   9 #b { color: green }
  10 }
  11 @media screen and (max-aspect-ratio:1/1) {
  12 #c { color: green }
  13 }
  14 @media screen and (min-aspect-ratio:16/9) {
  15 #d { color: green }
  16 }
  17 </style>
  18 </head>
  19 <body>
  20   <p id="a">This text should be green if the viewport is 800:600 ratio. This is unlikely to happen
  21     by chance, but the layout testing sets this size</p>
  22   <p id="b">This text should be green if the viewport is landscape (minimum aspect ratio of 1:1).</p>
  23   <p id="c">This text should be green if the viewport is portrait (maximum aspect ratio of 1:1).</p>
  24   <p id="d">This text should be green if the viewport aspect ratio is greater than 16:9.</p>
  25 </body>
  26 </html>