| <?xml version="1.0" encoding="UTF-8"?> |
| <!DOCTYPE html PUBLIC "-//CL//DTD XHTML 1.0 Transitional plus Embed//EN" |
| "http://www.w3.org/Graphics/xhtml1-transitional-plus-embed.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <script src="../resources/text-based-repaint.js"></script> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
| <meta name="keywords" content="W3C SVG 1.1 Test Suite testsuite mobile"/> |
| <meta name="description" content="W3C SVG 1.1 Test Suite"/> |
| <title> |
| SVG 1.1 test:render-groups-01-b </title> |
| <style type="text/css"> |
| <!-- |
| body { font-family: "Lucida Grande", verdana, helvetica, sans-serif; line-height: 1.3; text-align: left; margin-top: 0; margin-bottom: 0 } |
| .pageTitle { line-height: 1.5; font-weight: bold; margin-bottom: 1em;} |
| .pageSubTitle { color: blue; font-size: 200%; font-weight: bold } |
| .openChapter { color: blue; line-height: 1.3; font-weight: bold } |
| .openSection { color: blue; line-height: 125%; font-weight: bold } |
| .info { color: black; line-height: 1.2; font-size: 90%; } |
| p { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 } |
| .linkbar { text-align: center; margin: 1em 1em 0.25em 1em;} |
| blockquote { margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0 } |
| .opscript {margin-left: 3%; margin-right: 3%; } |
| .opscript p { margin-top: 0.7em} |
| .navbar {background: black; color: white; font-weight: bold} |
| --> |
| </style> |
| <script> |
| window.testIsAsync = true; |
| function repaintTest() { |
| setTimeout(startTest, 0); |
| } |
| function startTest() { |
| window.location='#scrollTo'; |
| setTimeout(finishTest, 0); |
| } |
| function finishTest() |
| { |
| if (window.location.toString().indexOf("#") == -1) { |
| setTimeout(finishTest, 0); |
| return; |
| } |
| finishRepaintTest(); |
| } |
| </script> |
| </head> |
| <body class="bodytext" onload="runRepaintAndPixelTest()"> |
| |
| <div class="linkbar"> |
| <p> |
| <a href="full-render-groups-01-b.html">Full version</a>, <a href="basic-render-groups-01-b.html">Basic version</a></p> |
| <p>Specification link: <a target="spec" href="http://www.w3.org/TR/SVG11/render.html#Grouping">3.4 How groups are rendered</a></p> |
| <p> |
| <a href="full-pservers-pattern-01-b.html">pservers-pattern-01-b ←</a> |
| <a href="full-index.html">index</a> |
| <a href="full-script-handle-01-b.html">→ script-handle-01-b</a> |
| </p></div> |
| |
| <table align="center" border="0" cellspacing="0" cellpadding="10"> |
| <tr> |
| <td align="center" colspan="3"> |
| <table border="0" cellpadding="8"> |
| <tr> |
| <td align="center" colspan="2" class="pageTitle"> |
| <h1>render-groups-01-b</h1> |
| </td> |
| </tr> |
| <tr class="navbar"> |
| <td align="center"> |
| SVG Image |
| </td> |
| <td align="center"> |
| PNG Image |
| </td> |
| </tr> |
| <tr> |
| <td align="right"> |
| <embed src="../../../svg/W3C-SVG-1.1/render-groups-01-b.svg" width="480" height="360"/> |
| </td> |
| <td align="left"> |
| <img alt="raster image of render-groups-01-b" src="../../../svg/W3C-SVG-1.1/render-groups-01-b-w3c.png" width="480" height="360"/> |
| </td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| </table> |
| |
| |
| <div class="opscript"> |
| <p> |
| Verifies implicit rendering order (paragraph 3.3) and grouping mechanism (paragraphs 3.4). |
| It also validates basic Shape, Image and text rendering. |
| </p> |
| <p> |
| This test renders 3 elements: a text string "SVG", then |
| a shape, then an image. Because of their definition order and coordinates, the image |
| should be on top of the rectangle and the rectangle on top of the text. The |
| test validates that groups are conceptually rendered offscreen before being |
| rendered on the canvas. This is done by grouping the same overlapping objects and |
| rendering the group at half opacity. The background pattern (vertical stripes) should |
| show throw all the group elements. However, none of the "SVG" should show through the |
| rectangle and none of the rectangle should show through the image. |
| </p> |
| <p> |
| Prerequisites: the test assumes proper handling of the fill stroke, stroke-width, |
| opacity, font-size rendering properties. It uses the rect, line, text and image elements, as |
| well as all the elements required for the test template. To ensure that the text string is |
| overlapped by the other elements and to avoid a dependency on system fonts, an SVG font is used. |
| </p> |
| <p> |
| The rendered image should match the reference image exactly. |
| </p> |
| |
| </div> |
| <div class="linkbar"> <p> |
| <a href="full-pservers-pattern-01-b.html">pservers-pattern-01-b ←</a> |
| <a name="scrollTo" href="full-index.html">index</a> |
| <a href="full-script-handle-01-b.html">→ script-handle-01-b</a> |
| </p></div> |
| </body> |
| </html> |
