third_party/WebKit/LayoutTests/svg/carto.net/tabgroup.svg

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <?AdobeSVGViewer save="snapshot"?>
   3 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
   4 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1024 768" onload="runRepaintAndPixelTest()">
   5     <script type="text/ecmascript" xlink:href="../../fast/repaint/resources/text-based-repaint.js"></script>
   6     <script type="text/ecmascript" xlink:href="resources/helper_functions.js"></script>
   7     <script type="text/ecmascript" xlink:href="resources/timer.js"></script>
   8     <script type="text/ecmascript" xlink:href="resources/tabgroup.js"></script>
   9     <script type="text/ecmascript">
  10         <![CDATA[
  11             var tabgroupRect;
  12             function repaintTest() {
  13                 //first a few style array literals
  14                 var tabStyles = {"fill":"lightgray","stroke":"dimgray","stroke-width":1,"cursor":"pointer"};
  15                 var tabwindowStyles = {"fill":"aliceblue","stroke":"dimgray","stroke-width":1};
  16                 var tabtextStyles = {"font-family":"Arial,Helvetica","font-size":15,"fill":"dimgray","font-weight":"normal"};
  17                 var tabtextStylesCenter = {"font-family":"Arial,Helvetica","font-size":15,"fill":"dimgray","font-weight":"normal","text-anchor":"middle"};
  18                 //setting tabTitles
  19                 var tabTitles = new Array("Biography","Relations","Events","Portrait");
  20                 var tabTitlesMulti = new Array("Geodata\nBrowser","Download\nFolder","Your\nAccount","Help\n& Info");
  21                 tabgroupRect = new tabgroup("tabgroupRect","tabgroupRect",0,0,300,200,20,"rect","rect",5,0,tabStyles,"rgb(191,233,255)",tabwindowStyles,tabtextStyles,tabTitles,1,false,tabChanged);
  22                 tabgroupTriangle = new tabgroup("tabgroupTriangle","tabgroupTriangle",10,330,300,200,35,"triangle","triangle",5,0,tabStyles,"rgb(191,233,255)",tabwindowStyles,tabtextStylesCenter,tabTitlesMulti,0,true,undefined);
  23                 tabgroupRectTriangle = new tabgroup("tabgroupRectTriangle","tabgroupRectTriangle",650,300,300,200,20,"rect","triangle",5,0,tabStyles,"rgb(191,233,255)",tabwindowStyles,tabtextStyles,tabTitles,2,false,undefined);
  24                 tabgroupRound = new tabgroup("tabgroupRound","tabgroupRound",500,50,300,200,20,"round","round",5,0,tabStyles,"rgb(191,233,255)",tabwindowStyles,tabtextStyles,tabTitles,1,false,undefined);
  25                 tabgroupRectRound = new tabgroup("tabgroupRectRound","tabgroupRectRound",200,550,340,200,20,"rect","round",10,5,tabStyles,"rgb(191,233,255)",tabwindowStyles,tabtextStyles,tabTitles,0,false,tabChanged);
  26                 //add new content
  27                 tabgroupTriangle.addContent("contentTabGroupTriangle0",0,true);
  28                 tabgroupTriangle.addContent("oversizeContent",1,true);
  29                 tabgroupTriangle.addContent("contentTabGroupTriangle2",2,true);
  30                 tabgroupTriangle.addContent("contentTabGroupTriangle3",3,true);
  31                 //activate tab
  32                 tabgroupTriangle.activateTabByIndex(0,false);
  33                 tabgroupRound.resize(400,100);
  34                 //remove content
  35                 //var deletedNode = tabgroupTriangle.removeContent("contentTabGroupTriangle3",3);
  36                 //alert(deletedNode.nodeName);
  37                 //deactivate tabs
  38                 //tabgroupTriangle.disableSingleTab(3);
  39                 //tabgroupTriangle.disableAllTabs();
  40                 //tabgroupTriangle.enableSingleTab(3);
  41                 //tabgroupTriangle.enableAllTabs();
  42     }
  43             function tabChanged(id,title,index) {
  44                 alert("tab nr "+index+" with title '"+title+"' was activated in tabgroup '"+id+"'");
  45             }
  46         ]]>
  47     </script>
  48     <title>Demonstration of the tabgroup object</title>
  49     <g id="tabgroupRect" transform="rotate(90),translate(10,-250)" />
  50     <g id="tabgroupTriangle" />
  51     <g id="tabgroupRectTriangle" />
  52     <g id="tabgroupRound" />
  53     <g transform="translate(180,-150),rotate(45,300,650)" id="tabgroupRectRound" />
  54     <!-- tab content -->
  55     <g id="oversizeContent" display="none">
  56         <rect x="40" y="190" width="220" height="120" stroke="dimgray" stroke-width="1" />
  57         <rect x="40.5" y="188" width="219" height="121.5" fill="aliceblue" stroke="none" />
  58         <rect x="30" y="188" width="240" height="11.5" fill="aliceblue" />
  59         <text x="10" y="55" font-size="12" fill="dimgray" font-family="Arial,Helvetica">This is oversize content that can be<tspan x="10" dy="15">hidden on tab-change</tspan></text>
  60     </g>
  61     <text id="contentTabGroupTriangle0" font-size="12" fill="dimgray" font-family="Arial,Helvetica" x="10" y="55" display="none">This is a tabgroup with triangular tab corners<tspan x="10" dy="15">and a double line tab. (use "\n" as a line separator)</tspan><tspan x="10" dy="15">Click on the second tab to see oversize content</tspan></text>
  62     <text id="contentTabGroupTriangle2" font-size="12" fill="dimgray" font-family="Arial,Helvetica" x="10" y="55" display="none">Please contact our sales person to get an account</text>
  63     <text id="contentTabGroupTriangle3" font-size="12" fill="dimgray" font-family="Arial,Helvetica" x="10" y="55" display="none">RTFM!</text>
  64 </svg>