auto-expand-details-layout-shift.html

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

<style>
.spacer {
  height: 200px;
}
</style>

<details>
  <div class="spacer"></div>
  <div id=hiddentext>hiddentext</div>
</details>
<div>a bunch of</div>
<div>other stuff</div>

<script>
const details = document.querySelector('details');

async_test(t => {
  // PerformanceObserver won't work until we wait for two rAFs.
  requestAnimationFrame(t.step_func(() => {
    requestAnimationFrame(t.step_func(() => {
      const observer = new PerformanceObserver(t.step_func_done(list => {
        assert_true(list.getEntries().length === 1, 'There should be entries in the list.');
        assert_true(list.getEntries()[0].hadRecentInput, 'find-in-page should mark hadRecentInput.');
      }));
      observer.observe({type: 'layout-shift', buffered: true});
      testRunner.findString('hiddentext', ['Async']);
    }));
  }));

}, 'Verifies that find-in-page adds a layout shift allowance for auto-expanding details.');
</script>

chromium/third_party/blink/web_tests/editing/text-iterator/auto-expand-details-layout-shift.html