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

   1 <html>
   2 <head>
   3 <style>
   4 div.flexbox {
   5   height: 80px;
   6   width: 80px;
   7   background-color: yellow;
   8   display: -moz-box;
   9   display: -webkit-box;
  10   display: box;
  11   -moz-box-align: center;
  12   -webkit-box-align: center;
  13   box-align: center;
  14 }
  15
  16 div.horizontal {
  17   -moz-box-orient: horizontal;
  18   -webkit-box-orient: horizontal;
  19   box-orient: horizontal;
  20 }
  21
  22 div.vertical {
  23   -moz-box-orient: vertical;
  24   -webkit-box-orient: vertical;
  25   box-orient: vertical;
  26 }
  27
  28 div.bigbox {
  29   height: 98px;
  30   width: 98px;
  31   border: 1px solid black;
  32   margin-left: -10px;
  33   margin-top: -10px;
  34 }
  35 </style>
  36 </head>
  37 <body>
  38 <p>
  39     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>
  40     Flexible boxes do not repaint their top, left and children's overflows</i>.
  41 </p>
  42 <hr>
  43 <div style="padding:10px;">
  44 <div class="flexbox horizontal">
  45 <div class="bigbox" style="white-space: pre;">Lorem ipsum dolor sit amet.</div>
  46 </div>
  47 </div>
  48 <div style="padding:10px; margin-top: 20px;">
  49 <div class="flexbox horizontal">
  50 <div class="bigbox"></div>
  51 </div>
  52 </div>
  53 <div style="padding:10px; margin-top: 20px;">
  54 <div class="flexbox vertical">
  55 <div class="bigbox"></div>
  56 </div>
  57 </div>
  58 <div style="padding:10px; margin-top: 20px; margin-bottom: 40px;">
  59 <div class="flexbox vertical">
  60 <div class="bigbox">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam et ipsum. Nam consectetuer mi eget velit.</div>
  61 </div>
  62 </div>
  63 </body>
  64 </html>