flexbox-mbp-horiz-002v.xhtml

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-flexbox/flexbox-mbp-horiz-002v.xhtml - WPT Dashboard Interop Dashboard

<?xml version="1.0" encoding="UTF-8"?>

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<!-- Testcase with margin/border/padding on flex items

     and with various writing-modes on the items. -->

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title>

      CSS Test: Testing margins, borders, and padding on flex items in a horizontal flex container

      (with a vertical writing-mode on the flex items).

    </title>

    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>

    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>

    <link rel="match" href="flexbox-mbp-horiz-002-ref.xhtml"/>

    <style>

      div { height: 100px; border: 0; }

      div.flexbox {

        width: 200px;

        font-size: 10px;

        display: flex;

      div.a {

        flex: 1 0 9px;

        background: lightgreen;

        margin-left: 1px;

        margin-right: 3px;

        border-style: dotted;

        border-left-width: 2px;

        border-right-width: 4px;

        padding-left: 5px;

        padding-right: 6px;

        writing-mode: vertical-lr;

      div.b {

        flex: 2 0 1px;

        background: yellow;

        margin-left: 2px;

        margin-right: 4px;

        border-style: dashed;

        border-left-width: 7px;

        border-right-width: 3px;

        padding-left: 1px;

        padding-right: 2px;

        writing-mode: vertical-rl;

      div.c {

        flex: 3 0 40px;

        background: orange;

        writing-mode: sideways-lr;

      div.flexNone {

        flex: none;

        background: pink;

        writing-mode: vertical-lr;

      div.flexBasis {

        flex: 0 0 20px;

        background: gray;

        writing-mode: sideways-rl;

      div.spacer {

        width: 15px;

        height: 15px;

        background: purple;

    </style>

  </head>

  <body>

    <div class="flexbox"><div class="a"></div><div class="b"/></div>

    <div class="flexbox"><div class="a"/><div class="c"/></div>

    <div class="flexbox"><div class="a"/>

      <div class="flexNone"><div class="spacer"/></div>

    </div>

    <div class="flexbox"><div class="b"/><div class="c"/></div>

    <div class="flexbox"><div class="b"/>

      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>

    </div>

    <div class="flexbox">

      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>

    </div>

  </body>

</html>