cpp
/
RmlUi
tükrözi: https://github.com/mikke89/RmlUi.git


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
							<rml>
<head>
	<title>Overflow: hidden</title>
	<link type="text/rcss" href="../style.rcss"/>
	<link rel="match" href="reference/overflow_hidden-ref.rml"/>
	<link rel="help" href="https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow" />
	<link rel="GitHub issue" href="https://github.com/mikke89/RmlUi/issues/116" />
	<meta name="Description" content="Nesting divs should still hide overflow. Elements whose containing block is located above the 'overflow: hidden' element should be visible." />
	<meta name="See also" content="CSS 2.1 'clipping-' and 'overflow-' tests." />
	<style>
		body {
			display: block;
			background: #ddd;
			color: #444;
		}
		div.overflow {
			border: 1dp black;
			overflow: hidden;
			width: 200dp;
			height: 120dp;
			margin: 10dp 0;
		}
		div.relative {
			position: relative;
		}
		div.clip-always {
			clip: always;
		}
		div.clip-none {
			clip: none;
		}
		div.wide {
			width: 300dp;
			height: 20dp;
			color: #f00;
			text-align: right;
			background-color: #aaa;
		}
		div.absolute {
			position: absolute;
			top: 100dp;
			left: 250dp;
			width: 80dp;
			height: 80dp;
		}
		div.close {
			top: 20dp;
			left: 250dp;
		}
		.green { background-color: #7f7; }
		.red { background-color: #f77; }
	</style>
</head>

<body>
<p>There should be a green box, no red visible, and the word 'fail' should not appear.</p>
<div class="overflow">
	<div>
		<div class="wide">FAIL</div>
		LONG_WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOORD&nbsp;FAIL
		<!-- This should be visible as the containing block should be 'body' which is above 'div.overflow'. -->
		<div class="absolute green">Should be visible</div>
	</div>
</div>
<div class="overflow relative">
	<div>
		<div class="wide">FAIL</div>
		LONG_WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOORD&nbsp;FAIL
		<!-- This should not be visible as the containing block should now be 'div.overflow' since it uses position: relative. -->
		<div class="absolute red">Should not be visible</div>
	</div>
</div>
<div class="overflow">
	<span>
		LONG_WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOORD&nbsp;FAIL
	</span>
	<div>
		LONG_WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOORD&nbsp;FAIL
	</div>
</div>
<div class="overflow relative">
	LONG_WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOORD&nbsp;FAIL
	<div class="absolute close red" style="top: 0">Should not be visible</div>
	<div class="clip-none">
		Don't clip within a clipping parent using 'clip: none'.
		LONG_WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOORD
		<div class="absolute close green clip-none">Should be visible</div>
	</div>
</div>
<div class="overflow relative clip-always">
	Force clipping even though contents don't overflow using 'clip: always'.
	<div>
		<div class="absolute close red">Should not be visible</div>
	</div>
</div>
</body>
</rml>