third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-flex-flow-002.html - Issue 1705363002: Import Mozilla's flexbox tests from csswg-test

Side by Side Diff: third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-flex-flow-002.html

Issue 1705363002: Import Mozilla's flexbox tests from csswg-test (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: add test expectations for mac-specific failures Created 4 years, 10 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-flex-flow-001-expected.html ('k') | third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-flex-flow-002-expected.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <!--

	3 Any copyright is dedicated to the Public Domain.

	4 http://creativecommons.org/publicdomain/zero/1.0/

	5 -->

	6 <html>

	7 <head>

	8 <title>CSS Test: Testing all the values of the "flex-flow" shorthand property, with 3 flex items in each container</title>

	9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

	10 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property" >

	11 <link rel="match" href="flexbox-flex-flow-002-ref.html">

	12 <meta charset="utf-8">

	13 <style>

	14 .flexContainer {

	15 display: flex;

	16 height: 60px;

	17 width: 60px;

	18 font: 10px sans-serif;

	19 background: yellow;

	20 float: left;

	21 border: 1px solid black;

	22 }

	23 .flexContainer > * {

	24 border: 1px dotted gray;

	25 width: 28px;

	26 height: 28px;

	27 /* Explicitly set min-width & min-height to 0, to prevent their "auto"

	28 value from influencing the sizes of our flex items (particularly for

	29 the single-line chunks of this testcase, whose items may be shrunk a

	30 little below the numerals' intrinsic sizes): */

	31 min-width: 0;

	32 min-height: 0;

	33 }

	34 </style>

	35 </head>

	36 <body>

	37 <!-- single-line (flex-wrap unspecified): -->

	38 <div class="flexContainer" style="flex-flow: row">

	39 <div>1</div><div>2</div><div>3</div>

	40 </div>

	41 <div class="flexContainer" style="flex-flow: row-reverse">

	42 <div>1</div><div>2</div><div>3</div>

	43 </div>

	44 <div class="flexContainer" style="flex-flow: column">

	45 <div>1</div><div>2</div><div>3</div>

	46 </div>

	47 <div class="flexContainer" style="flex-flow: column-reverse">

	48 <div>1</div><div>2</div><div>3</div>

	49 </div>

	50

	51 <div style="clear:both"></div>

	52

	53 <!-- now using "wrap", after flex-direction: -->

	54 <div class="flexContainer" style="flex-flow: row wrap">

	55 <div>1</div><div>2</div><div>3</div>

	56 </div>

	57 <div class="flexContainer" style="flex-flow: row-reverse wrap">

	58 <div>1</div><div>2</div><div>3</div>

	59 </div>

	60 <div class="flexContainer" style="flex-flow: column wrap">

	61 <div>1</div><div>2</div><div>3</div>

	62 </div>

	63 <div class="flexContainer" style="flex-flow: column-reverse wrap">

	64 <div>1</div><div>2</div><div>3</div>

	65 </div>

	66

	67 <div style="clear:both"></div>

	68

	69 <!-- now using "wrap", before flex-direction: -->

	70 <div class="flexContainer" style="flex-flow: wrap row">

	71 <div>1</div><div>2</div><div>3</div>

	72 </div>

	73 <div class="flexContainer" style="flex-flow: wrap row-reverse">

	74 <div>1</div><div>2</div><div>3</div>

	75 </div>

	76 <div class="flexContainer" style="flex-flow: wrap column">

	77 <div>1</div><div>2</div><div>3</div>

	78 </div>

	79 <div class="flexContainer" style="flex-flow: wrap column-reverse">

	80 <div>1</div><div>2</div><div>3</div>

	81 </div>

	82

	83 <div style="clear:both"></div>

	84

	85 <!-- now using "wrap-reverse", after flex-direction: -->

	86 <div class="flexContainer" style="flex-flow: row wrap-reverse">

	87 <div>1</div><div>2</div><div>3</div>

	88 </div>

	89 <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse">

	90 <div>1</div><div>2</div><div>3</div>

	91 </div>

	92 <div class="flexContainer" style="flex-flow: column wrap-reverse">

	93 <div>1</div><div>2</div><div>3</div>

	94 </div>

	95 <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse">

	96 <div>1</div><div>2</div><div>3</div>

	97 </div>

	98

	99 <div style="clear:both"></div>

	100

	101 <!-- now using "wrap-reverse", before flex-direction: -->

	102 <div class="flexContainer" style="flex-flow: wrap-reverse row">

	103 <div>1</div><div>2</div><div>3</div>

	104 </div>

	105 <div class="flexContainer" style="flex-flow: wrap-reverse row-reverse">

	106 <div>1</div><div>2</div><div>3</div>

	107 </div>

	108 <div class="flexContainer" style="flex-flow: wrap-reverse column">

	109 <div>1</div><div>2</div><div>3</div>

	110 </div>

	111 <div class="flexContainer" style="flex-flow: wrap-reverse column-reverse">

	112 <div>1</div><div>2</div><div>3</div>

	113 </div>

	114

	115 <div style="clear:both"></div>

	116

	117 <!-- now just specifying flex-wrap (no flex-direction) -->

	118 <div class="flexContainer" style="flex-flow: wrap">

	119 <div>1</div><div>2</div><div>3</div>

	120 </div>

	121 <div class="flexContainer" style="flex-flow: wrap-reverse">

	122 <div>1</div><div>2</div><div>3</div>

	123 </div>

	124

	125 </body>

	126 </html>

OLD	NEW