Blitz - WPT: table-item-flex-percentage-min-width.html

wpt / css / css-flexbox / table-item-flex-percentage-min-width.html

/css/css-flexbox/table-item-flex-percentage-min-width.html

<!doctype html>
<title>Flexbox Test: display:table flex items with flex-shrink/flex-grow/flex-basis</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1674268">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1454330">
<link rel="match" href="table-item-flex-percentage-min-width-ref.html">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
  html,body {
    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
  }

  .container {
    display: flex;
    width: 180px;
    border: 1px solid blue;
  }

  .container > * {
    background-color: cyan;
    display: table;
  }
  .test1 > * {
    flex-shrink: 0;
    min-width: 100%;
  }
  .test2 > * {
    flex-shrink: 0;
    min-width: 50%;
  }
  .test3 > * {
    flex-shrink: 0.5;
    min-width: 50%;
  }
  .test4 > * {
    flex-grow: 0.1;
    min-width: 50%;
  }
  .test5 > * {
    flex-shrink: 0.2;
    flex-grow: 0.5;
    min-width: 10%;
  }
  .base > * {
    flex-basis: 100px;
  }
  .large-base {
    width: 100px;
  }
  .large-base > * {
    flex-basis: 200px;
  }
</style>

<div class="container test1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test5">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test1 base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test2 base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test3 base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test4 base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test5 base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test1 large-base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test2 large-base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test3 large-base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test4 large-base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test5 large-base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

/css/css-flexbox/table-item-flex-percentage-min-width-ref.html

<!doctype html>
<title>Reference: display:table flex items with flex-shrink/flex-grow/flex-basis</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1674268">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
  html,body {
    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
  }

  .container {
    display: flex;
    width: 180px;
    border: 1px solid blue;
  }

  .container > * {
    background-color: cyan;
    display: block;
  }
  .test1 > * {
    flex-shrink: 0;
    min-width: 100%;
  }
  .test2 > * {
    flex-shrink: 0;
    min-width: 50%;
  }
  .test3 > * {
    flex-shrink: 0.5;
    min-width: 50%;
  }
  .test4 > * {
    flex-grow: 0.1;
    min-width: 50%;
  }
  .test5 > * {
    flex-shrink: 0.2;
    flex-grow: 0.5;
    min-width: 10%;
  }
  .base > * {
    flex-basis: 100px;
  }
  .large-base {
    width: 100px;
  }
  .large-base > * {
    flex-basis: 200px;
  }
</style>

<div class="container test1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test5">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test1 base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test2 base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test3 base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test4 base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test5 base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test1 large-base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test2 large-base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test3 large-base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test4 large-base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div class="container test5 large-base">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>