diff --git a/.gitignore b/.gitignore
index 95bb6f0..2d2355e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ data
 tests/historic/conformance/gecko-data
 tests/historic/conformance/webkit-data
 tests/historic/conformance/tmp-diff
+.DS_Store
diff --git a/repros/497.html b/repros/497.html
index 54fa2c9..bef2bb7 100644
--- a/repros/497.html
+++ b/repros/497.html
@@ -21,15 +21,13 @@
 	<body>
 		<div>
 			When you open this in Safari on the Desktop (I used 26.1), and start a
-			composition inside the empty `<a>` field.<br /><br />
+			composition inside the empty &lt;a&gt; field.<br /><br />
 			E.g. use the dead key <code>^</code> and then press
 			<code>a</code>).<br /><br />
-			Notice how the original editable-field `<a>` gets destroyed (the blue dashed
-			border disappears).<br /><br />
-			Now change the `<a>` to a `<div>` and try again. Now it works.
-			as expected.
-
-			In Chrome/Firefox, this problem does not occur.<br /><br />
+			Notice how the original editable-field &lt;a&gt; gets destroyed (the blue
+			dashed border disappears).<br /><br />
+			Now change the &lt;a&gt; to a &lt;div&gt; and try again. Now it works as
+			expected. In Chrome/Firefox, this problem does not occur.<br /><br />
 		</div>
 		<div class="editable-canvas" contenteditable="true">
 			<div class="editable-wrapper">
diff --git a/repros/512.html b/repros/512.html
new file mode 100644
index 0000000..61b8dce
--- /dev/null
+++ b/repros/512.html
@@ -0,0 +1,89 @@
+<!--
+	Safari/Chrome: Caret movement with up/down arrow keys breaks when DOM is constructed programmatically
+
+	See: https://github.com/w3c/editing/issues/512
+	Also see: https://github.com/sveltejs/svelte/issues/17164
+-->
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title></title>
+		<script>
+			window.onload = () => {
+				function create_text(value = "") {
+					return document.createTextNode(value);
+				}
+				function comment() {
+					var frag = document.createDocumentFragment();
+					var start = document.createComment("");
+					var anchor = create_text();
+					frag.append(start, anchor);
+					return frag;
+				}
+				function first_child(fragment) {
+					return Object.getOwnPropertyDescriptor(
+						Node.prototype,
+						"firstChild",
+					)?.get?.call(fragment);
+				}
+				function element(node, tag, render) {
+					const el = document.createElement(tag);
+					el.append(create_text());
+					render(el);
+					node.before(el);
+				}
+				function render(root) {
+					for (let i = 0; i < 4; i++) {
+						const f = comment();
+						const n = first_child(f);
+						element(n, "h3", (el) => {
+							el.className = "centered field empty";
+							el.setAttribute("placeholder", "Hello");
+						});
+						root.append(f);
+					}
+				}
+				render(document.getElementById("root"));
+			};
+		</script>
+		<style>
+			.editable {
+				max-width: 500px;
+				padding: 5px;
+				border: 1px solid #ccc;
+				border-radius: 4px;
+			}
+
+			.editable [placeholder].empty::before {
+				color: #ccc;
+				content: attr(placeholder);
+			}
+
+			.editable .field.centered {
+				text-align: center;
+			}
+		</style>
+	</head>
+	<body>
+		<div>Cursor navigation with up/down arrow keys works with static HTML:</div>
+		<div class="editable" contenteditable="true">
+			<h3 class="centered field empty" placeholder="Hello"></h3>
+			<!---->
+			<h3 class="centered field empty" placeholder="Hello"></h3>
+			<!---->
+			<h3 class="centered field empty" placeholder="Hello"></h3>
+			<!---->
+			<h3 class="centered field empty" placeholder="Hello"></h3>
+			<!---->
+		</div>
+
+		<div style="max-width: 500px">
+			However, when using a programmatic approach (see script in this web page),
+			cursor movement with up/down arrow keys break, even though the DOM has the
+			same structure.
+		</div>
+		<div id="root" class="editable" contenteditable="true"></div>
+	</body>
+</html>
