third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-justify-content-vert-005.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-justify-content-vert-005.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-justify-content-vert-004-expected.xhtml ('k') | third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-justify-content-vert-005-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 to exercise each possible value of the 'justify-content'

	7 property, in an auto-sized vertical flex container. The flex container

	8 should shrink-wrap its contents' heights, leaving no packing space

	9 available. So, the "justify-content" values should have no effect

	10 in this testcase. -->

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

	12 <head>

	13 <title>CSS Test: Testing 'justify-content' in an auto-sized vertical flex co ntainer</title>

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

	15 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-p roperty"/>

	16 <link rel="match" href="flexbox-justify-content-vert-005-ref.xhtml"/>

	17 <style>

	18 div.flexbox {

	19 display: flex;

	20 flex-direction: column;

	21 margin-right: 2px;

	22 float: left;

	23 border: 1px dotted black;

	24 }

	25 div.a {

	26 width: 20px;

	27 flex: 0 10px;

	28 background: lightgreen;

	29 }

	30 div.b {

	31 width: 20px;

	32 flex: 0 50px;

	33 background: pink;

	34 }

	35 div.c {

	36 width: 20px;

	37 flex: 0 100px;

	38 background: orange;

	39 }

	40 </style>

	41 </head>

	42 <body>

	43

	44 <!-- default (start) -->

	45 <div class="flexbox">

	46 <div class="a"/>

	47 </div>

	48 <div class="flexbox">

	49 <div class="a"/><div class="b"></div>

	50 </div>

	51 <div class="flexbox">

	52 <div class="a"/><div class="b"/><div class="c"/>

	53 </div>

	54

	55 <!-- flex-start -->

	56 <div class="flexbox" style="justify-content: flex-start">

	57 <div class="a"/>

	58 </div>

	59 <div class="flexbox" style="justify-content: flex-start">

	60 <div class="a"/><div class="b"/>

	61 </div>

	62 <div class="flexbox" style="justify-content: flex-start">

	63 <div class="a"/><div class="b"/><div class="c"/>

	64 </div>

	65

	66 <!-- flex-end -->

	67 <div class="flexbox" style="justify-content: flex-end">

	68 <div class="a"/>

	69 </div>

	70 <div class="flexbox" style="justify-content: flex-end">

	71 <div class="a"/><div class="b"/>

	72 </div>

	73 <div class="flexbox" style="justify-content: flex-end">

	74 <div class="a"/><div class="b"/><div class="c"/>

	75 </div>

	76

	77 <!-- center -->

	78 <div class="flexbox" style="justify-content: center">

	79 <div class="a"/>

	80 </div>

	81 <div class="flexbox" style="justify-content: center">

	82 <div class="a"/><div class="b"/>

	83 </div>

	84 <div class="flexbox" style="justify-content: center">

	85 <div class="a"/><div class="b"/><div class="c"/>

	86 </div>

	87

	88 <!-- space-between -->

	89 <div class="flexbox" style="justify-content: space-between">

	90 <div class="a"/>

	91 </div>

	92 <div class="flexbox" style="justify-content: space-between">

	93 <div class="a"/><div class="b"/>

	94 </div>

	95 <div class="flexbox" style="justify-content: space-between">

	96 <div class="a"/><div class="b"/><div class="c"/>

	97 </div>

	98

	99 <!-- space-around -->

	100 <div class="flexbox" style="justify-content: space-around">

	101 <div class="a"/>

	102 </div>

	103 <div class="flexbox" style="justify-content: space-around">

	104 <div class="a"/><div class="b"/>

	105 </div>

	106 <div class="flexbox" style="justify-content: space-around">

	107 <div class="a"/><div class="b"/><div class="c"/>

	108 </div>

	109

	110 </body>

	111 </html>

OLD	NEW