third_party/WebKit/LayoutTests/css3/flexbox/repaint-rtl-column.html

   1 <!DOCTYPE html>
   2 <style>
   3 #flexbox {
   4     display: flex;
   5     flex-flow: column;
   6     height: 300px;
   7     width: 200px;
   8 }
   9 #left {
  10     flex: 1;
  11     background-color: yellow;
  12     min-height: 0;
  13 }
  14 #content {
  15     flex: 1;
  16     border: 5px solid blue;
  17     min-height: 0;
  18 }
  19 #content > div {
  20     height: 350px;
  21     background-color: orange;
  22 }
  23 </style>
  24 <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
  25 <script>
  26 // This test makes sure that we repaint the right region of a flexbox when
  27 // changing the flex values. Only the middle of the test page should be
  28 // repainted. If the top of the test page (above the flexbox) is repainted,
  29 // this test fails.
  30 function setFlex(value)
  31 {
  32     document.getElementById("content").style.flex = value;
  33 }
  34
  35 window.testIsAsync = true;
  36 window.onload = runRepaintTest;
  37
  38 function repaintTest() {
  39     requestAnimationFrame(function() {
  40         setFlex(4.6);
  41         document.getElementById("content").offsetTop;
  42         requestAnimationFrame(function() {
  43             setFlex(5);
  44             finishRepaintTest();
  45         }, 1)
  46     }, 1)
  47 };
  48 </script>
  49 <div style="height: 60px"></div>
  50 <div id="flexbox" dir="rtl">
  51 <div id="left"></div>
  52 <div id="content"><div></div></div>