chromium/src/third_party/blink/web_tests/external/wpt/css/cssom-view/offsetTopLeftInScrollableParent.html - manifest_repos/chromium_src - Git at Google

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