samples/tests/systemColors.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
"http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">

<!-- ========================================================================= -->
<!-- Copyright (C) The Apache Software Foundation. All rights reserved.        -->
<!--                                                                           -->
<!-- This software is published under the terms of the Apache Software License -->
<!-- version 1.1, a copy of which has been included with this distribution in  -->
<!-- the LICENSE file.                                                         -->
<!-- ========================================================================= -->

<!-- ========================================================================= -->
<!-- This document tests CSS system colors.                                    -->
<!--                                                                           -->
<!-- @author stephane@hillion.org                                              -->
<!-- @version $Id$ -->
<!-- ========================================================================= -->

<svg width="450" height="500" viewBox="0 0 450 500">
  <defs>
        <filter id="blur" filterRes="200" x="-.1" y="-0.4" width="1.2" height="2.0">
            <feGaussianBlur stdDeviation="10 10" result="blurred"/>
            <feMerge>
                <feMergeNode in="blurred" />
                <feMergeNode in="blurred" />
                <feMergeNode in="blurred" />
            </feMerge>
        </filter>
  </defs>

    <!-- ============================================================= -->
    <!-- Test content                                                  -->
    <!-- ============================================================= -->
    <g id="testContent" style="stroke-linecap: square">
        <rect x="0" y="0" width="100%" height="100%"
              style="fill: Background"/>
        <text x="50%" y="38" font-size="28" text-anchor="middle"
              style="fill:white; font-weight: bold; filter:url(#blur)">
            System Colors
        </text>
        <text x="50%" y="38" font-size="28" text-anchor="middle"
              style="font-weight: bold">
            System Colors
        </text>

        <!-- Inactive Window -->
        <g transform="translate(100 70)">
            <rect x="0" y="0" width="300" height="350"
                  style="fill: ButtonFace; stroke: WindowFrame"/>
            <rect x="3" y="3" width="294" height="20"
                  style="fill: InactiveCaption"/>
            <text x="150" y="18" style="fill: InactiveCaptionText; text-anchor: middle">
                Inactive Caption
            </text>
        </g>

        <!-- Active Window -->
        <g transform="translate(50 120)">
            <rect x="0" y="0" width="300" height="350"
                  style="fill: ButtonFace; stroke: WindowFrame"/>
            <rect x="3" y="3" width="294" height="20"
                  style="fill: ActiveCaption"/>
            <text x="150" y="18" style="fill: CaptionText; text-anchor: middle;
                                        font-weight: bold">
                Active Caption
            </text>

            <!-- Menu -->
            <rect x="3" y="26" width="295" height="16"
                  style="fill: Menu"/>
            <text x="10" y="38" style="fill: MenuText">
                Menu
            </text>
           
            <rect x="45" y="26" width="60" height="16" style="fill: Highlight"/>
            <text x="50" y="38" style="fill: HighlightText">
                Selected
            </text>



            <rect x="4" y="43" width="292" height="304" style="fill: white"/>
            <rect x="280" y="43" width="16" height="304" style="fill: Scrollbar"/>

            <!-- bevel border -->

            <line x1="3" y1="42" x2="296" y2="42" style="stroke: ThreeDDarkShadow"/>
            <line x1="4" y1="43" x2="295" y2="43" style="stroke: ThreeDShadow"/>

            <line x1="3" y1="43" x2="3" y2="347" style="stroke: ThreeDDarkShadow"/>
            <line x1="4" y1="44" x2="4" y2="346" style="stroke: ThreeDShadow"/>
 
            <line x1="296" y1="43" x2="296" y2="346" style="stroke: ThreeDHighlight"/>
            <line x1="297" y1="42" x2="297" y2="347" style="stroke: ThreeDLightShadow"/>
 
            <line x1="4" y1="346" x2="296" y2="346" style="stroke: ThreeDHighlight"/>
            <line x1="3" y1="347" x2="297" y2="347" style="stroke: ThreeDLightShadow"/>



            <!-- Scrollbar -->
            

            <rect x="280" y="45" width="14" height="14" style="fill: ButtonFace"/>

            <line x1="281" y1="44" x2="295" y2="44" style="stroke: ThreeDLightShadow"/>
            <line x1="282" y1="45" x2="294" y2="45" style="stroke: ThreeDHighlight"/>

            <line x1="281" y1="45" x2="281" y2="58" style="stroke: ThreeDLightShadow"/>
            <line x1="282" y1="46" x2="282" y2="57" style="stroke: ThreeDHighlight"/>
 
            <line x1="294" y1="46" x2="294" y2="57" style="stroke: ThreeDShadow"/>
            <line x1="295" y1="45" x2="295" y2="58" style="stroke: ThreeDDarkShadow"/>
 
            <line x1="282" y1="57" x2="294" y2="57" style="stroke: ThreeDShadow"/>
            <line x1="281" y1="58" x2="295" y2="58" style="stroke: ThreeDDarkShadow"/>

            <rect x="280" y="294" width="14" height="14" style="fill: ButtonFace"/>

            <line x1="281" y1="331" x2="295" y2="331" style="stroke: ThreeDLightShadow"/>
            <line x1="282" y1="332" x2="294" y2="332" style="stroke: ThreeDHighlight"/>

            <line x1="281" y1="331" x2="281" y2="344" style="stroke: ThreeDLightShadow"/>
            <line x1="282" y1="332" x2="282" y2="345" style="stroke: ThreeDHighlight"/>
 
            <line x1="294" y1="333" x2="294" y2="344" style="stroke: ThreeDShadow"/>
            <line x1="295" y1="332" x2="295" y2="345" style="stroke: ThreeDDarkShadow"/>
 
            <line x1="282" y1="344" x2="294" y2="344" style="stroke: ThreeDShadow"/>
            <line x1="281" y1="345" x2="295" y2="345" style="stroke: ThreeDDarkShadow"/>

            <path d="M288 49L285 52L291 52Z"/>
            <path d="M288 340L285 337L291 337Z"/>

            <!-- bevel border -->

            <rect x="41" y="43" width="80" height="62" style="fill: Menu"/>

            <line x1="40" y1="42" x2="120" y2="42" style="stroke: ThreeDLightShadow"/>
            <line x1="41" y1="43" x2="121" y2="43" style="stroke: ThreeDHighlight"/>

            <line x1="40" y1="43" x2="40" y2="106" style="stroke: ThreeDLightShadow"/>
            <line x1="41" y1="44" x2="41" y2="105" style="stroke: ThreeDHighlight"/>
 
            <line x1="120" y1="43" x2="120" y2="105" style="stroke: ThreeDShadow"/>
            <line x1="121" y1="42" x2="121" y2="106" style="stroke: ThreeDDarkShadow"/>
 
            <line x1="41" y1="105" x2="120" y2="105" style="stroke: ThreeDShadow"/>
            <line x1="40" y1="106" x2="121" y2="106" style="stroke: ThreeDDarkShadow"/>

            <text x="50" y="58" style="fill: MenuText">
                Item 1
            </text>
            <text x="50" y="76" style="fill: MenuText">
                Item 2
            </text>
            <text x="50" y="94" style="fill: MenuText">
                Item 3
            </text>
        </g>
    </g>

    <!-- ============================================================= -->
    <!-- Batik sample mark                                             -->
    <!-- ============================================================= -->
    <use xlink:href="../batikLogo.svg#Batik_Tag_Box" />
    
</svg>