<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://html.spec.whatwg.org/C/#update-the-rendering">

<body>
<script>
'use strict';

async_test(t => {
  t.events = [];

  let iframe = document.createElement('iframe');
  iframe.addEventListener('load', t.step_func(() => {
    let w = iframe.contentWindow;
    w.requestAnimationFrame(t.step_func(() => {
      t.events.push('animationFrame');
      w.requestAnimationFrame(t.step_func(() => {
        t.events.push('animationFrame-should-not-be-recorded');
      }));
    }));
    let element = w.document.createElement('input');
    element.autofocus = true;
    element.addEventListener('focus', t.step_func(() => {
      t.events.push('autofocus');
      iframe.style.width = '71px';
    }));

    w.addEventListener('resize', t.step_func_done(() => {
      t.events.push('resize');
      assert_array_equals(t.events, ['animationFrame', 'autofocus', 'resize']);
    }));

    w.document.body.appendChild(element);
  }));
  document.body.appendChild(iframe);
}, '"Flush autofocus candidates" should be happen after the first animation ' +
    'frame callbacks, and before a resize event in the next iteration of ' +
    'window event loop.');
</script>
</body>