diff options
Diffstat (limited to 'share/extensions/tests/data/svg/inkwebjs-move.svg')
-rw-r--r-- | share/extensions/tests/data/svg/inkwebjs-move.svg | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/share/extensions/tests/data/svg/inkwebjs-move.svg b/share/extensions/tests/data/svg/inkwebjs-move.svg new file mode 100644 index 0000000..b4aa50f --- /dev/null +++ b/share/extensions/tests/data/svg/inkwebjs-move.svg @@ -0,0 +1,128 @@ +<svg + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="800" height="450"> + <style type="text/css"> + text { font-family:sans-serif; font-size:11px; text-anchor:middle; text-align:center } + .title tspan { font-weight: bold } + .pos { opacity: 0.3 } + .started { fill:#C80 } + </style> + <script type="text/javascript" xlink:href="../inkweb.js" /> + <script type="text/javascript" xlink:href="inkweb-debug.js" /> + <rect x="0%" y="0%" width="100%" height="100%" style="fill:#EEE; stroke:#999; stroke-width:4px" /> + + <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - --> + + <text id="test-1" x="125" y="26" class="title"> + <tspan>Test 1</tspan> - from left to right </text> + <text class="pos" x="80" y="80"> Start </text> + <circle id="t1-start" cx="80" cy="50" r="20" fill="#C00" opacity="0.2" /> + <text class="pos" x="170" y="80"> End </text> + <circle id="t1-end" cx="170" cy="50" r="20" fill="#C00" opacity="0.2" /> + <!-- The element to move --> + <circle id="t1-elem" cx="80" cy="50" r="20" fill="#C00" /> + + <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - --> + + <text id="test-2" x="325" y="26" class="title"> + <tspan>Test 2</tspan> - from right to left</text> + <text class="pos" x="370" y="80"> Start </text> + <circle id="t2-start" cx="370" cy="50" r="20" fill="#0A0" opacity="0.2" /> + <text class="pos" x="280" y="80"> End </text> + <circle id="t2-end" cx="280" cy="50" r="20" fill="#0A0" opacity="0.2" /> + <!-- The element to move --> + <circle id="t2-elem" cx="370" cy="50" r="20" fill="#0A0" /> + + <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - --> + + <text id="test-3" x="125" y="120" class="title"> + <tspan>Test 3</tspan> - pre-translated </text> + <text class="pos" x="80" y="190"> Start </text> + <path id="t3-start" fill="#C00" opacity="0.2" transform="translate(30,10)" + d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" /> + <text class="pos" x="170" y="190"> End </text> + <path id="t3-end" fill="#C00" opacity="0.2" transform="translate(120,10)" + d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" /> + <!-- The element to move --> + <path id="t3-elem" fill="#C00" transform="translate(30,10)" + d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" /> + + <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - --> + + <text id="test-4" x="350" y="120" class="title"> + <tspan>Test 4</tspan> - pre-translated and scaled </text> + <text class="pos" x="300" y="190"> Start </text> + <path id="t4-start" fill="#C00" opacity="0.2" + transform="translate(235,-45) scale(1.4)" + d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" /> + <text class="pos" x="400" y="190"> End </text> + <path id="t4-end" fill="#C00" opacity="0.2" + transform="translate(335,-45) scale(1.4)" + d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" /> + <!-- The element to move --> + <path id="t4-elem" fill="#C00" + transform="translate(235,-45) scale(1.4)" + d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" /> + + <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - --> + + <text id="test-5" x="600" y="120" class="title"> + <tspan>Test 5</tspan> - pre-translated and rotated </text> + <text class="pos" x="550" y="190"> Start </text> + <path id="t5-start" fill="#C00" opacity="0.2" + transform="translate(500,0) rotate(-15 90 140)" + d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" /> + <text class="pos" x="650" y="190"> End </text> + <path id="t5-end" fill="#C00" opacity="0.2" + transform="translate(600,0) rotate(-15 90 140)" + d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" /> + <!-- The element to move --> + <path id="t5-elem" fill="#C00" + transform="translate(500,0) rotate(-15 90 140)" + d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" /> + + <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - --> + + <text id="test-6" x="125" y="220" class="title"> + <tspan>Test 6</tspan> - with a transformation matrix </text> + <text class="pos" x="80" y="290"> Start </text> + <path id="t6-start" fill="#C00" opacity="0.2" + transform="matrix(1.2 0 -0.5 1.2 95 80)" + d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" /> + <text class="pos" x="170" y="290"> End </text> + <path id="t6-end" fill="#C00" opacity="0.2" + transform="matrix(1.2 0 -0.5 1.2 185 80)" + d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" /> + <!-- The element to move --> + <path id="t6-elem" fill="#C00" + transform="matrix(1.2 0 -0.5 1.2 95 80)" + d="M30,130 L60,130 L60,120 L70,140 L60,160 L60,150 L30,150" /> + + <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - --> + + <script type="text/javascript"> + + var titles = document.getElementsByClassName("title") + for ( var title,i=0; title=titles[i]; i++ ) { + title.className.baseVal += " started"; + testeNum = title.id.replace( /^.*-/, "" ); + var el = document.getElementById( "t"+testeNum+"-elem" ); + var start = document.getElementById( "t"+testeNum+"-start" ).getBBox(); + var end = document.getElementById( "t"+testeNum+"-end" ).getBBox(); + InkWeb.moveElTo( { el:el, x:end.x, y:end.y } ); + } + + function testLog() { + try{ foo.lalala() } + catch(e){ InkWeb.log(e, "foo.lalala() is wrong?") } + + InkWeb.log("This is a sequence log."); + + InkWeb.log("warn", "Warning! Warning!!!"); + } + setTimeout("testLog()", 2000); + + </script> + +</svg> |