<!DOCTYPE html>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
<link rel="help" href="https://crbug.com/1445937">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<meta name="assert"
  content="Changing flex intrinsic sizing algorithm doesn't break any of these cases." />

<style>
  section.bugreport {
    outline: 1px solid grey;
    margin-bottom: 25px;
    padding: 3px;
  }

  #gmail .flex {
    display: flex;
    width: min-content;
    outline: 2px solid;
    margin-bottom: 10px;
  }

  #gmail span.orange100 {
    float: left;
    height: 25px;
    width: 100px;
    background: orange;
  }

  #bug1454306 .fourUpList {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    width: 800px;
    background: yellow;
  }

  #bug1454306 .thumbnail-list--item {
    display: flex;
    width: 100%;
    outline: 1px solid;
  }

  #bug1454306 .thumbnail-list--item-photo {
    height: 50px;
    width: 50px;
  }

  #bug1454306 .thumbnail-list--item-header {
    flex: 1 0 calc(70% - 10.5px)
  }
</style>

<section id="gmail" class="bugreport">
  <p>https://crbug.com/1445937 We need to see a 100x100 orange square, not a
    400x25 orange rectangle.</p>
  <div class="flex" data-expected-width="100">
    <!-- one item with very negative desired flex fraction -->
    <div>
      <span class="orange100"></span>
      <span class="orange100"></span>
      <span class="orange100"></span>
      <span class="orange100"></span>
    </div>
    <!-- second item with desired flex fraction 0 -->
    <div></div>
  </div>
</section>

<section id="bug1454306" class="bugreport">
  <p>https://crbug.com/1454306 The flexboxes' min-content size need to be
    less than 1/4 the width of the grid so that each flexbox width is 1/4 of the
    grid width.</p>

  <!-- this case needs this example item to contribute min-content (not
    flex-basis aka max-content during intrinsic sizing) to container's min-content

    <item style="flex: 1 0 calc(70% - 10.5px)">
      max-content larger than flex basis
    </item>
  -->

  <div class=fourUpList>

    <div class=thumbnail-list--item data-expected-width="200">
      <div class=thumbnail-list--item-header>lorem ipsum blah blah blah</div>
      <div class=thumbnail-list--item-photo></div>
    </div>

    <div class=thumbnail-list--item data-expected-width="200">
      <div class=thumbnail-list--item-header>
        Peets Coffee announces plans to move Oakland
      </div>
      <div class=thumbnail-list--item-photo></div>
    </div>

  </div>
</section>

<script>
  checkLayout('.flex');
  checkLayout('#bug1454306');
</script>
