| <!doctype html> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| font-family: monospace; | |
| } | |
| p { | |
| margin: 0; | |
| } | |
| .container { | |
| width: 13em; | |
| height: 10em; | |
| background-color: lightgray; | |
| } | |
| #f1 { | |
| -webkit-flow-into: flow1; | |
| } | |
| #r1 { | |
| -webkit-flow-from: flow1; | |
| } | |
| @-webkit-region #r1 { | |
| .c1 { | |
| background-color: lime; | |
| } | |
| #p1 { | |
| background-color: green; | |
| } | |
| } | |
| #f2 { | |
| -webkit-flow-into: flow2; | |
| } | |
| #r2 { | |
| -webkit-flow-from: flow2; | |
| } | |
| @-webkit-region #r2 { | |
| p { | |
| background-color: lightgreen; | |
| } | |
| } | |
| #f3 { | |
| -webkit-flow-into: flow3; | |
| } | |
| #r3 { | |
| -webkit-flow-from: flow3; | |
| } | |
| @-webkit-region #r3 { | |
| p { | |
| background-color: yellow; | |
| } | |
| .c3 { | |
| background-color: orange; | |
| } | |
| #p3 { | |
| background-color: red; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='f1'> | |
| <style scoped='true'> | |
| p { | |
| background-color: lightgreen; | |
| } | |
| </style> | |
| <p>Styled line of text</p> | |
| <p class='c1'>Styled line of text</p> | |
| <p id='p1'>Styled line of text</p> | |
| </div> | |
| <div id='f2'> | |
| <style scoped='true'> | |
| .c2 { | |
| background-color: lime; | |
| } | |
| #p2 { | |
| background-color: green; | |
| } | |
| </style> | |
| <p>Styled line of text</p> | |
| <p class='c2'>Styled line of text</p> | |
| <p id='p2'>Styled line of text</p> | |
| </div> | |
| <div id='f3'> | |
| <style scoped='true'> | |
| p { | |
| background-color: lightgreen; | |
| } | |
| .c3 { | |
| background-color: lime; | |
| } | |
| #p3 { | |
| background-color: green; | |
| } | |
| </style> | |
| <p>Styled line of text</p> | |
| <p class='c3'>Styled line of text</p> | |
| <p id='p3'>Styled line of text</p> | |
| </div> | |
| Partial overlap, @region more specific than <style scoped> (@region style has rules for class and id, scoped style has rule for <p>) | |
| <div class='container' id='r1'></div> | |
| Partial overlap, <style scoped> more specific than @region (@region style has rule for <p>, scoped style has rules for class and id) | |
| <div class='container' id='r2'></div> | |
| Overlap, @region and <style scoped>using the same selectors (both @region and scoped style have rules for <p>, class and id) | |
| <div class='container' id='r3'></div> | |
| </body> | |
| </html> |