blob: 983975ccf45c70f72464012baf17b6fb030ea97d [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
.horizontalGallery {
width: 400px;
height: 50px;
overflow-y: hidden;
overflow-x: auto;
}
.verticalGallery {
width: 400px;
height: 50px;
display: inline-block;
overflow-x: hidden;
overflow-y: auto;
}
.horizontalGalleryDrawer {
width: 3000px;
height: 50px;
}
.verticalGalleryDrawer {
width: 400px;
height: 300px;
}
.colorBox {
height: 50px;
width: 400px;
float: left;
}
.noInitial {
scroll-snap-type: both;
scroll-snap-align: center;
scroll-padding: 20px;
scroll-snap-margin: 1px;
}
.initialType {
scroll-snap-type: initial;
scroll-snap-align: center;
scroll-padding: 20px;
scroll-snap-margin: 1px;
}
.initialPadding {
scroll-snap-type: both;
scroll-snap-align: center;
scroll-padding: initial;
scroll-snap-margin: 1px;
}
.initialMargin {
scroll-snap-type: both;
scroll-snap-align: center;
scroll-padding: 20px;
scroll-snap-margin: initial;
}
.initialAlign {
scroll-snap-type: both;
scroll-snap-align: initial;
scroll-padding: 20px;
scroll-snap-margin: 1px;
}
.allInitial {
scroll-snap-type: initial;
scroll-snap-align: initial;
scroll-padding: initial;
scroll-snap-margin: initial;
}
#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">
<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="scroll-snap-type: 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="initialPadding" class="horizontalGallery initialPadding" style="scroll-padding: 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="initialMargin" class="horizontalGallery initialMargin" style="scroll-snap-margin: 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="initialAlign" class="horizontalGallery initialAlign" style="scroll-snap-align: 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="allInitial" class="horizontalGallery allInitial" style="scroll-snap-type: initial; scroll-padding: initial; scroll-snap-margin: initial; scroll-snap-align: 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="allInitialY" class="verticalGallery noInitial" style="scroll-snap-type: initial; scroll-padding: initial; scroll-snap-margin: initial; scroll-snap-align: initial;">
<div class="verticalGalleryDrawer">
<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['scroll-snap-type']");
shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('scroll-snap-type')", "both proximity");
shouldBeEmptyString("noInitial.style['scroll-padding']");
shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('scroll-padding')", "20px");
shouldBeEmptyString("noInitial.style['scroll-snap-margin']");
shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('scroll-snap-margin')", "1px");
shouldBeEmptyString("noInitial.style['scroll-snap-align']");
shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('scroll-snap-align')", "center center");
var initialType = document.getElementById('initialType');
shouldBeEqualToString("initialType.style['scroll-snap-type']", "initial");
shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('scroll-snap-type')", "none");
shouldBeEmptyString("initialType.style['scroll-padding']");
shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('scroll-padding')", "20px");
shouldBeEmptyString("initialType.style['scroll-snap-margin']");
shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('scroll-snap-margin')", "1px");
shouldBeEmptyString("initialType.style['scroll-snap-align']");
shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('scroll-snap-align')", "center center");
var initialPadding = document.getElementById('initialPadding');
shouldBeEmptyString("initialPadding.style['scroll-snap-type']");
shouldBeEqualToString("window.getComputedStyle(initialPadding).getPropertyValue('scroll-snap-type')", "both proximity");
shouldBeEqualToString("initialPadding.style['scroll-padding']", "initial");
shouldBeEqualToString("window.getComputedStyle(initialPadding).getPropertyValue('scroll-padding')", "0px");
shouldBeEmptyString("initialPadding.style['scroll-snap-margin']");
shouldBeEqualToString("window.getComputedStyle(initialPadding).getPropertyValue('scroll-snap-margin')", "1px");
shouldBeEmptyString("initialPadding.style['scroll-snap-align']");
shouldBeEqualToString("window.getComputedStyle(initialPadding).getPropertyValue('scroll-snap-align')", "center center");
var initialMargin = document.getElementById('initialMargin');
shouldBeEmptyString("initialMargin.style['scroll-snap-type']");
shouldBeEqualToString("window.getComputedStyle(initialMargin).getPropertyValue('scroll-snap-type')", "both proximity");
shouldBeEmptyString("initialMargin.style['scroll-padding']");
shouldBeEqualToString("window.getComputedStyle(initialMargin).getPropertyValue('scroll-padding')", "20px");
shouldBeEqualToString("initialMargin.style['scroll-snap-margin']", "initial");
shouldBeEqualToString("window.getComputedStyle(initialMargin).getPropertyValue('scroll-snap-margin')", "0px");
shouldBeEmptyString("initialMargin.style['scroll-snap-align']");
shouldBeEqualToString("window.getComputedStyle(initialMargin).getPropertyValue('scroll-snap-align')", "center center");
var initialAlign = document.getElementById('initialAlign');
shouldBeEmptyString("initialAlign.style['scroll-snap-type']");
shouldBeEqualToString("window.getComputedStyle(initialAlign).getPropertyValue('scroll-snap-type')", "both proximity");
shouldBeEmptyString("initialAlign.style['scroll-padding']");
shouldBeEqualToString("window.getComputedStyle(initialAlign).getPropertyValue('scroll-padding')", "20px");
shouldBeEmptyString("initialAlign.style['scroll-snap-margin']");
shouldBeEqualToString("window.getComputedStyle(initialAlign).getPropertyValue('scroll-snap-margin')", "1px");
shouldBeEqualToString("initialAlign.style['scroll-snap-align']", "initial");
shouldBeEqualToString("window.getComputedStyle(initialAlign).getPropertyValue('scroll-snap-align')", "none none");
var allInitial = document.getElementById('allInitial');
shouldBeEqualToString("allInitial.style['scroll-snap-type']", "initial");
shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('scroll-snap-type')", "none");
shouldBeEqualToString("allInitial.style['scroll-padding']", "initial");
shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('scroll-padding')", "0px");
shouldBeEqualToString("allInitial.style['scroll-snap-margin']", "initial");
shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('scroll-snap-margin')", "0px");
shouldBeEqualToString("allInitial.style['scroll-snap-align']", "initial");
shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('scroll-snap-align')", "none none");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>