LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-002.html

   1 <!DOCTYPE html>
   2
   3   <meta charset="UTF-8">
   4
   5   <title>CSS-contain test: layout containment and forced breaks</title>
   6
   7   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   8   <meta content="forced breaks within layout containment do not propagate to the parent." name="assert">
   9
  10   <link href="reference/contain-layout-breaks-002-ref.html" rel="match">
  11
  12   <link href="https://drafts.csswg.org/css-contain-1/#containment-layout" rel="help">
  13   <link href="https://drafts.csswg.org/css-break-3/#forced-break" rel="help">
  14
  15   <style>
  16   article
  17     {
  18       column-fill: auto; /* columns are filled sequentially */
  19       column-gap: 0em;
  20       columns: 2 100px; /* 2 columns each 100px wide */
  21       float: left; /* to make multi-column element shrink-wrap */
  22       height: 400px; /* give more than enough to go wrong */
  23     }
  24
  25   div#yellow-normal
  26     {
  27       border-top: yellow solid 100px;
  28     }
  29
  30   div#blue-parent
  31     {
  32       border-top: blue solid 100px;
  33       contain: layout;
  34     }
  35
  36   div#orange-child
  37     {
  38       border-top: orange solid 100px;
  39       break-before: column;
  40     }
  41   </style>
  42
  43   <p>Test passes if there is a) a blue square below a yellow square and b) an orange square on the righthand side of the yellow square.
  44
  45   <article>
  46
  47     <div id="yellow-normal"></div>
  48
  49     <div id="blue-parent">
  50       <div id="orange-child"></div>
  51     </div>
  52
  53   </article>