offsetTopLeftInScrollableParent.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/cssom-view/offsetTopLeftInScrollableParent.html - WPT Dashboard Interop Dashboard

<!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>