blob: fc26eab375dd8122595c5ca7af69e77193ce45b5 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
.topLevel {
width: 400px;
scroll-snap-type: x proximity;
scroll-snap-align: start end;
scroll-padding: 10%;
scroll-snap-margin: 5px 5px 10px 10px;
}
.horizontalGallery {
width: 400px;
height: 50px;
overflow-y: hidden;
overflow-x: auto;
}
.horizontalGalleryDrawer {
width: 3000px;
height: 50px;
}
.colorBox {
height: 50px;
width: 400px;
float: left;
}
.noInherit {
scroll-snap-type: mandatory;
scroll-snap-align: center;
scroll-padding: 20px;
scroll-snap-margin: 0 1px;
}
.inheritType {
scroll-snap-type: inherit;
scroll-snap-align: center;
scroll-padding: 20px;
scroll-snap-margin: 0 1px;
}
.inheritAlign {
scroll-snap-type: mandatory;
scroll-snap-align: inherit;
scroll-padding: 20px;
scroll-snap-margin: 0 1px;
}
.inheritPadding {
scroll-snap-type: mandatory;
scroll-snap-align: center;
scroll-padding: inherit;
scroll-snap-margin: 0 1px;
}
.inheritMargin {
scroll-snap-type: mandatory;
scroll-snap-align: center;
scroll-padding: 20px;
scroll-snap-margin: inherit;
}
.inheritAll {
scroll-snap-type: inherit;
scroll-snap-align: inherit;
scroll-padding: inherit;
scroll-snap-margin: inherit;
}
.inheritNone { }
#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 class="topLevel">
<div id="noInherit" class="horizontalGallery noInherit">
<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="inheritType" class="horizontalGallery inheritType" style="scroll-snap-type: inherit;">
<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="inheritAlign" class="horizontalGallery inheritAlign" style="scroll-snap-align: inherit;">
<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="inheritPadding" class="horizontalGallery inheritPadding" style="scroll-padding: inherit;">
<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="inheritMargin" class="horizontalGallery inheritMargin" style="scroll-snap-margin: inherit;">
<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="inheritAll" class="horizontalGallery inheritAll" style="scroll-snap-type: inherit; scroll-snap-align: inherit; scroll-padding: inherit; scroll-snap-margin: inherit;">
<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="inheritNone" class="horizontalGallery inheritNone">
<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 'inherit' on scroll snap properties.");
var noInherit = document.getElementById('noInherit');
shouldBeEmptyString("noInherit.style['scroll-snap-type']");
shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('scroll-snap-type')", "both mandatory");
shouldBeEmptyString("noInherit.style['scroll-snap-align']");
shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('scroll-snap-align')", "center center");
shouldBeEmptyString("noInherit.style['scroll-padding']");
shouldBeEmptyString("noInherit.style['scroll-padding-left']");
shouldBeEmptyString("noInherit.style['scroll-padding-right']");
shouldBeEmptyString("noInherit.style['scroll-padding-top']");
shouldBeEmptyString("noInherit.style['scroll-padding-bottom']");
shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('scroll-padding')", "20px");
shouldBeEmptyString("noInherit.style['scroll-snap-margin']");
shouldBeEmptyString("noInherit.style['scroll-snap-margin-left']");
shouldBeEmptyString("noInherit.style['scroll-snap-margin-right']");
shouldBeEmptyString("noInherit.style['scroll-snap-margin-top']");
shouldBeEmptyString("noInherit.style['scroll-snap-margin-bottom']");
shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('scroll-snap-margin')", "0px 1px");
debug("");
var inheritType = document.getElementById('inheritType');
shouldBeEqualToString("inheritType.style['scroll-snap-type']", "inherit");
shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('scroll-snap-type')", "x proximity");
shouldBeEmptyString("inheritType.style['scroll-snap-align']");
shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('scroll-snap-align')", "center center");
shouldBeEmptyString("inheritType.style['scroll-padding']");
shouldBeEmptyString("inheritType.style['scroll-padding-left']");
shouldBeEmptyString("inheritType.style['scroll-padding-right']");
shouldBeEmptyString("inheritType.style['scroll-padding-top']");
shouldBeEmptyString("inheritType.style['scroll-padding-bottom']");
shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('scroll-padding')", "20px");
shouldBeEmptyString("inheritType.style['scroll-snap-margin']");
shouldBeEmptyString("inheritType.style['scroll-snap-margin-left']");
shouldBeEmptyString("inheritType.style['scroll-snap-margin-right']");
shouldBeEmptyString("inheritType.style['scroll-snap-margin-top']");
shouldBeEmptyString("inheritType.style['scroll-snap-margin-bottom']");
shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('scroll-snap-margin')", "0px 1px");
debug("");
var inheritAlign = document.getElementById('inheritAlign');
shouldBeEmptyString("inheritAlign.style['scroll-snap-type']");
shouldBeEqualToString("window.getComputedStyle(inheritAlign).getPropertyValue('scroll-snap-type')", "both mandatory");
shouldBeEqualToString("inheritAlign.style['scroll-snap-align']", "inherit");
shouldBeEqualToString("window.getComputedStyle(inheritAlign).getPropertyValue('scroll-snap-align')", "start end");
shouldBeEmptyString("inheritAlign.style['scroll-padding']");
shouldBeEmptyString("inheritAlign.style['scroll-padding-left']");
shouldBeEmptyString("inheritAlign.style['scroll-padding-right']");
shouldBeEmptyString("inheritAlign.style['scroll-padding-top']");
shouldBeEmptyString("inheritAlign.style['scroll-padding-bottom']");
shouldBeEqualToString("window.getComputedStyle(inheritAlign).getPropertyValue('scroll-padding')", "20px");
shouldBeEmptyString("inheritAlign.style['scroll-snap-margin']");
shouldBeEmptyString("inheritAlign.style['scroll-snap-margin-left']");
shouldBeEmptyString("inheritAlign.style['scroll-snap-margin-right']");
shouldBeEmptyString("inheritAlign.style['scroll-snap-margin-top']");
shouldBeEmptyString("inheritAlign.style['scroll-snap-margin-bottom']");
shouldBeEqualToString("window.getComputedStyle(inheritAlign).getPropertyValue('scroll-snap-margin')", "0px 1px");
debug("");
var inheritPadding = document.getElementById('inheritPadding');
shouldBeEmptyString("inheritPadding.style['scroll-snap-type']");
shouldBeEqualToString("window.getComputedStyle(inheritPadding).getPropertyValue('scroll-snap-type')", "both mandatory");
shouldBeEmptyString("inheritPadding.style['scroll-snap-align']");
shouldBeEqualToString("window.getComputedStyle(inheritPadding).getPropertyValue('scroll-snap-align')", "center center");
shouldBeEqualToString("inheritPadding.style['scroll-padding']", "inherit");
shouldBeEqualToString("inheritPadding.style['scroll-padding-left']", "inherit");
shouldBeEqualToString("inheritPadding.style['scroll-padding-right']", "inherit");
shouldBeEqualToString("inheritPadding.style['scroll-padding-top']", "inherit");
shouldBeEqualToString("inheritPadding.style['scroll-padding-bottom']", "inherit");
shouldBeEqualToString("window.getComputedStyle(inheritPadding).getPropertyValue('scroll-padding')", "10%");
shouldBeEmptyString("inheritPadding.style['scroll-snap-margin']");
shouldBeEmptyString("inheritPadding.style['scroll-snap-margin-left']");
shouldBeEmptyString("inheritPadding.style['scroll-snap-margin-right']");
shouldBeEmptyString("inheritPadding.style['scroll-snap-margin-top']");
shouldBeEmptyString("inheritPadding.style['scroll-snap-margin-bottom']");
shouldBeEqualToString("window.getComputedStyle(inheritPadding).getPropertyValue('scroll-snap-margin')", "0px 1px");
debug("");
var inheritMargin = document.getElementById('inheritMargin');
shouldBeEmptyString("inheritMargin.style['scroll-snap-type']");
shouldBeEqualToString("window.getComputedStyle(inheritMargin).getPropertyValue('scroll-snap-type')", "both mandatory");
shouldBeEmptyString("inheritMargin.style['scroll-snap-align']");
shouldBeEqualToString("window.getComputedStyle(inheritMargin).getPropertyValue('scroll-snap-align')", "center center");
shouldBeEmptyString("inheritMargin.style['scroll-padding']");
shouldBeEmptyString("inheritMargin.style['scroll-padding-left']");
shouldBeEmptyString("inheritMargin.style['scroll-padding-right']");
shouldBeEmptyString("inheritMargin.style['scroll-padding-top']");
shouldBeEmptyString("inheritMargin.style['scroll-padding-bottom']");
shouldBeEqualToString("window.getComputedStyle(inheritMargin).getPropertyValue('scroll-padding')", "20px");
shouldBeEqualToString("inheritMargin.style['scroll-snap-margin']", "inherit");
shouldBeEqualToString("inheritMargin.style['scroll-snap-margin-left']", "inherit");
shouldBeEqualToString("inheritMargin.style['scroll-snap-margin-right']", "inherit");
shouldBeEqualToString("inheritMargin.style['scroll-snap-margin-top']", "inherit");
shouldBeEqualToString("inheritMargin.style['scroll-snap-margin-bottom']", "inherit");
shouldBeEqualToString("window.getComputedStyle(inheritMargin).getPropertyValue('scroll-snap-margin')", "5px 5px 10px 10px");
debug("");
var inheritAll = document.getElementById('inheritAll');
shouldBeEqualToString("inheritAll.style['scroll-snap-type']", "inherit");
shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('scroll-snap-type')", "x proximity");
shouldBeEqualToString("inheritAll.style['scroll-snap-align']", "inherit");
shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('scroll-snap-align')", "start end");
shouldBeEqualToString("inheritAll.style['scroll-padding']", "inherit");
shouldBeEqualToString("inheritAll.style['scroll-padding-left']", "inherit");
shouldBeEqualToString("inheritAll.style['scroll-padding-right']", "inherit");
shouldBeEqualToString("inheritAll.style['scroll-padding-top']", "inherit");
shouldBeEqualToString("inheritAll.style['scroll-padding-bottom']", "inherit");
shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('scroll-padding')", "10%");
shouldBeEqualToString("inheritAll.style['scroll-snap-margin']", "inherit");
shouldBeEqualToString("inheritAll.style['scroll-snap-margin-left']", "inherit");
shouldBeEqualToString("inheritAll.style['scroll-snap-margin-right']", "inherit");
shouldBeEqualToString("inheritAll.style['scroll-snap-margin-top']", "inherit");
shouldBeEqualToString("inheritAll.style['scroll-snap-margin-bottom']", "inherit");
shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('scroll-snap-margin')", "5px 5px 10px 10px");
debug("");
var inheritNone = document.getElementById('inheritNone');
shouldBeEmptyString("inheritNone.style['scroll-snap-type']");
shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('scroll-snap-type')", "none");
shouldBeEmptyString("inheritNone.style['scroll-snap-align']");
shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('scroll-snap-align')", "none none");
shouldBeEmptyString("inheritNone.style['scroll-padding']");
shouldBeEmptyString("inheritNone.style['scroll-padding-left']");
shouldBeEmptyString("inheritNone.style['scroll-padding-right']");
shouldBeEmptyString("inheritNone.style['scroll-padding-top']");
shouldBeEmptyString("inheritNone.style['scroll-padding-bottom']");
shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('scroll-padding')", "0px");
shouldBeEmptyString("inheritNone.style['scroll-snap-margin']");
shouldBeEmptyString("inheritNone.style['scroll-snap-margin-left']");
shouldBeEmptyString("inheritNone.style['scroll-snap-margin-right']");
shouldBeEmptyString("inheritNone.style['scroll-snap-margin-top']");
shouldBeEmptyString("inheritNone.style['scroll-snap-margin-bottom']");
shouldBeEqualToString("window.getComputedStyle(inheritNone).getPropertyValue('scroll-snap-margin')", "0px");
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>