third_party/WebKit/LayoutTests/fast/multicol/flipped-blocks-border-after.html

   1 <!DOCTYPE html>
   2 <style>
   3     .test { position: absolute; }
   4     .pos1 { left: 50px; top: 50px;}
   5     .pos2 { left: 250px; top: 50px;}
   6     .pos3 { left: 50px; top: 300px;}
   7     .pos4 { left: 250px; top: 300px;}
   8
   9     .multicol {
  10         border: 0 solid black;
  11         background-color: red;
  12         width: 100px;
  13         height: 100px;
  14         -webkit-column-gap: 0;
  15         -webkit-columns: 2;
  16     }
  17     .multicol > div {
  18         background-color: green;
  19     }
  20
  21     .horizontal_bt {
  22         -webkit-writing-mode: horizontal-bt;
  23         border-top-width: 50px;
  24     }
  25     .horizontal_tb {
  26         -webkit-writing-mode: horizontal-tb;
  27         border-bottom-width: 50px;
  28     }
  29     .vertical_rl {
  30         -webkit-writing-mode: vertical-rl;
  31         border-left-width: 50px;
  32     }
  33     .vertical_lr {
  34         -webkit-writing-mode: vertical-lr;
  35         border-right-width: 50px;
  36     }
  37     .horizontal_bt > div, .horizontal_tb > div {
  38         height: 100px;
  39     }
  40     .vertical_lr > div, .vertical_rl > div {
  41         width: 100px;
  42     }
  43     .break_before {
  44          -webkit-column-break-before: always;
  45     }
  46 </style>
  47 <p>
  48     There should be four green squares below, plus a large black border on one side, as
  49     indicated. There should be no red.
  50 </p>
  51 <div class="test pos1">
  52     <p>Border above</p>
  53     <div class="multicol horizontal_bt">
  54         <div></div><div class="break_before"></div>
  55     </div>
  56 </div>
  57 <div class="test pos2">
  58     <p>Border below</p>
  59     <div class="multicol horizontal_tb">
  60         <div></div><div class="break_before"></div>
  61     </div>
  62 </div>
  63 <div class="test pos3">
  64     <p>Border left</p>
  65     <div class="multicol vertical_rl">
  66         <div></div><div class="break_before"></div>
  67     </div>
  68 </div>
  69 <div class="test pos4">
  70     <p>Border right</p>
  71     <div class="multicol vertical_lr">
  72         <div></div><div class="break_before"></div>
  73     </div>
  74 </div>