<!doctype HTML>

<style>
#container {
  contain: style layout;
}
</style>

<div id="parent"></div>

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

<script>
async_test((t) => {
  async function runTest() {
    let container = document.createElement("div");
    container.id = "container";
    assert_false(container.displayLock.locked, "initial context is unlocked");

    let acquire_promise = container.displayLock.acquire({ timeout: Infinity });
    t.step(() => assert_true(container.displayLock.locked, "context before acquire finishes is locked"));

    await acquire_promise;
    t.step(() => assert_true(container.displayLock.locked, "context after acquire finishes is locked"));

    document.getElementById("parent").appendChild(container);

    let update_promise = container.displayLock.update();
    t.step(() => assert_true(container.displayLock.locked, "context during update is locked"));

    await update_promise;
    t.step(() => assert_true(container.displayLock.locked, "context after update is locked"));

    let commit_promise = container.displayLock.commit();
    t.step(() => assert_true(container.displayLock.locked, "context during commit is locked"));

    await commit_promise;
    t.step(() => assert_false(container.displayLock.locked, "context after commit is unlocked"));

    t.done();
  }

  window.onload = function() {
    requestAnimationFrame(() => requestAnimationFrame(runTest));
  };
}, "locked attribute");
</script>