The Tor Browser: layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-3.xhtml@925c144e1f1f

     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 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 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-ref.xhtml"/>

    13     <style>

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

    15       div.flexbox {

    16         width: 200px;

    17         display: flex;

    18         margin-bottom: 2px;

    19       }

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

    22       .borderA {

    23         border-style: dashed;

    24         border-color: purple;

    25         border-top-width: 6px;

    26         border-right-width: 4px;

    27         border-bottom-width: 2px;

    28         border-left-width: 8px;

    29       }

    31       .borderB {

    32         border-style: dashed;

    33         border-color: purple;

    34         border-top-width: 4px;

    35         border-right-width: 5px;

    36         border-bottom-width: 6px;

    37         border-left-width: 7px;

    38       }

    40       .paddingA {

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

    42       }

    44       .paddingB {

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

    46       }

    48       div.child1 {

    49         flex: 1 0 24px;

    50         background: lightgreen;

    51         border-style: dotted;

    52         border-left-width: 2px;

    53         border-right-width: 4px;

    54       }

    55       div.child2 {

    56         flex: 2 0 10px;

    57         background: yellow;

    58         border-style: dashed;

    59         border-left-width: 7px;

    60         border-right-width: 3px;

    61       }

    62     </style>

    63   </head>

    64   <body>

    65     <div class="flexbox borderA"

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

    67     <div class="flexbox borderA paddingA"

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

    69     <div class="flexbox borderA paddingB"

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

    71     <div class="flexbox borderB"

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

    73     <div class="flexbox borderB paddingA"

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

    75     <div class="flexbox borderB paddingB"

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

    77     <div class="flexbox paddingA"

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

    79     <div class="flexbox paddingB"

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

    81   </body>

    82 </html>

The Tor Browser / file revision