The Tor Browser / annotate

layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-2-ref.html@7540298fafa1 (annotated)

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

Thu, 15 Jan 2015 21:13:52 +0100

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

Remove forgotten relic of ABI crash risk averse overloaded method change.

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: 18px;
michael@0 30 }
michael@0 31 .singleLineVert > * {
michael@0 32 height: 18px;
michael@0 33 float: none;
michael@0 34 }
michael@0 35 .hidden {
michael@0 36 /* We use this to hide the "4" box in each of the multi-line chunks.
michael@0 37 The testcase has 3 flex items in each flex container, but it's easier
michael@0 38 to write this reference case w/ a hidden 4th box as a space-filler. */
michael@0 39 visibility: hidden;
michael@0 40 }
michael@0 41 </style>
michael@0 42 </head>
michael@0 43 <body>
michael@0 44 <!-- single-line (flex-wrap unspecified): -->
michael@0 45 <div class="flexContainer singleLineHoriz"><!-- flex-flow: row -->
michael@0 46 <div>1</div><div>2</div><div>3</div>
michael@0 47 </div>
michael@0 48 <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse -->
michael@0 49 <div>3</div><div>2</div><div>1</div>
michael@0 50 </div>
michael@0 51 <div class="flexContainer singleLineVert"><!-- flex-flow: column -->
michael@0 52 <div>1</div><div>2</div><div>3</div>
michael@0 53 </div>
michael@0 54 <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse -->
michael@0 55 <div>3</div><div>2</div><div>1</div>
michael@0 56 </div>
michael@0 57
michael@0 58 <div style="clear:both"></div>
michael@0 59
michael@0 60 <!-- now using "wrap", after flex-direction: -->
michael@0 61 <div class="flexContainer"><!-- flex-flow: row wrap -->
michael@0 62 <div>1</div><div>2</div><div>3</div><div class="hidden">4</div>
michael@0 63 </div>
michael@0 64 <div class="flexContainer"><!-- flex-flow: row-reverse wrap -->
michael@0 65 <div>2</div><div>1</div><div class="hidden">4</div><div>3</div>
michael@0 66 </div>
michael@0 67 <div class="flexContainer"><!-- flex-flow: column wrap -->
michael@0 68 <div>1</div><div>3</div><div>2</div><div class="hidden">4</div>
michael@0 69 </div>
michael@0 70 <div class="flexContainer"><!-- flex-flow: column-reverse wrap -->
michael@0 71 <div>2</div><div class="hidden">4</div><div>1</div><div>3</div>
michael@0 72 </div>
michael@0 73
michael@0 74 <div style="clear:both"></div>
michael@0 75
michael@0 76 <!-- now using "wrap", before flex-direction: -->
michael@0 77 <div class="flexContainer"><!-- flex-flow: wrap row -->
michael@0 78 <div>1</div><div>2</div><div>3</div><div class="hidden">4</div>
michael@0 79 </div>
michael@0 80 <div class="flexContainer"><!-- flex-flow: wrap row-reverse -->
michael@0 81 <div>2</div><div>1</div><div class="hidden">4</div><div>3</div>
michael@0 82 </div>
michael@0 83 <div class="flexContainer"><!-- flex-flow: wrap column -->
michael@0 84 <div>1</div><div>3</div><div>2</div><div class="hidden">4</div>
michael@0 85 </div>
michael@0 86 <div class="flexContainer"><!-- flex-flow: wrap column-reverse -->
michael@0 87 <div>2</div><div class="hidden">4</div><div>1</div><div>3</div>
michael@0 88 </div>
michael@0 89
michael@0 90 <div style="clear:both"></div>
michael@0 91
michael@0 92 <!-- now using "wrap-reverse", after flex-direction: -->
michael@0 93 <div class="flexContainer"><!-- flex-flow: row wrap-reverse -->
michael@0 94 <div>3</div><div class="hidden">4</div><div>1</div><div>2</div>
michael@0 95 </div>
michael@0 96 <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse -->
michael@0 97 <div class="hidden">4</div><div>3</div><div>2</div><div>1</div>
michael@0 98 </div>
michael@0 99 <div class="flexContainer"><!-- flex-flow: column wrap-reverse -->
michael@0 100 <div>3</div><div>1</div><div class="hidden">4</div><div>2</div>
michael@0 101 </div>
michael@0 102 <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse -->
michael@0 103 <div class="hidden">4</div><div>2</div><div>3</div><div>1</div>
michael@0 104 </div>
michael@0 105
michael@0 106 <div style="clear:both"></div>
michael@0 107
michael@0 108 <!-- now using "wrap-reverse", before flex-direction: -->
michael@0 109 <div class="flexContainer"><!-- flex-flow: wrap-reverse row -->
michael@0 110 <div>3</div><div class="hidden">4</div><div>1</div><div>2</div>
michael@0 111 </div>
michael@0 112 <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse -->
michael@0 113 <div class="hidden">4</div><div>3</div><div>2</div><div>1</div>
michael@0 114 </div>
michael@0 115 <div class="flexContainer"> <!-- flex-flow: wrap-reverse column -->
michael@0 116 <div>3</div><div>1</div><div class="hidden">4</div><div>2</div>
michael@0 117 </div>
michael@0 118 <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse -->
michael@0 119 <div class="hidden">4</div><div>2</div><div>3</div><div>1</div>
michael@0 120 </div>
michael@0 121
michael@0 122 <div style="clear:both"></div>
michael@0 123
michael@0 124 <!-- now just specifying flex-wrap (no flex-direction) -->
michael@0 125 <div class="flexContainer"><!-- flex-flow: wrap -->
michael@0 126 <div>1</div><div>2</div><div>3</div><div class="hidden">4</div>
michael@0 127 </div>
michael@0 128 <div class="flexContainer"><!-- flex-flow: wrap-reverse -->
michael@0 129 <div>3</div><div class="hidden">4</div><div>1</div><div>2</div>
michael@0 130 </div>
michael@0 131
michael@0 132 </body>
michael@0 133 </html>

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial