mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
55 lines
No EOL
1.9 KiB
HTML
55 lines
No EOL
1.9 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
|
<title>CSS Test: flowing content with position: absolute and clip</title>
|
|
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
|
|
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help" />
|
|
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help" />
|
|
<meta content="ahem" name="flags" />
|
|
<meta content="Test checks that absolutely positioned content that has the clip property applied is correctly flowed into regions. This might fail on implementations that use layers for compositing but don't properly handle content flowing or the clipping shapes." name="assert" />
|
|
<link href="reference/content-node-layers-005-ref.xht" rel="match" />
|
|
<style>
|
|
#content {
|
|
font-family: Ahem;
|
|
font-size: 20px;
|
|
line-height: 1em;
|
|
position: relative;
|
|
width: 125px;
|
|
height: 125px;
|
|
background-color: lightgreen;
|
|
flow-into: f;
|
|
}
|
|
#content-child {
|
|
position: absolute;
|
|
color: green;
|
|
top: 20px;
|
|
left: 0;
|
|
width: 180px;
|
|
clip: rect(0px, 100px, 80px, 20px);
|
|
}
|
|
.outside {
|
|
color: red;
|
|
}
|
|
#region {
|
|
width: 125px;
|
|
height: 125px;
|
|
background-color: red;
|
|
flow-from: f;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<ol>
|
|
<li>You should see no red.</li>
|
|
<li>Test passes if you see a dark green square in the middle of a light green square.</li>
|
|
</ol>
|
|
<div id="content">
|
|
<div id="content-child">
|
|
<span class="outside">x</span>xxxx<span class="outside">xxxx</span><br />
|
|
<span class="outside">x</span>xxxx<span class="outside">xxxx</span><br />
|
|
<span class="outside">x</span>xxxx<span class="outside">xxxx</span><br />
|
|
<span class="outside">x</span>xxxx<span class="outside">xxxx</span>
|
|
</div>
|
|
</div>
|
|
<div id="region"></div>
|
|
|
|
</body></html> |