From a3242995e37bca19e5ab41a39e633215dc74076d Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Mon, 8 Jun 2026 15:34:47 +0200
Subject: [PATCH 1/2] HTML: Add tests for resource selection and moving nodes

See https://github.com/whatwg/html/pull/12511
---
 ...-pointer-move-non-source-into-pointer.html | 43 +++++++++++++++++++
 ...ter-move-non-source-pointer-after-out.html | 37 ++++++++++++++++
 ...ter-move-pointer-after-before-pointer.html | 34 +++++++++++++++
 ...ection-pointer-move-pointer-after-out.html | 29 +++++++++++++
 ...ction-pointer-move-pointer-before-out.html | 27 ++++++++++++
 ...on-pointer-move-pointer-before-within.html | 42 ++++++++++++++++++
 ...-pointer-move-processed-source-to-end.html | 35 +++++++++++++++
 ...-pointer-move-source-into-empty-video.html | 35 +++++++++++++++
 ...tion-pointer-move-source-into-pointer.html | 35 +++++++++++++++
 ...on-pointer-move-source-within-pointer.html | 32 ++++++++++++++
 10 files changed, 349 insertions(+)
 create mode 100644 html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-non-source-into-pointer.html
 create mode 100644 html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-non-source-pointer-after-out.html
 create mode 100644 html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-after-before-pointer.html
 create mode 100644 html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-after-out.html
 create mode 100644 html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-before-out.html
 create mode 100644 html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-before-within.html
 create mode 100644 html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-processed-source-to-end.html
 create mode 100644 html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-into-empty-video.html
 create mode 100644 html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-into-pointer.html
 create mode 100644 html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-within-pointer.html
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-non-source-into-pointer.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-non-source-into-pointer.html
new file mode 100644
index 00000000000000..2aa9013d028211
--- /dev/null
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-non-source-into-pointer.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<title>pointer updates (moving 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"></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 holder = document.getElementById('holder');
+  var br = document.createElement('br');
+  holder.appendChild(br);
+  document.getElementById('v-br').insertBefore(br, document.getElementById('br-c'));
+
+  var text = document.createTextNode('x');
+  holder.appendChild(text);
+  document.getElementById('v-text').insertBefore(text, 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>
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-non-source-pointer-after-out.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-non-source-pointer-after-out.html
new file mode 100644
index 00000000000000..fb975413209e1d
--- /dev/null
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-non-source-pointer-after-out.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<title>pointer updates (moving 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');
+  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').appendChild(text);
+
+  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>
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-after-before-pointer.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-after-before-pointer.html
new file mode 100644
index 00000000000000..dfd385950d4e71
--- /dev/null
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-after-before-pointer.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<title>pointer updates (moving pointerAfter before 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 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');
+
+  // Move pointerAfter to before pointerBefore: a, b | c becomes a, c, b |.
+  video.insertBefore(document.getElementById('source-c'), document.getElementById('source-b'));
+
+  var sourceD = document.createElement('source');
+  sourceD.onerror = function() { d++; events.push('d'); };
+  video.appendChild(sourceD);
+
+  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>
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-after-out.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-after-out.html
new file mode 100644
index 00000000000000..49777a5390f36a
--- /dev/null
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-after-out.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<title>pointer updates (moving 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) {
+  // Move pointerAfter out while b is pending. d should become the next candidate.
+  document.getElementById('holder').appendChild(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(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>
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-before-out.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-before-out.html
new file mode 100644
index 00000000000000..5354e7a8e10bcd
--- /dev/null
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-before-out.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<title>pointer updates (moving 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) {
+  // Move the current candidate, which is pointerBefore, out while it is pending.
+  document.getElementById('holder').appendChild(document.getElementById('source-b'));
+
+  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>
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-before-within.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-before-within.html
new file mode 100644
index 00000000000000..4dfb1039b72526
--- /dev/null
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-before-within.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<title>pointer updates (moving pointerBefore within the media element)</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 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');
+  source1.src = 'resources/delayed-broken-video.py?should-not-be-reprocessed';
+  video.insertBefore(source2, source1);
+
+  var source3 = document.createElement('source');
+  source3.onerror = function() { s3++; events.push('s3'); };
+  video.appendChild(source3);
+}
+</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) {
+  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>
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-processed-source-to-end.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-processed-source-to-end.html
new file mode 100644
index 00000000000000..35e265aa4fa72b
--- /dev/null
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-processed-source-to-end.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<title>pointer updates (moving a processed source element 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.appendChild(source1);
+}
+</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) {
+  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>
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-into-empty-video.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-into-empty-video.html
new file mode 100644
index 00000000000000..c7c109ecf387fe
--- /dev/null
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-into-empty-video.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<title>pointer updates (moving a source element 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"></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');
+
+  // Remove the current candidate so the video has no children while b is pending.
+  holder.appendChild(document.getElementById('source-b'));
+
+  var sourceX = document.createElement('source');
+  sourceX.onerror = function() { x++; events.push('x'); };
+  holder.appendChild(sourceX);
+
+  // Move an existing source from another parent into the empty video.
+  video.appendChild(sourceX);
+
+  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>
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-into-pointer.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-into-pointer.html
new file mode 100644
index 00000000000000..303c4826af3138
--- /dev/null
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-into-pointer.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<title>pointer updates (moving a source element into the pointer)</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 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');
+  var holder = document.getElementById('holder');
+  var source = document.createElement('source');
+  source.onerror = function() { x++; events.push('x'); };
+  holder.appendChild(source);
+
+  // Move an existing source from another parent to the pointer position: b | c.
+  video.insertBefore(source, 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>
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-within-pointer.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-within-pointer.html
new file mode 100644
index 00000000000000..0c7b29a30e68ad
--- /dev/null
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-within-pointer.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<title>pointer updates (moving a source element 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');
+
+  // Move a later source to the pointer position: b | c.
+  video.insertBefore(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>

From 0a93557761f0d8ec80d1eba5c40c43f6d0baf88a Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Mon, 8 Jun 2026 16:05:50 +0200
Subject: [PATCH 2/2] Use moveBefore()

---
 ...on-pointer-move-non-source-into-pointer.html | 17 ++++++++---------
 ...inter-move-non-source-pointer-after-out.html |  6 ++++--
 ...inter-move-pointer-after-before-pointer.html | 10 ++++++----
 ...election-pointer-move-pointer-after-out.html |  7 +++++--
 ...lection-pointer-move-pointer-before-out.html |  7 +++++--
 ...tion-pointer-move-pointer-before-within.html | 14 +++++++++-----
 ...on-pointer-move-processed-source-to-end.html |  6 ++++--
 ...on-pointer-move-source-into-empty-video.html | 16 ++++++++--------
 ...ection-pointer-move-source-into-pointer.html | 14 +++++++-------
 ...tion-pointer-move-source-within-pointer.html |  5 +++--
 10 files changed, 59 insertions(+), 43 deletions(-)

diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-non-source-into-pointer.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-non-source-into-pointer.html
index 2aa9013d028211..46d3f2eaa88638 100644
--- a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-non-source-into-pointer.html
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-non-source-into-pointer.html
@@ -1,9 +1,9 @@
 <!doctype html>
-<title>pointer updates (moving non-source nodes into the pointer)</title>
+<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"></div>
+<div id="holder"><br id="br-node"><span id="text-holder">x</span></div>
 <script>
 var brEvents = [];
 var textEvents = [];
@@ -18,14 +18,13 @@
 <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 holder = document.getElementById('holder');
-  var br = document.createElement('br');
-  holder.appendChild(br);
-  document.getElementById('v-br').insertBefore(br, document.getElementById('br-c'));
+  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');
 
-  var text = document.createTextNode('x');
-  holder.appendChild(text);
-  document.getElementById('v-text').insertBefore(text, document.getElementById('text-c'));
+  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');
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-non-source-pointer-after-out.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-non-source-pointer-after-out.html
index fb975413209e1d..cb7c664aecf448 100644
--- a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-non-source-pointer-after-out.html
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-non-source-pointer-after-out.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<title>pointer updates (moving non-source pointerAfter out of the media element)</title>
+<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>
@@ -14,6 +14,8 @@
 <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') {
@@ -24,7 +26,7 @@
   assert_not_equals(text, null, 'text node pointerAfter exists');
 
   // Move the text node that is pointerAfter out while b is pending.
-  document.getElementById('holder').appendChild(text);
+  document.getElementById('holder').moveBefore(text, null);
 
   window.onload = t.step_func(function() {
     assert_equals(a, 1, 'error events on a');
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-after-before-pointer.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-after-before-pointer.html
index dfd385950d4e71..7439a5d07fb887 100644
--- a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-after-before-pointer.html
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-after-before-pointer.html
@@ -1,8 +1,9 @@
 <!doctype html>
-<title>pointer updates (moving pointerAfter before the pointer)</title>
+<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;
@@ -14,13 +15,14 @@
 <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.insertBefore(document.getElementById('source-c'), document.getElementById('source-b'));
+  video.moveBefore(document.getElementById('source-c'), document.getElementById('source-b'));
 
-  var sourceD = document.createElement('source');
+  var sourceD = document.getElementById('source-d');
   sourceD.onerror = function() { d++; events.push('d'); };
-  video.appendChild(sourceD);
+  video.moveBefore(sourceD, null);
 
   window.onload = t.step_func(function() {
     assert_equals(a, 1, 'error events on a');
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-after-out.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-after-out.html
index 49777a5390f36a..896f5feb01c8b0 100644
--- a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-after-out.html
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-after-out.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<title>pointer updates (moving pointerAfter out of the media element)</title>
+<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>
@@ -14,8 +14,11 @@
 <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').appendChild(document.getElementById('source-c'));
+  document.getElementById('holder').moveBefore(document.getElementById('source-c'), null);
 
   window.onload = t.step_func(function() {
     assert_equals(a, 1, 'error events on a');
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-before-out.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-before-out.html
index 5354e7a8e10bcd..a17d0fba5fc97b 100644
--- a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-before-out.html
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-before-out.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<title>pointer updates (moving pointerBefore out of the media element)</title>
+<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>
@@ -13,8 +13,11 @@
 <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').appendChild(document.getElementById('source-b'));
+  document.getElementById('holder').moveBefore(document.getElementById('source-b'), null);
 
   window.onload = t.step_func(function() {
     assert_equals(a, 1, 'error events on a');
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-before-within.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-before-within.html
index 4dfb1039b72526..1caa8f4ec80ac9 100644
--- a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-before-within.html
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-pointer-before-within.html
@@ -1,8 +1,9 @@
 <!doctype html>
-<title>pointer updates (moving pointerBefore within the media element)</title>
+<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;
@@ -20,17 +21,20 @@
   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';
-  video.insertBefore(source2, source1);
-
-  var source3 = document.createElement('source');
   source3.onerror = function() { s3++; events.push('s3'); };
-  video.appendChild(source3);
+
+  // 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');
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-processed-source-to-end.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-processed-source-to-end.html
index 35e265aa4fa72b..94be159e112e57 100644
--- a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-processed-source-to-end.html
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-processed-source-to-end.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<title>pointer updates (moving a processed source element to the end)</title>
+<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>
@@ -19,12 +19,14 @@
   var video = document.getElementById('v');
   var source1 = document.getElementById('source-s1');
   source1.src = 'resources/delayed-broken-video.py?move-processed-source-to-end';
-  video.appendChild(source1);
+  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');
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-into-empty-video.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-into-empty-video.html
index c7c109ecf387fe..d37f5a077ad633 100644
--- a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-into-empty-video.html
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-into-empty-video.html
@@ -1,9 +1,9 @@
 <!doctype html>
-<title>pointer updates (moving a source element into an empty media element)</title>
+<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"></div>
+<div id="holder"><source id="source-x"></div>
 <script>
 var events = [];
 var b = 0;
@@ -14,16 +14,16 @@
 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');
 
-  // Remove the current candidate so the video has no children while b is pending.
-  holder.appendChild(document.getElementById('source-b'));
-
-  var sourceX = document.createElement('source');
+  var sourceX = document.getElementById('source-x');
   sourceX.onerror = function() { x++; events.push('x'); };
-  holder.appendChild(sourceX);
+
+  // 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.appendChild(sourceX);
+  video.moveBefore(sourceX, null);
 
   window.onload = t.step_func(function() {
     assert_equals(b, 1, 'error events on b');
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-into-pointer.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-into-pointer.html
index 303c4826af3138..d3a111687d1d7d 100644
--- a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-into-pointer.html
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-into-pointer.html
@@ -1,9 +1,9 @@
 <!doctype html>
-<title>pointer updates (moving a source element into the pointer)</title>
+<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"></div>
+<div id="holder"><source id="source-x"></div>
 <script>
 var events = [];
 var a = 0;
@@ -15,13 +15,13 @@
 <script>
 async_test(function(t) {
   var video = document.getElementById('v');
-  var holder = document.getElementById('holder');
-  var source = document.createElement('source');
-  source.onerror = function() { x++; events.push('x'); };
-  holder.appendChild(source);
+  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.insertBefore(source, document.getElementById('source-c'));
+  video.moveBefore(sourceX, document.getElementById('source-c'));
 
   window.onload = t.step_func(function() {
     assert_equals(a, 1, 'error events on a');
diff --git a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-within-pointer.html b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-within-pointer.html
index 0c7b29a30e68ad..5bf2273444ae0a 100644
--- a/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-within-pointer.html
+++ b/html/semantics/embedded-content/media-elements/loading-the-media-resource/resource-selection-pointer-move-source-within-pointer.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<title>pointer updates (moving a source element within the pointer)</title>
+<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>
@@ -15,9 +15,10 @@
 <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.insertBefore(document.getElementById('source-x'), document.getElementById('source-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');
