src/third_party/WebKit/LayoutTests/fast/regions/region-styling/region-style-rule-specificity-expected.html

   1 <!doctype html>
   2 <html>
   3         <head>
   4                 <style>
   5                 body {
   6                         font-family: monospace;
   7                         font-size: 1em;
   8                 }
   9                 p {
  10                         margin: 0;
  11                         line-height: 1em;
  12                 }
  13                 .container {
  14                         background-color: lightgray;
  15                         width: 15em;
  16                         height: 5em;
  17                 }
  18                 .light {
  19                         background-color: lightgreen;
  20                 }
  21                 .lime {
  22                         background-color: lime;
  23                 }
  24                 .green {
  25                         background-color: green;
  26                 }
  27                 </style>
  28         </head>
  29         <body>
  30                 <h1>Testing CSS selectors specificity/position is respected when using @region styling</h1>
  31
  32                 Selector specificity in @region rule
  33                 <div class='container' id='r1'>
  34                         <p class='light'>Plain paragraph</p>
  35                         <p class='lime'>Styled with class</p>
  36                         <p class='green'>Styled with ID</p>
  37                 </div>
  38                 Selector position in @region rule
  39                 <div class='container' id='r2'>
  40                         <p class='light'>Plain paragraph</p>
  41                         <p class='lime'>Styled with class</p>
  42                         <p class='green'>Styled with ID</p>
  43                 </div>
  44                 More specific selector in flowed content
  45                 <div class='container' id='r3'>
  46                         <p class='lime'>Class in content</p>
  47                         <p class='lime'>ID in content</p>
  48                         <p class='lime'>ID in content</p>
  49                 </div>
  50                 Style attribute in flowed content
  51                 <div class='container' id='r4'>
  52                         <p class='lime'>Element style in region</p>
  53                         <p class='lime'>ID style in region</p>
  54                         <p class='lime'>Class in region</p>
  55                 </div>
  56         </body>
  57 </html>