Forum Bugs

column-span in combination with float: column-bottom

John
hello,

"float: column-bottom" or "float: column-top" is used to float elements within columns to the top or the bottom, that's clear. but what's the expected result of elements which also have "column-span: all" set?
In the following example the element div.column-span-all has both "column-span: all" and "float: column-bottom" applied. The element ends up close to the bottom, but still overlapping with text of second column.

Here is the input file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Column Span all Div - Column break Test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

    @page {
      size: 210mm 297mm;
    }

    * {
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: normal;
      font-size: 8.5pt;
      line-height: 12pt;
    }

    section {
      column-count: 2;
      column-fill: auto;
      column-gap: 6mm;
    }

    h2 {
      /* this causes the error in div.column-span-all */
      column-break-before: always;
    }

    .column-span-all {
      column-span: all;
      height: 1cm;
      border: 1px solid black;
      float: column-bottom;
    }

    /* Coloring */
    body {
      background: yellow;
    }

    </style>
  </head>
  <body>
    <section>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab perferendis, doloribus porro rem dicta reprehenderit aliquam quis, qui assumenda provident ullam nobis. Vel pariatur expedita nihil doloremque labore illo, alias vero facilis, rem natus fuga temporibus aliquam aliquid placeat quos minima architecto atque quibusdam consequatur nesciunt accusantium eligendi praesentium nulla. Incidunt architecto sint neque culpa iusto exercitationem corporis optio nesciunt accusamus saepe mollitia laborum dolor numquam officiis recusandae doloremque, rerum dicta deserunt unde, excepturi animi eligendi sit. Voluptates voluptatem cum officia obcaecati soluta nostrum quaerat expedita, suscipit earum doloribus illo velit aspernatur molestiae, iste blanditiis perspiciatis. Optio expedita, eum adipisci.</p>
      <div class="column-span-all">div with column-span all</div>
      <p>excepturi animi eligendi sit. Voluptates voluptatem cum officia obcaecati soluta nostrum quaerat expedita, suscipit earum doloribus illo velit aspernatur molestiae, iste blanditiis perspiciatis. Optio expedita, eum adipisci.</p>
      <h2>new column</h2>
      <p>Starting section with margin-top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab perferendis, doloribus porro rem dicta reprehenderit aliquam quis, qui assumenda provident ullam nobis. Vel pariatur expedita nihil doloremque labore illo, alias vero facilis, rem natus fuga temporibus aliquam aliquid placeat quos minima architecto atque quibusdam consequatur nesciunt accusantium eligendi praesentium nulla. Incidunt architecto sint neque culpa iusto exercitationem corporis optio nesciunt accusamus saepe mollitia laborum dolor numquam officiis recusandae doloremque, rerum dicta deserunt unde, excepturi animi eligendi sit. Voluptates voluptatem cum officia obcaecati soluta nostrum quaerat expedita, suscipit earum doloribus illo velit aspernatur molestiae, iste blanditiis perspiciatis. Optio expedita, eum adipisci.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab perferendis, doloribus porro rem dicta reprehenderit aliquam quis, qui assumenda provident ullam nobis. Vel pariatur expedita nihil doloremque labore illo, alias vero facilis, rem natus fuga temporibus aliquam aliquid placeat quos minima architecto atque quibusdam consequatur nesciunt accusantium eligendi praesentium nulla. Incidunt architecto sint.</p>
      <p>Neque culpa iusto exercitationem corporis optio nesciunt accusamus saepe mollitia laborum dolor numquam officiis recusandae doloremque, rerum dicta deserunt unde, excepturi animi eligendi sit. Voluptates voluptatem cum officia obcaecati soluta nostrum quaerat expedita, suscipit earum doloribus illo velit aspernatur molestiae, iste blanditiis perspiciatis. Optio expedita, eum adipisci.</p>
      <p>Starting section with margin-top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab perferendis, doloribus porro rem dicta reprehenderit aliquam quis, qui assumenda provident ullam nobis. Vel pariatur expedita nihil doloremque labore illo, alias vero facilis, rem natus fuga temporibus aliquam aliquid placeat quos minima architecto atque quibusdam consequatur nesciunt accusantium eligendi praesentium nulla. Incidunt architecto sint neque culpa iusto exercitationem corporis optio nesciunt accusamus saepe mollitia laborum dolor numquam officiis recusandae doloremque, rerum dicta deserunt unde, excepturi animi eligendi sit. Voluptates voluptatem cum officia obcaecati soluta nostrum quaerat expedita, suscipit earum doloribus illo velit aspernatur molestiae, iste blanditiis perspiciatis. Optio expedita, eum adipisci.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab perferendis, doloribus porro rem dicta reprehenderit aliquam quis, qui assumenda provident ullam nobis. Vel pariatur expedita nihil doloremque labore illo, alias vero facilis, rem natus fuga temporibus aliquam aliquid placeat quos minima architecto atque quibusdam consequatur nesciunt accusantium eligendi praesentium nulla. Incidunt architecto sint.</p>
    </section>
  </body>
</html>


Input and Output file are attached as well.

Greetings,
John

  1. case-2.html5.0 kB
    input
  2. case-2.pdf23.6 kB
    output
markbrown
This is a bug. The element with "column-span: all" and "float: column-bottom" should be floated fully to the bottom of the columns, as happens when there is no forced break.

Thanks for the bug report, looks like more for the TODO list!
hallvord
Thanks indeed, I've grabbed this test too for the test case repository. :)

Announcement: repos for tests/utils

mikeday
This issue is now fixed in the latest build! Thanks again for letting us know. :)