diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/cssom-view/offsetTopLeftInScrollableParent.html | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/cssom-view/offsetTopLeftInScrollableParent.html')
| -rw-r--r-- | testing/web-platform/tests/css/cssom-view/offsetTopLeftInScrollableParent.html | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/cssom-view/offsetTopLeftInScrollableParent.html b/testing/web-platform/tests/css/cssom-view/offsetTopLeftInScrollableParent.html new file mode 100644 index 0000000000..8f44337954 --- /dev/null +++ b/testing/web-platform/tests/css/cssom-view/offsetTopLeftInScrollableParent.html @@ -0,0 +1,111 @@ +<!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> |