cpp
/
RmlUi
mirror of https://github.com/mikke89/RmlUi.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
							<rml>
<head>
    <title>Overflow: hidden</title>
    <link type="text/rcss" href="../../style.rcss"/>
	<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 class="wide">FAIL</div>
	LONG_WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOORD&nbsp;FAIL
</div>
<div class="absolute green">Should be visible</div>
<div class="overflow relative">
	<div class="wide">FAIL</div>
	LONG_WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOORD&nbsp;FAIL
	<div class="absolute red">Should not be visible</div>
</div>
<div class="overflow">
	<span>
		LONG_WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOORD&nbsp;FAIL
	</span>
	<div>
		LONG_WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOORD&nbsp;FAIL
	</div>
</div>
<div class="overflow relative" style="overflow: visible">
	<div style="overflow: hidden">
		LONG_WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOORD&nbsp;FAIL
		<div class="absolute close red">Should not be visible</div>
	</div>
		Don't clip within a clipping parent using 'clip: none'.
	LONG_WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOORD
	<div class="absolute close green">Should be visible</div>
</div>
<div class="overflow">
	Force clipping even though contents don't overflow using 'clip: always'.
</div>
</body>
</rml>