Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/webappapis/update-rendering/child-document-raf-order.html - WPT Dashboard Interop Dashboard
<!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">
<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
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>