ttwf-css-3d-polygon-cycle-mismatch.html (1938B)
1 <!DOCTYPE html> 2 <html> 3 <!-- Submitted from TestTWF Paris --> 4 <head> 5 <title>CSS Transforms Test: 3d transform polygon cycle</title> 6 <link rel="author" title="Leo Ziegler" href="mailto:leo.ziegler@gmail.com"> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> 8 <!-- See also: http://http://en.wikipedia.org/wiki/Newell's_algorithm --> 9 <link rel="mismatch" href="reference/ttwf-css-3d-polygon-cycle-ref.html"> 10 <meta name="flags" content="svg"> 11 <meta name="assert" content="The red, green and blue rectangles are forming a cycle, which should be detected and rendered using Newell Algorithm's."> 12 <style type="text/css"> 13 #container { 14 position: absolute; 15 top: 100px; 16 left: 100px; 17 } 18 .rect { 19 position: absolute; 20 } 21 #red0 { 22 background-color: red; 23 left: 6px; 24 width: 100px; 25 height: 50px; 26 } 27 #green0 { 28 background-color: green; 29 top: 6px; 30 width: 50px; 31 height: 100px; 32 } 33 #blue0 { 34 background-color: blue; 35 width: 50px; 36 height: 100px; 37 } 38 #red1 { 39 background-color: red; 40 width: 100px; 41 height: 50px; 42 } 43 #green1 { 44 background-color: green; 45 width: 50px; 46 height: 100px; 47 } 48 #blue1 { 49 background-color: blue; 50 width: 50px; 51 height: 100px; 52 } 53 </style> 54 </head> 55 <body> 56 <p>The test passes if there red is over green, green is over blue and blue is over red.</p> 57 <div id="container"> 58 <div class="rect" id="blue0"></div> 59 <div class="rect" id="green0"></div> 60 <div class="rect" id="red0"></div> 61 <div class="rect" id="red1"></div> 62 <div class="rect" id="green1"></div> 63 <div class="rect" id="blue1"></div> 64 </div> 65 </body> 66 </html>