The Tor Browser / annotate

layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-1.html@b8a032363ba2 (annotated)

layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-1.html

Thu, 22 Jan 2015 13:21:57 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 22 Jan 2015 13:21:57 +0100
branch
TOR_BUG_9701
changeset 15
b8a032363ba2
permissions
-rw-r--r--

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

michael@0 1 <!DOCTYPE html>
michael@0 2 <!--
michael@0 3 Any copyright is dedicated to the Public Domain.
michael@0 4 http://creativecommons.org/publicdomain/zero/1.0/
michael@0 5 -->
michael@0 6 <html>
michael@0 7 <head>
michael@0 8 <title>CSS Test: Testing all the values of the "flex-flow" shorthand property, with 4 flex items in each container</title>
michael@0 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
michael@0 10 <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#flex-flow-property">
michael@0 11 <link rel="match" href="flexbox-flex-flow-1-ref.html">
michael@0 12 <meta charset="utf-8">
michael@0 13 <style>
michael@0 14 .flexContainer {
michael@0 15 display: flex;
michael@0 16 height: 60px;
michael@0 17 width: 60px;
michael@0 18 font: 10px sans-serif;
michael@0 19 background: yellow;
michael@0 20 float: left;
michael@0 21 border: 1px solid black;
michael@0 22 }
michael@0 23 .flexContainer > * {
michael@0 24 border: 1px dotted gray;
michael@0 25 width: 28px;
michael@0 26 height: 28px;
michael@0 27 }
michael@0 28 </style>
michael@0 29 </head>
michael@0 30 <body>
michael@0 31 <!-- single-line (flex-wrap unspecified): -->
michael@0 32 <div class="flexContainer" style="flex-flow: row">
michael@0 33 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 34 </div>
michael@0 35 <div class="flexContainer" style="flex-flow: row-reverse">
michael@0 36 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 37 </div>
michael@0 38 <div class="flexContainer" style="flex-flow: column">
michael@0 39 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 40 </div>
michael@0 41 <div class="flexContainer" style="flex-flow: column-reverse">
michael@0 42 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 43 </div>
michael@0 44
michael@0 45 <div style="clear:both"></div>
michael@0 46
michael@0 47 <!-- now using "wrap", after flex-direction: -->
michael@0 48 <div class="flexContainer" style="flex-flow: row wrap">
michael@0 49 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 50 </div>
michael@0 51 <div class="flexContainer" style="flex-flow: row-reverse wrap">
michael@0 52 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 53 </div>
michael@0 54 <div class="flexContainer" style="flex-flow: column wrap">
michael@0 55 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 56 </div>
michael@0 57 <div class="flexContainer" style="flex-flow: column-reverse wrap">
michael@0 58 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 59 </div>
michael@0 60
michael@0 61 <div style="clear:both"></div>
michael@0 62
michael@0 63 <!-- now using "wrap", before flex-direction: -->
michael@0 64 <div class="flexContainer" style="flex-flow: wrap row">
michael@0 65 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 66 </div>
michael@0 67 <div class="flexContainer" style="flex-flow: wrap row-reverse">
michael@0 68 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 69 </div>
michael@0 70 <div class="flexContainer" style="flex-flow: wrap column">
michael@0 71 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 72 </div>
michael@0 73 <div class="flexContainer" style="flex-flow: wrap column-reverse">
michael@0 74 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 75 </div>
michael@0 76
michael@0 77 <div style="clear:both"></div>
michael@0 78
michael@0 79 <!-- now using "wrap-reverse", after flex-direction: -->
michael@0 80 <div class="flexContainer" style="flex-flow: row wrap-reverse">
michael@0 81 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 82 </div>
michael@0 83 <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse">
michael@0 84 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 85 </div>
michael@0 86 <div class="flexContainer" style="flex-flow: column wrap-reverse">
michael@0 87 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 88 </div>
michael@0 89 <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse">
michael@0 90 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 91 </div>
michael@0 92
michael@0 93 <div style="clear:both"></div>
michael@0 94
michael@0 95 <!-- now using "wrap-reverse", before flex-direction: -->
michael@0 96 <div class="flexContainer" style="flex-flow: wrap-reverse row">
michael@0 97 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 98 </div>
michael@0 99 <div class="flexContainer" style="flex-flow: wrap-reverse row-reverse">
michael@0 100 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 101 </div>
michael@0 102 <div class="flexContainer" style="flex-flow: wrap-reverse column">
michael@0 103 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 104 </div>
michael@0 105 <div class="flexContainer" style="flex-flow: wrap-reverse column-reverse">
michael@0 106 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 107 </div>
michael@0 108
michael@0 109 <div style="clear:both"></div>
michael@0 110
michael@0 111 <!-- now just specifying flex-wrap (no flex-direction) -->
michael@0 112 <div class="flexContainer" style="flex-flow: wrap">
michael@0 113 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 114 </div>
michael@0 115 <div class="flexContainer" style="flex-flow: wrap-reverse">
michael@0 116 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 117 </div>
michael@0 118
michael@0 119 </body>
michael@0 120 </html>

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial