    <!--
                Copyright: Copyright 1998-2001 W3C (MIT, INRIA, Keio), All Rights Reserved.
    See http://www.w3.org/Consortium/Legal/.
    Author: Aaron M. Cohen
             File Name: layout-hierarchical2.smil
      Media Components: 2 JPG
     Expected Behavior: Tests hierarchical layout with topLayout element.
                        show smile and frown for 10s, begin at the same time, smile will obscure frown,
                          frown will be clipped on its right at the level as the right smile edge.
                        show nothing for 2s.
                        show smile and then 1s later, frown for 10s, obscurring smile,
    		      the both smile and frown will be clipped on their right
                        show nothing for 2s.
                        show smil for 10s, frown is obscurred, smile will be clipped on its right
    -->
    <smil xmlns="http://www.w3.org/2001/SMIL20/Language">
        <head>
            <layout>
               <topLayout width="640px" height="480px">
                   <region id="whole" top="0px" left="0px" width="640px"
                                                height="480px" z-index="5"/>
                   <region id="right" top="0px" left="0px" width="320px"
                                                height="480px" z-index="4">
                       <region id="inset" top="140px" left="80" width="400px"
                                                height="400px" z-index="6"/>
                       <region id="inset2" top="140px" left="80" width="400px"
                                                height="400px" z-index="6"/>
                       <region id="inset3" top="140px" left="80" width="400px"
                                                height="400px" z-index="7"/>
                   </region>
                </topLayout>
            </layout>
        </head>
        <body>
            <par>
                <seq>
                    <par>
                            <img id="A" region="whole" src="../images/smile.jpg" dur="10s"/>
                            <img id="B" region="inset" src="../images/frown.jpg" dur="10s"/>
                    </par>
                    <par dur="2s"></par>
                    <par>
                            <img id="D" region="inset2" src="../images/frown.jpg" begin="1s" dur="10s"/>
                            <img id="C" region="inset" src="../images/smile.jpg" begin="0s" dur="10s"/>
                    </par>
                    <par dur="2s"></par>
                    <par>
                            <img id="E" region="inset2" src="../images/frown.jpg" dur="10s"/>
                            <img id="F" region="inset3" src="../images/smile.jpg" dur="10s"/>
                    </par>
                </seq>
            </par>
        </body>
    </smil>