src/third_party/WebKit/LayoutTests/svg/as-background-image/svg-background-partial-redraw.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>SVG img and bg test</title>
   5   <script src="../../fast/repaint/resources/text-based-repaint.js" type="text/javascript"></script>
   6   <script type="text/javascript">
   7   function repaintTest() {
   8     document.getElementById('test').className = 'revealed';
   9   }
  10   </script>
  11   <style type="text/css" media="screen">
  12     div {
  13       -webkit-box-sizing: border-box;
  14     }
  15
  16     #test
  17     {
  18       position: relative;
  19       height: 200px;
  20       width: 200px;
  21       background: url('resources/circle.svg') 0 0 no-repeat;
  22       border: 1px solid black;
  23     }
  24
  25     #revealer {
  26       position: absolute;
  27       top: 100px;
  28       left: 0;
  29       height: 100px;
  30       width: 200px;
  31       background-color: red;
  32     }
  33
  34     #test.revealed > #revealer {
  35       display: none;
  36     }
  37
  38     #test:hover > #revealer {
  39       display: block;
  40     }
  41   </style>
  42 </head>
  43 <body onload="runRepaintAndPixelTest()">
  44
  45 <p>You should continue see a full blue circle when part of the element is redrawn (hover to test interactively).</p>
  46 <div id="test">
  47   <div id="revealer"></div>
  48 </div>
  49
  50 </body>
  51 </html>