third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-align-content-horiz-001a.xhtml - 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-align-content-horiz-001a.xhtml

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-abspos-child-001b-expected.html ('k') | third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-align-content-horiz-001a-expected.xhtml » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <?xml version="1.0" encoding="UTF-8"?>

	2 <!--

	3 Any copyright is dedicated to the Public Domain.

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

	5 -->

	6 <!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines,

	7 testing each possible value of the 'align-content' property. -->

	8 <html xmlns="http://www.w3.org/1999/xhtml">

	9 <head>

	10 <title>CSS Test: Testing 'align-content' in a horizontal flex container</tit le>

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

	12 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-pro perty"/>

	13 <link rel="match" href="flexbox-align-content-horiz-001-ref.xhtml"/>

	14 <style>

	15 div.flexbox {

	16 width: 20px; /* Skinny, to force us to wrap */

	17 height: 200px;

	18 display: flex;

	19 flex-wrap: wrap;

	20 margin-right: 2px;

	21 float: left;

	22 background: lightgray;

	23 }

	24 div.a {

	25 width: 20px;

	26 height: 10px;

	27 flex: none;

	28 background: lightgreen;

	29 }

	30 div.b {

	31 width: 20px;

	32 height: auto; /* height comes from contents */

	33 flex: none;

	34 background: pink;

	35 }

	36 div.c {

	37 width: 20px;

	38 height: 40px;

	39 flex: none;

	40 background: orange;

	41 }

	42

	43 /* Inside of 'b': */

	44 div.fixedSizeChild {

	45 width: 10px;

	46 height: 30px;

	47 background: purple;

	48 }

	49 </style>

	50 </head>

	51 <body>

	52

	53 <!-- default (stretch) -->

	54 <div class="flexbox">

	55 <div class="a"/>

	56 </div>

	57 <div class="flexbox">

	58 <div class="a"/>

	59 <div class="b"><div class="fixedSizeChild"/></div>

	60 </div>

	61 <div class="flexbox">

	62 <div class="a"/>

	63 <div class="b"><div class="fixedSizeChild"/></div>

	64 <div class="c"/>

	65 </div>

	66

	67 <!-- flex-start -->

	68 <div class="flexbox" style="align-content: flex-start">

	69 <div class="a"/>

	70 </div>

	71 <div class="flexbox" style="align-content: flex-start">

	72 <div class="a"/>

	73 <div class="b"><div class="fixedSizeChild"/></div>

	74 </div>

	75 <div class="flexbox" style="align-content: flex-start">

	76 <div class="a"/>

	77 <div class="b"><div class="fixedSizeChild"/></div>

	78 <div class="c"/>

	79 </div>

	80

	81 <!-- flex-end -->

	82 <div class="flexbox" style="align-content: flex-end">

	83 <div class="a"/>

	84 </div>

	85 <div class="flexbox" style="align-content: flex-end">

	86 <div class="a"/>

	87 <div class="b"><div class="fixedSizeChild"/></div>

	88 </div>

	89 <div class="flexbox" style="align-content: flex-end">

	90 <div class="a"/>

	91 <div class="b"><div class="fixedSizeChild"/></div>

	92 <div class="c"/>

	93 </div>

	94

	95 <!-- center -->

	96 <div class="flexbox" style="align-content: center">

	97 <div class="a"/>

	98 </div>

	99 <div class="flexbox" style="align-content: center">

	100 <div class="a"/>

	101 <div class="b"><div class="fixedSizeChild"/></div>

	102 </div>

	103 <div class="flexbox" style="align-content: center">

	104 <div class="a"/>

	105 <div class="b"><div class="fixedSizeChild"/></div>

	106 <div class="c"/>

	107 </div>

	108

	109 <!-- space-between -->

	110 <div class="flexbox" style="align-content: space-between">

	111 <div class="a"/>

	112 </div>

	113 <div class="flexbox" style="align-content: space-between">

	114 <div class="a"/>

	115 <div class="b"><div class="fixedSizeChild"/></div>

	116 </div>

	117 <div class="flexbox" style="align-content: space-between">

	118 <div class="a"/>

	119 <div class="b"><div class="fixedSizeChild"/></div>

	120 <div class="c"/>

	121 </div>

	122

	123 <!-- space-around -->

	124 <div class="flexbox" style="align-content: space-around">

	125 <div class="a"/>

	126 </div>

	127 <div class="flexbox" style="align-content: space-around">

	128 <div class="a"/>

	129 <div class="b"><div class="fixedSizeChild"/></div>

	130 </div>

	131 <div class="flexbox" style="align-content: space-around">

	132 <div class="a"/>

	133 <div class="b"><div class="fixedSizeChild"/></div>

	134 <div class="c"/>

	135 </div>

	136

	137 </body>

	138 </html>

OLD	NEW