<!DOCTYPE html>
<!--
   Tentative due to:
   https://github.com/whatwg/html/issues/1983
-->
<html>
<head>
  <meta name="timeout" content="long">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/resources/testdriver.js"></script>
  <script src="/resources/testdriver-vendor.js"></script>
  <script src="resources/utils.js"></script>
  <script>
    // Frame layout:
    // top=origin0:this-file [
    //   child1=origin1:child-one.html,
    //   child-xo=origin2:propagation-crossorigin-child.html [
    //     gchild=origin3:child-two.html
    //   ]
    // ]
    let propagation_test = async_test("Propagation test");

    let num_children_to_load = 3;
    let num_children_to_report = 3;

    function finishLoadPhase() {
        assert_equals(num_children_to_load, 0);

        test(() => {
            assert_false(navigator.userActivation.isActive);
            assert_false(navigator.userActivation.hasBeenActive);
        }, "Parent frame initial state");

        delayByFrames(() => test_driver.click(document.getElementById("child-xo")), 7);
    }

    function finishReportPhase() {
        assert_equals(num_children_to_report, 0);

        test(() => {
            assert_true(navigator.userActivation.isActive);
            assert_true(navigator.userActivation.hasBeenActive);
        }, "Parent frame final state");

        propagation_test.done();
    }

    window.addEventListener("message", event => {
        var msg = JSON.parse(event.data);

        if (msg.type == 'child-one-loaded') {
            test(() => {
                assert_false(msg.isActive);
                assert_false(msg.hasBeenActive);
            }, "Child1 frame initial state");
        } else if (msg.type == 'child-crossorigin-loaded') {
            test(() => {
                assert_false(msg.isActive);
                assert_false(msg.hasBeenActive);
            }, "Child2 frame initial state");
        } else if (msg.type == 'child-two-loaded') {
            test(() => {
                assert_false(msg.isActive);
                assert_false(msg.hasBeenActive);
            }, "Grandchild frame initial state");
        } else if (msg.type == 'child-one-report') {
            test(() => {
                assert_false(msg.isActive);
                assert_false(msg.hasBeenActive);
            }, "Child1 frame final state");
        } else if (msg.type == 'child-crossorigin-report') {
            // This msg was triggered by a user click.
            test(() => {
                assert_true(msg.isActive);
                assert_true(msg.hasBeenActive);
            }, "Child2 frame final state");

            // Ask remaining frames to report states.
            let ask_report = JSON.stringify({"type": "report"});
            frames[0].postMessage(ask_report, "*");
            frames[1].frames[0].postMessage(ask_report, "*");
        } else if (msg.type == 'child-two-report') {
            test(() => {
                assert_false(msg.isActive);
                assert_false(msg.hasBeenActive);
            }, "Grand child frame final state");
        }

        // Phase switching.
        if (msg.type.endsWith("-loaded")) {
            if (--num_children_to_load == 0)
                finishLoadPhase();
        } else if (msg.type.endsWith("-report")) {
            if (--num_children_to_report == 0)
                finishReportPhase();
        }
    });
  </script>
</head>
<body>
  <h1>User activation propagation across cross-origin frame boundary</h1>
  <p>Tests that user activation does not propagate across cross-origin frame boundary.</p>
  <ol id="instructions">
    <li>Click anywhere on the green area (child frame).
  </ol>
  <iframe id="child1" width="300px" height="40px"
          src="http://{{domains[www1]}}:{{ports[http][0]}}/html/user-activation/resources/child-one.html">
  </iframe>
  <iframe id="child-xo" width="300px" height="140px"
          src="http://{{domains[www2]}}:{{ports[http][0]}}/html/user-activation/resources/propagation-crossorigin-child.sub.html">
  </iframe>
</body>
</html>