|
|
@@ -0,0 +1,63 @@
|
|
|
+<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" />
|
|
|
+ <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: 1px black;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ div.relative {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ div.wide {
|
|
|
+ width: 300px;
|
|
|
+ height: 20px;
|
|
|
+ color: #f00;
|
|
|
+ text-align: right;
|
|
|
+ background-color: #aaa;
|
|
|
+ }
|
|
|
+ div.absolute {
|
|
|
+ position: absolute;
|
|
|
+ top: 100px;
|
|
|
+ left: 250px;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+ .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">
|
|
|
+<!-- Nesting an extra div appears to break overflow in RmlUi. Setting it to 'display: inline' appears to make it work correctly. -->
|
|
|
+ <div>
|
|
|
+ <div class="wide">FAIL</div>
|
|
|
+ LONG_WOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOORD 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 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>
|
|
|
+</body>
|
|
|
+</rml>
|
Michael Ragazzon