src/third_party/WebKit/LayoutTests/fast/repaint/flexible-box-overflow.html

   1 <html>
   2 <head>
   3 <script type="text/javascript">
   4 if (window.internals)
   5     window.internals.settings.setForceCompositingMode(true);
   6 </script>
   7 <style>
   8 div.flexbox {
   9   height: 80px;
  10   width: 80px;
  11   background-color: yellow;
  12   display: -moz-box;
  13   display: -webkit-box;
  14   display: box;
  15   -moz-box-align: center;
  16   -webkit-box-align: center;
  17   box-align: center;
  18 }
  19
  20 div.horizontal {
  21   -moz-box-orient: horizontal;
  22   -webkit-box-orient: horizontal;
  23   box-orient: horizontal;
  24 }
  25
  26 div.vertical {
  27   -moz-box-orient: vertical;
  28   -webkit-box-orient: vertical;
  29   box-orient: vertical;
  30 }
  31
  32 div.bigbox {
  33   height: 98px;
  34   width: 98px;
  35   border: 1px solid black;
  36   margin-left: -10px;
  37   margin-top: -10px;
  38 }
  39 </style>
  40 </head>
  41 <body>
  42 <p>
  43     This is a test for regressions against <i><a href="https://bugs.webkit.org/show_bug.cgi?id=8056">http://bugzilla.opendarwin.org/show_bug.cgi?id=8056</a>
  44     Flexible boxes do not repaint their top, left and children's overflows</i>.
  45 </p>
  46 <hr>
  47 <div style="padding:10px;">
  48 <div class="flexbox horizontal">
  49 <div class="bigbox" style="white-space: pre;">Lorem ipsum dolor sit amet.</div>
  50 </div>
  51 </div>
  52 <div style="padding:10px; margin-top: 20px;">
  53 <div class="flexbox horizontal">
  54 <div class="bigbox"></div>
  55 </div>
  56 </div>
  57 <div style="padding:10px; margin-top: 20px;">
  58 <div class="flexbox vertical">
  59 <div class="bigbox"></div>
  60 </div>
  61 </div>
  62 <div style="padding:10px; margin-top: 20px; margin-bottom: 40px;">
  63 <div class="flexbox vertical">
  64 <div class="bigbox">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam et ipsum. Nam consectetuer mi eget velit.</div>
  65 </div>
  66 </div>
  67 </body>
  68 </html>