src/third_party/WebKit/LayoutTests/fast/regions/region-styling/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     When an element is no longer a region, the region styling should not apply anymore.
   6     When an element becomes a region, region styling should be applied.
   7     You should not see any red background below.
   8     -->
   9     <head>
  10         <style>
  11             @font-face {
  12                 font-family: webkit-ahem;
  13                 font-style: normal;
  14                 src: url(../../../resources/Ahem.ttf);
  15             }
  16
  17             p { font-family: webkit-ahem; }
  18
  19             #p1 { -webkit-flow-into: flow1; background-color: red; }
  20             .region1 { -webkit-flow-from: flow1; }
  21             #region1 { position: absolute; top: 10px; width: 300px; height: 50px; }
  22             @-webkit-region #region1 { #p1 { background-color: green; } }
  23
  24             #p2 { -webkit-flow-into: flow2; background-color: red; }
  25             .region2 { -webkit-flow-from: flow2; }
  26             #region2 { position: absolute; top: 70px; width: 300px; height: 50px; }
  27             @-webkit-region #region2 { #p2 { background-color: green; } }
  28
  29             #containerP3 { position: absolute; top: 130px; width: 300px; height: 50px; }
  30
  31             #p3 { -webkit-flow-into: flow3; background-color: green; }
  32             .region3 { -webkit-flow-from: flow3; }
  33             #region3 { position: absolute; top: 130px; width: 300px; height: 50px; }
  34             @-webkit-region #region3 { #p3 { background-color: red; } }
  35
  36             #region4 { position: absolute; top: 190px; width: 300px; height: 50px; }
  37         </style>
  38     </head>
  39     <body>
  40         <!-- Paragraph flown into a region with region styling, background should be green. -->
  41         <p id="p1">R: 00 G: 80 B: 00</p>
  42         <!-- Paragraph collected into a named flow. When we dynamically add a region to collect the flow,
  43         region styling rule is applied. -->
  44         <p id="p2">R: 00 G: 80 B: 00</p>
  45          <!-- Paragraph flown into a region with region styling. The region element is transformed
  46         so that the element is not a region, region styling rule should not apply. -->
  47         <p id="p3" class="p3">R: 00 G: 80 B: 00</p>
  48
  49         <div id="region1" class="region1"></div>
  50         <div id="region2"></div>
  51         <div id="region3" class="region3"></div>
  52         <div id="region4" class="region3"</div>
  53
  54         <script>
  55             // When the element becomes a region, the region styling should be applied.
  56             document.getElementById("region2").className = "region2";
  57             // When the element is no longer a region, the region styling should not apply anymore.
  58             document.getElementById("region3").className = "";
  59         </script>
  60     </body>
  61 </html>
  62