100 lines
2.5 KiB
HTML
100 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<title>
|
|
Bug 226572: [css-scroll-snap] Scroll snap offsets are interpreted as scroll positions in ScrollableArea
|
|
</title>
|
|
<script src="../../resources/testharness.js"></script>
|
|
<script src="../../resources/testharnessreport.js"></script>
|
|
</script>
|
|
<style>
|
|
.scroller {
|
|
scroll-snap-type: both mandatory;
|
|
overflow: hidden;
|
|
scroll-padding: 0;
|
|
width: 50px;
|
|
height: 50px;
|
|
border: solid silver;
|
|
border-block-start-color: blue;
|
|
border-inline-start-color: blue;
|
|
}
|
|
.area {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
|
|
.target {
|
|
margin: 5px;
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
.small .target {
|
|
width: 30px;
|
|
height: 30px;
|
|
background: orange;
|
|
}
|
|
|
|
.TB { writing-mode: horizontal-tb; }
|
|
.LR { writing-mode: vertical-lr; }
|
|
.RL { writing-mode: vertical-rl; }
|
|
.ltr { direction: ltr; }
|
|
.rtl { direction: rtl; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<p>Test to verify that snapping after layout of right-to-left content works properly. All inner
|
|
boxes should be snug against the edge of their containers.</p>
|
|
<div id="log"></div>
|
|
|
|
<div class="wrapper">
|
|
<div id="scroller1" class="scroller RL ltr small">
|
|
<div class="area">
|
|
<div class="target"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="scroller2" class="scroller TB rtl small">
|
|
<div class="area">
|
|
<div class="target"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="scroller3" class="scroller LR rtl small">
|
|
<div class="area">
|
|
<div class="target"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="scroller4" class="scroller RL rtl small">
|
|
<div class="area">
|
|
<div class="target"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
test(function() {
|
|
assert_equals(scroller1.scrollLeft, -5);
|
|
assert_equals(scroller1.scrollTop, 5);
|
|
}, "Initial snapping in scroll area with writing-mode: vertical-rl and direction: ltr");
|
|
|
|
test(function() {
|
|
assert_equals(scroller2.scrollLeft, -5);
|
|
assert_equals(scroller2.scrollTop, 5);
|
|
}, "Initial snapping in scroll area with writing-mode: horizontal-tb and direction: rtl");
|
|
|
|
test(function() {
|
|
assert_equals(scroller3.scrollLeft, 5);
|
|
assert_equals(scroller3.scrollTop, -5);
|
|
}, "Initial snapping in scroll area with writing-mode: vertical-lr and direction: rtl");
|
|
|
|
test(function() {
|
|
assert_equals(scroller4.scrollLeft, -5);
|
|
assert_equals(scroller4.scrollTop, -5);
|
|
}, "Initial snapping in scroll area with writing-mode: vertical-rl and direction: rtl");
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|