| <!doctype html> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| font-family: monospace; | |
| } | |
| p { | |
| margin: 0; | |
| } | |
| .container { | |
| width: 13em; | |
| height: 8em; | |
| background-color: lightgray; | |
| } | |
| .formatted { | |
| background-color: lime; | |
| } | |
| .spacer { | |
| margin-top: 1em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p>Scope-styled elements in single region with style overlapping with target region.</p> | |
| <div class='container'> | |
| <p class='formatted'>Styled line of text Styled line of text Styled line of text</p> | |
| <p>Normal line of text Normal line of text Normal line of text</p> | |
| </div> | |
| <p>Scope-styled elements flowing in multiple regions with style overlapping with target regions.</p> | |
| <div class='container formatted spacer'> | |
| <p>First line</p> | |
| <p>Second line</p> | |
| <p>Third line</p> | |
| </div> | |
| <div class='container spacer'> | |
| <p class='formatted'>Fourth line</p> | |
| <p class='formatted'>Fifth line</p> | |
| <p class='formatted'>Sixth line</p> | |
| </div> | |
| </body> | |
| </html> |