wpt / css / cssom-view / offsetTopLeftInScrollableParent.html

Status: PASS | Duration: 66ms | Subtests: 8/8 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (8/8)

Data from commit:
1884860 Copy-on-write style attribute blocks that are in the rule tree (#831) (2026-09-02)

SubtestStatusMessage
Basic functionalityPASS
Basic functionality in scrolled parentPASS
Margins on childPASS
Margins on child and parentPASS
Margins on child and parent, border on childPASS
Margins on child and parent, border on child and parentPASS
Margins on child and parent, border on child and parent, padding on childPASS
Margins on child and parent, border on child and parent, padding on child and parentPASS

/css/cssom-view/offsetTopLeftInScrollableParent.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>