layout/reftests/flexbox/pagination/flexbox-single-column-vertical-lr-5.html

   1 <!DOCTYPE html>
   2 <!-- Any copyright is dedicated to the Public Domain.
   3      http://creativecommons.org/publicdomain/zero/1.0/ -->
   4 <html>
   5   <meta charset="utf-8">
   6   <title>CSS Flexbox Test: Fragmentation of block-size:auto single-line column flex container in a zero block-size multicol</title>
   7   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   8   <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
   9   <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
  10   <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
  11   <link rel="match" href="flexbox-single-column-vertical-lr-5-ref.html">
  12   <meta name="assert" content="This test verifies fragmentation of flex containers can make progress in a zero block-size multicol.">
  13
  14   <style>
  15   html {
  16     writing-mode: vertical-lr;
  17   }
  18   .multicol {
  19     column-count: 2;
  20     block-size: 0;
  21     border: 1px solid black;
  22     margin-block-end: 30px; /* Just to separate each sub-testcase visually. */
  23   }
  24
  25   .flexContainer {
  26     display: flex;
  27     flex-wrap: nowrap;
  28     flex-direction: column;
  29     padding: 1px;
  30   }
  31
  32   .boxDecorationBreak {
  33     padding: 5px;
  34     box-decoration-break: clone;
  35   }
  36
  37   </style>
  38
  39   <body>
  40     <!-- Basic one with padding on the flex container.-->
  41     <div class="multicol">
  42       <div class="flexContainer">
  43         <div>abc</div><div>def</div>
  44       </div>
  45     </div>
  46
  47     <!-- Larger padding and box-decoration-break:clone on the flex container.-->
  48     <div class="multicol">
  49       <div class="flexContainer boxDecorationBreak">
  50         <div>abc</div><div>def</div>
  51       </div>
  52     </div>
  53   </body>
  54 </html>