SVGViewTests/w3c/1.2T/svg/media-video-212-t.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny" xml:id="svg-root" width="100%" height="100%"
  viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xe="http://www.w3.org/2001/xml-events">
  <!--======================================================================-->
  <!--=  Copyright 2008 World Wide Web Consortium, (Massachusetts          =-->
  <!--=  Institute of Technology, European Research Consortium for         =-->
  <!--=  Informatics and Mathematics (ERCIM), Keio University).            =-->
  <!--=  All Rights Reserved.                                              =-->
  <!--=  See http://www.w3.org/Consortium/Legal/.                          =-->
  <!--======================================================================-->
  <SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/"
    reviewer="DOH" owner="AE" desc="Video with rendering order" status="accepted"
    approved="yes"
    version="$Revision: 1.11 $" testname="$RCSfile: media-video-212-t.svg,v $">
    <d:OperatorScript xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/" xmlns="http://www.w3.org/1999/xhtml">
      <p>Video with rendering order</p>
      <p>
        Colored circles should maintain rendering order as marked on them.
        Video is 10 seconds in length and should freeze at the end. The circles should continue to animate indefinitely
        Bottom frame contains a jpeg reference image. The jpeg image is rendering order is on the top and the video
        rendering order is on the bottom.
      </p>
      <p>
        If the user agent does not support the 3GP media format, the test is still a pass.
      </p>
    </d:OperatorScript>
  </SVGTestCase>
  <title xml:id="test-title">$RCSfile: media-video-212-t.svg,v $</title>
  <defs>
    <font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F">
      <font-face-src>
        <font-face-uri xlink:href="../images/SVGFreeSans.svg#ascii" />
      </font-face-src>
    </font-face>
  </defs>
  <g xml:id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
    <rect x="15" y="55" height="230" width="450" fill="none" stroke="black" stroke-width="0.25"/>
    <text text-anchor="middle" x="240" y="20" font-size="14" fill="#000">Video with rendering order</text>
    <text text-anchor="middle" x="240" y="35" font-size="10" fill="#555">
      Colored circles should maintain rendering order as marked on them. Video should freeze at the end
    </text>
    <text text-anchor="middle" x="240" y="47" font-size="10" fill="#555">
      Bottom frame contains a jpeg reference image. The jpeg image is rendering order is on the top and the video
      rendering order is on the bottom.
    </text>
    <g transform="scale(0.5)translate(280,77)">
      <g>
        <circle r="25" fill="#2a6"/>
        <text fill="white" font-size="12" text-anchor="middle">BEHIND</text>
        <animateTransform attributeName="transform" type="translate" values="-50 100;500 100;-50 100" begin="0.5s" dur="4s" repeatCount="indefinite"/>
      </g>
      <g>
        <circle r="30" fill="#a2a"/>
        <text fill="white" font-size="12" text-anchor="middle">BEHIND</text>
        <animateTransform attributeName="transform" type="translate" values="-50 200;500 200;-50 200" begin="0.5s" dur="3s" repeatCount="indefinite"/>
      </g>
      <g>
        <rect x="50" y="50" width="300" height="200" fill="none" stroke="blue" stroke-width="6"/>
        <video x="50" y="50" width="300" height="200" xml:id="v1" xlink:href="../images/dogandball.3gp" type="video/3gp" fill="freeze"/>
        <g>
          <g>
            <circle r="25" fill="#2aa" fill-opacity="0.5"/>
            <text fill="white" font-size="12" text-anchor="middle" fill-opacity="0.5">BETWEEN</text>
            <animateTransform attributeName="transform" type="translate" values="-50 100;500 300;-50 100" begin="0.5s" dur="3.5s" repeatCount="indefinite" additive="sum"/>
          </g>
          <g>
            <circle r="30" fill="red" fill-opacity="0.5"/>
            <text fill="white" font-size="12" text-anchor="middle" fill-opacity="0.5">BETWEEN</text>
            <animateTransform attributeName="transform" type="translate" values="-50 200;500 400;-50 200" begin="0.5s" dur="2.5s" repeatCount="indefinite" additive="sum"/>
          </g>
          <animateTransform attributeName="transform" type="rotate" from="360.0 235 265" to="0.0 235 265" begin="0.5s" dur="10s" repeatCount="indefinite" additive="sum"/>
        </g>
        <rect x="50" y="270" width="300" height="200" fill="none" stroke="blue" stroke-width="6"/>
        <image x="50" y="270" width="300" height="200" xml:id="i1" xlink:href="../images/dogandball.jpg" type="image/jpeg"/>
        <animateTransform attributeName="transform" type="rotate" from="0.0 235 265" to="360.0 235 265" begin="0.5s" dur="10s" repeatCount="indefinite" additive="sum"/>
        <animateTransform attributeName="transform" type="scale" values="1.0;1.3;1.0;0.75;1.0" begin="0.5s" dur="10s" repeatCount="indefinite" additive="sum"/>
        <animateTransform attributeName="transform" type="skewX" values="0.0;10.0;0.0;-10.0;0.0" begin="0.5s" dur="3s" repeatCount="indefinite" additive="sum"/>
        <animateTransform attributeName="transform" type="skewY" values="0.0;8.0;0.0;-8.0;0.0" begin="0.5s" dur="2.3s" repeatCount="indefinite" additive="sum"/>
        <animateTransform attributeName="transform" type="translate" values="0 0;10 0;10 10;0 10;0 0" begin="0.5s" dur="10s" repeatCount="indefinite" additive="sum"/>
      </g>
      <g>
        <circle r="25" fill="#2a6"/>
        <text fill="white" font-size="12" text-anchor="middle">ON TOP</text>
        <animateTransform attributeName="transform" type="translate" values="100 -50;100 500;100 -50" begin="0.5s" dur="3.2s" repeatCount="indefinite"/>
      </g>
      <g>
        <circle r="30" fill="#a28"/>
        <text fill="white" font-size="12" text-anchor="middle">ON TOP</text>
        <animateTransform attributeName="transform" type="translate" values="200 -50;200 500;200 -50" begin="0.5s" dur="4.5s" repeatCount="indefinite"/>
      </g>
    </g>
  </g>
  <g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
    <text xml:id="revision" x="10" y="340" stroke="none"
      fill="black">$Revision: 1.11 $</text>
  </g>
  <rect xml:id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
  <!-- comment out this watermark once the test is approved -->
  <!--<g xml:id="draft-watermark">
    <rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/>
    <text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240"
      text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
  </g>-->
</svg>