third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-justify-content-vert-002.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-002.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-001b-expected.xhtml ('k') | third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-justify-content-vert-002-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 flex containers testing each possible value of

	7 the 'justify-content' property, with margin/border/padding on the

	8 flex items. -->

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

	10 <head>

	11 <title>CSS Test: Testing 'justify-content' in a vertical flex container, wit h margins/border/padding on flex items</title>

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

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

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

	15 <style>

	16 div.flexbox {

	17 height: 200px;

	18 display: flex;

	19 flex-direction: column;

	20 margin-right: 2px;

	21 float: left;

	22 border: 1px dotted black;

	23 }

	24 div.a {

	25 width: 10px;

	26 flex: 0 10px;

	27 background: lightgreen;

	28 border-style: solid;

	29 border-color: purple;

	30 border-top-width: 4px;

	31 border-right-width: 3px;

	32 border-bottom-width: 2px;

	33 border-left-width: 1px;

	34 padding: 2px;

	35 }

	36 div.b {

	37 width: 10px;

	38 flex: 0 50px;

	39 background: pink;

	40 padding: 1px 2px 3px 4px;

	41 margin: 5px 4px 3px 2px;

	42 }

	43 div.c {

	44 width: 10px;

	45 flex: 0 100px;

	46 background: orange;

	47 margin: 3px;

	48 border: 2px dashed teal;

	49 }

	50 </style>

	51 </head>

	52 <body>

	53

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

	55 <div class="flexbox">

	56 <div class="a"/>

	57 </div>

	58 <div class="flexbox">

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

	60 </div>

	61 <div class="flexbox">

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

	63 </div>

	64

	65 <!-- flex-start -->

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

	67 <div class="a"/>

	68 </div>

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

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

	71 </div>

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

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

	74 </div>

	75

	76 <!-- flex-end -->

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

	78 <div class="a"/>

	79 </div>

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

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

	82 </div>

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

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

	85 </div>

	86

	87 <!-- center -->

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

	89 <div class="a"/>

	90 </div>

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

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

	93 </div>

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

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

	96 </div>

	97

	98 <!-- space-between -->

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

	100 <div class="a"/>

	101 </div>

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

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

	104 </div>

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

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

	107 </div>

	108

	109 <!-- space-around -->

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

	111 <div class="a"/>

	112 </div>

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

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

	115 </div>

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

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

	118 </div>

	119

	120 </body>

	121 </html>

OLD	NEW