mirror of
https://github.com/servo/servo.git
synced 2025-08-17 03:15:34 +01:00
Update web-platform-tests to revision c2e5b9fbaa17424f05ca2bb04609790a3b61d5c2
This commit is contained in:
parent
db7bb2a510
commit
f2c1b70e4a
138 changed files with 2799 additions and 851 deletions
|
@ -5,11 +5,8 @@
|
|||
opener.pages.push(2);
|
||||
onload = function() {
|
||||
setTimeout(function() {
|
||||
document.write("<!doctype html>3<script>opener.pages.push(3); if(!opener.started) {opener.started = true; history.go(-1);} opener.start_test_wait();<\/script>");
|
||||
document.write("<!doctype html>3<script>opener.pages.push(3); if(!opener.started) {opener.started = true; history.go(-1);}<\/script>");
|
||||
document.close();
|
||||
if (opener.started) {
|
||||
opener.start_test_wait();
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -11,12 +11,11 @@
|
|||
function() {
|
||||
check_result = t.step_func(
|
||||
function() {
|
||||
if (pages.length < 4) {
|
||||
if (pages.length < 3) {
|
||||
setTimeout(check_result, 500);
|
||||
return
|
||||
}
|
||||
//The pass condition here is based on the idea that the spec is wrong and browsers are right
|
||||
assert_array_equals(pages, [2, 3, 2, 3], "Pages opened during history navigation");
|
||||
assert_array_equals(pages, [2, 3, 1], "Pages opened during history navigation");
|
||||
t.done();
|
||||
}
|
||||
)
|
||||
|
|
|
@ -3,11 +3,16 @@
|
|||
<script>
|
||||
function f() {
|
||||
opener.postMessage("original", "*");
|
||||
if (opener.data.length >= 2) {
|
||||
// If we proceed here, then our document.write will be racing with the
|
||||
// setTimeout in our opener. Just stop.
|
||||
return;
|
||||
}
|
||||
setTimeout(function () {
|
||||
document.open();
|
||||
document.write("<!doctype html>2<script>opener.postMessage('written', '*');<\/script>");
|
||||
document.close();
|
||||
}), 100;
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = f
|
||||
|
|
|
@ -11,11 +11,11 @@ var data = [];
|
|||
|
||||
window.onmessage = t.step_func(function(e) {
|
||||
data.push(e.data);
|
||||
if (data.length < 3) {
|
||||
if (data.length == 2) {
|
||||
win.location.reload();
|
||||
} else {
|
||||
} else if (data.length >= 3) {
|
||||
setTimeout(t.step_func(function() {
|
||||
assert_array_equals(data, ["original", "written", "written"]);
|
||||
assert_array_equals(data, ["original", "written", "original"]);
|
||||
t.done();
|
||||
}), 500);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,59 @@
|
|||
function assert_barProps(barPropObjects, visible) {
|
||||
let lastBarProp = undefined;
|
||||
for (const currentBarProp of barPropObjects) {
|
||||
assert_not_equals(currentBarProp, lastBarProp, "BarBrop objects of different properties are identical");
|
||||
assert_equals(currentBarProp.visible, visible, "a BarProp's visible is wrong");
|
||||
lastBarProp = currentBarProp;
|
||||
}
|
||||
}
|
||||
|
||||
function assert_identical_barProps(barProps, w, oldBarPropObjects, visible) {
|
||||
barProps.map(val => w[val]).map((val, index) => {
|
||||
assert_equals(val, oldBarPropObjects[index], "BarProp identity not preserved");
|
||||
});
|
||||
assert_barProps(oldBarPropObjects, visible);
|
||||
}
|
||||
|
||||
async_test(t => {
|
||||
const frame = document.body.appendChild(document.createElement("iframe")),
|
||||
frameW = frame.contentWindow,
|
||||
barProps = ["locationbar", "menubar", "personalbar", "scrollbars", "statusbar", "toolbar"],
|
||||
barPropObjects = barProps.map(val => frameW[val]);
|
||||
|
||||
assert_barProps(barPropObjects, true);
|
||||
frame.remove();
|
||||
assert_identical_barProps(barProps, frameW, barPropObjects, false);
|
||||
t.step_timeout(() => {
|
||||
assert_identical_barProps(barProps, frameW, barPropObjects, false);
|
||||
t.done();
|
||||
}, 0);
|
||||
}, "BarBrop objects of a nested Window");
|
||||
|
||||
async_test(t => {
|
||||
const openee = window.open("/common/blank.html"),
|
||||
barProps = ["locationbar", "menubar", "personalbar", "scrollbars", "statusbar", "toolbar"],
|
||||
barPropObjects = barProps.map(val => openee[val]);
|
||||
|
||||
// This is used to demonstrate that the Document is replaced while the global object (not the
|
||||
// global this object) stays the same
|
||||
openee.tiedToGlobalObject = openee.document;
|
||||
|
||||
assert_barProps(barPropObjects, true);
|
||||
openee.onload = t.step_func(() => {
|
||||
assert_own_property(openee, "tiedToGlobalObject");
|
||||
assert_not_equals(openee.tiedToGlobalObject, openee.document);
|
||||
|
||||
assert_identical_barProps(barProps, openee, barPropObjects, true);
|
||||
|
||||
openee.onunload = t.step_func(() => {
|
||||
assert_identical_barProps(barProps, openee, barPropObjects, true);
|
||||
t.step_timeout(() => {
|
||||
assert_identical_barProps(barProps, openee, barPropObjects, false);
|
||||
t.done();
|
||||
}, 0);
|
||||
});
|
||||
|
||||
openee.close();
|
||||
assert_identical_barProps(barProps, openee, barPropObjects, true);
|
||||
});
|
||||
}, "BarProp objects of an auxiliary Window");
|
|
@ -1,29 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Window Proxy locationbar visible flag Test</title>
|
||||
<link rel="author" title='JuneyoungOh' href="juneyoung85@gmail.com">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Description</h1>
|
||||
<p>WindowProxy.locationbar Test</p>
|
||||
|
||||
<h1>Manual Test Steps:</h1>
|
||||
<ol>
|
||||
<li>Make the locationbar visible in the user agent before executing this test.</li>
|
||||
<li>You may need to manually reload afterwards.</li>
|
||||
</ol>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script>
|
||||
test(function() {
|
||||
assert_not_equals(typeof window.locationbar, undefined, 'window.locationbar is undefined');
|
||||
assert_true(window.locationbar.visible)
|
||||
}, "window.locationbar.visible");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -1,29 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Window Proxy menubar visible flag Test</title>
|
||||
<link rel="author" title='JuneyoungOh' href="juneyoung85@gmail.com">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Description</h1>
|
||||
<p>WindowProxy.menubar Test</p>
|
||||
|
||||
<h1>Manual Test Steps:</h1>
|
||||
<ol>
|
||||
<li>Make the menubar visible in the user agent before executing this test.</li>
|
||||
<li>You may need to manually reload afterwards.</li>
|
||||
</ol>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script>
|
||||
test(function() {
|
||||
assert_not_equals(typeof window.menubar, undefined, 'window.menubar is undefined');
|
||||
assert_true(window.menubar.visible);
|
||||
}, "window.menubar.visible");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -1,29 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Window Proxy personalbar visible flag Test</title>
|
||||
<link rel="author" title="vanessa" href="mailto:vanessaohsy@gmail.com">
|
||||
<script type="text/javascript" src="/resources/testharness.js"></script>
|
||||
<script type="text/javascript" src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Description</h1>
|
||||
<p>WindowProxy.personalbar Test</p>
|
||||
|
||||
<h1>Manual Test Steps:</h1>
|
||||
<ol>
|
||||
<li>Make the personalbar visible in the user agent before executing this test.</li>
|
||||
<li>You may need to manually reload afterwards.</li>
|
||||
</ol>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript" >
|
||||
test(function () {
|
||||
assert_not_equals(window.personalbar, undefined, "window.personalbar is undefined");
|
||||
assert_true(window.personalbar.visible, "window.personalbar.visible");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -1,29 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Window Proxy scrollbars visible flag Test</title>
|
||||
<link rel="author" title="vanessa" href="vanessaohsy@gmail.com">
|
||||
<script type="text/javascript" src="/resources/testharness.js"></script>
|
||||
<script type="text/javascript" src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Description</h1>
|
||||
<p>WindowProxy.scrollbars Test</p>
|
||||
|
||||
<h1>Manual Test Steps:</h1>
|
||||
<ol>
|
||||
<li>Make the scrollbars visible in the user agent before executing this test.</li>
|
||||
<li>You may need to manually reload afterwards.</li>
|
||||
</ol>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript" >
|
||||
test(function () {
|
||||
assert_not_equals(window.scrollbars, undefined, "window.scrollbars is undefined");
|
||||
assert_true(window.scrollbars.visible, "window.scrollbars.visible");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -1,29 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>WindowProxy statusbar visible flag Test</title>
|
||||
<link rel="author" title="dokenzy" href="dokenzy@gmail.com">
|
||||
<script type="text/javascript" src="/resources/testharness.js"></script>
|
||||
<script type="text/javascript" src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Description</h1>
|
||||
<p>WindowProxy.statusbar Test</p>
|
||||
|
||||
<h1>Manual Test Steps:</h1>
|
||||
<ol>
|
||||
<li>Make the statusbar visible in the user agent before executing this test.</li>
|
||||
<li>You may need to manually reload afterwards.</li>
|
||||
</ol>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript" >
|
||||
test(function () {
|
||||
assert_not_equals(typeof window.statusbar.visible, undefined, 'window.statusbar.visible');
|
||||
assert_true(window.statusbar.visible, 'window.statusbar.visible');
|
||||
}, "BarProp attribute: window.statusbar.visible");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -1,29 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>WindowProxy toolbar visible flag Test</title>
|
||||
<link rel="author" title="dokenzy" href="dokenzy@gmail.com">
|
||||
<script type="text/javascript" src="/resources/testharness.js"></script>
|
||||
<script type="text/javascript" src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Description</h1>
|
||||
<p>WindowProxy.toolbar Test</p>
|
||||
|
||||
<h1>Manual Test Steps:</h1>
|
||||
<ol>
|
||||
<li>Make the toolbar visible in the user agent before executing this test.</li>
|
||||
<li>You may need to manually reload afterwards.</li>
|
||||
</ol>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript" >
|
||||
test(function () {
|
||||
assert_not_equals(typeof window.toolbar.visible, undefined, 'window.toolbar.visible');
|
||||
assert_true(window.toolbar.visible, 'window.toolbar.visible');
|
||||
}, "BarProp attribute: window.toolbar.visible");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Reference for default 'border-color' on table (with 'color' set)</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
* {
|
||||
border-color: teal;
|
||||
/* This only affects the elements that we specify 'border-style' on: */
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
table {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-spacing: 0;
|
||||
|
||||
/* To test in "rows": */
|
||||
float: left;
|
||||
margin: 1px;
|
||||
}
|
||||
br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.dotted {
|
||||
border-style: dotted;
|
||||
}
|
||||
.dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
.solid {
|
||||
border-style: solid;
|
||||
}
|
||||
.double {
|
||||
border-style: double;
|
||||
}
|
||||
.groove {
|
||||
border-style: groove;
|
||||
}
|
||||
.ridge {
|
||||
border-style: ridge;
|
||||
}
|
||||
.inset {
|
||||
border-style: inset;
|
||||
}
|
||||
.outset {
|
||||
border-style: outset;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<table class="dotted"><td></td></table>
|
||||
<table><th class="dotted"></th></table>
|
||||
<table><td class="dotted"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="dashed"><td></td></table>
|
||||
<table><th class="dashed"></th></table>
|
||||
<table><td class="dashed"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="solid"><td></td></table>
|
||||
<table><th class="solid"></th></table>
|
||||
<table><td class="solid"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="double"><td></td></table>
|
||||
<table><th class="double"></th></table>
|
||||
<table><td class="double"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="groove"><td></td></table>
|
||||
<table><th class="groove"></th></table>
|
||||
<table><td class="groove"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="ridge"><td></td></table>
|
||||
<table><th class="ridge"></th></table>
|
||||
<table><td class="ridge"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="inset"><td></td></table>
|
||||
<table><th class="inset"></th></table>
|
||||
<table><td class="inset"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="outset"><td></td></table>
|
||||
<table><th class="outset"></th></table>
|
||||
<table><td class="outset"></td></table>
|
||||
<br>
|
|
@ -0,0 +1,95 @@
|
|||
<!-- Intentionally omitting doctype, to test quirks mode. -->
|
||||
<head>
|
||||
<title>Testing default 'border-color' on table (with 'color' set), in quirks mode</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2">
|
||||
<link rel="match" href="table-border-3-ref.html">
|
||||
<style>
|
||||
* {
|
||||
/* This sets the used value of 'currentColor', which is what should be
|
||||
used for all border-coloring in this test: */
|
||||
color: teal;
|
||||
/* This only affects the elements that we specify 'border-style' on: */
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
table {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-spacing: 0;
|
||||
|
||||
/* To test in "rows": */
|
||||
float: left;
|
||||
margin: 1px;
|
||||
}
|
||||
br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.dotted {
|
||||
border-style: dotted;
|
||||
}
|
||||
.dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
.solid {
|
||||
border-style: solid;
|
||||
}
|
||||
.double {
|
||||
border-style: double;
|
||||
}
|
||||
.groove {
|
||||
border-style: groove;
|
||||
}
|
||||
.ridge {
|
||||
border-style: ridge;
|
||||
}
|
||||
.inset {
|
||||
border-style: inset;
|
||||
}
|
||||
.outset {
|
||||
border-style: outset;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<table class="dotted"><td></td></table>
|
||||
<table><th class="dotted"></th></table>
|
||||
<table><td class="dotted"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="dashed"><td></td></table>
|
||||
<table><th class="dashed"></th></table>
|
||||
<table><td class="dashed"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="solid"><td></td></table>
|
||||
<table><th class="solid"></th></table>
|
||||
<table><td class="solid"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="double"><td></td></table>
|
||||
<table><th class="double"></th></table>
|
||||
<table><td class="double"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="groove"><td></td></table>
|
||||
<table><th class="groove"></th></table>
|
||||
<table><td class="groove"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="ridge"><td></td></table>
|
||||
<table><th class="ridge"></th></table>
|
||||
<table><td class="ridge"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="inset"><td></td></table>
|
||||
<table><th class="inset"></th></table>
|
||||
<table><td class="inset"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="outset"><td></td></table>
|
||||
<table><th class="outset"></th></table>
|
||||
<table><td class="outset"></td></table>
|
||||
<br>
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Testing default 'border-color' on table (with 'color' set), in standards mode</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2">
|
||||
<link rel="match" href="table-border-3-ref.html">
|
||||
<style>
|
||||
* {
|
||||
/* This sets the used value of 'currentColor', which is what should be
|
||||
used for all border-coloring in this test: */
|
||||
color: teal;
|
||||
/* This only affects the elements that we specify 'border-style' on: */
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
table {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-spacing: 0;
|
||||
|
||||
/* To test in "rows": */
|
||||
float: left;
|
||||
margin: 1px;
|
||||
}
|
||||
br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.dotted {
|
||||
border-style: dotted;
|
||||
}
|
||||
.dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
.solid {
|
||||
border-style: solid;
|
||||
}
|
||||
.double {
|
||||
border-style: double;
|
||||
}
|
||||
.groove {
|
||||
border-style: groove;
|
||||
}
|
||||
.ridge {
|
||||
border-style: ridge;
|
||||
}
|
||||
.inset {
|
||||
border-style: inset;
|
||||
}
|
||||
.outset {
|
||||
border-style: outset;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<table class="dotted"><td></td></table>
|
||||
<table><th class="dotted"></th></table>
|
||||
<table><td class="dotted"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="dashed"><td></td></table>
|
||||
<table><th class="dashed"></th></table>
|
||||
<table><td class="dashed"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="solid"><td></td></table>
|
||||
<table><th class="solid"></th></table>
|
||||
<table><td class="solid"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="double"><td></td></table>
|
||||
<table><th class="double"></th></table>
|
||||
<table><td class="double"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="groove"><td></td></table>
|
||||
<table><th class="groove"></th></table>
|
||||
<table><td class="groove"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="ridge"><td></td></table>
|
||||
<table><th class="ridge"></th></table>
|
||||
<table><td class="ridge"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="inset"><td></td></table>
|
||||
<table><th class="inset"></th></table>
|
||||
<table><td class="inset"></td></table>
|
||||
<br>
|
||||
|
||||
<table class="outset"><td></td></table>
|
||||
<table><th class="outset"></th></table>
|
||||
<table><td class="outset"></td></table>
|
||||
<br>
|
|
@ -12,7 +12,7 @@ async_test(function(t) {
|
|||
track.mode = 'showing';
|
||||
assert_equals(video.textTracks.length, 1);
|
||||
|
||||
video.textTracks.onchange = t.step_func_done(function() {
|
||||
video.textTracks.onchange = t.step_func_done(function(event) {
|
||||
assert_equals(event.target, video.textTracks);
|
||||
assert_true(event instanceof Event, 'instanceof');
|
||||
assert_false(event.hasOwnProperty('track'), 'unexpected property found: "track"');
|
||||
|
|
|
@ -0,0 +1,19 @@
|
|||
// Make sure that the load event for an iframe doesn't fire at the
|
||||
// point when a navigation triggered by document.write() starts in it,
|
||||
// but rather when that navigation completes.
|
||||
|
||||
async_test(t => {
|
||||
const frame = document.body.appendChild(document.createElement("iframe"));
|
||||
const doc = frame.contentDocument;
|
||||
const url = URL.createObjectURL(new Blob(["PASS"], { type: "text/html"}));
|
||||
|
||||
frame.onload = t.step_func_done(() => {
|
||||
assert_equals(frame.contentDocument.body.textContent, "PASS",
|
||||
"Why is our load event firing before the new document loaded?");
|
||||
});
|
||||
|
||||
doc.open();
|
||||
doc.write(`FAIL<script>location = "${url}"</` + "script>");
|
||||
doc.close();
|
||||
}, "Setting location from document.write() call should not trigger load event until that load completes");
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
def main(request, response):
|
||||
time = request.url_parts.query if request.url_parts.query else '0'
|
||||
return 200, [['Refresh', time]], ''
|
||||
return 200, [('Refresh', time), ('Content-Type', "text/html")], ''
|
||||
|
|
|
@ -0,0 +1,118 @@
|
|||
<!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>
|
Loading…
Add table
Add a link
Reference in a new issue