src/third_party/WebKit/LayoutTests/fast/regions/style-scoped/style-scoped-in-flow-override-container-style.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4         <style>
   5         body {
   6                 font-family: monospace;
   7         }
   8         p {
   9                 margin: 0;
  10         }
  11         .container {
  12                 width: 13em;
  13                 height: 8em;
  14                 background-color: lightgray;
  15         }
  16         .break {
  17                 -webkit-region-break-after: always;
  18         }
  19
  20         .c1 {
  21                 -webkit-flow-into: flow1;
  22                 font-size: 1em;
  23         }
  24         .r1 {
  25                 -webkit-flow-from: flow1;
  26         }
  27
  28         .c2 {
  29                 -webkit-flow-into: flow2;
  30         }
  31         .r2 {
  32                 -webkit-flow-from: flow2;
  33                 margin-top: 1em;
  34         }
  35         </style>
  36 </head>
  37 <body>
  38         <p>Scope-styled elements in single region with style overlapping with target region.</p>
  39         <div class='c1'>
  40                 <style scoped='true'>
  41                 div {
  42                         background-color: lime;
  43                 }
  44                 </style>
  45                 <p>Styled line of text Styled line of text Styled line of text</p>
  46         </div>
  47         <div class='c1'>
  48                 <p>Normal line of text Normal line of text Normal line of text</p>
  49         </div>
  50         <div class='container r1'></div>
  51
  52         <p>Scope-styled elements flowing in multiple regions with style overlapping with target regions.</p>
  53         <div class='c2'>
  54                 <style scoped='true'>
  55                 div {
  56                         background-color: lime;
  57                 }
  58                 </style>
  59                 <p>First line</p>
  60                 <p>Second line</p>
  61                 <p class='break'>Third line</p>
  62                 <p>Fourth line</p>
  63                 <p>Fifth line</p>
  64                 <p>Sixth line</p>
  65         </div>
  66
  67         <div class='container r2'></div>
  68         <div class='container r2'></div>
  69 </body>
  70 </html>