third_party/WebKit/LayoutTests/svg/text/selection-styles.xhtml

   1 <html xmlns="http://www.w3.org/1999/xhtml" >
   2 <head>
   3 <style>
   4   body, svg { margin: 0px; padding: 0px; }
   5   text#solidFill::selection, #solidFillText { fill: blue; }
   6   text#solidStroke::selection, #solidStrokeText { fill: none; stroke:blue; stroke-width: 1px; }
   7   text#gradFill::selection, #gradFillText { fill: url(#grad1); }
   8   text#gradStroke::selection, #gradStrokeText { fill: none; stroke: url(#grad1); stroke-width: 1px; }
   9   text#none::selection, #noneText { fill: none; stroke: none; }
  10   text#compound::selection, text.compound::selection { fill: url(#grad1); stroke:blue; stroke-width: 1px; background-color: yellow; }
  11   #compoundText { fill: url(#grad2); stroke:purple; stroke-width: 1px; }
  12 </style>
  13 <script>
  14 function runTests()
  15 {
  16     document.execCommand("SelectAll");
  17 }
  18 </script>
  19 </head>
  20 <body onload="runTests()">
  21   <svg xmlns="http://www.w3.org/2000/svg" font-size="20" width="800px" height="500px">
  22     <defs>
  23       <linearGradient id="grad1" gradientTransform="rotate(45)">
  24         <stop offset="0" stop-color="black"/>
  25         <stop offset="1" stop-color="white"/>
  26       </linearGradient>
  27       <linearGradient id="grad2" gradientTransform="rotate(45)">
  28         <stop offset="0" stop-color="red"/>
  29         <stop offset="1" stop-color="green"/>
  30       </linearGradient>
  31     </defs>
  32     <g transform="translate(10,0)">
  33       <!-- select with various style -->
  34       <text y="30px" id="solidFill">Selected text should be filled with solid blue.</text>
  35       <text y="60px" id="solidStroke">Selected text should be stroked with solid blue.</text>
  36       <text y="90px" id="gradFill">Selected text should be filled with gradient.</text>
  37       <text y="120px" id="gradStroke">Selected text should be stroked with gradient.</text>
  38       <text y="150px" id="none">Selected text should get invisible.</text>
  39       <text y="180px" id="compound">Selected text should have both gradient fill, solid stroke and background</text>
  40       <!-- select various pre-styled texts with a style -->
  41       <text y="240px" id="solidFillText" class="compound">Selected text should have both gradient fill, solid stroke and background</text>
  42       <text y="270px" id="solidStrokeText" class="compound">Selected text should have both gradient fill, solid stroke and background</text>
  43       <text y="300px" id="gradFillText" class="compound">Selected text should have both gradient fill, solid stroke and background</text>
  44       <text y="330px" id="gradStrokeText" class="compound">Selected text should have both gradient fill, solid stroke and background</text>
  45       <text y="360px" id="noneText" class="compound">Selected text should have both gradient fill, solid stroke and background</text>
  46       <text y="390px" id="compoundText" class="compound">Selected text should have both gradient fill, solid stroke and background</text>
  47     </g>
  48   </svg>
  49 </body>
  50 </html>