wpt / css / css-align / self-alignment / self-align-safe-unsafe-grid-002.html

Status: PASS | Duration: 8ms | Subtests: 1/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

TestRefTest SourceRef Source

/css/css-align/self-alignment/self-align-safe-unsafe-grid-002.html

<!DOCTYPE html>
<title>Safe vs Unsafe justify-self in Grid Layout</title>
<link rel="help" href="https://www.w3.org/TR/css-align-3/#overflow-values">
<link rel="help" href="https://www.w3.org/TR/css-grid-1/row-align">
<link rel="match" href="self-align-safe-unsafe-grid-002-ref.html">
<style>
  /* Label things */
  body > div {
    display: flow-root;
  }
  body > div::before {
    display: block;
    content: attr(class);
    font-size: 10px;
    margin-top: 10px;
  }

  /* Test Framework */
  .container {
    border: solid aqua;
    margin: 10px;
    float: left;
    width: 30px;
    height: 30px;
    display: grid;
    grid: 100% / 100%;
  }

  .item {
    background: orange;
    height: 100%;
  }

  /* Test */
  .small .item {
    width: 20px;
  }
  .large .item {
    width: 40px;
  }

  .center     { justify-self: center; }
  .start      { justify-self: start; }
  .end        { justify-self: end; }
  .self-start { justify-self: self-start; }
  .self-end   { justify-self: self-end; }
  .flex-start { justify-self: flex-start; }
  .flex-end   { justify-self: flex-end; }

  .safe .center     { justify-self: safe center; }
  .safe .start      { justify-self: safe start; }
  .safe .end        { justify-self: safe end; }
  .safe .self-start { justify-self: safe self-start; }
  .safe .self-end   { justify-self: safe self-end; }
  .safe .flex-start { justify-self: safe flex-start; }
  .safe .flex-end   { justify-self: safe flex-end; }

  .safe .center     { justify-self: safe center; }
  .safe .start      { justify-self: safe start; }
  .safe .end        { justify-self: safe end; }
  .safe .self-start { justify-self: safe self-start; }
  .safe .self-end   { justify-self: safe self-end; }
  .safe .flex-start { justify-self: safe flex-start; }
  .safe .flex-end   { justify-self: safe flex-end; }
</style>

<div class="default small">
  <div class="container">
    <div class="item normal"></div>
  </div>
  <div class="container">
    <div class="item center"></div>
  </div>
  <div class="container">
    <div class="item start"></div>
  </div>
  <div class="container">
    <div class="item end"></div>
  </div>
  <div class="container">
    <div class="item self-start"></div>
  </div>
  <div class="container">
    <div class="item self-end"></div>
  </div>
  <div class="container">
    <div class="item flex-start"></div>
  </div>
  <div class="container">
    <div class="item flex-end"></div>
  </div>
</div>

<div class="default large">
  <div class="container">
    <div class="item normal"></div>
  </div>
  <div class="container">
    <div class="item center"></div>
  </div>
  <div class="container">
    <div class="item start"></div>
  </div>
  <div class="container">
    <div class="item end"></div>
  </div>
  <div class="container">
    <div class="item self-start"></div>
  </div>
  <div class="container">
    <div class="item self-end"></div>
  </div>
  <div class="container">
    <div class="item flex-start"></div>
  </div>
  <div class="container">
    <div class="item flex-end"></div>
  </div>
</div>

<div class="unsafe large">
  <div class="container">
    <div class="item normal"></div>
  </div>
  <div class="container">
    <div class="item center"></div>
  </div>
  <div class="container">
    <div class="item start"></div>
  </div>
  <div class="container">
    <div class="item end"></div>
  </div>
  <div class="container">
    <div class="item self-start"></div>
  </div>
  <div class="container">
    <div class="item self-end"></div>
  </div>
  <div class="container">
    <div class="item flex-start"></div>
  </div>
  <div class="container">
    <div class="item flex-end"></div>
  </div>
</div>

<div class="safe large">
  <div class="container">
    <div class="item normal"></div>
  </div>
  <div class="container">
    <div class="item center"></div>
  </div>
  <div class="container">
    <div class="item start"></div>
  </div>
  <div class="container">
    <div class="item end"></div>
  </div>
  <div class="container">
    <div class="item self-start"></div>
  </div>
  <div class="container">
    <div class="item self-end"></div>
  </div>
  <div class="container">
    <div class="item flex-start"></div>
  </div>
  <div class="container">
    <div class="item flex-end"></div>
  </div>
</div>

/css/css-align/self-alignment/self-align-safe-unsafe-grid-002-ref.html

<!DOCTYPE html>
<title>Reftest Reference</title>
<style>
  /* Label things */
  body > div {
    display: flow-root;
  }
  body > div::before {
    display: block;
    content: attr(class);
    font-size: 10px;
    margin-top: 10px;
  }

  /* Test Framework */
  .container {
    border: solid aqua;
    margin: 10px;
    float: left;
    width: 30px;
    height: 30px;
  }

  .item {
    background: orange;
    height: 100%;
  }

  /* Test */
  .small .item {
    width: 20px;
  }
  .large .item {
    width: 40px;
  }

  .small .center
    { margin-left: 5px }
  .small .end,
  .small .self-end,
  .small .flex-end
    { margin-left: 10px }
  .large .center
    { margin-left: -5px; }
  .large .end,
  .large .self-end,
  .large .flex-end
    { margin-left: -10px; }
  .large.safe .item
    { margin-left: 0; }
</style>

<div class="default small">
  <div class="container">
    <div class="item normal"></div>
  </div>
  <div class="container">
    <div class="item center"></div>
  </div>
  <div class="container">
    <div class="item start"></div>
  </div>
  <div class="container">
    <div class="item end"></div>
  </div>
  <div class="container">
    <div class="item self-start"></div>
  </div>
  <div class="container">
    <div class="item self-end"></div>
  </div>
  <div class="container">
    <div class="item flex-start"></div>
  </div>
  <div class="container">
    <div class="item flex-end"></div>
  </div>
</div>

<div class="default large">
  <div class="container">
    <div class="item normal"></div>
  </div>
  <div class="container">
    <div class="item center"></div>
  </div>
  <div class="container">
    <div class="item start"></div>
  </div>
  <div class="container">
    <div class="item end"></div>
  </div>
  <div class="container">
    <div class="item self-start"></div>
  </div>
  <div class="container">
    <div class="item self-end"></div>
  </div>
  <div class="container">
    <div class="item flex-start"></div>
  </div>
  <div class="container">
    <div class="item flex-end"></div>
  </div>
</div>

<div class="unsafe large">
  <div class="container">
    <div class="item normal"></div>
  </div>
  <div class="container">
    <div class="item center"></div>
  </div>
  <div class="container">
    <div class="item start"></div>
  </div>
  <div class="container">
    <div class="item end"></div>
  </div>
  <div class="container">
    <div class="item self-start"></div>
  </div>
  <div class="container">
    <div class="item self-end"></div>
  </div>
  <div class="container">
    <div class="item flex-start"></div>
  </div>
  <div class="container">
    <div class="item flex-end"></div>
  </div>
</div>

<div class="safe large">
  <div class="container">
    <div class="item normal"></div>
  </div>
  <div class="container">
    <div class="item center"></div>
  </div>
  <div class="container">
    <div class="item start"></div>
  </div>
  <div class="container">
    <div class="item end"></div>
  </div>
  <div class="container">
    <div class="item self-start"></div>
  </div>
  <div class="container">
    <div class="item self-end"></div>
  </div>
  <div class="container">
    <div class="item flex-start"></div>
  </div>
  <div class="container">
    <div class="item flex-end"></div>
  </div>
</div>