| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .horizontalGallery { |
| width: 100px; |
| height: 100px; |
| overflow-y: hidden; |
| overflow-x: auto; |
| margin: 2px; |
| -webkit-overflow-scrolling: touch; |
| -webkit-scroll-snap-points-x: repeat(100%); |
| -webkit-scroll-snap-type: mandatory; |
| -webkit-scroll-snap-coordinate: 50% 50%; |
| } |
| .horizontalGalleryDrawer { |
| width: 600px; |
| height: 100px; |
| } |
| .colorBox { |
| height: 100px; |
| width: 100px; |
| float: left; |
| } |
| #item0 { background-color: red; } |
| #item1 { background-color: green; } |
| #item2 { background-color: blue; } |
| #item3 { background-color: aqua; } |
| #item4 { background-color: yellow; } |
| #item5 { background-color: fuchsia; } |
| </style> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script> |
| function reportResult(horizontalTargetID) |
| { |
| var horizontalTarget = document.getElementById(horizontalTargetID); |
| |
| debug("Scroll-snap offsets for " + horizontalTargetID + ": " + window.internals.scrollSnapOffsets(horizontalTarget)); |
| } |
| |
| function runTest() |
| { |
| reportResult('horizontalTarget'); |
| reportResult('first'); |
| reportResult('second'); |
| reportResult('third'); |
| |
| finishJSTest(); |
| testRunner.notifyDone(); |
| } |
| |
| function onLoad() |
| { |
| if (window.testRunner) { |
| window.jsTestIsAsync = true; |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| setTimeout(runTest, 0); |
| } |
| } |
| </script> |
| </head> |
| <body onload="onLoad();"> |
| <div style="position: relative; width: 300px"> |
| <div>The test passes if this page renders without crashing.</div> |
| <div class="horizontalGallery" id="horizontalTarget"> |
| <div class="horizontalGalleryDrawer"> |
| <div id="item0" class="colorBox"></div> |
| <div id="item1" class="colorBox"></div> |
| <div id="item2" class="colorBox"></div> |
| <br id="first" /> |
| <br class="horizontalGallery" id="second" /> |
| </div> |
| </div> |
| <br class="horizontalGallery" id="third" /> |
| <div id="console"></div> |
| </div> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
