<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>

.scroller {
  position: absolute;
  height: 200px;
  width: 300px;
  top: 100px;
  border: 5px solid #ccc;
}
.scroller.vert {
  left: 20px;
  overflow-y: scroll;
}
.scroller.horz {
  left: 350px;
  overflow-x: scroll;
}
.scroller::-webkit-scrollbar {
  width: 20px;
  height: 20px;
  background-color: #ccc;
}
.scroller::-webkit-scrollbar-thumb {
  background-color: #68c;
}
.abs {
  position: absolute;
  background-color: #ACF7AA;
}
.vert > .abs {
  top: 20px;
  right: 20px;
  width: 200px;
  height: 400px;
}
.horz > .abs {
  left: 20px;
  bottom: 20px;
  width: 400px;
  height: 100px;
}

</style>
<div class="scroller vert"><div class="abs"></div></div>
<div class="scroller horz"><div class="abs"></div></div>
<script>

var vScroll = document.querySelector(".scroller.vert");
var hScroll = document.querySelector(".scroller.horz");

test((t) => {
  assert_equals(vScroll.firstChild.offsetLeft, 60);
  assert_equals(hScroll.firstChild.offsetTop, 60);

  vScroll.style.overflowY = "hidden";
  hScroll.style.overflowX = "hidden";

  assert_equals(vScroll.firstChild.offsetLeft, 80);
  assert_equals(hScroll.firstChild.offsetTop, 80);

  vScroll.style.overflowY = "";
  hScroll.style.overflowX = "";

  assert_equals(vScroll.firstChild.offsetLeft, 60);
  assert_equals(hScroll.firstChild.offsetTop, 60);
}, "Relayout abspos child when overflow style changes.");

</script>