| <!DOCTYPE HTML> |
| <meta charset=UTF-8> |
| <title>Ordering of steps in "Update the Rendering" - child document requestAnimationFrame order</title> |
| <link rel="help" href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering"> |
| <link rel="author" title="L. David Baron" href="https://dbaron.org/"> |
| <link rel="author" title="Mozilla" href="https://mozilla.org/"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <div id=log></div> |
| |
| <!-- |
| |
| This test tests the interaction of just two substeps of the "Update the |
| rendering" steps in |
| https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering |
| |
| These are: |
| |
| 1. Let docs be the list of Document objects associated with the event |
| loop in question, sorted arbitrarily except that the following |
| conditions must be met: |
| |
| - Any Document B that is nested through a Document A must be listed |
| after A in the list. |
| |
| - If there are two documents A and B whose browsing contexts are |
| both nested browsing contexts and their browsing context |
| containers are both elements in the same Document C, then the |
| order of A and B in the list must match the relative tree order of |
| their respective browsing context containers in C. |
| |
| In the steps below that iterate over docs, each Document must be |
| processed in the order it is found in the list. |
| |
| and later: |
| |
| 10. For each fully active Document in docs, run the animation frame |
| callbacks for that Document, passing in now as the timestamp. |
| |
| |
| It tests this by setting up a tree of three documents, two children and |
| one parent, and testing for the relative order of the animation frame |
| callbacks for each. |
| |
| --> |
| |
| <script> |
| |
| async_test(function (t) { |
| step_timeout(setup, 0); |
| |
| let first_frame, second_frame; |
| |
| let notification_sequence = []; |
| |
| function setup() { |
| // Start by creating two iframes. To test (a little bit) the rule |
| // about iteration being in document order, insert them in the reverse |
| // order of creation. |
| let body = document.body; |
| function make_iframe() { |
| let iframe = document.createElement("iframe"); |
| iframe.setAttribute("srcdoc", "<body onload='parent.child_ready()'>"); |
| iframe.setAttribute("width", "30"); |
| iframe.setAttribute("height", "15"); |
| return iframe; |
| } |
| second_frame = make_iframe(); |
| body.prepend(second_frame); |
| first_frame = make_iframe(); |
| body.prepend(first_frame); |
| |
| let children_waiting = 2; |
| window.child_ready = function() { |
| if (--children_waiting == 0) { |
| // Call requestAnimationFrame in neither the order nor the reverse |
| // of the order in which we expect to be called (which is parent, |
| // first, second). |
| first_frame.contentWindow.requestAnimationFrame(first_child_raf); |
| second_frame.contentWindow.requestAnimationFrame(second_child_raf); |
| window.requestAnimationFrame(parent_raf); |
| } |
| }; |
| } |
| |
| let parent_raf = t.step_func(function() { |
| notification_sequence.push("parent_raf"); |
| |
| // Request another notification to help ensure we're getting expected behavior. |
| window.requestAnimationFrame(parent_raf); |
| }); |
| |
| let first_child_raf = t.step_func(function() { |
| notification_sequence.push("first_child_raf"); |
| |
| // Request another notification to help ensure we're getting expected behavior. |
| first_frame.contentWindow.requestAnimationFrame(first_child_raf); |
| }); |
| |
| let second_child_raf = t.step_func(function() { |
| notification_sequence.push("second_child_raf"); |
| |
| // Request another notification to help ensure we're getting expected behavior. |
| second_frame.contentWindow.requestAnimationFrame(second_child_raf); |
| |
| step_timeout(finish, 0); |
| }); |
| |
| let finish = t.step_func(function() { |
| assert_array_equals(notification_sequence, |
| ["parent_raf", "first_child_raf", "second_child_raf"], |
| "expected order of notifications"); |
| t.done(); |
| }); |
| }); |
| |
| </script> |