| <!DOCTYPE html> | |
| <html> | |
| <style> | |
| #flex { | |
| display: flex; | |
| width: 100px; | |
| } | |
| #flex > div { | |
| height: 30px; | |
| } | |
| .column { | |
| flex-direction: column; | |
| } | |
| </style> | |
| <body> | |
| <div id="flex"> | |
| <div>Foo</div> | |
| <div id="target" data-offset-y=38>Bar</div> | |
| </div> | |
| <script src="../../resources/check-layout.js"></script> | |
| <script> | |
| var flexbox = document.getElementById('flex'); | |
| flexbox.offsetTop; | |
| flexbox.classList.add('column'); | |
| checkLayout('#target'); | |
| </script> |