diff --git a/html/browsers/browsing-the-web/history-traversal/event-order/after-load-hash-twice.html b/html/browsers/browsing-the-web/history-traversal/event-order/after-load-hash-twice.html
new file mode 100644
index 00000000000000..75889ef5175fa6
--- /dev/null
+++ b/html/browsers/browsing-the-web/history-traversal/event-order/after-load-hash-twice.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Popstate/hashchange/load event ordering</title>
+
+<script>
+// Set these up super-early before we hit the network for the test harness, just in case.
+window.eventOrder = [];
+window.onhashchange = () => window.eventOrder.push("hashchange");
+window.onpopstate = () => window.eventOrder.push("popstate");
+window.onload = () => window.eventOrder.push("load");
+</script>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+async_test(t => {
+  assert_array_equals(window.eventOrder, []);
+
+  // 0 timeout is necessary because if we do location.hash assignment before load is finished firing it counts as a replacement.
+  window.addEventListener("load", () => t.step_timeout(() => {
+    assert_array_equals(window.eventOrder, ["load"]);
+
+    window.addEventListener("hashchange", t.step_func(() => {
+      assert_array_equals(window.eventOrder, ["load", "popstate", "popstate", "hashchange"]);
+
+      window.addEventListener("hashchange", t.step_func_done(() => {
+        assert_array_equals(window.eventOrder, ["load", "popstate", "popstate", "hashchange", "hashchange"]);
+      }));
+    }), { once: true });
+
+    location.hash = "#1";
+    assert_array_equals(window.eventOrder, ["load", "popstate"]);
+    location.hash = "#2";
+    assert_array_equals(window.eventOrder, ["load", "popstate", "popstate"]);
+  }, 0));
+}, "when changing hash, after the load event");
+</script>
diff --git a/html/browsers/browsing-the-web/history-traversal/event-order/after-load-hash.html b/html/browsers/browsing-the-web/history-traversal/event-order/after-load-hash.html
new file mode 100644
index 00000000000000..f74d716d914da8
--- /dev/null
+++ b/html/browsers/browsing-the-web/history-traversal/event-order/after-load-hash.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Popstate/hashchange/load event ordering</title>
+
+<script>
+// Set these up super-early before we hit the network for the test harness, just in case.
+window.eventOrder = [];
+window.onhashchange = () => window.eventOrder.push("hashchange");
+window.onpopstate = () => window.eventOrder.push("popstate");
+window.onload = () => window.eventOrder.push("load");
+</script>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+async_test(t => {
+  assert_array_equals(window.eventOrder, []);
+
+  // 0 timeout is necessary because if we do location.hash assignment before load is finished firing it counts as a replacement.
+  window.addEventListener("load", () => t.step_timeout(() => {
+    assert_array_equals(window.eventOrder, ["load"]);
+
+    window.addEventListener("hashchange", t.step_func_done(() => {
+      assert_array_equals(window.eventOrder, ["load", "popstate", "hashchange"]);
+    }));
+
+    location.hash = "#1";
+    assert_array_equals(window.eventOrder, ["load", "popstate"]);
+  }, 0));
+}, "when changing hash, after the load event");
+</script>
diff --git a/html/browsers/browsing-the-web/history-traversal/event-order/after-load-pushState.html b/html/browsers/browsing-the-web/history-traversal/event-order/after-load-pushState.html
new file mode 100644
index 00000000000000..4f9f3dad473f99
--- /dev/null
+++ b/html/browsers/browsing-the-web/history-traversal/event-order/after-load-pushState.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Popstate/hashchange/load event ordering</title>
+
+<script>
+// Set these up super-early before we hit the network for the test harness, just in case.
+window.eventOrder = [];
+window.onhashchange = () => window.eventOrder.push("hashchange");
+window.onpopstate = () => window.eventOrder.push("popstate");
+window.onload = () => window.eventOrder.push("load");
+</script>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+async_test(t => {
+  assert_array_equals(window.eventOrder, []);
+
+  // 0 timeout is necessary because if we do pushState before load is finished firing it counts as a replacement.
+  window.addEventListener("load", () => t.step_timeout(() => {
+    assert_array_equals(window.eventOrder, ["load"]);
+
+    t.step_timeout(t.step_func_done(() => {
+      assert_array_equals(window.eventOrder, ["load"]);
+    }), 100);
+
+    history.pushState({ state: "new state" }, "");
+  }, 0));
+}, "when pushing state, after the load event");
+</script>
diff --git a/html/browsers/browsing-the-web/history-traversal/event-order/after-load-replaceState.html b/html/browsers/browsing-the-web/history-traversal/event-order/after-load-replaceState.html
new file mode 100644
index 00000000000000..28148ff7b2d34a
--- /dev/null
+++ b/html/browsers/browsing-the-web/history-traversal/event-order/after-load-replaceState.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Popstate/hashchange/load event ordering</title>
+
+<script>
+// Set these up super-early before we hit the network for the test harness, just in case.
+window.eventOrder = [];
+window.onhashchange = () => window.eventOrder.push("hashchange");
+window.onpopstate = () => window.eventOrder.push("popstate");
+window.onload = () => window.eventOrder.push("load");
+</script>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+async_test(t => {
+  assert_array_equals(window.eventOrder, []);
+
+  window.addEventListener("load", t.step_func(() => {
+    assert_array_equals(window.eventOrder, ["load"]);
+
+    t.step_timeout(t.step_func_done(() => {
+      assert_array_equals(window.eventOrder, ["load"]);
+    }), 100);
+
+    history.replaceState({ state: "new state" }, "");
+  }));
+}, "when replacing state, after the load event");
+</script>
diff --git a/html/browsers/browsing-the-web/history-traversal/event-order/before-load-hash-twice.html b/html/browsers/browsing-the-web/history-traversal/event-order/before-load-hash-twice.html
new file mode 100644
index 00000000000000..7c8df118437d0c
--- /dev/null
+++ b/html/browsers/browsing-the-web/history-traversal/event-order/before-load-hash-twice.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Popstate/hashchange/load event ordering</title>
+
+<script>
+// Set these up super-early before we hit the network for the test harness, just in case.
+window.eventOrder = [];
+window.onhashchange = () => window.eventOrder.push("hashchange");
+window.onpopstate = () => window.eventOrder.push("popstate");
+window.onload = () => window.eventOrder.push("load");
+</script>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+async_test(t => {
+  assert_array_equals(window.eventOrder, []);
+
+  window.addEventListener("load", t.step_func_done(() => {
+    assert_array_equals(window.eventOrder, ["popstate", "popstate", "hashchange", "hashchange", "load"]);
+  }));
+
+  location.hash = "#1";
+  assert_array_equals(window.eventOrder, ["popstate"]);
+  location.hash = "#2";
+  assert_array_equals(window.eventOrder, ["popstate", "popstate"]);
+}, "when changing hash twice, before load");
+</script>
diff --git a/html/browsers/browsing-the-web/history-traversal/event-order/before-load-hash.html b/html/browsers/browsing-the-web/history-traversal/event-order/before-load-hash.html
new file mode 100644
index 00000000000000..97c4636fad7c51
--- /dev/null
+++ b/html/browsers/browsing-the-web/history-traversal/event-order/before-load-hash.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Popstate/hashchange/load event ordering</title>
+
+<script>
+// Set these up super-early before we hit the network for the test harness, just in case.
+window.eventOrder = [];
+window.onhashchange = () => window.eventOrder.push("hashchange");
+window.onpopstate = () => window.eventOrder.push("popstate");
+window.onload = () => window.eventOrder.push("load");
+</script>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+async_test(t => {
+  assert_array_equals(window.eventOrder, []);
+
+  window.addEventListener("load", t.step_func_done(() => {
+    assert_array_equals(window.eventOrder, ["popstate", "hashchange", "load"]);
+  }));
+
+  location.hash = "#1";
+  assert_array_equals(window.eventOrder, ["popstate"]);
+}, "when changing hash, before load");
+</script>
diff --git a/html/browsers/browsing-the-web/history-traversal/event-order/before-load-pushState.html b/html/browsers/browsing-the-web/history-traversal/event-order/before-load-pushState.html
new file mode 100644
index 00000000000000..a08afa474f0ea4
--- /dev/null
+++ b/html/browsers/browsing-the-web/history-traversal/event-order/before-load-pushState.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Popstate/hashchange/load event ordering</title>
+
+<script>
+// Set these up super-early before we hit the network for the test harness, just in case.
+window.eventOrder = [];
+window.onhashchange = () => window.eventOrder.push("hashchange");
+window.onpopstate = () => window.eventOrder.push("popstate");
+window.onload = () => window.eventOrder.push("load");
+</script>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+async_test(t => {
+  assert_array_equals(window.eventOrder, []);
+
+  window.addEventListener("load", t.step_func(() => {
+    t.step_timeout(t.step_func_done(() => {
+      assert_array_equals(window.eventOrder, ["load"]);
+    }), 100);
+  }));
+
+  history.pushState({ state: "new state" }, "");
+}, "when pushing state, before load");
+</script>
diff --git a/html/browsers/browsing-the-web/history-traversal/event-order/before-load-replaceState.html b/html/browsers/browsing-the-web/history-traversal/event-order/before-load-replaceState.html
new file mode 100644
index 00000000000000..10d30038fb855a
--- /dev/null
+++ b/html/browsers/browsing-the-web/history-traversal/event-order/before-load-replaceState.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Popstate/hashchange/load event ordering</title>
+
+<script>
+// Set these up super-early before we hit the network for the test harness, just in case.
+window.eventOrder = [];
+window.onhashchange = () => window.eventOrder.push("hashchange");
+window.onpopstate = () => window.eventOrder.push("popstate");
+window.onload = () => window.eventOrder.push("load");
+</script>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+async_test(t => {
+  assert_array_equals(window.eventOrder, []);
+
+  t.step_timeout(t.step_func_done(() => {
+    assert_array_equals(window.eventOrder, ["load"]);
+  }), 100);
+
+  history.replaceState({ state: "new state" }, "");
+}, "when replacing state, before load");
+</script>
diff --git a/html/browsers/browsing-the-web/history-traversal/event-order/pushState-inside-popstate.html b/html/browsers/browsing-the-web/history-traversal/event-order/pushState-inside-popstate.html
new file mode 100644
index 00000000000000..35ada116edd35d
--- /dev/null
+++ b/html/browsers/browsing-the-web/history-traversal/event-order/pushState-inside-popstate.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+test(t => {
+  let popstate_called = false;
+  window.onpopstate = t.step_func(e => {
+    popstate_called = true;
+    history.pushState(2, null, "#2");
+    assert_not_equals(history.state, e.state);
+  });
+  location.hash = "#1";
+  assert_true(popstate_called);
+}, "pushState inside popstate")
+</script>
diff --git a/html/browsers/browsing-the-web/history-traversal/event-order/same-document-traverse-immediate.html b/html/browsers/browsing-the-web/history-traversal/event-order/same-document-traverse-immediate.html
new file mode 100644
index 00000000000000..51ea20b289dd01
--- /dev/null
+++ b/html/browsers/browsing-the-web/history-traversal/event-order/same-document-traverse-immediate.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Popstate/hashchange/load event ordering</title>
+
+<script>
+// Set these up super-early before we hit the network for the test harness, just in case.
+window.eventOrder = [];
+window.onhashchange = () => window.eventOrder.push("hashchange");
+window.onpopstate = () => window.eventOrder.push("popstate");
+window.onload = () => window.eventOrder.push("load");
+</script>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+async_test(t => {
+  assert_array_equals(window.eventOrder, []);
+
+  // 0 timeout is necessary because if we do location.hash assignment before load is finished firing it counts as a replacement.
+  window.addEventListener("load", () => t.step_timeout(() => {
+    assert_array_equals(window.eventOrder, ["load"]);
+
+    window.addEventListener("hashchange", t.step_func(() => {
+      assert_array_equals(window.eventOrder, ["load", "popstate", "hashchange"]);
+
+      window.addEventListener("hashchange", t.step_func_done(() => {
+        assert_array_equals(window.eventOrder, ["load", "popstate", "hashchange", "popstate", "hashchange"]);
+      }));
+    }), { once: true });
+
+    location.hash = "#1";
+    assert_array_equals(window.eventOrder, ["load", "popstate"]);
+    history.back();
+    assert_array_equals(window.eventOrder, ["load", "popstate"]);
+  }, 0));
+}, "when traversing back, before hashchange");
+</script>
diff --git a/html/browsers/browsing-the-web/history-traversal/event-order/same-document-traverse-wait.html b/html/browsers/browsing-the-web/history-traversal/event-order/same-document-traverse-wait.html
new file mode 100644
index 00000000000000..39bc760ff73de6
--- /dev/null
+++ b/html/browsers/browsing-the-web/history-traversal/event-order/same-document-traverse-wait.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Popstate/hashchange/load event ordering</title>
+
+<script>
+// Set these up super-early before we hit the network for the test harness, just in case.
+window.eventOrder = [];
+window.onhashchange = () => window.eventOrder.push("hashchange");
+window.onpopstate = () => window.eventOrder.push("popstate");
+window.onload = () => window.eventOrder.push("load");
+</script>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+async_test(t => {
+  assert_array_equals(window.eventOrder, []);
+
+  // 0 timeout is necessary because if we do location.hash assignment before load is finished firing it counts as a replacement.
+  window.addEventListener("load", () => t.step_timeout(() => {
+    assert_array_equals(window.eventOrder, ["load"]);
+
+    window.addEventListener("hashchange", t.step_func(() => {
+      assert_array_equals(window.eventOrder, ["load", "popstate", "hashchange"]);
+
+      window.addEventListener("hashchange", t.step_func_done(() => {
+        assert_array_equals(window.eventOrder, ["load", "popstate", "hashchange", "popstate", "hashchange"]);
+      }));
+
+      history.back();
+      assert_array_equals(window.eventOrder, ["load", "popstate", "hashchange"]);
+    }), { once: true });
+
+    location.hash = "#1";
+    assert_array_equals(window.eventOrder, ["load", "popstate"]);
+  }, 0));
+}, "when traversing back, after hashchange");
+</script>
