src/third_party/WebKit/LayoutTests/fast/regions/region-styling/region-style-block-background-color.html

   1 <!doctype html>
   2 <html>
   3     <!--
   4     Test for https://bugs.webkit.org/show_bug.cgi?id=71488 (Add support for background-color in region styling).
   5     Test setting the background-color property using region styling fox boxes.
   6     You should not see any red background below.
   7     -->
   8     <head>
   9         <style>
  10             html { font: 16px/1.25 monospace; }
  11             .regionTextBlock { background-color: red; }
  12             .regionBox { width: 420px; height: 50px; }
  13             .regionBox1 { width: 420px; height: 30px; }
  14
  15             #article1 { -webkit-flow-into: flow1; }
  16             #region1  { -webkit-flow-from: flow1; }
  17             @-webkit-region #region1 { #regionTextBlock1 { background-color: green; } }
  18
  19             #article2 { -webkit-flow-into: flow2; }
  20             #region21, #region22  { -webkit-flow-from: flow2; }
  21             @-webkit-region #region21 { #regionTextBlock2 { background-color: green; } }
  22             @-webkit-region #region22 { #regionTextBlock3 { background-color: lime; } }
  23
  24             #article3 { -webkit-flow-into: flow3; }
  25             #region31, #region32 { -webkit-flow-from: flow3; }
  26             @-webkit-region #region31 { #regionTextBlock4 { background-color: green; } }
  27             @-webkit-region #region32 { #regionTextBlock4 { background-color: lime; } }
  28
  29             #article41 { -webkit-flow-into: flow41; }
  30             #region41  { -webkit-flow-from: flow41; }
  31             #article42 { -webkit-flow-into: flow42; }
  32             #region42  { -webkit-flow-from: flow42; }
  33             @-webkit-region #region41 {
  34                 #regionTextBlock5 { background-color: green; }
  35                 #regionTextBlock6 { background-color: green; }
  36             }
  37             @-webkit-region #region42 {
  38                 #regionTextBlock7 { background-color: lime; }
  39                 #regionTextBlock8 { background-color: lime; }
  40             }
  41
  42             #article5 { -webkit-flow-into: flow5; }
  43             #region5  { -webkit-flow-from: flow5; }
  44             @-webkit-region #region5 {
  45                 #regionTextBlock9 { background-color: green; }
  46             }
  47
  48             #article6 { -webkit-flow-into: flow6; }
  49             #region6  { -webkit-flow-from: flow6; }
  50             @-webkit-region #region6 { #regionTextBlock10 { background-color: transparent; } }
  51
  52             #article7  { -webkit-flow-into: flow7; }
  53             #region71  { -webkit-flow-from: flow7; }
  54             #region72  { -webkit-flow-from: flow7; }
  55             #regionTextBlock11 { background-color: green; }
  56             @-webkit-region #region71 { #regionTextBlock11 { background-color: transparent; } }
  57         </style>
  58     </head>
  59     <body class="body">
  60         <!-- Style a single paragraph in a single region -->
  61         <div id="article1">
  62             <div class="regionTextBlock" id="regionTextBlock1">Green background text styled in region1.</div>
  63         </div>
  64         <div id="region1" class="regionBox1"></div>
  65
  66         <!-- Style separate paragraphs in different regions -->
  67          <div id="article2">
  68             <div class="regionTextBlock" id="regionTextBlock2">Green background text styled in region21.</div></br>
  69             <div class="regionTextBlock" id="regionTextBlock3">Lime background text styled in region22.</div>
  70         </div>
  71         <div id="region21" class="regionBox"></div>
  72         <div id="region22" class="regionBox1"></div>
  73
  74        <!-- Style a single paragraph in different regions -->
  75         <div id="article3">
  76             <div class="regionTextBlock" id="regionTextBlock4">Green background text styled in region31. Lime background text styled in region32. Lime background text styled in region32. Green background text styled in region31.</div></br>
  77         </div>
  78         <div id="region31" class="regionBox1"></div>
  79         <div id="region32" class="regionBox"></div>
  80         <div id="region31" class="regionBox1"></div>
  81
  82         <!-- Style paragraphs in alternate regions -->
  83         <div id="article41">
  84             <div class="regionTextBlock" id="regionTextBlock5">Green background text styled in region 41.</div></br>
  85             <div class="regionTextBlock" id="regionTextBlock6">Green background text styled in region 41.</div></br>
  86         </div>
  87         <div id="article42">
  88             <div class="regionTextBlock" id="regionTextBlock7">Lime background text styled in region 42.</div></br>
  89             <div class="regionTextBlock" id="regionTextBlock8">Lime background text styled in region 42.</div></br>
  90         </div>
  91         <div id="region41" class="regionBox"></div>
  92         <div id="region42" class="regionBox"></div>
  93         <div id="region41" class="regionBox1"></div>
  94         <div id="region42" class="regionBox1"></div>
  95
  96         <!-- Style paragraph in region, text also styled. -->
  97         <div id="article5">
  98             <div class="regionTextBlock" id="regionTextBlock9"><i><b>Green background, styled text in region5.</b></i></div>
  99         </div>
 100         <div id="region5" class="regionBox1"></div>
 101
 102         <!-- Style paragraph in region, transparent background. -->
 103         <div id="article6">
 104             <div class="regionTextBlock" id="regionTextBlock10">Transparent background text in region6.</b></i></div>
 105         </div>
 106         <div id="region6" class="regionBox1"></div>
 107
 108         <!-- Style paragraph in two regions, first region resets background, second region should have background -->
 109         <div id="article7">
 110             <div class="regionTextBlock" id="regionTextBlock11">Transparent background text in region71. Green background text in region 72.</div>
 111         </div>
 112         <div id="region71" class="regionBox1"></div>
 113         <div id="region72" class="regionBox1"></div>
 114     </body>
 115 </html>