| <!DOCTYPE html> |
| <style> |
| #flexbox { |
| display: flex; |
| flex-flow: column; |
| height: 300px; |
| width: 200px; |
| } |
| #left { |
| flex: 1; |
| background-color: yellow; |
| min-height: 0; |
| } |
| #content { |
| flex: 1; |
| border: 5px solid blue; |
| min-height: 0; |
| } |
| #content > div { |
| height: 350px; |
| background-color: orange; |
| } |
| </style> |
| <script src="../resources/text-based-repaint.js"></script> |
| <script> |
| // This test makes sure that we repaint the right region of a flexbox when |
| // changing the flex values. Only the middle of the test page should be |
| // repainted. If the top of the test page (above the flexbox) is repainted, |
| // this test fails. |
| function setFlex(value) |
| { |
| document.getElementById("content").style.flex = value; |
| } |
| |
| window.testIsAsync = true; |
| window.onload = runRepaintAndPixelTest; |
| |
| function repaintTest() { |
| requestAnimationFrame(function() { |
| setFlex(4.6); |
| document.getElementById("content").offsetTop; |
| requestAnimationFrame(function() { |
| setFlex(5); |
| finishRepaintTest(); |
| }, 1) |
| }, 1) |
| }; |
| </script> |
| <div style="height: 60px"></div> |
| <div id="flexbox" dir="rtl"> |
| <div id="left"></div> |
| <div id="content"><div></div></div> |
