Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab

This commit is contained in:
James Graham
2015-03-27 09:18:12 +00:00
parent 1a81b18b9f
commit 2c9faf5363
91915 changed files with 5979820 additions and 0 deletions

View File

@@ -0,0 +1,105 @@
<!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 Regions: painting order for fragmented floats that are stacking contexts</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" />
<meta content="ahem" name="flags" />
<meta content="Test checks that floats inside a named flow that also create a
stacking context respect the correct painting order even when fragmented across
multiple regions that are overlapping." name="assert" />
<link href="reference/floats-in-named-flow-026-ref.xht" rel="match" />
<style>
article {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.flow {
flow-into: f;
}
.float {
float: left;
position: relative;
z-index: 1;
}
.back {
color: green;
position: relative;
z-index: 10;
}
.front {
color: red;
z-index: 20;
}
.content {
color: blue;
}
.region {
/* The region is 115px tall to catch bugs where the floats would be
sliced rather than properly fragmented */
height: 115px;
flow-from: f;
}
.shifted {
position: relative;
/* See the above comment about the region height */
top: -115px;
}
.region &gt; p {
background: red;
}
</style>
</head>
<body>
<p>
Test passes if you see two squares, side by side horizontally. The left square should
be green, the right one should be blue and they should be flush to one another.<br />
You should see no red.
</p>
<div class="region">
<p>&#xA0;</p>
</div>
<div class="shifted region">
<p>&#xA0;</p>
</div>
<article class="flow">
<div class="float">
<span class="front">
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx<br />
</span>
<span class="back">
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx
</span>
</div>
<div class="content">
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx
</div>
</article>
</body></html>