The Tor Browser: layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-3-reverse.xhtml@7540298fafa1

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

     2 <!--

     3      Any copyright is dedicated to the Public Domain.

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

     5 -->

     6 <!-- Testcase with border/padding on a row-reverse flex container and on its children -->

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

     8   <head>

     9     <title>CSS Test: Testing borders and padding on a row-reverse horizontal flex container and its flex items</title>

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

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

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

    13     <style>

    14       div { height: 20px; border: 0; }

    15       div.flexbox {

    16         width: 200px;

    17         display: flex;

    18         flex-direction: row-reverse;

    19         margin-bottom: 2px;

    20       }

    22       <!-- customizations for flex container border/padding -->

    23       .borderA {

    24         border-style: dashed;

    25         border-color: purple;

    26         border-top-width: 6px;

    27         border-right-width: 4px;

    28         border-bottom-width: 2px;

    29         border-left-width: 8px;

    30       }

    32       .borderB {

    33         border-style: dashed;

    34         border-color: purple;

    35         border-top-width: 4px;

    36         border-right-width: 5px;

    37         border-bottom-width: 6px;

    38         border-left-width: 7px;

    39       }

    41       .paddingA {

    42         padding: 4px 3px 2px 1px;

    43       }

    45       .paddingB {

    46         padding: 8px 11px 14px 17px;

    47       }

    49       div.child1 {

    50         flex: 1 0 24px;

    51         background: lightgreen;

    52         border-style: dotted;

    53         border-left-width: 2px;

    54         border-right-width: 4px;

    55       }

    56       div.child2 {

    57         flex: 2 0 10px;

    58         background: yellow;

    59         border-style: dashed;

    60         border-left-width: 7px;

    61         border-right-width: 3px;

    62       }

    63     </style>

    64   </head>

    65   <body>

    66     <div class="flexbox borderA"

    67          ><div class="child1"/><div class="child2"/></div>

    68     <div class="flexbox borderA paddingA"

    69          ><div class="child1"/><div class="child2"/></div>

    70     <div class="flexbox borderA paddingB"

    71          ><div class="child1"/><div class="child2"/></div>

    72     <div class="flexbox borderB"

    73          ><div class="child1"/><div class="child2"/></div>

    74     <div class="flexbox borderB paddingA"

    75          ><div class="child1"/><div class="child2"/></div>

    76     <div class="flexbox borderB paddingB"

    77          ><div class="child1"/><div class="child2"/></div>

    78     <div class="flexbox paddingA"

    79          ><div class="child1"/><div class="child2"/></div>

    80     <div class="flexbox paddingB"

    81          ><div class="child1"/><div class="child2"/></div>

    82   </body>

    83 </html>

The Tor Browser / file revision