third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-flex-flow-001-expected.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-001-expected.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.html ('k') | third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-flex-flow-002.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 Reftest Reference</title>

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

	10 <meta charset="utf-8">

	11 <style>

	12 .flexContainer {

	13 height: 60px;

	14 width: 60px;

	15 font: 10px sans-serif;

	16 background: yellow;

	17 float: left;

	18 border: 1px solid black;

	19 }

	20 .flexContainer > * {

	21 border: 1px dotted gray;

	22 width: 28px;

	23 height: 28px;

	24 float: left;

	25 }

	26

	27 /* The single-line flex containers' flex items are shrunk in main axis: */

	28 .singleLineHoriz > * {

	29 width: 13px;

	30 }

	31 .singleLineVert > * {

	32 height: 13px;

	33 float: none;

	34 }

	35 </style>

	36 </head>

	37 <body>

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

	39 <div class="flexContainer singleLineHoriz"><!-- flex-flow: row -->

	40 <div>1</div><div>2</div><div>3</div><div>4</div>

	41 </div>

	42 <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse -->

	43 <div>4</div><div>3</div><div>2</div><div>1</div>

	44 </div>

	45 <div class="flexContainer singleLineVert"><!-- flex-flow: column -->

	46 <div>1</div><div>2</div><div>3</div><div>4</div>

	47 </div>

	48 <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse -->

	49 <div>4</div><div>3</div><div>2</div><div>1</div>

	50 </div>

	51

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

	53

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

	55 <div class="flexContainer"><!-- flex-flow: row wrap -->

	56 <div>1</div><div>2</div><div>3</div><div>4</div>

	57 </div>

	58 <div class="flexContainer"><!-- flex-flow: row-reverse wrap -->

	59 <div>2</div><div>1</div><div>4</div><div>3</div>

	60 </div>

	61 <div class="flexContainer"><!-- flex-flow: column wrap -->

	62 <div>1</div><div>3</div><div>2</div><div>4</div>

	63 </div>

	64 <div class="flexContainer"><!-- flex-flow: column-reverse wrap -->

	65 <div>2</div><div>4</div><div>1</div><div>3</div>

	66 </div>

	67

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

	69

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

	71 <div class="flexContainer"><!-- flex-flow: wrap row -->

	72 <div>1</div><div>2</div><div>3</div><div>4</div>

	73 </div>

	74 <div class="flexContainer"><!-- flex-flow: wrap row-reverse -->

	75 <div>2</div><div>1</div><div>4</div><div>3</div>

	76 </div>

	77 <div class="flexContainer"><!-- flex-flow: wrap column -->

	78 <div>1</div><div>3</div><div>2</div><div>4</div>

	79 </div>

	80 <div class="flexContainer"><!-- flex-flow: wrap column-reverse -->

	81 <div>2</div><div>4</div><div>1</div><div>3</div>

	82 </div>

	83

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

	85

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

	87 <div class="flexContainer"><!-- flex-flow: row wrap-reverse -->

	88 <div>3</div><div>4</div><div>1</div><div>2</div>

	89 </div>

	90 <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse -->

	91 <div>4</div><div>3</div><div>2</div><div>1</div>

	92 </div>

	93 <div class="flexContainer"><!-- flex-flow: column wrap-reverse -->

	94 <div>3</div><div>1</div><div>4</div><div>2</div>

	95 </div>

	96 <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse -->

	97 <div>4</div><div>2</div><div>3</div><div>1</div>

	98 </div>

	99

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

	101

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

	103 <div class="flexContainer"><!-- flex-flow: wrap-reverse row -->

	104 <div>3</div><div>4</div><div>1</div><div>2</div>

	105 </div>

	106 <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse -->

	107 <div>4</div><div>3</div><div>2</div><div>1</div>

	108 </div>

	109 <div class="flexContainer"> <!-- flex-flow: wrap-reverse column -->

	110 <div>3</div><div>1</div><div>4</div><div>2</div>

	111 </div>

	112 <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse -->

	113 <div>4</div><div>2</div><div>3</div><div>1</div>

	114 </div>

	115

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

	117

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

	119 <div class="flexContainer"><!-- flex-flow: wrap -->

	120 <div>1</div><div>2</div><div>3</div><div>4</div>

	121 </div>

	122 <div class="flexContainer"><!-- flex-flow: wrap-reverse -->

	123 <div>3</div><div>4</div><div>1</div><div>2</div>

	124 </div>

	125

	126 </body>

	127 </html>

OLD	NEW