src/third_party/WebKit/LayoutTests/fast/regions/region-styling/region-style-inline-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     Setting the background color is enabled for inline elements.
   6     You should not see any red background below.
   7     -->
   8     <head>
   9         <style>
  10             @font-face {
  11                 font-family: webkit-ahem;
  12                 font-style: normal;
  13                 src: url(../../../resources/Ahem.ttf);
  14             }
  15
  16             .regionBox { width: 300px; height: 50px; }
  17             span { font-family: webkit-ahem; -webkit-font-smoothing: none; }
  18
  19             #article1 { -webkit-flow-into: flow1; }
  20             #region1 { -webkit-flow-from: flow1; position: absolute; top: 10px; }
  21             #span1 { background-color: red; }
  22             @-webkit-region #region1 { #span1 { background-color: green; } }
  23             #article2 { -webkit-flow-into: flow2; }
  24             #region2 { -webkit-flow-from: flow2; position: absolute; top: 70px; }
  25             #span2 { display: block; background-color: red; }
  26             @-webkit-region #region2 { #span2 { background-color: green; } }
  27         </style>
  28     </head>
  29     <body>
  30         <div id="article1">
  31             <span id="span1">R: 00 G: 80 B: 00</span>
  32         </div>
  33         <div id="region1" class="regionBox"></div>
  34         <div id="article2">
  35             <span id="span2">R: 00 G: 80 B: 00</span>
  36         </div>
  37         <div id="region2" class="regionBox"></div>
  38         <script>
  39             document.getElementById("span2").style.display = "inline";
  40         </script>
  41     </body>
  42 </html>