LayoutTests/css3/scroll-snap/resources/iframe-content.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style>
   5             .horizontalGallery {
   6                 width: 400px;
   7                 height: 50px;
   8                 overflow-y: hidden;
   9                 overflow-x: auto;
  10             }
  11             .horizontalGalleryDrawer {
  12                 width: 3000px;
  13                 height: 50px;
  14             }
  15             .colorBox {
  16                 height: 50px;
  17                 width: 400px;
  18                 float: left;
  19             }
  20
  21             .noInitial {
  22                 -webkit-scroll-snap-type: mandatory;
  23                 -webkit-scroll-snap-points-x: repeat(100%);
  24                 -webkit-scroll-snap-points-y: repeat(100%);
  25                 -webkit-scroll-snap-coordinate: left top;
  26             }
  27
  28             #item0 { background-color: red; }
  29             #item1 { background-color: green; }
  30             #item2 { background-color: blue; }
  31             #item3 { background-color: aqua; }
  32             #item4 { background-color: yellow; }
  33             #item5 { background-color: fuchsia; }
  34         </style>
  35         <script>
  36         top.succeeded = true;
  37         </script>
  38     </head>
  39     <body>
  40         <div style="width: 400px">
  41             <div id="noInitial" class="horizontalGallery noInitial" style="-webkit-scroll-snap-destination: right bottom; -webkit-scroll-snap-coordinate: left top;">
  42                 <div class="horizontalGalleryDrawer">
  43                     <div id="item0" class="colorBox"></div>
  44                     <div id="item1" class="colorBox"></div>
  45                     <div id="item2" class="colorBox"></div>
  46                     <div id="item3" class="colorBox"></div>
  47                     <div id="item4" class="colorBox"></div>
  48                     <div id="item5" class="colorBox"></div>
  49                 </div>
  50             </div>
  51         </div>
  52         <div id="console"></div>
  53         <script>
  54
  55         function shouldMatch(_a, _b, result)
  56         {
  57             if (typeof _a !== "string" || typeof _b !== "string")
  58                 top.debug("WARN: shouldBeEqualToString() expects string arguments");
  59
  60             var _av;
  61             try {
  62                 _av = eval(_a);
  63             } catch (e) {
  64                 return false;
  65             }
  66
  67             return top.isResultCorrect(_av, _b);
  68         }
  69
  70         var noInitial = document.getElementById('noInitial');
  71         top.succeeded = shouldMatch("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-type')", "mandatory");
  72         top.succeeded = top.succeeded && shouldMatch("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)");
  73         top.succeeded = top.succeeded && shouldMatch("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)");
  74         top.succeeded = top.succeeded && shouldMatch("noInitial.style['-webkit-scroll-snap-coordinate']", "0% 0%");
  75         top.succeeded = top.succeeded && shouldMatch("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-coordinate')", "0% 0%");
  76
  77         if (top.succeeded)
  78             top.debug("iframe processed all tests successfully.");
  79         else
  80             top.debug("iframe processing failed.");
  81         </script>
  82     </body>
  83 </html>
  84