row-intrinsic-inline-container-size.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-grid/masonry/tentative/intrinsic-sizing/row-intrinsic-inline-container-size.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<link rel="help" href="https://drafts.csswg.org/css-grid-3">

<link href="resources/masonry.css" rel="stylesheet">

<link rel="match" href="row-intrinsic-inline-container-size-ref.html">

<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com">

<style>

.masonry {

    masonry-direction: row;

    grid-template-rows: repeat(3, 20px);

    display: masonry;

    background: gray;

    position: relative;

    item-tolerance: 0;

.max-content-item {

    width: max-content;

    height: 20px;

</style>

<body>

  <p>Test that masonry containers are correctly sized when an intrinsic inline size is specified.</p>

  <div class="masonry" style="width: max-content;">

    <div class="first-track max-content-item">This is some text</div>

    <div class="second-track max-content-item">Some larger words in this sentence</div>

    <div class="third-track max-content-item">The cat cannot be separated from milk</div>

  </div>

  <div class="masonry" style="width: min-content;">

    <div class="first-track max-content-item">This is some text</div>

    <div class="second-track max-content-item">Some larger words in this sentence</div>

    <div class="third-track max-content-item">The cat cannot be separated from milk</div>

  </div>

  <div class="masonry">

    <div class="first-track max-content-item">This is some text</div>

    <div class="second-track max-content-item">Some larger words in this sentence</div>

    <div class="third-track max-content-item">The cat cannot be separated from milk</div>

  </div>

</body>

</html>