Attachment 370164 Details for Bug 198005 – Testcase

Testcase

gmail-header-flashing.html (text/html), 1.33 KB, created by Simon Fraser (smfr) on 2019-05-17 15:36:58 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Simon Fraser (smfr)

Created: 2019-05-17 15:36:58 PDT

Size: 1.33 KB

patch

obsolete

><!DOCTYPE html>
><html>
><head>
>	<style>
>		body {
>			margin: 0;
>		}
>		.backdrop {
>			position: fixed;
>			top: 10px;
>			left: 10px;
>			width: 550px;
>			height: 350px;
>			background-color: rgba(0, 0, 0, 0.2);
>		}
>		
>		.container {
>			position: relative;
>			top: 20px;
>			left: 20px;
>			width: 500px;
>			height: 300px;
>			border: 4px solid black;
>			padding: 10px;
>		}
>		
>		.header {
>			position: relative;
>			overflow: hidden;
>			z-index: 1;
>			width: 500px;
>			height: 300px;
>			background-color: gray;
>			border: 2px solid blue;
>		}
>
>		.target {
>			position: relative;
>			top: 10px;
>			left: 10px;
>			width: 200px;
>			height: 100px;
>			background-color: green;
>		}
>		
>		.animating {
>			position: relative;
>			background-color: orange;
>			top: auto;
>			left: 250px;
>			width: 200px;
>			height: 100px;
>			opacity: 0.6;
>			transition: opacity 500s;
>			padding: 10px;
>		}
>		
>		.animating.changed {
>			opacity: 1;
>			top: 20px;
>		}
>	</style>
>    <script>
>    	
>		
>		window.addEventListener('load', () => {
>			setTimeout(() => {
>				document.querySelector('.animating').classList.add('changed');
>			}, 2000);
>		}, false);
>    </script>
></head>
><body>
>	<div class="backdrop">&nbsp;</div>
>	<div class="container">
>		<div class="header">
>			<div class="target">
>				This should not disappear
>			</div>
>			<div class="animating">
>			</div>
>		</div>
>	</div>
></body>
></html>

<!DOCTYPE html>
<html>
<head>
	<style>
		body {
			margin: 0;
		}
		.backdrop {
			position: fixed;
			top: 10px;
			left: 10px;
			width: 550px;
			height: 350px;
			background-color: rgba(0, 0, 0, 0.2);
		}
		
		.container {
			position: relative;
			top: 20px;
			left: 20px;
			width: 500px;
			height: 300px;
			border: 4px solid black;
			padding: 10px;
		}
		
		.header {
			position: relative;
			overflow: hidden;
			z-index: 1;
			width: 500px;
			height: 300px;
			background-color: gray;
			border: 2px solid blue;
		}

		.target {
			position: relative;
			top: 10px;
			left: 10px;
			width: 200px;
			height: 100px;
			background-color: green;
		}
		
		.animating {
			position: relative;
			background-color: orange;
			top: auto;
			left: 250px;
			width: 200px;
			height: 100px;
			opacity: 0.6;
			transition: opacity 500s;
			padding: 10px;
		}
		
		.animating.changed {
			opacity: 1;
			top: 20px;
		}
	</style>
    <script>
    	
		
		window.addEventListener('load', () => {
			setTimeout(() => {
				document.querySelector('.animating').classList.add('changed');
			}, 2000);
		}, false);
    </script>
</head>
<body>
	<div class="backdrop">&nbsp;</div>
	<div class="container">
		<div class="header">
			<div class="target">
				This should not disappear
			</div>
			<div class="animating">
			</div>
		</div>
	</div>
</body>
</html>

Actions: View

Attachments on bug 198005: 370164 | 370171