<!doctype HTML>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
  div {
    contain: style layout;
  }
</style>
<div id="outermost">
  Outermost
  <div id="outer">
    Outer
    <div id="inner">
      Inner
      <div id="innermost">
        Innermost
      </div>
    </div>
  </div>
</div>
<a id="innermostLink" href ="#innermost">Click</a>
<script>
'use strict';
function prepareTest() {
  return Promise.all([
    outer.displayLock.acquire({ timeout: Infinity, activatable: true }),
    inner.displayLock.acquire({ timeout: Infinity, activatable: true })
  ]);
}

promise_test(() => {
  return new Promise((resolve, reject) => {
    prepareTest().then(() => {
      assert_false(outermost.displayLock.locked);
      assert_true(outer.displayLock.locked);
      assert_true(inner.displayLock.locked);
      assert_false(innermost.displayLock.locked);

      let innerPromise = new Promise((resolve, reject) => {
        inner.onbeforeactivate = (e) => {
          assert_equals(e.activatedElement, innermost);
          resolve();
        }
      });

      let outerPromise = new Promise((resolve, reject) => {
        outer.onbeforeactivate = (e) => {
          assert_equals(e.activatedElement, innermost);
          // Resolve if this is directly targeted to #outer,
          // instead of bubbling here.
          if (e.target == outer)
            resolve();
        }
      });

      let outermostPromise = new Promise((resolve, reject) => {
        outermost.onbeforeactivate = (e) => {
          assert_equals(e.activatedElement, innermost);
          assert_not_equals(e.target, outermost);
          // Resolve if this is targeted to #outer, which is
          // dispatched after the event targeted to #inner.
          if (e.target == outer)
            resolve();
        }
      });

      innermost.onbeforeactivate = reject;
      // Navigating to element in locked subtree should fire beforeactivate
      // on locked ancestors, but not itself.
      innermostLink.click();
      Promise.all([innerPromise, outerPromise, outermostPromise]).then(resolve);
    });
  });
}, "Activation through anchor link fires beforeactivate on locked ancestor");
</script>