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

   1 <!doctype html>
   2 <html>
   3     <!--
   4     Test for https://bugs.webkit.org/show_bug.cgi?id=85633 ([CSSRegions]Add region styling support for color property).
   5     You should not see any red text below.
   6     -->
   7     <head>
   8         <style>
   9             body { font-family: monospace; }
  10             .regionBox { width: 350px; height: 25px; }
  11             .regionBox2 { width: 350px; height: 50px; }
  12
  13             #article1 { -webkit-flow-into: flow1; }
  14             #region1 { -webkit-flow-from: flow1; position: absolute; top: 10px; }
  15             #p1 { color: #ff0000; }
  16             @-webkit-region #region1 {
  17                 #p1 { color: #008000; }
  18             }
  19
  20             #article2 { -webkit-flow-into: flow2; }
  21             #region2 { -webkit-flow-from: flow2; position: absolute; top: 50px; }
  22             #span2 { color: #ff0000; }
  23             @-webkit-region #region2 {
  24                 #span2 { color: #008000; }
  25             }
  26
  27             #article3 { -webkit-flow-into: flow3; }
  28             #region3 { -webkit-flow-from: flow3; position: absolute; top: 90px; }
  29             #article3 { color: #ff0000; }
  30             @-webkit-region #region3 {
  31                 #article3 { color: #0000ff; }
  32                 #div3 { color: #008000; }
  33             }
  34
  35             #article4 { -webkit-flow-into: flow4; }
  36             #region41 { -webkit-flow-from: flow4; position: absolute; top: 150px; }
  37             #region42 { -webkit-flow-from: flow4; position: absolute; top: 190px; }
  38             #article4 { color: #ff0000; }
  39             @-webkit-region #region41 {
  40                 #span4 { color: #008000; }
  41             }
  42             @-webkit-region #region42 {
  43                 #span4 { color: #00ff00; }
  44             }
  45
  46             #article5 { -webkit-flow-into: flow5; }
  47             #region51 { -webkit-flow-from: flow5; position: absolute; top: 230px; }
  48             #region52 { -webkit-flow-from: flow5; position: absolute; top: 290px; }
  49             #article5 { color: #ff0000; }
  50             @-webkit-region #region51, #region52 {
  51                 #article5 { color: #00ff00; }
  52                 em { color: #008000; }
  53             }
  54         </style>
  55     </head>
  56     <body>
  57         <div id="article1">
  58             <p id="p1">P color styled in region: #008000.</p>
  59         </div>
  60         <div id="region1" class="regionBox"></div>
  61
  62         <div id="article2">
  63             <span id="span2">Span color styled in region: #008000.</span>
  64         </div>
  65         <div id="region2" class="regionBox"></div>
  66
  67         <div id="article3">
  68             Text color styled in region: #0000ff.
  69             <div id="div3">Div color styled in region: #008000.</div>
  70             Text color styled in region: #0000ff.
  71         </div>
  72         <div id="region3" class="regionBox2"></div>
  73
  74         <div id="article4">
  75             <span id="span4">Span text color styled in region: #008000. Span text color styled in region: #00ff00.</span>
  76         </div>
  77         <div id="region41" class="regionBox"></div>
  78         <div id="region42" class="regionBox"></div>
  79
  80         <div id="article5">
  81             <div id="div5">
  82                 Text color styled in region: #00ff00.
  83                 <em style="display: block; -webkit-region-break-after: always">Em color styled in region: #008000.</em>
  84                 Text color styled in region: #00ff00.
  85                 <em>Em color styled in region: #008000.</em>
  86                 Text color styled in region: #00ff00.
  87             </div>
  88         </div>
  89         <div id="region51" class="regionBox2"></div>
  90         <div id="region52" class="regionBox2"></div>
  91     </body>
  92 </html>