css/css-scroll-anchoring/anonymous-block-box.html

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

body { height: 2000px; margin: 0 10px; }
#before, #after { height: 100px; }
#before { margin-bottom: 100px; }
#container { line-height: 100px; vertical-align: top; }

</style>
<div id="container">
  <div id="before">before</div>
  <span id="inline">inline</span>
  <div id="after">after</div>
</div>
<script>

// Tests anchoring inside an anonymous block box. The anchor selection algorithm
// should descend into the children of the anonymous box even though it is fully
// contained in the viewport.

test(() => {
  document.scrollingElement.scrollTop = 150;

  var span = document.querySelector("#inline");
  var newSpan = document.createElement("span");
  newSpan.innerHTML = "inserted<br>";
  span.parentNode.insertBefore(newSpan, span);

  assert_equals(document.scrollingElement.scrollTop, 250);
}, "Anchor selection descent into anonymous block boxes.");

</script>