| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | |
| 2 "http://www.w3.org/TR/html4/loose.dtd"> | |
| 3 | |
| 4 <html lang="en"> | |
| 5 <head> | |
| 6 <title>Test hit testing of transform property while animating</title> | |
| 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| 8 <style> | |
| 9 #target { | |
| 10 position: absolute; | |
| 11 left: 0px; | |
| 12 height: 200px; | |
| 13 width: 200px; | |
| 14 background-color: red; | |
| 15 animation-duration: 4s; | |
| 16 animation-timing-function: linear; | |
| 17 } | |
| 18 @keyframes anim { | |
| 19 from { transform: translate(100px); } | |
| 20 to { transform: translate(300px); } | |
| 21 } | |
| 22 | |
| 23 .dot { | |
| 24 width: 10px; | |
| 25 height: 10px; | |
| 26 top: 100px; | |
| 27 background-color: yellow; | |
| 28 position:absolute; | |
| 29 } | |
| 30 </style> | |
| 31 | |
| 32 <script type="text/javascript" charset="utf-8"> | |
| 33 function checkResult(pos, isIn) | |
| 34 { | |
| 35 var elt = document.elementFromPoint(pos, 150); | |
| 36 var good = isIn ? "inside" : "outside"; | |
| 37 var bad = isIn ? "outside" : "inside"; | |
| 38 return (isIn == (elt.id == "target")) ? | |
| 39 "<span style='color:green'>PASS</span> - " + pos + "px was " + g
ood + " as it should be" + "<br>" : | |
| 40 "<span style='color:red'>FAIL</span> - " + pos + "px was " + bad
+ " and should have been " + good + "<br>"; | |
| 41 } | |
| 42 | |
| 43 function checkResults() | |
| 44 { | |
| 45 // Test before (150), in (300) and after (450) | |
| 46 var result = ""; | |
| 47 result += checkResult(150, false); | |
| 48 result += checkResult(300, true); | |
| 49 result += checkResult(450, false); | |
| 50 document.getElementById('result').innerHTML = result; | |
| 51 } | |
| 52 | |
| 53 function doTest() | |
| 54 { | |
| 55 if (window.testRunner) { | |
| 56 internals.pauseAnimations(2); | |
| 57 | |
| 58 checkResults(); | |
| 59 testRunner.notifyDone(); | |
| 60 } | |
| 61 else { | |
| 62 window.setTimeout("checkResults()", 2000); | |
| 63 } | |
| 64 } | |
| 65 | |
| 66 function startTest() | |
| 67 { | |
| 68 if (window.testRunner) { | |
| 69 testRunner.dumpAsText(); | |
| 70 testRunner.waitUntilDone(); | |
| 71 } | |
| 72 | |
| 73 document.getElementById("target").style.animationName = "anim"; | |
| 74 document.addEventListener('animationstart', doTest); | |
| 75 } | |
| 76 </script> | |
| 77 </head> | |
| 78 <body onload="startTest()"> | |
| 79 <div> | |
| 80 This test starts an animation of the 'transform' property and then does
elementFromPoint calls | |
| 81 at the shown yellow dots to see if hit testing works | |
| 82 </div> | |
| 83 <div id="target"></div> | |
| 84 <div class="dot" style="left:150px"></div> | |
| 85 <div class="dot" style="left:300px"></div> | |
| 86 <div class="dot" style="left:450px"></div> | |
| 87 <div id="result" style="position:absolute; top:250px"></div> | |
| 88 </body> | |
| 89 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2974853002:
Assorted small animation test moves (Closed)
