src/third_party/WebKit/LayoutTests/svg/custom/scrolling-embedded-svg-file-image-repaint-problem.html

   1 <?xml version="1.0" encoding="UTF-8"?>
   2  <!DOCTYPE html PUBLIC  "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN"
   3  "http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd">
   4  <html xmlns="http://www.w3.org/1999/xhtml">
   5  <head>
   6  <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
   7  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   8  <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/>
   9  <meta name="description" content="W3C SVG 1.1 Test Suite"/>
  10  <title>
  11 SVG 1.1 test:render-groups-01-b </title>
  12  <style type="text/css">
  13  <!--
  14  body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 }
  15  .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;}
  16  .pageSubTitle  { color: blue; font-size: 200%; font-weight: bold }
  17  .openChapter { color: blue; line-height: 1.3; font-weight: bold }
  18  .openSection { color: blue; line-height: 125%; font-weight: bold }
  19  .info { color: black; line-height: 1.2; font-size: 90%; }
  20  p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
  21  .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;}
  22  blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 }
  23  .opscript {margin-left: 3%; margin-right: 3%; }
  24  .opscript p { margin-top: 0.7em}
  25  .navbar {background: black; color: white; font-weight: bold}
  26  -->
  27  </style>
  28  <script>
  29   function repaintTest() {
  30     if (window.testRunner)
  31       testRunner.waitUntilDone();
  32     setTimeout(startTest, 0);
  33   }
  34   function startTest() {
  35     window.location='#scrollTo';
  36     setTimeout(finishTest, 0);
  37   }
  38   function finishTest()
  39   {
  40     if (window.location.toString().indexOf("#") == -1) {
  41       setTimeout(finishTest, 0);
  42       return;
  43     }
  44
  45     if (window.testRunner)
  46       testRunner.notifyDone();
  47   }
  48  </script>
  49  </head>
  50  <body class="bodytext" onload="runRepaintAndPixelTest()">
  51
  52     <div class="linkbar">
  53 <p>
  54 <a href="full-render-groups-01-b.html">Full version</a>, <a href="basic-render-groups-01-b.html">Basic version</a></p>
  55 <p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/render.html#Grouping">3.4 How groups are rendered</a></p>
  56  <p>
  57                 <a href="full-pservers-pattern-01-b.html">pservers-pattern-01-b ←</a>
  58                 <a href="full-index.html">index</a>
  59                 <a href="full-script-handle-01-b.html">→ script-handle-01-b</a>
  60                         </p></div>
  61
  62     <table align="center" border="0" cellspacing="0" cellpadding="10">
  63         <tr>
  64             <td align="center" colspan="3">
  65                 <table border="0" cellpadding="8">
  66                     <tr>
  67                         <td align="center" colspan="2" class="pageTitle">
  68                             <h1>render-groups-01-b</h1>
  69                         </td>
  70                     </tr>
  71                     <tr  class="navbar">
  72                         <td align="center">
  73                             SVG Image
  74                         </td>
  75                         <td align="center">
  76                             PNG Image
  77                         </td>
  78                     </tr>
  79                     <tr>
  80                         <td align="right">
  81                                  <embed src="../W3C-SVG-1.1/render-groups-01-b.svg" width="480" height="360"/>
  82                         </td>
  83                         <td align="left">
  84                             <img alt="raster image of render-groups-01-b" src="../W3C-SVG-1.1/render-groups-01-b-w3c.png" width="480" height="360"/>
  85                         </td>
  86                     </tr>
  87                 </table>
  88             </td>
  89         </tr>
  90     </table>
  91
  92
  93 <div class="opscript">
  94             <p>
  95                 Verifies implicit rendering order (paragraph 3.3) and grouping mechanism (paragraphs 3.4).
  96                 It also validates basic Shape, Image and text rendering.
  97             </p>
  98             <p>
  99                 This test renders 3  elements: a text string "SVG", then
 100                 a shape, then an image. Because of their definition order and coordinates, the image
 101                 should be on top of the rectangle and the rectangle on top of the text. The
 102                 test validates that groups are conceptually rendered offscreen before being
 103                 rendered on the canvas. This is done by grouping the same overlapping objects and
 104                 rendering the group at half opacity. The background pattern (vertical stripes) should
 105                 show throw all the group elements. However, none of the "SVG" should show through the
 106                 rectangle and none of the rectangle should show through the image.
 107             </p>
 108             <p>
 109                 Prerequisites: the test assumes proper handling of the fill stroke, stroke-width,
 110                 opacity, font-size rendering properties. It uses the rect, line, text and image elements, as
 111                 well as all the elements required for the test template. To ensure that the text string is
 112                 overlapped by the other elements and to avoid a dependency on system fonts, an SVG font is used.
 113             </p>
 114             <p>
 115                 The rendered image should match the reference image exactly.
 116             </p>
 117
 118         </div>
 119 <div class="linkbar"> <p>
 120                 <a href="full-pservers-pattern-01-b.html">pservers-pattern-01-b ←</a>
 121                 <a name="scrollTo" href="full-index.html">index</a>
 122                 <a href="full-script-handle-01-b.html">→ script-handle-01-b</a>
 123                         </p></div>
 124 </body>
 125 </html>