jrmuizel · February 19, 2025 19:33
diff --git a/vt.html b/vt.html
 <!doctype html>

 <style>
 .child {
  position: absolute;
  left: 10px;
  width: 50px;
  height: 50px;
  background: lightblue;
  border: 1px solid black;
 }
 .after > .child {
  width: 100px;
  height: 100px;
  left: 100px;
 }
 :root { view-transition-name: none }
 ::view-transition-group(*) {
  animation-duration: 1s;
 }
 </style>

 <div id=container>
 </div>

 <script>
 const params = new URLSearchParams(window.location.search);
 const complexity = parseInt(params.get('n')) || 1;

 function constructPage() {
  let t = 0;
  for (let i = 0; i < complexity; ++i) {
    let d = document.createElement("div");
    d.style.viewTransitionName = `e${i}`;
    d.style.top = `${t}px`;
    d.classList.add("child");

    container.appendChild(d);
    t += Math.max(1, 1000/complexity);
  }
 }

 function runTest() {
  document.startViewTransition(() => {
    container.classList.toggle("after");
  });
 }

 onload = () => {
  constructPage();
  runTest();
 }
 </script>
	<!doctype html>

	<style>
	.child {
	position: absolute;
	left: 10px;
	width: 50px;
	height: 50px;
	background: lightblue;
	border: 1px solid black;
	}
	.after > .child {
	width: 100px;
	height: 100px;
	left: 100px;
	}
	:root { view-transition-name: none }
	::view-transition-group(*) {
	animation-duration: 1s;
	}
	</style>

	<div id=container>
	</div>

	<script>
	const params = new URLSearchParams(window.location.search);
	const complexity = parseInt(params.get('n')) \|\| 1;

	function constructPage() {
	let t = 0;
	for (let i = 0; i < complexity; ++i) {
	let d = document.createElement("div");
	d.style.viewTransitionName = `e${i}`;
	d.style.top = `${t}px`;
	d.classList.add("child");

	container.appendChild(d);
	t += Math.max(1, 1000/complexity);
	}
	}

	function runTest() {
	document.startViewTransition(() => {
	container.classList.toggle("after");
	});
	}

	onload = () => {
	constructPage();
	runTest();
	}
	</script>