The Tor Browser / annotate

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

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

Wed, 31 Dec 2014 06:09:35 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:09:35 +0100
changeset 0
6474c204b198
permissions
-rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

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 Reftest Reference</title>
michael@0 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
michael@0 10 <meta charset="utf-8">
michael@0 11 <style>
michael@0 12 .flexContainer {
michael@0 13 height: 60px;
michael@0 14 width: 60px;
michael@0 15 font: 10px sans-serif;
michael@0 16 background: yellow;
michael@0 17 float: left;
michael@0 18 border: 1px solid black;
michael@0 19 }
michael@0 20 .flexContainer > * {
michael@0 21 border: 1px dotted gray;
michael@0 22 width: 28px;
michael@0 23 height: 28px;
michael@0 24 float: left;
michael@0 25 }
michael@0 26
michael@0 27 /* The single-line flex containers' flex items are shrunk in main axis: */
michael@0 28 .singleLineHoriz > * {
michael@0 29 width: 13px;
michael@0 30 }
michael@0 31 .singleLineVert > * {
michael@0 32 height: 13px;
michael@0 33 float: none;
michael@0 34 }
michael@0 35 </style>
michael@0 36 </head>
michael@0 37 <body>
michael@0 38 <!-- single-line (flex-wrap unspecified): -->
michael@0 39 <div class="flexContainer singleLineHoriz"><!-- flex-flow: row -->
michael@0 40 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 41 </div>
michael@0 42 <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse -->
michael@0 43 <div>4</div><div>3</div><div>2</div><div>1</div>
michael@0 44 </div>
michael@0 45 <div class="flexContainer singleLineVert"><!-- flex-flow: column -->
michael@0 46 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 47 </div>
michael@0 48 <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse -->
michael@0 49 <div>4</div><div>3</div><div>2</div><div>1</div>
michael@0 50 </div>
michael@0 51
michael@0 52 <div style="clear:both"></div>
michael@0 53
michael@0 54 <!-- now using "wrap", after flex-direction: -->
michael@0 55 <div class="flexContainer"><!-- flex-flow: row wrap -->
michael@0 56 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 57 </div>
michael@0 58 <div class="flexContainer"><!-- flex-flow: row-reverse wrap -->
michael@0 59 <div>2</div><div>1</div><div>4</div><div>3</div>
michael@0 60 </div>
michael@0 61 <div class="flexContainer"><!-- flex-flow: column wrap -->
michael@0 62 <div>1</div><div>3</div><div>2</div><div>4</div>
michael@0 63 </div>
michael@0 64 <div class="flexContainer"><!-- flex-flow: column-reverse wrap -->
michael@0 65 <div>2</div><div>4</div><div>1</div><div>3</div>
michael@0 66 </div>
michael@0 67
michael@0 68 <div style="clear:both"></div>
michael@0 69
michael@0 70 <!-- now using "wrap", before flex-direction: -->
michael@0 71 <div class="flexContainer"><!-- flex-flow: wrap row -->
michael@0 72 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 73 </div>
michael@0 74 <div class="flexContainer"><!-- flex-flow: wrap row-reverse -->
michael@0 75 <div>2</div><div>1</div><div>4</div><div>3</div>
michael@0 76 </div>
michael@0 77 <div class="flexContainer"><!-- flex-flow: wrap column -->
michael@0 78 <div>1</div><div>3</div><div>2</div><div>4</div>
michael@0 79 </div>
michael@0 80 <div class="flexContainer"><!-- flex-flow: wrap column-reverse -->
michael@0 81 <div>2</div><div>4</div><div>1</div><div>3</div>
michael@0 82 </div>
michael@0 83
michael@0 84 <div style="clear:both"></div>
michael@0 85
michael@0 86 <!-- now using "wrap-reverse", after flex-direction: -->
michael@0 87 <div class="flexContainer"><!-- flex-flow: row wrap-reverse -->
michael@0 88 <div>3</div><div>4</div><div>1</div><div>2</div>
michael@0 89 </div>
michael@0 90 <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse -->
michael@0 91 <div>4</div><div>3</div><div>2</div><div>1</div>
michael@0 92 </div>
michael@0 93 <div class="flexContainer"><!-- flex-flow: column wrap-reverse -->
michael@0 94 <div>3</div><div>1</div><div>4</div><div>2</div>
michael@0 95 </div>
michael@0 96 <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse -->
michael@0 97 <div>4</div><div>2</div><div>3</div><div>1</div>
michael@0 98 </div>
michael@0 99
michael@0 100 <div style="clear:both"></div>
michael@0 101
michael@0 102 <!-- now using "wrap-reverse", before flex-direction: -->
michael@0 103 <div class="flexContainer"><!-- flex-flow: wrap-reverse row -->
michael@0 104 <div>3</div><div>4</div><div>1</div><div>2</div>
michael@0 105 </div>
michael@0 106 <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse -->
michael@0 107 <div>4</div><div>3</div><div>2</div><div>1</div>
michael@0 108 </div>
michael@0 109 <div class="flexContainer"> <!-- flex-flow: wrap-reverse column -->
michael@0 110 <div>3</div><div>1</div><div>4</div><div>2</div>
michael@0 111 </div>
michael@0 112 <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse -->
michael@0 113 <div>4</div><div>2</div><div>3</div><div>1</div>
michael@0 114 </div>
michael@0 115
michael@0 116 <div style="clear:both"></div>
michael@0 117
michael@0 118 <!-- now just specifying flex-wrap (no flex-direction) -->
michael@0 119 <div class="flexContainer"><!-- flex-flow: wrap -->
michael@0 120 <div>1</div><div>2</div><div>3</div><div>4</div>
michael@0 121 </div>
michael@0 122 <div class="flexContainer"><!-- flex-flow: wrap-reverse -->
michael@0 123 <div>3</div><div>4</div><div>1</div><div>2</div>
michael@0 124 </div>
michael@0 125
michael@0 126 </body>
michael@0 127 </html>

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial