LayoutTests/fast/hidpi/image-set-border-image-simple.html

   1 <html>
   2 <head>
   3 <script>
   4     function runTest() {
   5         if (!window.layoutTestController || !window.sessionStorage)
   6             return;
   7
   8         if (!sessionStorage.scaleFactorIsSet) {
   9             layoutTestController.waitUntilDone();
  10             layoutTestController.setBackingScaleFactor(2, scaleFactorIsSet);
  11         }
  12
  13         if (sessionStorage.pageReloaded && sessionStorage.scaleFactorIsSet) {
  14             delete sessionStorage.pageReloaded;
  15             delete sessionStorage.scaleFactorIsSet;
  16             layoutTestController.notifyDone();
  17         } else {
  18             // Right now there is a bug that image-set does not properly deal with dynamic changes to the scale factor,
  19             // so to work around that, we must reload the page to get the 2x image.
  20             sessionStorage.pageReloaded = true;
  21             document.location.reload(true);
  22         }
  23     }
  24
  25     function scaleFactorIsSet() {
  26         sessionStorage.scaleFactorIsSet = true;
  27     }
  28
  29     window.onload = runTest;
  30 </script>
  31
  32 <style>
  33     #foo {
  34         width:100px;
  35         height:100px;
  36         border-width: 10px;
  37         -webkit-border-image: -webkit-image-set(url('resources/blue-100-px-square.png') 1x, url('resources/green-200-px-square.png') 2x) 10 10 10 10 stretch stretch;
  38     }
  39 </style>
  40 </head>
  41
  42 <body id="body">
  43     <div>This test passes if the div below is a blue 100px square when the deviceScaleFactor is 1, and if it is a 100px green square when the deviceScaleFactor is 2.</div>
  44     <div id=foo></div>
  45 </body>
  46 </html>