Scroll snap points are not supported on iframe content
[WebKit-https.git] / 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