third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-justify-content-horiz-004.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-horiz-004.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-horiz-003-expected.xhtml ('k') | third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-justify-content-horiz-004-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 variety of 'display: flex' examples testing each

	7 possible value of the 'justify-content' property, and with each

	8 individual flex item being wider than the flexbox itself (so that

	9 there isn't any packing space available).

	10 * For 'flex-start'/'space-between', we should overflow on the end

	11 (right) side.

	12 * For 'flex-end', we should overflow on the start (left) side.

	13 * For 'center'/'space-around', we should overflow equally on both sides.

	14 -->

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

	16 <head>

	17 <title>CSS Test: Testing 'justify-content' in a horizontal flex container, a nd its effects on flex items that overflow, with margins/border/padding on flex items</title>

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

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

	20 <link rel="match" href="flexbox-justify-content-horiz-004-ref.xhtml"/>

	21 <style>

	22 body { margin-left: 100px; } /* So we can see left-overflowed stuff */

	23 div.flexbox {

	24 width: 30px;

	25 display: flex;

	26 margin-bottom: 4px;

	27 }

	28 div.a {

	29 height: 10px;

	30 flex: 0 0 35px;

	31 background: lightgreen;

	32 border-style: solid;

	33 border-color: purple;

	34 border-top-width: 1px;

	35 border-right-width: 2px;

	36 border-bottom-width: 3px;

	37 border-left-width: 4px;

	38 padding: 2px;

	39 }

	40 div.b {

	41 height: 10px;

	42 flex: 0 0 40px;

	43 background: pink;

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

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

	46 }

	47 div.c {

	48 height: 10px;

	49 flex: 0 0 45px;

	50 background: orange;

	51 margin: 3px;

	52 border: 2px dashed teal;

	53 }

	54 </style>

	55 </head>

	56 <body>

	57

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

	59 <div class="flexbox">

	60 <div class="a"/>

	61 </div>

	62 <div class="flexbox">

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

	64 </div>

	65 <div class="flexbox">

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

	67 </div>

	68

	69 <!-- flex-start -->

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

	71 <div class="a"/>

	72 </div>

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

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

	75 </div>

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

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

	78 </div>

	79

	80 <!-- flex-end -->

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

	82 <div class="a"/>

	83 </div>

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

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

	86 </div>

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

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

	89 </div>

	90

	91 <!-- center -->

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

	93 <div class="a"/>

	94 </div>

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

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

	97 </div>

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

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

	100 </div>

	101

	102 <!-- space-between -->

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

	104 <div class="a"/>

	105 </div>

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

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

	108 </div>

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

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

	111 </div>

	112

	113 <!-- space-around -->

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

	115 <div class="a"/>

	116 </div>

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

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

	119 </div>

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

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

	122 </div>

	123

	124 </body>

	125 </html>

OLD	NEW