mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 05:08:36 +02:00
324574ac11
Automatic update from web-platform-testsMerge pull request #12312 from TalbotG/contain-gtalbot-nr1 [css-contain] Improve the coverage and correctness of the css-contain… -- wpt-commits: 58b45e6af645cf8262abfd6c4763508e6926fa33 wpt-pr: 12312
47 lines
1.6 KiB
HTML
47 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<title>CSS Containment Test: 'contain: layout' and ink overflow</title>
|
|
|
|
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
|
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow">
|
|
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
|
|
<link rel="match" href="reference/contain-layout-ink-overflow-013-ref.html">
|
|
|
|
<meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism." name="assert">
|
|
|
|
<style>
|
|
div#outer
|
|
{
|
|
font-family: monospace;
|
|
font-size: 100px;
|
|
height: 2.8ch;
|
|
line-height: 1.5; /* computes to 150px */
|
|
width: 4ch;
|
|
|
|
overflow: scroll;
|
|
}
|
|
|
|
div#inner
|
|
{
|
|
color: red;
|
|
contain: layout;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
</style>
|
|
|
|
<!--
|
|
|
|
150px : height of 1 line box
|
|
|
|
-->
|
|
|
|
<body onload="document.getElementById('outer').scrollLeft = 4000; document.getElementById('outer').scrollTop = 150;">
|
|
|
|
<p>Test passes if there is no red.
|
|
|
|
<div id="outer">
|
|
<div id="inner"><br>FAIL</div>
|
|
</div>
|