100 lines
3.5 KiB
HTML
100 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<title>OffsetTop and OffsetLeft for elements with css zoom</title>
|
|
<link rel="author" title="Yotam Hacohen" href="mailto:yotha@chromium.org">
|
|
<link rel="author" title="Google" href="http://www.google.com/">
|
|
<link rel="help" href="https://drafts.csswg.org/css-viewport/">"
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<style>
|
|
.outer_div {
|
|
width: 100px;
|
|
height: 100px;
|
|
border: 1px solid black;
|
|
position: relative;
|
|
margin: 10px;
|
|
}
|
|
.square {
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: green;
|
|
margin: 1px;
|
|
top:10x;
|
|
left: 10x;
|
|
}
|
|
.one {
|
|
position: relative;
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
.two {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
zoom: 2;
|
|
}
|
|
|
|
.three {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 50px;
|
|
zoom: 0.5;
|
|
}
|
|
span.square {
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
|
|
<div class="outer_div">
|
|
<div id="unzoomed_one" class="square one"></div>
|
|
<div id="unzoomed_two" class="square two"></div>
|
|
<div id="unzoomed_three" class="square three"></div>
|
|
</div>
|
|
<div style="zoom:3" class="outer_div">
|
|
<div id="zoomed_one" class="square one"></div>
|
|
<div id="zoomed_two" class="square two"></div>
|
|
<div id="zoomed_three" class="square three"></div>
|
|
</div>
|
|
|
|
<div class="outer_div" style="margin: 30px;" id="outer_div">
|
|
<div id="zoomed_middle" style="margin: 10px; zoom:2">
|
|
<div class="square" id="unzoomed_inner"></div>
|
|
</div>
|
|
</div>
|
|
<div class="outer_div" style="margin: 30px;">
|
|
<div id="unzoomed_middle">
|
|
<div class="square" id="zoomed_inner" style="zoom:2; width: 100px; height: 100px; border: 1px solid black;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
test(() => {
|
|
assert_equals(unzoomed_one.offsetTop, 11, 'unzoomed_one.offsetTop');
|
|
assert_equals(unzoomed_one.offsetLeft, 11, 'unzoomed_one.offsetLeft');
|
|
assert_equals(unzoomed_two.offsetTop, 21, 'unzoomed_two.offsetTop');
|
|
assert_equals(unzoomed_two.offsetLeft, 21, 'unzoomed_two.offsetLeft');
|
|
assert_equals(unzoomed_three.offsetTop, 11, 'unzoomed_three.offsetTop');
|
|
assert_equals(unzoomed_three.offsetLeft, 51, 'unzoomed_three.offsetLeft');
|
|
assert_equals(zoomed_one.offsetTop, 11, 'zoomed_one.offsetTop');
|
|
assert_equals(zoomed_one.offsetLeft, 11, 'zoomed_one.offsetLeft');
|
|
assert_equals(zoomed_two.offsetTop, 21, 'zoomed_two.offsetTop');
|
|
assert_equals(zoomed_two.offsetLeft, 21, 'zoomed_two.offsetLeft');
|
|
assert_equals(zoomed_three.offsetTop, 11, 'zoomed_three.offsetTop');
|
|
assert_equals(zoomed_three.offsetLeft, 51, 'zoomed_three.offsetLeft');
|
|
assert_equals(unzoomed_inner.offsetTop, 10, 'unzoomed_inner.offsetTop');
|
|
assert_equals(unzoomed_inner.offsetLeft, 11, 'unzoomed_inner.offsetLeft');
|
|
assert_equals(zoomed_inner.offsetTop, 0, 'zoomed_inner.offsetTop');
|
|
assert_equals(zoomed_inner.offsetLeft, 1, 'zoomed_inner.offsetLeft');
|
|
}, 'Verifies that offsetTop and offsetLeft find the right OffsetParent and return values excluding the target zoom');
|
|
|
|
test(() => {
|
|
assert_equals(unzoomed_one.offsetWidth, zoomed_one.offsetWidth, "offsetWidth");
|
|
assert_equals(unzoomed_one.offsetHeight, zoomed_one.offsetHeight, "offsetHeight");
|
|
assert_equals(zoomed_inner.offsetWidth, outer_div.offsetWidth, "offsetWidth for nested element");
|
|
assert_equals(zoomed_inner.offsetHeight, outer_div.offsetHeight, "offsetHeight for nested element");
|
|
}, 'check that offset is equal between elements when one of them has css zoom');
|
|
</script>
|