<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="UTF-8" />
<title>CSS Regions: Remove element from named flow on CSS hover</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/#the-flow-from-property" rel="help" />
<meta content="Changing the flow-into property should be possible in rules that use the :hover pseudoclass" name="assert" />
<meta content="interact ahem" name="flags" />
<style>
p {
margin: 0;
}
.box {
float: left;
width: 100px;
height: 200px;
margin: 10px;
}
#content {
background-color: lightgray;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
#content p {
flow-into: f;
}
#content p:last-child {
color: lightblue;
}
#content p:last-child:hover {
flow-into: none;
}
#region {
background-color: lightgreen;
flow-from: f;
}
#region p {
width: 100%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
You should not see any red before or during this test.
<ol>
<li>You should see a tall gray rectangle alongside with a black and a blue square</li>
<li>Move the mouse over the blue square.</li>
<li>The blue square should appear in the gray rectangle on the left.</li>
</ol>
<div class="box" id="content">
<p>xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx</p>
<p>xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx</p>
</div>
<div class="box" id="region">
<p></p>
</div>
</body></html>