| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .horizontalGallery { |
| width: 400px; |
| height: 50px; |
| overflow-y: hidden; |
| overflow-x: auto; |
| } |
| .horizontalGalleryDrawer { |
| width: 3000px; |
| height: 50px; |
| } |
| .colorBox { |
| height: 50px; |
| width: 400px; |
| float: left; |
| } |
| |
| .noInitial { |
| -webkit-scroll-snap-type: mandatory; |
| -webkit-scroll-snap-points-x: repeat(100%); |
| -webkit-scroll-snap-points-y: repeat(100%); |
| -webkit-scroll-snap-destination: right bottom; |
| -webkit-scroll-snap-coordinate: left top; |
| } |
| |
| .initialType { |
| -webkit-scroll-snap-type: initial; |
| -webkit-scroll-snap-points-x: repeat(100%); |
| -webkit-scroll-snap-points-y: repeat(100%); |
| -webkit-scroll-snap-destination: left top; |
| -webkit-scroll-snap-coordinate: right bottom; |
| } |
| |
| .initialXPoints { |
| -webkit-scroll-snap-type: mandatory; |
| -webkit-scroll-snap-points-x: initial; |
| -webkit-scroll-snap-points-y: repeat(100%); |
| -webkit-scroll-snap-destination: 50% center; |
| -webkit-scroll-snap-coordinate: center 50%; |
| } |
| |
| .initialYPoints { |
| -webkit-scroll-snap-type: mandatory; |
| -webkit-scroll-snap-points-x: repeat(100%); |
| -webkit-scroll-snap-points-y: initial; |
| -webkit-scroll-snap-destination: center 20px; |
| -webkit-scroll-snap-coordinate: 50% center; |
| } |
| |
| .initialDestination { |
| -webkit-scroll-snap-type: proximity; |
| -webkit-scroll-snap-points-x: repeat(100%); |
| -webkit-scroll-snap-points-y: repeat(100%); |
| -webkit-scroll-snap-destination: initial; |
| -webkit-scroll-snap-coordinate: none; |
| } |
| |
| .initialSnapCoordinate { |
| -webkit-scroll-snap-type: mandatory; |
| -webkit-scroll-snap-points-x: repeat(100%); |
| -webkit-scroll-snap-points-y: repeat(100%); |
| -webkit-scroll-snap-destination: none; |
| -webkit-scroll-snap-coordinate: initial; |
| } |
| |
| .noneSnapCoordinateAndDestination { |
| -webkit-scroll-snap-type: mandatory; |
| -webkit-scroll-snap-points-x: repeat(100%); |
| -webkit-scroll-snap-points-y: repeat(100%); |
| -webkit-scroll-snap-destination: none; |
| -webkit-scroll-snap-coordinate: none; |
| } |
| |
| .allInitial { |
| -webkit-scroll-snap-type: initial; |
| -webkit-scroll-snap-points-x: initial; |
| -webkit-scroll-snap-points-y: initial; |
| -webkit-scroll-snap-destination: initial; |
| -webkit-scroll-snap-coordinate: initial |
| } |
| |
| .calculatedCoordinateAndDestination { |
| -webkit-scroll-snap-type: mandatory; |
| -webkit-scroll-snap-points-x: repeat(-webkit-calc(100% - 4%)); |
| -webkit-scroll-snap-points-y: repeat(-webkit-calc(20% + 32%)); |
| -webkit-scroll-snap-destination: -webkit-calc(10px + 6em) -webkit-calc(22px + 3px); |
| -webkit-scroll-snap-coordinate: -webkit-calc(32px - 1em) -webkit-calc(19em + 5em); |
| } |
| |
| #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> |
| </head> |
| <body> |
| <div style="width: 400px"> |
| <div id="noInitial" class="horizontalGallery noInitial" style="-webkit-scroll-snap-destination: right bottom; -webkit-scroll-snap-coordinate: left top;"> |
| <div class="horizontalGalleryDrawer"> |
| <div id="item0" class="colorBox"></div> |
| <div id="item1" class="colorBox"></div> |
| <div id="item2" class="colorBox"></div> |
| <div id="item3" class="colorBox"></div> |
| <div id="item4" class="colorBox"></div> |
| <div id="item5" class="colorBox"></div> |
| </div> |
| </div> |
| <div id="initialType" class="horizontalGallery initialType" style="-webkit-scroll-snap-type: initial; -webkit-scroll-snap-destination: left top; -webkit-scroll-snap-coordinate: right bottom;"> |
| <div class="horizontalGalleryDrawer"> |
| <div id="item0" class="colorBox"></div> |
| <div id="item1" class="colorBox"></div> |
| <div id="item2" class="colorBox"></div> |
| <div id="item3" class="colorBox"></div> |
| <div id="item4" class="colorBox"></div> |
| <div id="item5" class="colorBox"></div> |
| </div> |
| </div> |
| <div id="initialXPoints" class="horizontalGallery initialXPoints" style="-webkit-scroll-snap-points-x: initial; -webkit-scroll-snap-destination: 50% center; -webkit-scroll-snap-coordinate: center 50%;"> |
| <div class="horizontalGalleryDrawer"> |
| <div id="item0" class="colorBox"></div> |
| <div id="item1" class="colorBox"></div> |
| <div id="item2" class="colorBox"></div> |
| <div id="item3" class="colorBox"></div> |
| <div id="item4" class="colorBox"></div> |
| <div id="item5" class="colorBox"></div> |
| </div> |
| </div> |
| <div id="initialYPoints" class="horizontalGallery initialYPoints" style="-webkit-scroll-snap-points-y: initial; -webkit-scroll-snap-destination: center 20px; -webkit-scroll-snap-coordinate: 50% center;"> |
| <div class="horizontalGalleryDrawer"> |
| <div id="item0" class="colorBox"></div> |
| <div id="item1" class="colorBox"></div> |
| <div id="item2" class="colorBox"></div> |
| <div id="item3" class="colorBox"></div> |
| <div id="item4" class="colorBox"></div> |
| <div id="item5" class="colorBox"></div> |
| </div> |
| </div> |
| <div id="initialDestination" class="horizontalGallery initialDestination" style="-webkit-scroll-snap-destination: initial; -webkit-scroll-snap-coordinate: none;"> |
| <div class="horizontalGalleryDrawer"> |
| <div id="item0" class="colorBox"></div> |
| <div id="item1" class="colorBox"></div> |
| <div id="item2" class="colorBox"></div> |
| <div id="item3" class="colorBox"></div> |
| <div id="item4" class="colorBox"></div> |
| <div id="item5" class="colorBox"></div> |
| </div> |
| </div> |
| <div id="initialSnapCoordinate" class="horizontalGallery initialSnapCoordinate" style="-webkit-scroll-snap-coordinate: initial; -webkit-scroll-snap-destination: none;"> |
| <div class="horizontalGalleryDrawer"> |
| <div id="item0" class="colorBox"></div> |
| <div id="item1" class="colorBox"></div> |
| <div id="item2" class="colorBox"></div> |
| <div id="item3" class="colorBox"></div> |
| <div id="item4" class="colorBox"></div> |
| <div id="item5" class="colorBox"></div> |
| </div> |
| </div> |
| <div id="noneSnapCoordinateAndDestination" class="horizontalGallery noneSnapCoordinateAndDestination" style="-webkit-scroll-snap-destination: none; -webkit-scroll-snap-coordinate: none;"> |
| <div class="horizontalGalleryDrawer"> |
| <div id="item0" class="colorBox"></div> |
| <div id="item1" class="colorBox"></div> |
| <div id="item2" class="colorBox"></div> |
| <div id="item3" class="colorBox"></div> |
| <div id="item4" class="colorBox"></div> |
| <div id="item5" class="colorBox"></div> |
| </div> |
| </div> |
| <div id="allInitial" class="horizontalGallery allInitial" style="-webkit-scroll-snap-type: initial; -webkit-scroll-snap-points-x: initial; -webkit-scroll-snap-points-y: initial; -webkit-scroll-snap-destination: initial; -webkit-scroll-snap-coordinate: initial"> |
| <div class="horizontalGalleryDrawer"> |
| <div id="item0" class="colorBox"></div> |
| <div id="item1" class="colorBox"></div> |
| <div id="item2" class="colorBox"></div> |
| <div id="item3" class="colorBox"></div> |
| <div id="item4" class="colorBox"></div> |
| <div id="item5" class="colorBox"></div> |
| </div> |
| </div> |
| <div id="calculatedCoordinateAndDestination" class="horizontalGallery calculatedCoordinateAndDestination"> |
| <div class="horizontalGalleryDrawer"> |
| <div id="item0" class="colorBox"></div> |
| <div id="item1" class="colorBox"></div> |
| <div id="item2" class="colorBox"></div> |
| <div id="item3" class="colorBox"></div> |
| <div id="item4" class="colorBox"></div> |
| <div id="item5" class="colorBox"></div> |
| </div> |
| </div> |
| </div> |
| <div id="console"></div> |
| <script> |
| description("Tests 'initial' on scroll snap properties."); |
| |
| var noInitial = document.getElementById('noInitial'); |
| shouldBeEmptyString("noInitial.style['-webkit-scroll-snap-type']"); |
| shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-type')", "mandatory"); |
| shouldBeEmptyString("noInitial.style['-webkit-scroll-snap-points-x']"); |
| shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)"); |
| shouldBeEmptyString("noInitial.style['-webkit-scroll-snap-points-y']"); |
| shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)"); |
| shouldBeEqualToString("noInitial.style['-webkit-scroll-snap-destination']", "100% 100%"); |
| shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-destination')", "100% 100%"); |
| shouldBeEqualToString("noInitial.style['-webkit-scroll-snap-coordinate']", "0% 0%"); |
| shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('-webkit-scroll-snap-coordinate')", "0% 0%"); |
| |
| var initialType = document.getElementById('initialType'); |
| shouldBeEqualToString("initialType.style['-webkit-scroll-snap-type']", "initial"); |
| shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-type')", "none"); |
| shouldBeEmptyString("initialType.style['-webkit-scroll-snap-points-x']"); |
| shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)"); |
| shouldBeEmptyString("initialType.style['-webkit-scroll-snap-points-y']"); |
| shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)"); |
| shouldBeEqualToString("initialType.style['-webkit-scroll-snap-destination']", "0% 0%"); |
| shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-destination')", "0% 0%"); |
| shouldBeEqualToString("initialType.style['-webkit-scroll-snap-coordinate']", "100% 100%"); |
| shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('-webkit-scroll-snap-coordinate')", "100% 100%"); |
| |
| var initialXPoints = document.getElementById('initialXPoints'); |
| shouldBeEmptyString("initialXPoints.style['-webkit-scroll-snap-type']"); |
| shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-type')", "mandatory"); |
| shouldBeEqualToString("initialXPoints.style['-webkit-scroll-snap-points-x']", "initial"); |
| shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-points-x')", "none"); |
| shouldBeEmptyString("initialXPoints.style['-webkit-scroll-snap-points-y']"); |
| shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)"); |
| shouldBeEqualToString("initialXPoints.style['-webkit-scroll-snap-destination']", "50% 50%"); |
| shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-destination')", "50% 50%"); |
| shouldBeEqualToString("initialXPoints.style['-webkit-scroll-snap-coordinate']", "50% 50%"); |
| shouldBeEqualToString("window.getComputedStyle(initialXPoints).getPropertyValue('-webkit-scroll-snap-coordinate')", "50% 50%"); |
| |
| var initialYPoints = document.getElementById('initialYPoints'); |
| shouldBeEmptyString("initialYPoints.style['-webkit-scroll-snap-type']"); |
| shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-type')", "mandatory"); |
| shouldBeEmptyString("initialYPoints.style['-webkit-scroll-snap-points-x']"); |
| shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)"); |
| shouldBeEqualToString("initialYPoints.style['-webkit-scroll-snap-points-y']", "initial"); |
| shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-points-y')", "none"); |
| shouldBeEqualToString("initialYPoints.style['-webkit-scroll-snap-destination']", "50% 20px"); |
| shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-destination')", "50% 20px"); |
| shouldBeEqualToString("initialYPoints.style['-webkit-scroll-snap-coordinate']", "50% 50%"); |
| shouldBeEqualToString("window.getComputedStyle(initialYPoints).getPropertyValue('-webkit-scroll-snap-coordinate')", "50% 50%"); |
| |
| var initialDestination = document.getElementById('initialDestination'); |
| shouldBeEmptyString("initialDestination.style['-webkit-scroll-snap-type']"); |
| shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-type')", "proximity"); |
| shouldBeEmptyString("initialDestination.style['-webkit-scroll-snap-points-x']"); |
| shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)"); |
| shouldBeEmptyString("initialDestination.style['-webkit-scroll-snap-points-y']"); |
| shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)"); |
| shouldBeEqualToString("initialDestination.style['-webkit-scroll-snap-destination']", "initial"); |
| shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px"); |
| shouldBeEmptyString("initialDestination.style['-webkit-scroll-snap-coordinate']"); |
| shouldBeEqualToString("window.getComputedStyle(initialDestination).getPropertyValue('-webkit-scroll-snap-coordinate')", "none"); |
| |
| var initialSnapCoordinate = document.getElementById('initialSnapCoordinate'); |
| shouldBeEmptyString("initialSnapCoordinate.style['-webkit-scroll-snap-type']"); |
| shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-type')", "mandatory"); |
| shouldBeEmptyString("initialSnapCoordinate.style['-webkit-scroll-snap-points-x']"); |
| shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)"); |
| shouldBeEmptyString("initialSnapCoordinate.style['-webkit-scroll-snap-points-y']"); |
| shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)"); |
| shouldBeEmptyString("initialSnapCoordinate.style['-webkit-scroll-snap-destination']"); |
| shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px"); |
| shouldBeEqualToString("initialSnapCoordinate.style['-webkit-scroll-snap-coordinate']", "initial"); |
| shouldBeEqualToString("window.getComputedStyle(initialSnapCoordinate).getPropertyValue('-webkit-scroll-snap-coordinate')", "none"); |
| |
| var allInitial = document.getElementById('allInitial'); |
| shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-type']", "initial"); |
| shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-type')", "none"); |
| shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-points-x']", "initial"); |
| shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-points-x')", "none"); |
| shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-points-y']", "initial"); |
| shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-points-y')", "none"); |
| shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-destination']", "initial"); |
| shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px"); |
| shouldBeEqualToString("allInitial.style['-webkit-scroll-snap-coordinate']", "initial"); |
| shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('-webkit-scroll-snap-coordinate')", "none"); |
| |
| var noneSnapCoordinateAndDestination = document.getElementById('noneSnapCoordinateAndDestination'); |
| shouldBeEmptyString("noneSnapCoordinateAndDestination.style['-webkit-scroll-snap-type']"); |
| shouldBeEqualToString("window.getComputedStyle(noneSnapCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-type')", "mandatory"); |
| shouldBeEmptyString("noneSnapCoordinateAndDestination.style['-webkit-scroll-snap-points-x']"); |
| shouldBeEqualToString("window.getComputedStyle(noneSnapCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(100%)"); |
| shouldBeEmptyString("noneSnapCoordinateAndDestination.style['-webkit-scroll-snap-points-y']"); |
| shouldBeEqualToString("window.getComputedStyle(noneSnapCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(100%)"); |
| shouldBeEmptyString("noneSnapCoordinateAndDestination.style['-webkit-scroll-snap-destination']"); |
| shouldBeEqualToString("window.getComputedStyle(noneSnapCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-destination')", "0px 0px"); |
| shouldBeEmptyString("noneSnapCoordinateAndDestination.style['-webkit-scroll-snap-coordinate']"); |
| shouldBeEqualToString("window.getComputedStyle(noneSnapCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-coordinate')", "none"); |
| |
| var calculatedCoordinateAndDestination = document.getElementById('calculatedCoordinateAndDestination'); |
| shouldBeEmptyString("calculatedCoordinateAndDestination.style['-webkit-scroll-snap-type']"); |
| shouldBeEqualToString("window.getComputedStyle(calculatedCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-type')", "mandatory"); |
| shouldBeEmptyString("calculatedCoordinateAndDestination.style['-webkit-scroll-snap-points-x']"); |
| shouldBeEqualToString("window.getComputedStyle(calculatedCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-points-x')", "repeat(96%)"); |
| shouldBeEmptyString("calculatedCoordinateAndDestination.style['-webkit-scroll-snap-points-y']"); |
| shouldBeEqualToString("window.getComputedStyle(calculatedCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-points-y')", "repeat(52%)"); |
| shouldBeEmptyString("calculatedCoordinateAndDestination.style['-webkit-scroll-snap-destination']"); |
| shouldBeEqualToString("window.getComputedStyle(calculatedCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-destination')", "106px 25px"); |
| shouldBeEmptyString("calculatedCoordinateAndDestination.style['-webkit-scroll-snap-coordinate']"); |
| shouldBeEqualToString("window.getComputedStyle(calculatedCoordinateAndDestination).getPropertyValue('-webkit-scroll-snap-coordinate')", "16px 384px"); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
| |
