test_clip-path_polygon.html (1367B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 body {padding: 0;margin:0;} 6 div { 7 width: 200px; 8 height: 200px; 9 position: fixed; 10 top: 50px; 11 left: 50px; 12 margin: 50px; 13 padding: 50px; 14 border: 50px solid red; 15 transform-origin: 0 0; 16 transform: translate(50px, 50px) scale(0.5); 17 background-color: green; 18 clip-path: polygon(0 0, 200px 0, 0 200px) content-box; 19 } 20 </style> 21 <title>clip-path with polygon() hit test</title> 22 <script src="/tests/SimpleTest/SimpleTest.js"></script> 23 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 24 </head> 25 <div id="a"></div> 26 <p style="margin-top: 110px"> 27 <script> 28 var a = document.getElementById("a"); 29 isnot(a, document.elementFromPoint(199, 199), "a shouldn't be found"); 30 isnot(a, document.elementFromPoint(199, 250), "a shouldn't be found"); 31 isnot(a, document.elementFromPoint(250, 199), "a shouldn't be found"); 32 isnot(a, document.elementFromPoint(255, 255), "a shouldn't be found"); 33 isnot(a, document.elementFromPoint(301, 200), "a shouldn't be found"); 34 isnot(a, document.elementFromPoint(200, 301), "a shouldn't be found"); 35 is(a, document.elementFromPoint(200, 200), "a should be found"); 36 is(a, document.elementFromPoint(299, 200), "a should be found"); 37 is(a, document.elementFromPoint(200, 299), "a should be found"); 38 is(a, document.elementFromPoint(250, 250), "a should be found"); 39 </script> 40 </html>