wpt / css / css-transforms / transform-scroll-child-tweak-crash.html

Status: PASS | Duration: 9ms | Subtests: 1/1 | Open test on wpt.live | wpt.fyi

TestTest Source

/css/css-transforms/transform-scroll-child-tweak-crash.html

<!DOCTYPE html>
<html class="test-wait">
<style>
* {
	pointer-events: none;
}
.transformed {
	width: 200px;
	height: 200px;
	transform: translate(10px, 10px);
}
.scrollcontainer {
	width: 150px;
	height: 150px;
	overflow: auto;
	scrollbar-width: none;
}
#container {
	width: 10px;
	height: 200px;
}
#thediv1 {
	width: 2px; height: 2px;
	background: green;
}

</style>
<div class="transformed">
	<div class="scrollcontainer" id="scrollcontainer">
		<div id="container">
			<div id="thediv1"></div>
		</div>
	</div>
</div>

<script>
function promiseFrame() {
	return new Promise(resolve => window.requestAnimationFrame(resolve));
}
function finish() {
	document.documentElement.className = "";
}

function tweak2() {
	document.getElementById("container").style.height = "100px";
	document.getElementById("scrollcontainer").style.overflow = "visible";
	requestAnimationFrame(finish);
}

function tweak() {
	document.getElementById("thediv1").style.background = "red";
	requestAnimationFrame(tweak2);
}

async function start() {
	await promiseFrame();
	await promiseFrame();
	tweak();
	await promiseFrame();
	await promiseFrame();
	tweak2();
	await promiseFrame();
	await promiseFrame();
	finish();
}

window.onload = () => {
	requestAnimationFrame(start);
};

</script>
</html>