| <!doctype html> |
| <html> |
| <head> |
| <style> |
| body { |
| font-family: monospace; |
| } |
| h2 { |
| margin: 0; |
| font-size: 2em; |
| } |
| p { |
| margin: 0; |
| } |
| |
| .content { |
| -webkit-flow-into: flow1; |
| font-size: 1em; |
| } |
| article { |
| -webkit-flow-into: contents; |
| } |
| article h2 { |
| -webkit-flow-into: titles; |
| } |
| |
| #div-container { |
| -webkit-flow-from: flow1; |
| width: 13em; |
| height: 10em; |
| background-color: lightgray; |
| } |
| #title-container { |
| -webkit-flow-from: titles; |
| width: 20em; |
| height: 10em; |
| background-color: silver; |
| } |
| </style> |
| </head> |
| <body> |
| Scope-styled elements extracted in region along with the parent. |
| <div class='content'> |
| <style scoped='true'> |
| p { |
| color: green; |
| } |
| </style> |
| <p>Styled line of text Styled line of text Styled line of text</p> |
| </div> |
| <div class='content'> |
| <p>Normal line of text Normal line of text Normal line of text</p> |
| </div> |
| <div id='div-container'></div> |
| |
| Scope-styled elements extracted in region without the parent. |
| <article> |
| <h2>Title one</h2> |
| <p>Some text in first article</p> |
| </article> |
| <article> |
| <style scoped='true'> |
| article { |
| color: green; |
| } |
| </style> |
| <h2>Title two</h2> |
| <p>Some text in second article</p> |
| </article> |
| <article> |
| <h2>Title three</h2> |
| <p>Some text in third and final article</p> |
| </article> |
| <div id='title-container'></div> |
| </body> |
| </html> |
