LayoutTests/fast/regions/render-region-custom-style-mark.html

   1 <!doctype html>
   2 <html>
   3     <!--
   4     Tests that regions with region styling rules associated are identified and flagged correctly.
   5     -->
   6     <head>
   7         <style>
   8             @-webkit-region #region1 { p { margin-top: 10px; } }
   9             @-webkit-region #region2 { p { margin-left: 5px; } }
  10
  11             #article { -webkit-flow-into: flow1; }
  12             #region1, #region2, #region3 { width: 200px; height: 50px; }
  13             .region {  -webkit-flow-from: flow1; }
  14
  15             @-webkit-region #region3 { p { color: red; } }
  16         </style>
  17     </head>
  18     <body>
  19         <div id="article">
  20             <p>First para goes into region.</p>
  21             Text goes into region
  22             <p>Second para goes into region.</p>
  23             <p>Third para goes into region.</p>
  24             Text goes into region
  25             <p>Fourth para goes into region.</p>
  26         </div>
  27         <div id="region1" class="region"></div>
  28         <div id="region2" class="region"></div>
  29         <div id="region3"></div>
  30         <script>
  31             // When the element is no longer a region, the region styling should not apply anymore.
  32             document.getElementById("region2").className = "";
  33             // When the element becomes a region, the region styling should be applied.
  34             document.getElementById("region3").className = "region";
  35         </script>
  36     </body>
  37 </html>
  38