contain-layout-ink-overflow-020.html (2053B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Test: 'contain: layout' on element that overflows and its parent has 'overflow: auto'</title> 6 7 <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu"> 8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 9 <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow"> 10 <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout"> 11 <link rel="match" href="reference/contain-layout-ink-overflow-020-ref.html"> 12 13 <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its overflowing content must be treated as ink overflow. Such overflowing content therefore can not be reached and can not be accessed by the scrollbars or by the scrolling mechanism of the parent of such element. In this test, the parent has 'overflow: auto' and therefore will not create scrollbars or a scrolling mechanism because the ink overflow is not a scrollable region for the parent." name="assert"> 14 15 <style> 16 div 17 { 18 height: 100px; 19 width: 100px; 20 } 21 22 /* this means that each and all 4 div's use the same definite height and width */ 23 24 div#parent-with-overflow-auto 25 { 26 overflow: auto; 27 } 28 29 div#contain 30 { 31 contain: layout; 32 } 33 34 div#pass 35 { 36 background-color: green; 37 } 38 39 div#fail 40 { 41 background-color: red; 42 } 43 </style> 44 45 <!-- 46 47 25px : height of a very tall horizontal scrollbar 48 + 49 100px : height of div#fail 50 ======= 51 125px 52 53 --> 54 55 <body onload="document.getElementById('parent-with-overflow-auto').scrollLeft = 100; document.getElementById('parent-with-overflow-auto').scrollTop = 125;"> 56 57 <p>Test passes if there is a filled green square, <strong>no scrollbar around it</strong> and <strong>no red</strong>. 58 59 <div id="parent-with-overflow-auto"> 60 61 <div id="contain"> 62 63 <div id="pass"></div> 64 65 <div id="fail"></div> 66 67 </div> 68 69 </div>