e51cd34838
The check for isAbsolutelyPositioned was an old incorrect attempt to fix bug 81290. We have since added the proper fix (not adding offsets of the offset parent frame) in bug 375003. MozReview-Commit-ID: 7NgnfrYcs8h
112 lines
5.4 KiB
HTML
112 lines
5.4 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<title></title>
|
|
<script src=/resources/testharness.js></script>
|
|
<script src=/resources/testharnessreport.js></script>
|
|
<div id=log></div>
|
|
<div id="parent" style="overflow:scroll; height: 100px; position: relative">
|
|
<div id="spacer" style="height: 200px"></div>
|
|
<div id="child"></div>
|
|
<div id="absolute-child" style="position: absolute; top: 41px; left: 43px"></div>
|
|
</div>
|
|
<script>
|
|
test(function() {
|
|
var child = document.getElementById("child");
|
|
assert_equals(child.offsetTop, 200, "Child is after spacer");
|
|
assert_equals(child.offsetLeft, 0, "Child is flush left");
|
|
var absChild = document.getElementById("absolute-child");
|
|
assert_equals(absChild.offsetTop, 41, "Abspos child is y-positioned");
|
|
assert_equals(absChild.offsetLeft, 43, "Abspos child is x-positioned");
|
|
}, "Basic functionality");
|
|
|
|
test(function() {
|
|
var parent = document.getElementById("parent");
|
|
parent.scrollTop = 100;
|
|
var child = document.getElementById("child");
|
|
assert_equals(child.offsetTop, 200, "Child is after spacer");
|
|
assert_equals(child.offsetLeft, 0, "Child is flush left");
|
|
var absChild = document.getElementById("absolute-child");
|
|
assert_equals(absChild.offsetTop, 41, "Abspos child is y-positioned");
|
|
assert_equals(absChild.offsetLeft, 43, "Abspos child is x-positioned");
|
|
}, "Basic functionality in scrolled parent");
|
|
|
|
test(function() {
|
|
var child = document.getElementById("child");
|
|
child.style.marginTop = "20px"
|
|
child.style.marginLeft = "100px";
|
|
assert_equals(child.offsetTop, 220, "Child is after spacer and margin");
|
|
assert_equals(child.offsetLeft, 100, "Child is 100px from left");
|
|
var absChild = document.getElementById("absolute-child");
|
|
absChild.style.marginTop = "20px"
|
|
absChild.style.marginLeft = "100px";
|
|
assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
|
|
assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
|
|
}, "Margins on child");
|
|
|
|
test(function() {
|
|
var parent = document.getElementById("parent");
|
|
parent.style.marginTop = "66px"
|
|
parent.style.marginLeft = "33px";
|
|
var child = document.getElementById("child");
|
|
assert_equals(child.offsetTop, 220, "Child is after spacer and margin");
|
|
assert_equals(child.offsetLeft, 100, "Child is 100px from left");
|
|
var absChild = document.getElementById("absolute-child");
|
|
assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
|
|
assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
|
|
}, "Margins on child and parent");
|
|
|
|
test(function() {
|
|
var child = document.getElementById("child");
|
|
child.style.borderTop = "13px solid green";
|
|
child.style.borderLeft = "7px solid green";
|
|
assert_equals(child.offsetTop, 220, "Child is after spacer and margin");
|
|
assert_equals(child.offsetLeft, 100, "Child is 100px from left");
|
|
var absChild = document.getElementById("absolute-child");
|
|
absChild.style.borderTop = "13px solid green";
|
|
absChild.style.borderLeft = "7px solid green";
|
|
assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
|
|
assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
|
|
}, "Margins on child and parent, border on child");
|
|
|
|
test(function() {
|
|
var parent = document.getElementById("parent");
|
|
parent.style.borderTop = "23px solid yellow";
|
|
parent.style.borderLeft = "19px solid yellow";
|
|
var child = document.getElementById("child");
|
|
assert_equals(child.offsetTop, 220, "Child is after spacer and margin");
|
|
assert_equals(child.offsetLeft, 100, "Child is 100px from left");
|
|
var absChild = document.getElementById("absolute-child");
|
|
assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
|
|
assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
|
|
}, "Margins on child and parent, border on child and parent");
|
|
|
|
|
|
test(function() {
|
|
var child = document.getElementById("child");
|
|
child.style.paddingTop = "31px";
|
|
child.style.paddingLeft = "37px";
|
|
assert_equals(child.offsetTop, 220, "Child is after spacer and margin");
|
|
assert_equals(child.offsetLeft, 100, "Child is 100px from left");
|
|
var absChild = document.getElementById("absolute-child");
|
|
absChild.style.paddingTop = "31px";
|
|
absChild.style.paddingLeft = "37px";
|
|
assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
|
|
assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
|
|
}, "Margins on child and parent, border on child and parent, padding on child");
|
|
|
|
|
|
test(function() {
|
|
var parent = document.getElementById("parent");
|
|
parent.style.paddingTop = "31px";
|
|
parent.style.paddingLeft = "37px";
|
|
var child = document.getElementById("child");
|
|
assert_equals(child.offsetTop, 251, "Child is after spacer and margin and parent padding");
|
|
assert_equals(child.offsetLeft, 137, "Child is 100px + parent padding from left");
|
|
var absChild = document.getElementById("absolute-child");
|
|
// Padding on the parent does not affect the position of the absolute containing block.
|
|
assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
|
|
assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
|
|
}, "Margins on child and parent, border on child and parent, padding on child and parent");
|
|
|
|
</script>
|