mirror of
https://github.com/servo/servo.git
synced 2025-06-28 19:13:41 +01:00
141 lines
3.4 KiB
HTML
141 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<meta name="viewport" content="user-scalable=no"/>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
|
|
body { margin: 0; }
|
|
html {
|
|
line-height: 0;
|
|
width: 200vw;
|
|
height: 200vh;
|
|
}
|
|
|
|
html.ltr { direction: ltr; }
|
|
html.rtl { direction: rtl; }
|
|
|
|
html.horz { writing-mode: horizontal-tb; }
|
|
html.vlr { writing-mode: vertical-lr; }
|
|
html.vrl { writing-mode: vertical-rl; }
|
|
|
|
.horz.ltr .cx2, .vlr .cx2 { left: 100vw; }
|
|
.horz.rtl .cx2, .vrl .cx2 { right: 100vw; }
|
|
.horz .cy2, .ltr .cy2 { top: 100vh; }
|
|
.vlr.rtl .cy2, .vrl.rtl .cy2 { bottom: 100vh; }
|
|
|
|
#block_pusher, #inline_pusher {
|
|
display: inline-block;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
#block_pusher { background-color: #e88; }
|
|
#inline_pusher { background-color: #88e; }
|
|
.vpush { height: 80px !important; }
|
|
.hpush { width: 70px !important; }
|
|
|
|
#anchor-container {
|
|
display: inline-block;
|
|
}
|
|
#anchor {
|
|
position: relative;
|
|
background-color: #8e8;
|
|
min-width: 100px;
|
|
min-height: 100px;
|
|
}
|
|
|
|
#grower { width: 0; height: 0; }
|
|
.grow {
|
|
width: 180px !important;
|
|
height: 160px !important;
|
|
}
|
|
|
|
</style>
|
|
<div id="container">
|
|
<div id="block_pusher"></div><br>
|
|
<div id="inline_pusher"></div><div id="anchor-container">
|
|
<div id="anchor">
|
|
<div id="grower"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
|
|
// Tests that anchoring adjustments are only on the block layout axis and that
|
|
// their magnitude is based on the movement of the block start edge of the
|
|
// anchor node, for all 6 combinations of text direction and writing mode,
|
|
// regardless of which corner of the viewport the anchor node overlaps.
|
|
|
|
var CORNERS = ["cx1 cy1", "cx2 cy1", "cx1 cy2", "cx2 cy2"];
|
|
var docEl = document.documentElement;
|
|
var scroller = document.scrollingElement;
|
|
var blockPusher = document.querySelector("#block_pusher");
|
|
var inlinePusher = document.querySelector("#inline_pusher");
|
|
var grower = document.querySelector("#grower");
|
|
var anchor = document.querySelector("#anchor");
|
|
|
|
function reset() {
|
|
scroller.scrollLeft = 0;
|
|
scroller.scrollTop = 0;
|
|
blockPusher.className = "";
|
|
inlinePusher.className = "";
|
|
grower.className = "";
|
|
}
|
|
|
|
function runCase(docClass, xDir, yDir, vert, expectXAdj, expectYAdj, corner) {
|
|
docEl.className = docClass;
|
|
anchor.className = corner;
|
|
|
|
var initX = 150 * xDir;
|
|
var initY = 150 * yDir;
|
|
|
|
scroller.scrollLeft = initX;
|
|
scroller.scrollTop = initY;
|
|
|
|
// Each corner moves a different distance.
|
|
block_pusher.className = vert ? "hpush" : "vpush";
|
|
inline_pusher.className = vert ? "vpush" : "hpush";
|
|
grower.className = "grow";
|
|
|
|
assert_equals(scroller.scrollLeft, initX + expectXAdj);
|
|
assert_equals(scroller.scrollTop, initY + expectYAdj);
|
|
|
|
reset();
|
|
}
|
|
|
|
test(() => {
|
|
CORNERS.forEach((corner) => {
|
|
runCase("horz ltr", 1, 1, false, 0, -20, corner);
|
|
});
|
|
}, "Horizontal LTR.");
|
|
|
|
test(() => {
|
|
CORNERS.forEach((corner) => {
|
|
runCase("horz rtl", -1, 1, false, 0, -20, corner);
|
|
});
|
|
}, "Horizontal RTL.");
|
|
|
|
test(() => {
|
|
CORNERS.forEach((corner) => {
|
|
runCase("vlr ltr", 1, 1, true, -30, 0, corner);
|
|
});
|
|
}, "Vertical-LR LTR.");
|
|
|
|
test(() => {
|
|
CORNERS.forEach((corner) => {
|
|
runCase("vlr rtl", 1, -1, true, -30, 0, corner);
|
|
});
|
|
}, "Vertical-LR RTL.");
|
|
|
|
test(() => {
|
|
CORNERS.forEach((corner) => {
|
|
runCase("vrl ltr", -1, 1, true, 30, 0, corner);
|
|
});
|
|
}, "Vertical-RL LTR.");
|
|
|
|
test(() => {
|
|
CORNERS.forEach((corner) => {
|
|
runCase("vrl rtl", -1, -1, true, 30, 0, corner);
|
|
});
|
|
}, "Vertical-RL RTL.");
|
|
|
|
</script>
|