pattern-transform-presence-01.svg 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <?xml version="1.0"?>
  2. <svg xmlns="http://www.w3.org/2000/svg"
  3. xmlns:xlink="http://www.w3.org/1999/xlink"
  4. onload="addTransform()" viewBox="0 0 300 100" class="reftest-wait">
  5. <!-- Test that the presence/absence of a patternTransform is correctly detected.
  6. Details are below but, in summary, the first two squares should contain the
  7. same pattern (a diagonal checkerbox) whilst the third square should contain
  8. a different pattern (actually the same pattern but WITHOUT the rotation).
  9. -->
  10. <script>
  11. function addTransform()
  12. {
  13. var g = document.getElementById("patternBase");
  14. var list = g.patternTransform.baseVal;
  15. var t = document.documentElement.createSVGTransform();
  16. t.setRotate(45,50,50);
  17. list.appendItem(t);
  18. document.documentElement.removeAttribute("class");
  19. }
  20. </script>
  21. <defs>
  22. <!-- 1. The base pattern that will be referenced by others.
  23. When the document loads, script will add a patternTransform to this
  24. pattern. It does this using *only SVG DOM APIs* (i.e. not setAttribute)
  25. so that we can test that when a transform is not specified by markup but
  26. is added via the DOM we still correctly detect its presence. -->
  27. <pattern id="patternBase" width="1" height="1">
  28. <rect width="50" height="50" fill="blue"/>
  29. <rect x="50" width="50" height="50" fill="red"/>
  30. <rect y="50" width="50" height="50" fill="red"/>
  31. <rect x="50" y="50" width="50" height="50" fill="blue"/>
  32. </pattern>
  33. <!-- 2. References the base pattern and should detect the base pattern's
  34. patternTransform (added by script) and inherit it. (SVG 1.1 F2 13.3,
  35. xlink:href 'Any attributes which are defined on the referenced element
  36. which are not defined on this element are inherited by this element.').
  37. Hence this pattern should look IDENTICAL to patternBase. -->
  38. <pattern xlink:href="#patternBase" id="patternRefWithoutTransform"/>
  39. <!-- 3. References the base pattern but patternTransform is defined (although
  40. empty) and hence the patternTransform should NOT be inherited and this
  41. pattern should look DIFFERENT to patternBase. -->
  42. <pattern xlink:href="#patternBase" id="patternRefWithTransform"
  43. patternTransform=""/>
  44. <!-- The case of a patternTransform being supplied by animation is covered by
  45. SMIL reftest anim-pattern-attr-presence-01.svg -->
  46. </defs>
  47. <rect width="100" height="100" stroke="black"
  48. fill="url(#patternBase)"/>
  49. <g transform="translate(100)">
  50. <rect width="100" height="100" stroke="black"
  51. fill="url(#patternRefWithoutTransform)"/>
  52. </g>
  53. <g transform="translate(200)">
  54. <rect width="100" height="100" stroke="black"
  55. fill="url(#patternRefWithTransform)"/>
  56. </g>
  57. </svg>