third_party/WebKit/Source/web/tests/data/device_emulation.html

   1 <html>
   2 <head>
   3 <style>
   4 body {
   5     margin: 0;
   6     min-height: 1000px;
   7 }
   8 #test {
   9     width: 100px;
  10     height: 100px;
  11 }
  12 @media all and (device-width:700px)
  13 {
  14     #test { width: 300px; }
  15 }
  16 @media all and (max-device-width:699px)
  17 {
  18     #test { width: 200px; }
  19 }
  20 @media all and (min-device-width:701px)
  21 {
  22     #test { width: 400px; }
  23 }
  24 @media all and (device-height:500px)
  25 {
  26     #test { height: 300px; }
  27 }
  28 @media all and (max-device-height:499px)
  29 {
  30     #test { height: 200px; }
  31 }
  32 @media all and (min-device-height:501px)
  33 {
  34     #test { height: 400px; }
  35 }
  36 #pointer {
  37     width: 10px;
  38     height: 10px;
  39 }
  40 @media all and (pointer: coarse)
  41 {
  42     #pointer { height: 20px; }
  43 }
  44 @media all and (hover: on-demand)
  45 {
  46     #pointer { width: 20px; }
  47 }
  48 </style>
  49
  50 <script>
  51 function dumpSize(id)
  52 {
  53     var div = document.querySelector("#" + id);
  54     return div.offsetWidth + "x" + div.offsetHeight;
  55 }
  56 </script>
  57 </head>
  58 <body>
  59 <div id="test"></div>
  60 <div id="pointer"></div>
  61 </body>
  62 </html>