skew-test1.html (2317B)
1 <!DOCTYPE html> 2 <!-- Based on a test that was submitted from TestTWF Paris --> 3 <meta charset="utf-8"> 4 <title>Testing 1 - skew()</title> 5 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 6 <link rel="author" title="Myriam Goude" href="mailto:mymygo@gmail.com"> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> 8 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> 9 <link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> 10 <meta name="flags" content="svg"> 11 <meta name="assert" content="The two skew_div squares in this test have skew transform applied, with a different angle in each axis: 45deg on x and 135deg on y. The red polygon should be totally hidden by the green skewed square; and the orange skewed square should be totally hidden by the white polygon."> 12 <style> 13 .green_container { 14 background-color: green; 15 height: 100px; 16 width: 100px; 17 position: relative; 18 } 19 20 .skew_div { 21 position: absolute; 22 width: 40px; 23 height: 40px; 24 box-sizing: border-box; 25 transform: skew(45deg,135deg); 26 transform-origin:0 0; 27 } 28 .front { 29 /* This one is positioned in front of a red reference polygon: */ 30 top: 50px; 31 left: 10px; 32 background: green; 33 z-index: 1; 34 } 35 .back { 36 /* This one is positioned in back of a white reference polygon: */ 37 top: 50px; 38 left: 110px; 39 background: orange; 40 z-index: -1; 41 } 42 </style> 43 <p> 44 Test passes if there is a filled green square and <strong>no red</strong>. 45 </p> 46 <div class="green_container"> 47 <!-- These divs should both render as 80px-tall-and-wide diamond shapes. --> 48 <div class="skew_div front"></div> 49 <div class="skew_div back"></div> 50 51 <svg width="300px" height="100px"> 52 <g transform="translate(10,10)"> 53 <!-- A diamond-shaped red polygon, slightly less than 80px tall and 54 wide (should be covered up by the green 'front' div) --> 55 <polygon points="2,40 40,2 78,40 40,78" fill="red"></polygon> 56 </g> 57 <g transform="translate(110,10)"> 58 <!-- A diamond-shaped white polygon, slightly more than 80px tall and 59 wide (should cover up the orange 'back' div) --> 60 <polygon points="-2,40 40,-2 82,40 40,82" fill="white"></polygon> 61 </g> 62 </svg> 63 </div>