<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'
      xmlns:xbl='http://www.w3.org/ns/xbl'
      xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <head>
    <title>XBL 2.0 Test Suite: Template test - apply-author-sheets + allow-selectors-through</title>
    <style type='text/css'>
     h1 {border-style: solid;
	 border-color: red;
	 border-width: 5px;
        }
     h1 .wrap1 { 
	 border-style: solid;
	 border-color: orange;
	 border-width: 5px;
	 }
     h1 .wrap2 { 
 	 border-style: solid;
	 border-color: yellow;
	 border-width: 5px;
	 }
     h1 .wrap3 { 
	 border-style: solid;
	 border-color: green;
	 border-width: 5px;
	}
     h1 .wrap4 { 
	 border-style: solid;
	 border-color: blue;
	 border-width: 5px;
	 }
    </style> 
    <xbl xmlns="http://www.w3.org/ns/xbl">
     <binding element="h1">
      <template apply-author-sheets="true" allow-selectors-through="true">
       <div class="wrap1">
        <div class="wrap2">
         <div class="wrap3">
          <div class="wrap4">
           <content/>
          </div>
         </div>
        </div>
       </div>
      </template>
     </binding>
    </xbl>
  </head>
  <body>
   <h1>This text should be coloured with five sets of colourful borders.</h1>
   <p>It uses the apply-author-sheets attribute to allow the bound document to style the nodes directly, and uses the allow-selectors-through attribute to allow the bound document to pretend (for the purposes of selector matching) that the shadow tree actually is descended from the bound element.</p> 
  </body>
</html>
