58 lines
1.8 KiB
HTML
58 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
#outer-container {
|
|
direction: rtl;
|
|
width: 300px;
|
|
height: 300px;
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
scroll-snap-type: x mandatory;
|
|
}
|
|
#inner-container {
|
|
width: 1800px;
|
|
height: 300px;
|
|
}
|
|
.snap-child {
|
|
height: 300px;
|
|
float: left;
|
|
min-width: 200px;
|
|
scroll-snap-align: start;
|
|
border: 1px solid black;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|
|
<script src="../../resources/js-test.js"></script>
|
|
<script>
|
|
function runTest()
|
|
{
|
|
var container = document.getElementById("outer-container");
|
|
debug("Scroll-snap offsets: " + window.internals.scrollSnapOffsets(container));
|
|
|
|
finishJSTest();
|
|
}
|
|
|
|
function onLoad()
|
|
{
|
|
jsTestIsAsync = true;
|
|
if (window.testRunner)
|
|
setTimeout(runTest, 0);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload=onLoad()>
|
|
<div style="position: relative; height: 500px; width: 500px">
|
|
<div id="outer-container">
|
|
<div id="inner-container">
|
|
<div id="item0" class="snap-child"></div>
|
|
<div id="item1" class="snap-child"></div>
|
|
<div id="item2" class="snap-child"></div>
|
|
<div id="item3" class="snap-child"></div>
|
|
<div id="item4" class="snap-child"></div>
|
|
<div id="item5" class="snap-child"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |