| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8"/> |
| <style> |
| #flow { |
| -webkit-flow-into: namedFlow; |
| } |
| #region { |
| -webkit-flow-from: namedFlow; |
| position: relative; |
| width: 5em; |
| height: 6em; |
| padding-top: 1em; |
| background-color: lightgray; |
| } |
| .test:before { |
| position: absolute; |
| top: 0; |
| left: 0; |
| font-weight: bold; |
| content: 'BEFORE'; |
| } |
| .test:after { |
| position: absolute; |
| bottom: 0; |
| right: 0; |
| font-weight: bold; |
| content: 'AFTER'; |
| } |
| </style> |
| </head> |
| <body> |
| <p id='flow'>some text to flow</p> |
| <div id='region'></div> |
| </body> |
| <script> |
| var region = document.getElementById("region"); |
| region.className = "test" |
| </script> |
| </html> |
