Attachment 370345 Details for Bug 198086 – Testcase

Testcase

scroller-with-negative-z-children.html (text/html), 1.31 KB, created by Simon Fraser (smfr) on 2019-05-21 15:01:54 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Simon Fraser (smfr)

Created: 2019-05-21 15:01:54 PDT

Size: 1.31 KB

patch

obsolete

><!DOCTYPE html> 
><html>
><head>
>    <style>
>		.scroller {
>			position: relative;
>			overflow-y: scroll;
>			width: 300px;
>			height: 300px;
>			border: 1px solid black;
>		}
>		
>		.box {
>			position: relative;
>			margin: 20px;
>		    width: 100px;
>		    height: 100px;
>		    background-color: green;
>		}
>
>		.inside {
>			left: 20px;
>		}
>		
>		.negative {
>			z-index: -1;
>		}
>
>		.outside {
>			position: relative;
>			margin: 20px;
>		    width: 100px;
>		    height: 100px;
>		    background-color: silver;
>		}
>
>		.trigger {
>			position: absolute;
>            top: 10px;
>			left: 10px;
>			width: 50px;
>			height: 200px;
>			background-color: silver;
>		    transform: translateZ(0);
>		}
>    </style>
>	<script>
>		if (window.testRunner)
>			testRunner.dumpAsText();
>
>		window.addEventListener('load', () => {
>			if (window.testRunner)
>				document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
>		}, false);
>	</script>
></head>
><body>
>	<div class="scroller">
>		<div class="trigger"></div>
>        <div class="inside box"></div>
>        <div class="inside negative box"></div>
>        <div class="inside box"></div>
>        <div class="inside box"></div>
>	</div>
>	<div class="outside"></div>
><pre id="layers">Layer tree goes here</pre>
></body>
></html>

<!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
<html>
<head>
    <style>
		.scroller {
			position: relative;
			overflow-y: scroll;
			width: 300px;
			height: 300px;
			border: 1px solid black;
		}
		
		.box {
			position: relative;
			margin: 20px;
		    width: 100px;
		    height: 100px;
		    background-color: green;
		}

		.inside {
			left: 20px;
		}
		
		.negative {
			z-index: -1;
		}

		.outside {
			position: relative;
			margin: 20px;
		    width: 100px;
		    height: 100px;
		    background-color: silver;
		}

		.trigger {
			position: absolute;
            top: 10px;
			left: 10px;
			width: 50px;
			height: 200px;
			background-color: silver;
		    transform: translateZ(0);
		}
    </style>
	<script>
		if (window.testRunner)
			testRunner.dumpAsText();

		window.addEventListener('load', () => {
			if (window.testRunner)
				document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
		}, false);
	</script>
</head>
<body>
	<div class="scroller">
		<div class="trigger"></div>
        <div class="inside box"></div>
        <div class="inside negative box"></div>
        <div class="inside box"></div>
        <div class="inside box"></div>
	</div>
	<div class="outside"></div>
<pre id="layers">Layer tree goes here</pre>
</body>
</html>

Actions: View

Attachments on bug 198086: 370345