Attachment 370018 Details for Bug 197938 – Testcase

Testcase

clipping-overlap.html (text/html), 996 bytes, created by Simon Fraser (smfr) on 2019-05-15 19:14:56 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Simon Fraser (smfr)

Created: 2019-05-15 19:14:56 PDT

Size: 996 bytes

patch

obsolete

><!DOCTYPE html>
>
><html>
><head>
>    <style>
>		.container {
>			padding: 10px;
>			border: 1px solid black;
>		}
>
>        .box {
>			margin: 10px;
>            height: 200px;
>            width: 200px;
>            background-color: silver;
>        }
>		
>		.clipping {
>            position: relative;
>			overflow: hidden;
>			z-index: 0;
>			margin: 20px;
>			padding: 10px;
>		}
>		
>		.overlapping {
>            position: relative;
>			top: -50px;
>			left: 50px;
>			z-index: 0;
>		}
>		
>		.child {
>            height: 150px;
>            width: 150px;
>			background-color: green;
>		}
>
>        .composited {
>            transform: translateZ(0);
>        }
>		
>		.relative {
>			position: relative;
>		}
>
>		.absolute {
>			position: absolute;
>		}
>        
>    </style>
></head>
><body>
>	<div class="composited container">
>		<div class="clipping box">
>			Overlapping box.
>			<div class="composited child box">
>				Child box.
>			</div>
>		</div>
>	</div>
>	
>	<div class="overlapping box">
>		Overlapping
>	</div>
></body>
></html>

<!DOCTYPE html>

<html>
<head>
    <style>
		.container {
			padding: 10px;
			border: 1px solid black;
		}

        .box {
			margin: 10px;
            height: 200px;
            width: 200px;
            background-color: silver;
        }
		
		.clipping {
            position: relative;
			overflow: hidden;
			z-index: 0;
			margin: 20px;
			padding: 10px;
		}
		
		.overlapping {
            position: relative;
			top: -50px;
			left: 50px;
			z-index: 0;
		}
		
		.child {
            height: 150px;
            width: 150px;
			background-color: green;
		}

        .composited {
            transform: translateZ(0);
        }
		
		.relative {
			position: relative;
		}

		.absolute {
			position: absolute;
		}
        
    </style>
</head>
<body>
	<div class="composited container">
		<div class="clipping box">
			Overlapping box.
			<div class="composited child box">
				Child box.
			</div>
		</div>
	</div>
	
	<div class="overlapping box">
		Overlapping
	</div>
</body>
</html>

Actions: View

Attachments on bug 197938: 370018