Blitz - WPT: flexbox-align-self-vert-rtl-001.xhtml

wpt / css / css-flexbox / flexbox-align-self-vert-rtl-001.xhtml

/css/css-flexbox/flexbox-align-self-vert-rtl-001.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- Testcase for align-items / align-self behavior, with all the possible
     values included on different items within a flex container, and with
     "direction: rtl" to swap the horizontal (cross) axis. -->
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical flex container with 'direction: rtl'</title>
    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
    <link rel="match" href="flexbox-align-self-vert-rtl-001-ref.xhtml"/>
    <meta name="fuzzy" content="maxDifference=0-120;totalPixels=0-101"/>
    <style>
      .flexbox {
        border: 1px solid blue;
        width: 200px;
        display: flex;
        flex-direction: column;
        direction: rtl;
        font-family: sans-serif;
        font-size: 10px;

        /* Any children whose align-self is 'auto' (or unspecified, or
           initial) will end up taking this value from us: */
        align-items: center;

        /* Any children whose align-self is 'inherit' will end up
           inheriting this value from us: */
        align-self: flex-end;
      }

      .big {
        font-size: 20px;
        width: 50px;
      }

      /* Classes for each of the various align-self values */
      .flex-start {
        background: lime;
        align-self: flex-start;
      }
      .flex-end {
        background: orange;
        align-self: flex-end;
      }
      .center {
        background: lightblue;
        align-self: center;
      }
      .baseline {
        background: teal;
        align-self: baseline;
      }
      .stretch {
        background: pink;
        align-self: stretch;
      }
      .auto {
        background: yellow;
        align-self: auto;
      }
      .unspecified {
        background: lightgreen;
      }
      .initial {
        background: aqua;
        align-self: initial;
      }
      .inherit {
        background: violet;
        align-self: inherit;
      }
   </style>
  </head>
  <body>
    <div class="flexbox">
      <div class="flex-start">start</div>
      <div class="flex-start big">a b c d e f</div>
      <div class="flex-end">end</div>
      <div class="flex-end big">a b c d e f</div>
      <div class="center">center</div>
      <div class="center big">a b c d e f</div>
      <div class="baseline">base</div>
      <div class="baseline big">abc</div>
      <div class="stretch">stretch</div>
      <div class="stretch big">a b c d e f</div>
      <div class="auto">auto</div>
      <div class="unspecified">unspec</div>
      <div class="initial">initial</div>
      <div class="inherit">inherit</div>
    </div>
  </body>
</html>

/css/css-flexbox/flexbox-align-self-vert-rtl-001-ref.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- Reference case for align-items / align-self behavior in a vertical
     "direction: rtl" flex container, using blocks in place of flex items and
     using float and width keywords to emulate the align-items / align-self
     properties. -->
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>CSS Reftest Reference</title>
    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
    <style>
      .flexbox {
        border: 1px solid blue;
        width: 200px;
        direction: rtl;
        font-family: sans-serif;
        font-size: 10px;
      }

      div.big {
        font-size: 20px;
        width: 50px;
      }

      div {
        clear: both;
      }

      /* Classes for each of the various align-self values */
      .flex-start {
        background: lime;
        float: right;
      }
      .flex-end {
        background: orange;
        float: left;
      }
      .center {
        background: lightblue;
        margin: auto;
      }
      .baseline {
        background: teal;
        float: left;
      }
      .stretch {
        background: pink;
        width: 100%;
      }
      .auto {
        background: yellow;
        margin: auto;
      }
      .unspecified {
        background: lightgreen;
        margin: auto;
      }
      .initial {
        background: aqua;
        margin: auto;
      }
      .inherit {
        background: violet;
        float: left;
      }

      <!-- We center shrinkwrapped text by putting it into an inline-block, and
           then wrapping that inline-block in a helper-div that has
           "text-align:center" set. -->
      .centerParent {
        text-align: center;
      }
      .centerParent > * {
        display: inline-block;
        text-align: left; /* Keep parent's centering from tweaking my text */
      }

      .baselineParent {
        float: right;
      }
   </style>
  </head>
  <body>
    <div class="flexbox">
      <div class="flex-start">start</div>
      <div class="flex-start big">a b c d e f</div>
      <div class="flex-end">end</div>
      <div class="flex-end big">a b c d e f</div>
      <div class="centerParent">
        <div class="center">center</div>
      </div>
      <div class="center big">a b c d e f</div>
      <div class="baselineParent">
        <div class="baseline">base</div>
        <div class="baseline big">abc</div>
      </div>
      <div class="stretch">stretch</div>
      <div class="stretch big">a b c d e f</div>
      <div class="centerParent">
        <div class="auto">auto</div>
      </div>
      <div class="centerParent">
        <div class="unspecified">unspec</div>
      </div>
      <div class="centerParent">
        <div class="initial">initial</div>
      </div>
      <div class="inherit">inherit</div>
      <!-- Since the last div is floated, the container doesn't include
           its height by default. So we add some invisible hacky text (of the
           same font) to make sure our container is tall enough. -->
      <span style="visibility:hidden">hacky text</span>
    </div>
  </body>
</html>