<!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"><!-- Submitted from TestTWF Paris --><head>
<title>CSS Transforms Test: 3d transform polygon cycle</title>
<link href="mailto:leo.ziegler@gmail.com" rel="author" title="Leo Ziegler" />
<link href="http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering" rel="help" />
<!-- See also: http://http://en.wikipedia.org/wiki/Newell's_algorithm -->
<link href="reference/ttwf-css-3d-polygon-cycle-ref.xht" rel="match" />
<meta content="svg" name="flags" />
<meta content="The red, green and blue rectangles are forming a cycle, which should be detected and rendered using Newell Algorithm's." name="assert" />
<style type="text/css">
#container {
position: absolute;
top: 100px;
left: 100px;
}
.rect {
position: absolute;
}
#red0 {
background-color: red;
left: 6px;
width: 100px;
height: 50px;
}
#green0 {
background-color: green;
top: 6px;
width: 50px;
height: 100px;
}
#blue0 {
background-color: blue;
width: 50px;
height: 100px;
}
#red1 {
background-color: red;
width: 100px;
height: 50px;
}
#green1 {
background-color: green;
width: 50px;
height: 100px;
}
#blue1 {
background-color: blue;
width: 50px;
height: 100px;
}
</style>
</head>
<body>
<p>The test passes if there red is over green, green is over blue and blue is over red.</p>
<div id="container">
<div id="blue0" class="rect"></div>
<div id="green0" class="rect"></div>
<div id="red0" class="rect"></div>
<div id="red1" class="rect"></div>
<div id="green1" class="rect"></div>
<div id="blue1" class="rect"></div>
</div>
</body></html>