Skip to content

HTML: Add tests for resource selection and moving nodes #60466

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zcorpan wants to merge 2 commits into
base: master
Choose a base branch
from
Open

HTML: Add tests for resource selection and moving nodes #60466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a324299
HTML: Add tests for resource selection and moving nodes
zcorpan Jun 8, 2026
0a93557
Use moveBefore()
zcorpan Jun 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions ...s/loading-the-media-resource/resource-selection-pointer-move-non-source-into-pointer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!doctype html>
<title>pointer updates (moveBefore non-source nodes into the pointer)</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<div id="holder"><br id="br-node"><span id="text-holder">x</span></div>
<script>
var brEvents = [];
var textEvents = [];
var a1 = 0;
var b1 = 0;
var c1 = 0;
var a2 = 0;
var b2 = 0;
var c2 = 0;
</script>
<video id="v-br"><source id="br-a" onerror="a1++; brEvents.push('a')"><source id="br-b" onerror="b1++; brEvents.push('b')" src="resources/delayed-broken-video.py?br"><source id="br-c" onerror="c1++; brEvents.push('c')"></video>
<video id="v-text"><source id="text-a" onerror="a2++; textEvents.push('a')"><source id="text-b" onerror="b2++; textEvents.push('b')" src="resources/delayed-broken-video.py?text"><source id="text-c" onerror="c2++; textEvents.push('c')"></video>
<script>
async_test(function(t) {
var videoBr = document.getElementById('v-br');
var videoText = document.getElementById('v-text');
assert_implements(typeof videoBr.moveBefore == 'function', 'ParentNode.moveBefore() is required for this test');
assert_implements(typeof videoText.moveBefore == 'function', 'ParentNode.moveBefore() is required for this test');

videoBr.moveBefore(document.getElementById('br-node'), document.getElementById('br-c'));
videoText.moveBefore(document.getElementById('text-holder').firstChild, document.getElementById('text-c'));

window.onload = t.step_func(function() {
assert_equals(a1, 1, 'error events on br test a');
assert_equals(b1, 1, 'error events on br test b');
assert_equals(c1, 1, 'error events on br test c');
assert_array_equals(brEvents, ['a', 'b', 'c'], 'br test processed source order');

assert_equals(a2, 1, 'error events on text test a');
assert_equals(b2, 1, 'error events on text test b');
assert_equals(c2, 1, 'error events on text test c');
assert_array_equals(textEvents, ['a', 'b', 'c'], 'text test processed source order');
t.done();
});
});
</script>
39 changes: 39 additions & 0 deletions ...ding-the-media-resource/resource-selection-pointer-move-non-source-pointer-after-out.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!doctype html>
<title>pointer updates (moveBefore non-source pointerAfter out of the media element)</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<div id="holder"></div>
<script>
var events = [];
var a = 0;
var b = 0;
var c = 0;
</script>
<video id="v"><source id="source-a" onerror="a++; events.push('a')"><source id="source-b" onerror="b++; events.push('b')" src="resources/delayed-broken-video.py">x<source id="source-c" onerror="c++; events.push('c')"></video>
<script>
async_test(function(t) {
var video = document.getElementById('v');
assert_implements(typeof video.moveBefore == 'function', 'ParentNode.moveBefore() is required for this test');

var text = null;
for (var i = 0; i < video.childNodes.length; ++i) {
if (video.childNodes[i].nodeType == Node.TEXT_NODE && video.childNodes[i].data == 'x') {
text = video.childNodes[i];
break;
}
}
assert_not_equals(text, null, 'text node pointerAfter exists');

// Move the text node that is pointerAfter out while b is pending.
document.getElementById('holder').moveBefore(text, null);

window.onload = t.step_func(function() {
assert_equals(a, 1, 'error events on a');
assert_equals(b, 1, 'error events on b');
assert_equals(c, 1, 'error events on c');
assert_array_equals(events, ['a', 'b', 'c'], 'processed source order');
t.done();
});
});
</script>
36 changes: 36 additions & 0 deletions ...ding-the-media-resource/resource-selection-pointer-move-pointer-after-before-pointer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!doctype html>
<title>pointer updates (moveBefore pointerAfter before the pointer)</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<div id="holder"><source id="source-d"></div>
<script>
var events = [];
var a = 0;
var b = 0;
var c = 0;
var d = 0;
</script>
<video id="v"><source id="source-a" onerror="a++; events.push('a')"><source id="source-b" onerror="b++; events.push('b')" src="resources/delayed-broken-video.py"><source id="source-c" onerror="c++; events.push('c')"></video>
<script>
async_test(function(t) {
var video = document.getElementById('v');
assert_implements(typeof video.moveBefore == 'function', 'ParentNode.moveBefore() is required for this test');

// Move pointerAfter to before pointerBefore: a, b | c becomes a, c, b |.
video.moveBefore(document.getElementById('source-c'), document.getElementById('source-b'));

var sourceD = document.getElementById('source-d');
sourceD.onerror = function() { d++; events.push('d'); };
video.moveBefore(sourceD, null);

window.onload = t.step_func(function() {
assert_equals(a, 1, 'error events on a');
assert_equals(b, 1, 'error events on b');
assert_equals(c, 0, 'error events on c');
assert_equals(d, 1, 'error events on d');
assert_array_equals(events, ['a', 'b', 'd'], 'processed source order');
t.done();
});
});
</script>
32 changes: 32 additions & 0 deletions ...lements/loading-the-media-resource/resource-selection-pointer-move-pointer-after-out.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!doctype html>
<title>pointer updates (moveBefore pointerAfter out of the media element)</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<div id="holder"></div>
<script>
var events = [];
var a = 0;
var b = 0;
var c = 0;
var d = 0;
</script>
<video id="v"><source id="source-a" onerror="a++; events.push('a')"><source id="source-b" onerror="b++; events.push('b')" src="resources/delayed-broken-video.py"><source id="source-c" onerror="c++; events.push('c')"><source id="source-d" onerror="d++; events.push('d')"></video>
<script>
async_test(function(t) {
var video = document.getElementById('v');
assert_implements(typeof video.moveBefore == 'function', 'ParentNode.moveBefore() is required for this test');

// Move pointerAfter out while b is pending. d should become the next candidate.
document.getElementById('holder').moveBefore(document.getElementById('source-c'), null);

window.onload = t.step_func(function() {
assert_equals(a, 1, 'error events on a');
assert_equals(b, 1, 'error events on b');
assert_equals(c, 0, 'error events on c');
assert_equals(d, 1, 'error events on d');
assert_array_equals(events, ['a', 'b', 'd'], 'processed source order');
t.done();
});
});
</script>
30 changes: 30 additions & 0 deletions ...ements/loading-the-media-resource/resource-selection-pointer-move-pointer-before-out.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!doctype html>
<title>pointer updates (moveBefore pointerBefore out of the media element)</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<div id="holder"></div>
<script>
var events = [];
var a = 0;
var b = 0;
var c = 0;
</script>
<video id="v"><source id="source-a" onerror="a++; events.push('a')"><source id="source-b" onerror="b++; events.push('b')" src="resources/delayed-broken-video.py"><source id="source-c" onerror="c++; events.push('c')"></video>
<script>
async_test(function(t) {
var video = document.getElementById('v');
assert_implements(typeof video.moveBefore == 'function', 'ParentNode.moveBefore() is required for this test');

// Move the current candidate, which is pointerBefore, out while it is pending.
document.getElementById('holder').moveBefore(document.getElementById('source-b'), null);

window.onload = t.step_func(function() {
assert_equals(a, 1, 'error events on a');
assert_equals(b, 1, 'error events on b');

@zcorpan zcorpan Jun 12, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is correct per spec, but we could change the spec to stop firing error events on moved or removed source elements (at least if the parent is no longer the original media element).

assert_equals(c, 1, 'error events on c');
assert_array_equals(events, ['a', 'b', 'c'], 'processed source order');
t.done();
});
});
</script>
46 changes: 46 additions & 0 deletions ...nts/loading-the-media-resource/resource-selection-pointer-move-pointer-before-within.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!doctype html>
<title>pointer updates (moveBefore pointerBefore within the media element)</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<div id="holder"><source id="source-s3"></div>
<script>
var events = [];
var s1 = 0;
var s2 = 0;
var s3 = 0;
var moved = false;

function s2_error() {
s2++;
events.push('s2');
if (moved) {
return;
}
moved = true;
var video = document.getElementById('v');
var source1 = document.getElementById('source-s1');
var source2 = document.getElementById('source-s2');
var source3 = document.getElementById('source-s3');
source1.src = 'resources/delayed-broken-video.py?should-not-be-reprocessed';
source3.onerror = function() { s3++; events.push('s3'); };

// Move pointerBefore before s1. The pointer should remain after s1.
video.moveBefore(source2, source1);
video.moveBefore(source3, null);
}
</script>
<video id="v"><source id="source-s1" onerror="s1++; events.push('s1')"><source id="source-s2" onerror="s2_error()" src="resources/delayed-broken-video.py"></video>
<script>
async_test(function(t) {
assert_implements(typeof document.getElementById('v').moveBefore == 'function', 'ParentNode.moveBefore() is required for this test');

window.onload = t.step_func(function() {
assert_equals(s1, 1, 'error events on s1');
assert_equals(s2, 1, 'error events on s2');
assert_equals(s3, 1, 'error events on s3');
assert_array_equals(events, ['s1', 's2', 's3'], 'processed source order');
t.done();
});
});
</script>
37 changes: 37 additions & 0 deletions ...s/loading-the-media-resource/resource-selection-pointer-move-processed-source-to-end.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!doctype html>
<title>pointer updates (moveBefore processed source to the end)</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<script>
var events = [];
var s1 = 0;
var s2 = 0;
var moved = false;

function s2_error() {
s2++;
events.push('s2');
if (moved) {
return;
}
moved = true;
var video = document.getElementById('v');
var source1 = document.getElementById('source-s1');
source1.src = 'resources/delayed-broken-video.py?move-processed-source-to-end';
video.moveBefore(source1, null);
}
</script>
<video id="v"><source id="source-s1" onerror="s1++; events.push('s1')"><source id="source-s2" onerror="s2_error()" src="resources/delayed-broken-video.py"></video>
<script>
async_test(function(t) {
assert_implements(typeof document.getElementById('v').moveBefore == 'function', 'ParentNode.moveBefore() is required for this test');

window.onload = t.step_func(function() {
assert_equals(s1, 2, 'error events on s1');
assert_equals(s2, 1, 'error events on s2');
assert_array_equals(events, ['s1', 's2', 's1'], 'processed source order');
t.done();
});
});
</script>
35 changes: 35 additions & 0 deletions ...s/loading-the-media-resource/resource-selection-pointer-move-source-into-empty-video.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!doctype html>
<title>pointer updates (moveBefore source into an empty media element)</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<div id="holder"><source id="source-x"></div>
<script>
var events = [];
var b = 0;
var x = 0;
</script>
<video id="v"><source id="source-b" onerror="b++; events.push('b')" src="resources/delayed-broken-video.py"></video>
<script>
async_test(function(t) {
var video = document.getElementById('v');
var holder = document.getElementById('holder');
assert_implements(typeof video.moveBefore == 'function', 'ParentNode.moveBefore() is required for this test');

var sourceX = document.getElementById('source-x');
sourceX.onerror = function() { x++; events.push('x'); };

// Move the current candidate out so the video has no children while b is pending.
holder.moveBefore(document.getElementById('source-b'), null);

// Move an existing source from another parent into the empty video.
video.moveBefore(sourceX, null);

window.onload = t.step_func(function() {
assert_equals(b, 1, 'error events on b');
assert_equals(x, 1, 'error events on x');
assert_array_equals(events, ['b', 'x'], 'processed source order');
t.done();
});
});
</script>
35 changes: 35 additions & 0 deletions ...ments/loading-the-media-resource/resource-selection-pointer-move-source-into-pointer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!doctype html>
<title>pointer updates (moveBefore source into the pointer)</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<div id="holder"><source id="source-x"></div>
<script>
var events = [];
var a = 0;
var b = 0;
var c = 0;
var x = 0;
</script>
<video id="v"><source id="source-a" onerror="a++; events.push('a')"><source id="source-b" onerror="b++; events.push('b')" src="resources/delayed-broken-video.py"><source id="source-c" onerror="c++; events.push('c')"></video>
<script>
async_test(function(t) {
var video = document.getElementById('v');
assert_implements(typeof video.moveBefore == 'function', 'ParentNode.moveBefore() is required for this test');

var sourceX = document.getElementById('source-x');
sourceX.onerror = function() { x++; events.push('x'); };

// Move an existing source from another parent to the pointer position: b | c.
video.moveBefore(sourceX, document.getElementById('source-c'));

window.onload = t.step_func(function() {
assert_equals(a, 1, 'error events on a');
assert_equals(b, 1, 'error events on b');
assert_equals(x, 1, 'error events on x');
assert_equals(c, 1, 'error events on c');
assert_array_equals(events, ['a', 'b', 'x', 'c'], 'processed source order');
t.done();
});
});
</script>
33 changes: 33 additions & 0 deletions ...nts/loading-the-media-resource/resource-selection-pointer-move-source-within-pointer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!doctype html>
<title>pointer updates (moveBefore source within the pointer)</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<script>
var events = [];
var a = 0;
var b = 0;
var c = 0;
var x = 0;
var d = 0;
</script>
<video id="v"><source id="source-a" onerror="a++; events.push('a')"><source id="source-b" onerror="b++; events.push('b')" src="resources/delayed-broken-video.py"><source id="source-c" onerror="c++; events.push('c')"><source id="source-x" onerror="x++; events.push('x')"><source id="source-d" onerror="d++; events.push('d')"></video>
<script>
async_test(function(t) {
var video = document.getElementById('v');
assert_implements(typeof video.moveBefore == 'function', 'ParentNode.moveBefore() is required for this test');

// Move a later source to the pointer position: b | c.
video.moveBefore(document.getElementById('source-x'), document.getElementById('source-c'));

window.onload = t.step_func(function() {
assert_equals(a, 1, 'error events on a');
assert_equals(b, 1, 'error events on b');
assert_equals(x, 1, 'error events on x');
assert_equals(c, 1, 'error events on c');
assert_equals(d, 1, 'error events on d');
assert_array_equals(events, ['a', 'b', 'x', 'c', 'd'], 'processed source order');
t.done();
});
});
</script>
Loading