| <!DOCTYPE html> |
| <html> |
| <title>CSS Flexbox: overflow:auto support.</title> |
| <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow"> |
| <link rel="help" href="https://www.w3.org/TR/css-overflow-4/#classic-scrollbars"> |
| <link rel="match" href="reference/overflow-auto-005-ref.html"> |
| <meta name="assert" content="This test ensures that flexbox with 'overflow: auto' is supported, including in combination with different writing-mode and flex-direction values."/> |
| <style> |
| .test-row { |
| display: flex; |
| margin-bottom: 5px; |
| } |
| .test-row > div { |
| flex: none; |
| } |
| |
| .container { |
| margin-right: 5px; |
| border: 5px solid lightgreen; |
| width: 100px; |
| } |
| |
| .horizontal-tb { |
| writing-mode: horizontal-tb; |
| } |
| |
| .vertical-rl { |
| writing-mode: vertical-rl; |
| } |
| |
| .vertical-lr { |
| writing-mode: vertical-lr; |
| } |
| |
| .row { |
| flex-direction: row; |
| } |
| |
| .row-reverse { |
| flex-direction: row-reverse; |
| } |
| |
| .column { |
| flex-direction: column; |
| } |
| |
| .column-reverse { |
| flex-direction: column-reverse; |
| } |
| |
| .flexbox { |
| border: 0 solid pink; |
| display: flex; |
| height: 100px; |
| width: 100px; |
| overflow: auto; |
| } |
| |
| .flexbox > div { |
| width: 200px; |
| height: 200px; |
| background: radial-gradient(at right 60%, red, yellow, green); |
| flex: none; |
| } |
| |
| </style> |
| <body> |
| <p>Scrollbars should work in all the flexboxes.</p> |
| </body> |
| <script> |
| var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr']; |
| var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse']; |
| var testContents = ''; |
| writingModes.forEach(function(writingMode) { |
| testContents += "<div class='test-row'>"; |
| flexDirections.forEach(function(flexDirection) { |
| var containerClass = 'container ' + writingMode; |
| var flexboxClass = 'flexbox ' + flexDirection; |
| testContents += |
| "<div class='" + containerClass + "'>" + |
| "<div class='" + flexboxClass + "'>" + |
| "<div></div>" + |
| "</div>" + |
| "</div>"; |
| }); |
| testContents += "</div>"; |
| }); |
| |
| document.body.innerHTML += testContents; |
| |
| </script> |
| </body> |
| </html> |
