297 lines
17 KiB
HTML
297 lines
17 KiB
HTML
<!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: both 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: both mandatory;
|
|
scroll-snap-align: inherit;
|
|
scroll-padding: 20px;
|
|
scroll-snap-margin: 0 1px;
|
|
}
|
|
|
|
.inheritPadding {
|
|
scroll-snap-type: both mandatory;
|
|
scroll-snap-align: center;
|
|
scroll-padding: inherit;
|
|
scroll-snap-margin: 0 1px;
|
|
}
|
|
|
|
.inheritMargin {
|
|
scroll-snap-type: both 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");
|
|
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");
|
|
shouldBeEmptyString("inheritType.style['scroll-snap-align']");
|
|
shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('scroll-snap-align')", "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");
|
|
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");
|
|
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");
|
|
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");
|
|
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')", "auto");
|
|
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>
|
|
|