<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<!--======================================================================-->
<!--= Copyright 2000 World Wide Web Consortium, (Massachusetts =-->
<!--= Institute of Technology, Institut National de Recherche en =-->
<!--= Informatique et en Automatique, Keio University). All Rights =-->
<!--= Reserved. See http://www.w3.org/Consortium/Legal/. =-->
<!--======================================================================-->
<!-- ===================================================================== -->
<!-- -->
<!-- masking-groupOpac-BE-04.svg -->
<!-- renamed for 1.1 suite to masking-opacity-01-b.svg -->
<!-- -->
<!-- Test to see the effect of applying an opacity property to a group. -->
<!-- -->
<!-- Author : Haroon Sheikh 10-Mar-2000 -->
<!-- 1.1 revision by Charles Ying -->
<!-- -->
<!-- History: -->
<!-- 10-Mar-2000, HSS: Serial#1 created. -->
<!-- 17-Mar-2000, LH=" fix BE" fix Legend; ser#2. -->
<!-- 25-Apr-2000, LH: to ser#3, reflecting fix to PNG. -->
<!-- 03-Aug-2000, LH=" update DOCTYPE for CR DTD, 20000802" ser# . -->
<!-- 16-Aug-2000, LH="rename" ser#4. -->
<!-- -->
<!-- ===================================================================== -->
<!--======================================================================-->
<!--= Note. After October 2000, revision history is kept as CVS 'commit' =-->
<!--= log messages, and therefore is no longer in the preceding preamble.=-->
<!--======================================================================-->
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360">
<SVGTestCase xmlns="http://www.w3.org/2000/02/svg/testsuite/description/">
<OperatorScript version="$Revision: 1.6 $" testname="masking-opacity-01-b.svg">
<Paragraph>
Test to see the effect of applying an opacity property to a group.
</Paragraph>
<Paragraph>
A blue rectangle with a green rectangle on top are contained in a
group. This opacity of the group and the opacity of the rectangles are
changed in this test. A red rectangle is provided in the background so
that opacity changes are obvious visually.
</Paragraph>
<Paragraph>
From top to bottom, the tests are as follows.
</Paragraph>
<Paragraph>
In the top test, the opacities of the group and the individual rectangles are
all set to 1. As a result, the green rectangle should appear on top of the blue
rectangle.
</Paragraph>
<Paragraph>
In the second test, the group is given an opacity of 0.5. As a result, the blue
rectangle should not show through in the region where the green and blue overlap.
</Paragraph>
<Paragraph>
In the third test, the group maintains a group opacity of 1 whereas each individual
rectangle is given an opacity of 0.5 in the group. As a result, the blue rectangle
should show through in the overlap region.
</Paragraph>
<Paragraph>
Lastly, the group and individual rectangles are all given an opacity of 0.5. The
result should be similar to the previous test only fainter (because the opacity) is
resulting in less contribution.
</Paragraph>
<Paragraph>
The rendered picture should match the reference image exactly, except for possible
variations in the labelling text (per CSS2 rules).
</Paragraph>
</OperatorScript>
</SVGTestCase>
<title id="test-title">masking-opacity-01-b</title>
<desc id="test-desc">Test to see the effect of applying an opacity property to a group.</desc>
<!--======================================================================-->
<!--Content of Test Case follows... =====================-->
<!--======================================================================-->
<g id="test-body-content">
<text font-family="Arial" font-size="24" x="50" y="27">Test for opacity property on a group.</text>
<rect x="10" y="30" width="100" height="260" fill="red" />
<g opacity="1" >
<rect x="60" y="50" width="80" height="40" fill="blue" />
<rect x="70" y="60" width="80" height="40" fill="lime" />
</g>
<text font-family="Arial" font-size="20" x="200" y="62">Group opacity: 1</text>
<text font-family="Arial" font-size="20" x="200" y="80">Blue rectangle opacity: 1</text>
<text font-family="Arial" font-size="20" x="200" y="98">Green rectangle opacity: 1</text>
<g opacity="0.5" >
<rect x="60" y="110" width="80" height="40" fill="blue" />
<rect x="70" y="120" width="80" height="40" fill="lime" />
</g>
<text font-family="Arial" font-size="20" x="200" y="122">Group opacity: 0.5</text>
<text font-family="Arial" font-size="20" x="200" y="140">Blue rectangle opacity: 1</text>
<text font-family="Arial" font-size="20" x="200" y="158">Green rectangle opacity: 1</text>
<g opacity="1" >
<rect x="60" y="170" width="80" height="40" fill="blue" opacity=".5" />
<rect x="70" y="180" width="80" height="40" fill="lime" opacity=".5" />
</g>
<text font-family="Arial" font-size="20" x="200" y="182">Group opacity: 1</text>
<text font-family="Arial" font-size="20" x="200" y="200">Blue rectangle opacity: 0.5</text>
<text font-family="Arial" font-size="20" x="200" y="218">Green rectangle opacity: 0.5</text>
<g opacity="0.5" >
<rect x="60" y="230" width="80" height="40" fill="blue" opacity=".5" />
<rect x="70" y="240" width="80" height="40" fill="lime" opacity=".5" />
</g>
<text font-family="Arial" font-size="20" x="200" y="242">Group opacity: 0.5</text>
<text font-family="Arial" font-size="20" x="200" y="260">Blue rectangle opacity: 0.5</text>
<text font-family="Arial" font-size="20" x="200" y="278">Green rectangle opacity: 0.5</text>
</g>
<text id="revision" x="10" y="340" font-size="40" stroke="none" fill="black">$Revision: 1.6 $</text>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
</svg>
Codebase Browser
chromium