Quelle webkit-box-direction-2.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/layout/reftests/webkit-box/webkit-box-direction-2.html

<!DOCTYPE html>

<html>
<head>
  <title>
    CSS Test: "-webkit-box-direction" property
    in a -webkit-box with default writing-mode
    and some margin/border/padding on flex items
  </title>
  <style>
    .box {
      display: -webkit-box;
      border: 1px solid black;
      margin: 5px 20px;
      float: left; /* For testing in "rows" */
      font: 10px serif;
    }
    .box > *:nth-child(1) {
      background: turquoise;
      margin: 2px 4px 6px 8px;
      border: 1px solid blue;
      padding: 4px 3px 2px 1px;
    }
    .box > *:nth-child(2) {
      background: salmon;
      margin: 9px 3px 7px 5px;
      border: 2px solid purple;
      padding: 6px 7px 8px 9px;
    }

    .rtl { direction: rtl; }

    .horizNormal {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
    }
    .horizReverse {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
    }
    .vertNormal {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
    }
    .vertReverse {
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
    }
    br { clear: both; }
  </style>
</head>
<body>
  
  <div class="box horizNormal">
    <div>a</div><div>b</div>
  </div>
  <div class="box horizReverse">
    <div>a</div><div>b</div>
  </div>

  <br>

  
  <div class="box horizNormal rtl">
    <div>a</div><div>b</div>
  </div>
  <div class="box horizReverse rtl">
    <div>a</div><div>b</div>
  </div>

  <br>

  
  <div class="box vertNormal">
    <div>a</div><div>b</div>
  </div>
  <div class="box vertReverse">
    <div>a</div><div>b</div>
  </div>

  <br>

  
  <div class="box vertNormal rtl">
    <div>a</div><div>b</div>
  </div>
  <div class="box vertReverse rtl">
    <div>a</div><div>b</div>
  </div>
</body>
</html>

Messung V0.5

¤ Dauer der Verarbeitung: 0.10 Sekunden (vorverarbeitet) ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.