| <!doctype html> |
| <html lang="en"> |
| <head> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <title>Accelerated compositing due to 3D transforms</title> |
| <style> |
| body { |
| -webkit-perspective: 400px; |
| } |
| div.region { |
| margin: 3em; |
| } |
| div.region:last-child { |
| margin-left: 5em; |
| } |
| .region { |
| -webkit-flow-from: f; |
| -webkit-transform: rotateY(45deg); |
| } |
| .big-square { |
| width: 150px; |
| height: 150px; |
| } |
| .bordered { |
| border: 2px solid black; |
| } |
| #content { |
| -webkit-flow-into: f; |
| margin-top: 40px; |
| width: 1000px; |
| height: 300px; |
| background-color: salmon; |
| border: 4px solid blue; |
| border-right-width: 10px; |
| } |
| #content:hover |
| { |
| background-color: green; |
| } |
| #console { |
| position: absolute; |
| right: 10px; |
| top: 0px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="console"></div> |
| |
| <a class="instructions" href="https://bugs.webkit.org/show_bug.cgi?id=116833">Bug 116833 - [CSS Regions] Content overflowing a transformed region is clipped</a> |
| <p class="instructions" >This test passes if the salmon box overflows the regions, has a blue border all around and turns green when hovered</p> |
| |
| <div id="content"></div> |
| |
| <div class="region big-square bordered"></div> |
| <div class="region big-square bordered"></div> |
| |
| <script type="text/javascript"> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| if (window.eventSender) { |
| var elementsToHide = document.querySelectorAll(".instructions"); |
| for (var i=0; i<elementsToHide.length; i++) |
| elementsToHide[i].style.visibility = "hidden"; |
| |
| eventSender.mouseMoveTo(350, 300); |
| eventSender.mouseDown(0); |
| eventSender.leapForward(500); |
| eventSender.mouseUp(0); |
| |
| var content = document.getElementById("content"); |
| var bckgColor = window.getComputedStyle(content).getPropertyValue("background-color"); |
| |
| if (bckgColor == "rgb(0, 128, 0)") |
| testPassed("Overflow hover event processed OK."); |
| else |
| testFailed("Overflow hover event FAILED to process."); |
| } |
| else |
| document.getElementById("console").style.visibility = "hidden"; |
| </script> |
| |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
