Blitz - WPT: contain-size-multicol-004.html

wpt / css / css-contain / contain-size-multicol-004.html

/css/css-contain/contain-size-multicol-004.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>CSS Test: 'contain: size' should force elements to be monolithic, i.e. to not fragment inside a multicol element.</title>
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
  <link rel="match" href="contain-size-multicol-004-ref.html">
  <style>
    .contain {
      contain:size;
    }
    .cols {
      column-count: 3;
      column-rule: 1px dotted blue;
      column-fill: auto;
      border: 2px solid blue;
      height: 50px;
      width: 300px;
    }
    .innerObject {
      height: 200px;
      width: 100px;
      background: orange;
    }
  </style>
</head>
  <body>
    <div class="cols">
      <div class="contain innerObject">
      </div>
    </div>
  </body>
</html>

/css/css-contain/contain-size-multicol-004-ref.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Reftest Reference</title>
  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
  <style>
    .cols {
      column-count: 3;
      column-rule: 1px dotted blue;
      column-fill: auto;
      border: 2px solid blue;
      height: 50px;
      width: 300px;
    }
    .innerObject {
      height: 200px;
      width: 100px;
      background: orange;
    }
  </style>
</head>
  <body>
    <div class="cols">
      <canvas class="innerObject">
        <!-- Note: We use a canvas object here as a generic reference for
             something monolithic/non-fragmentable. -->
      </canvas>
    </div>
  </body>
</html>