fix(test-page): hide #done button by default

extensions/compare.css

@@ -9,4 +9,7 @@ iframe {
 		margin: 0;
 		column-count: 3;
 	}
+	iframe {
+		display: block;
+	}
 }

extensions/compare.ts

@@ -2,7 +2,7 @@
 	const iframes = top!.document.getElementsByTagName('iframe'); // eslint-disable-line no-restricted-globals
 	iframes[0]!.addEventListener('load', () => {
 		const {contentWindow, contentDocument} = iframes[0]!;
-		contentWindow!.addEventListener('hashchange', () => {
+		contentWindow!.addEventListener('casechange', () => {
 			for (let i = 1; i < iframes.length; i++) {
 				iframes[i]!.contentWindow!.location.hash = contentWindow!.location.hash;
 			}
@@ -15,13 +15,13 @@
 			}
 		});
 	});
-	for (const iframe of iframes as unknown as Iterable<HTMLIFrameElement>) {
-		iframe.addEventListener('load', () => {
-			const {contentDocument} = iframe,
+	for (let i = 0; i < iframes.length; i++) {
+		iframes[i]!.addEventListener('load', () => {
+			const {contentDocument} = iframes[i]!,
 				style = contentDocument!.createElement('style');
-			style.textContent = 'body{background:#fff}'
-			+ 'main{margin:0;box-shadow:none}'
-			+ '#compare>:last-child{display:none}';
+			style.textContent = `body{background:#fff}main{margin:0;box-shadow:none}${
+				i === 0 ? '' : '.field{min-height:0}select,'
+			}#compare>:last-child{display:none}`;
 			contentDocument!.head.append(style);
 		});
 	}

extensions/dist/compare.js

@@ -4,7 +4,7 @@
     const iframes = top.document.getElementsByTagName('iframe');
     iframes[0].addEventListener('load', () => {
         const { contentWindow, contentDocument } = iframes[0];
-        contentWindow.addEventListener('hashchange', () => {
+        contentWindow.addEventListener('casechange', () => {
             for (let i = 1; i < iframes.length; i++) {
                 iframes[i].contentWindow.location.hash = contentWindow.location.hash;
             }
@@ -17,12 +17,10 @@
             }
         });
     });
-    for (const iframe of iframes) {
-        iframe.addEventListener('load', () => {
-            const { contentDocument } = iframe, style = contentDocument.createElement('style');
-            style.textContent = 'body{background:#fff}'
-                + 'main{margin:0;box-shadow:none}'
-                + '#compare>:last-child{display:none}';
+    for (let i = 0; i < iframes.length; i++) {
+        iframes[i].addEventListener('load', () => {
+            const { contentDocument } = iframes[i], style = contentDocument.createElement('style');
+            style.textContent = `body{background:#fff}main{margin:0;box-shadow:none}${i === 0 ? '' : '.field{min-height:0}select,'}#compare>:last-child{display:none}`;
             contentDocument.head.append(style);
         });
     }

extensions/dist/parserTests.js → extensions/dist/test-page.js

@@ -9,8 +9,8 @@
     };
     wikiparse.highlight(pre, false, true);
     btn.disabled = !select.value;
-    if (isGH) {
-        btn.style.display = 'none';
+    if (!isGH) {
+        btn.style.display = '';
     }
     let optgroup;
     for (const [i, { desc, wikitext, html }] of tests.entries()) {
@@ -42,7 +42,8 @@
         wikiparse.highlight(pre, false, true);
         select.selectedOptions[0].disabled = true;
         btn.disabled = false;
-        location.hash = `#${encodeURIComponent(desc)}`;
+        history.replaceState(null, '', `#${encodeURIComponent(desc)}`);
+        dispatchEvent(new Event('casechange'));
     });
     btn.addEventListener('click', () => {
         dones.add(tests[Number(select.value)].desc);

extensions/test-page.css

@@ -489,10 +489,11 @@ pre {
 @media screen and (min-width: 1200px) {
 	#frame {
 		column-count: 2;
+		padding-top: 1rem;
 	}
 	.frame:not(:empty) {
-		display: inline-block;
 		width: calc(100% - 27px);
+		margin-top: 0;
 	}
 	#frame[data-source] > .frame:not(:empty) {
 		width: calc(100% - 3px);

extensions/parserTests.ts → extensions/test-page.ts

@@ -25,8 +25,8 @@ declare interface Test {
 	};
 	wikiparse.highlight!(pre, false, true);
 	btn.disabled = !select.value;
-	if (isGH) {
-		btn.style.display = 'none';
+	if (!isGH) {
+		btn.style.display = '';
 	}
 	let optgroup: HTMLOptGroupElement;
 	for (const [i, {desc, wikitext, html}] of tests.entries()) {
@@ -57,7 +57,8 @@ declare interface Test {
 		wikiparse.highlight!(pre, false, true);
 		select.selectedOptions[0]!.disabled = true;
 		btn.disabled = false;
-		location.hash = `#${encodeURIComponent(desc)}`;
+		history.replaceState(null, '', `#${encodeURIComponent(desc)}`);
+		dispatchEvent(new Event('casechange'));
 	});
 	btn.addEventListener('click', () => {
 		dones.add(tests[Number(select.value)]!.desc);

tests.html

@@ -10,7 +10,7 @@
 		<script defer="" src="extensions/dist/base.js"></script>
 		<script defer="" src="extensions/dist/highlight.js"></script>
 		<script defer="" src="bundle/bundle.min.js"></script>
-		<script defer="" src="extensions/dist/parserTests.js"></script>
+		<script defer="" src="extensions/dist/test-page.js"></script>
 		<script src="https://testingcf.jsdelivr.net/combine/npm/prismjs/components/prism-core.min.js,npm/prismjs/components/prism-markup.min.js"></script>
 	</head>
 	<body>
@@ -27,7 +27,7 @@
 					<div id="frame2" class="frame"></div>
 				</div>
 				<div id="buttons">
-					<button id="done">Done</button>
+					<button id="done" style="display: none">Done</button>
 				</div>
 			</article>
 		</main>