blob: 0d217cfee54ffb187309e27bcf95bf756dd37ee6 [file] [log] [blame]
<!doctype html>
<html>
<head>
<title>offsetLeft and offsetTop test for columns</title>
<style type="text/css">
.columns {
-webkit-column-count:2;
-webkit-column-gap:60px;
inline-size:254px;
block-size:149px;
margin: 20px;
border:2px solid black;
-webkit-column-rule: 1px solid maroon;
padding: 5px;
box-sizing: border-box;
}
#t1, #t6 {
-webkit-column-break-after: always;
}
.columns div { block-size:50px; background-color:green; }
.columns div.span { margin-block: 5px; block-size:25px; background-color:orange; -webkit-column-span:all; }
.fail #pass, .pass #fail { display: none; }
.vertical { writing-mode: vertical-lr }
.vertical-flipped { writing-mode: vertical-rl }
</style>
</head>
<body style="margin:10px">
<div class="columns">
<div id="t1"></div>
<div id="t2"></div>
<div class="span" id="t3"></div>
<div><span id="t4"></span></div>
<div><span id="t5"></span></div>
</div>
<div class="columns vertical">
<div id="t9"></div>
<div id="t10"></div>
<div class="span" id="t8"></div>
<div><span id="t6"></span></div>
<div><span id="t7"></span></div>
</div>
<div class="columns vertical-flipped">
<div id="t11"></div>
<div id="t12"></div>
<div class="span" id="t13"></div>
<div id="t14"></div>
<div id="t15"></div>
</div>
<p id="output"></p>
<script type="text/javascript">
function testOffsetTop(expected, id1, id2, number) {
var one = document.getElementById(id1)
var two = document.getElementById(id2)
var output = document.getElementById('output')
if (one.offsetTop != two.offsetTop)
output.innerHTML += "Failed Test #" + number + " because the offsetTop of " + id1 + " and " + id2 + " were not the same. " + one.offsetTop + " and " + two.offsetTop + ".<br>"
else if (one.offsetTop != expected)
output.innerHTML += "Failed Test #" + number + " because the offsetTop of " + id1 + " and " + id2 + " did not match the expected value of " + expected + ". They were " + one.offsetTop + " instead.<br>"
else
output.innerHTML += "Test #" + number + " Passed.<br>"
}
function testOffsetLeft(expected, id1, id2, number) {
var one = document.getElementById(id1)
var two = document.getElementById(id2)
var output = document.getElementById('output')
if (one.offsetLeft != two.offsetLeft)
output.innerHTML += "Failed Test #" + number + " because the offsetLeft of " + id1 + " and " + id2 + " were not the same. " + one.offsetLeft + " and " + two.offsetLeft + ".<br>"
else if (one.offsetLeft != expected)
output.innerHTML += "Failed Test #" + number + " because the offsetLeft of " + id1 + " and " + id2 + " did not match the expected value of " + expected + ". They were " + one.offsetLeft + " instead.<br>"
else
output.innerHTML += "Test #" + number + " Passed.<br>"
}
if(window.testRunner)
testRunner.dumpAsText();
testOffsetTop(27, "t1", "t2", 1);
testOffsetTop(112, "t4", "t5", 2);
testOffsetTop(82, "t3", "t3", 3);
testOffsetLeft(37, "t1", "t4", 4);
testOffsetLeft(187, "t2", "t5", 5);
testOffsetLeft(37, "t3", "t3", 6);
testOffsetTop(196, "t6", "t9", 7);
testOffsetTop(346, "t7", "t10", 8);
testOffsetTop(196, "t8", "t8", 9);
testOffsetLeft(37, "t9", "t10", 10);
testOffsetLeft(122, "t6", "t7", 11);
testOffsetLeft(92, "t8", "t8", 12);
// FIXME: <webkit.org/b/234664> Visual offsets are correct, but not JS values, for flipped-writing mode only
testOffsetTop(470, "t11", "t14", 13);
testOffsetTop(620, "t12", "t15", 14);
testOffsetTop(470, "t13", "t13", 15);
testOffsetLeft(37, "t14", "t15", 16);
testOffsetLeft(122, "t11", "t12", 17);
testOffsetLeft(92, "t13", "t13", 18);
</script>
</body>
</html>