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

   1 <!doctype html>
   2 <html>
   3 <head>
   4         <style>
   5         body {
   6                 font-family: monospace;
   7         }
   8         h2 {
   9                 margin: 0;
  10                 font-size: 2em;
  11         }
  12         p {
  13                 margin: 0;
  14         }
  15
  16         .content {
  17                 -webkit-flow-into: flow1;
  18                 font-size: 1em;
  19         }
  20         article {
  21                 -webkit-flow-into: contents;
  22         }
  23         article h2 {
  24                 -webkit-flow-into: titles;
  25         }
  26
  27         #div-container {
  28                 -webkit-flow-from: flow1;
  29                 width: 13em;
  30                 height: 10em;
  31                 background-color: lightgray;
  32         }
  33         #title-container {
  34                 -webkit-flow-from: titles;
  35                 width: 20em;
  36                 height: 10em;
  37                 background-color: silver;
  38         }
  39         </style>
  40 </head>
  41 <body>
  42         Scope-styled elements extracted in region along with the parent.
  43         <div class='content'>
  44                 <style scoped='true'>
  45                 p {
  46                         color: green;
  47                 }
  48                 </style>
  49                 <p>Styled line of text Styled line of text Styled line of text</p>
  50         </div>
  51         <div class='content'>
  52                 <p>Normal line of text Normal line of text Normal line of text</p>
  53         </div>
  54         <div id='div-container'></div>
  55
  56         Scope-styled elements extracted in region without the parent.
  57         <article>
  58                 <h2>Title one</h2>
  59                 <p>Some text in first article</p>
  60         </article>
  61         <article>
  62                 <style scoped='true'>
  63                 article {
  64                         color: green;
  65                 }
  66                 </style>
  67                 <h2>Title two</h2>
  68                 <p>Some text in second article</p>
  69         </article>
  70         <article>
  71                 <h2>Title three</h2>
  72                 <p>Some text in third and final article</p>
  73         </article>
  74         <div id='title-container'></div>
  75 </body>
  76 </html>