testing/web-platform/tests/css/css-position/multicol/static-position/vlr-ltr-rtl-in-multicol.tentative.html

   1 <!DOCTYPE html>
   2 <link rel="help" href="https://drafts.csswg.org/css2/visudet.html#abs-non-replaced-width" />
   3 <link rel="match" href="vlr-in-multicol-ref.html">
   4 <meta name="assert" content="This test checks the static position of an out of flow absolute positioned element, under various conditions." />
   5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
   6 <style>
   7   body { writing-mode: vertical-lr; }
   8   .container {
   9     position: relative;
  10     background: green;
  11     font: 16px/1 Ahem;
  12     inline-size: 80px;
  13     block-size: 100px;
  14     color: green;
  15   }
  16   .multicol {
  17     column-count: 2;
  18     column-fill: auto;
  19     column-gap: 0;
  20     block-size: 100px;
  21     inline-size: 160px;
  22   }
  23   .red { color: red; }
  24   .cb { position: relative; }
  25   .rtl { direction: rtl; }
  26   .ltr { direction: ltr; }
  27   .inline { display: inline; }
  28   .abs { position: absolute; }
  29 </style>
  30
  31 There should be no red.
  32 <div class="multicol">
  33   <div class="container ltr">
  34     X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span>
  35   </div>
  36
  37   <div class="container ltr">
  38     X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
  39   </div>
  40
  41   <div class="container ltr">
  42     X<span class="rtl cb">X<div class="abs inline">XX</div><span class="red">XX</span></span>
  43   </div>
  44
  45   <div class="container ltr">
  46     X<span class="rtl cb">X<div class="abs block">XX</div><br><span class="red">XX</span></span>
  47   </div>
  48
  49   <div class="container ltr">
  50     <span class="cb">X<span class="rtl">X<div class="abs inline">XX</div><span class="red">XX</span></span></span>
  51   </div>
  52
  53   <div class="container ltr">
  54     <span class="cb">X<span class="rtl">X<div class="abs block">XX</div><br><span class="red">XX</span></span></span>
  55   </div>
  56 </div>