pattern-transform-presence-01.svg

Enable keyboard shortcuts

Checkerboard

<?xml version="1.0"?>

<svg xmlns="http://www.w3.org/2000/svg"

  xmlns:xlink="http://www.w3.org/1999/xlink"

  onload="addTransform()" viewBox="0 0 300 100" class="reftest-wait">

<!-- Test that the presence/absence of a patternTransform is correctly detected.

     Details are below but, in summary, the first two squares should contain the

     same pattern (a diagonal checkerbox) whilst the third square should contain

     a different pattern (actually the same pattern but WITHOUT the rotation).

-->

<script>

function addTransform()

  var g = document.getElementById("patternBase");

  var list = g.patternTransform.baseVal;

  var t = document.documentElement.createSVGTransform();

  t.setRotate(45,50,50);

  list.appendItem(t);

  document.documentElement.removeAttribute("class");

</script>

<defs>

  <!-- 1. The base pattern that will be referenced by others.

       When the document loads, script will add a patternTransform to this

       pattern. It does this using *only SVG DOM APIs* (i.e. not setAttribute)

       so that we can test that when a transform is not specified by markup but

       is added via the DOM we still correctly detect its presence. -->

  <pattern id="patternBase" width="1" height="1">

    <rect width="50" height="50" fill="blue"/>

    <rect x="50" width="50" height="50" fill="red"/>

    <rect y="50" width="50" height="50" fill="red"/>

    <rect x="50" y="50" width="50" height="50" fill="blue"/>

  </pattern>

  <!-- 2. References the base pattern and should detect the base pattern's

       patternTransform (added by script) and inherit it. (SVG 1.1 F2 13.3,

       xlink:href 'Any attributes which are defined on the referenced element

       which are not defined on this element are inherited by this element.').

       Hence this pattern should look IDENTICAL to patternBase. -->

  <pattern xlink:href="#patternBase" id="patternRefWithoutTransform"/>

  <!-- There's no way to differentiate an explicitly specified (but empty)

       transform from no transform, so this should look IDENTICAL to patternBase -->

  <pattern xlink:href="#patternBase" id="patternRefWithTransform"

    patternTransform=""/>

  <!-- The case of a patternTransform being supplied by animation is covered by

       SMIL reftest anim-pattern-attr-presence-01.svg -->

</defs>

<rect width="100" height="100" stroke="black"

  fill="url(#patternBase)"/>

<g transform="translate(100)">

  <rect width="100" height="100" stroke="black"

    fill="url(#patternRefWithoutTransform)"/>

</g>

<g transform="translate(200)">

  <rect width="100" height="100" stroke="black"

    fill="url(#patternRefWithTransform)"/>

</g>

</svg>