third_party/WebKit/LayoutTests/fast/borders/border-radius-with-layer.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4     <div>This test checks that layers with border-radius are properly clipped.</div>
   5     <div>You should see a green rounded rectangle with a purple border below. The rectangle should be contained within the border.</div>
   6     <div style ="width:300px; height:100px; border-radius:30px; border:3px solid purple; overflow:hidden;">
   7         <div style="height: 100%;position:relative;">
   8             <div id ="img1" style="width:100%; height:100%;background-color: red"></div>
   9         </div>
  10     </div>
  11     <script>
  12         if (window.testRunner)
  13             testRunner.waitUntilDone();
  14
  15         function changeBackground() {
  16             document.getElementById("img1").style.backgroundColor = "green";
  17             if (window.testRunner)
  18                 testRunner.notifyDone();
  19         }
  20         window.setTimeout(changeBackground, 0);
  21     </script>
  22 </body>
  23 </html>