third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-mbp-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-mbp-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-mbp-horiz-003-reverse-expected.xhtml ('k') | third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-mbp-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 percent-valued padding and/or margin on flex items. The spec

	7 says that percentage values on padding/margin-top and -bottom should be

	8 resolved against the flex container's height (not its width, as would

	9 be the case in a block).

	10 -->

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

	12 <head>

	13 <title>CSS Test: Testing percent-valued padding and margin on flex items</ti tle>

	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/#layout-algorithm" />

	16 <link rel="match" href="flexbox-mbp-horiz-004-ref.xhtml"/>

	17 <style>

	18 div { border: 0; }

	19 div.flexbox {

	20 width: 200px;

	21 display: flex;

	22 margin-bottom: 2px;

	23 border: 1px dotted black;

	24 }

	25 div.height50 { height: 50px; }

	26

	27 .marginA { margin: 10% 8% 6% 4%; }

	28 .marginB { margin: 8% 10% 12% 14%; }

	29 .paddingA { padding: 8% 6% 4% 2%; }

	30 .paddingB { padding: 6% 8% 10% 12%; }

	31

	32 div.child1 {

	33 flex: none;

	34 width: 10px;

	35 height: 10px;

	36 background: lightgreen;

	37 }

	38 div.child2 {

	39 flex: none;

	40 width: 10px;

	41 height: 10px;

	42 background: purple;

	43 }

	44

	45 div.filler {

	46 /* Filler-div to fill up content-box and make padding easier to see. */

	47 height: 10px;

	48 width: 100%;

	49 background: lightgrey;

	50 }

	51

	52 </style>

	53 </head>

	54 <body>

	55 <!-- Flex container is auto-height - vertical margin and padding should

	56 resolve to 0, since they don't have anything to resolve % against. -->

	57 <div class="flexbox"

	58 ><div class="child1 paddingA"><div class="filler"/></div><div class="ch ild2 paddingB"><div class="filler"/></div><div class="child1 marginA"></div><div class="child2 marginB"></div></div>

	59

	60 <!-- Flex container has height: 50px - vertical margin and padding should

	61 resolve % values against that. -->

	62 <div class="flexbox height50"

	63 ><div class="child1 paddingA"><div class="filler"/></div><div class="ch ild2 paddingB"><div class="filler"/></div><div class="child1 marginA"></div><div class="child2 marginB"></div></div>

	64

	65 <!-- ...and now with align-items: flex-end, so we can see the margin-bottom

	66 in action -->

	67 <div class="flexbox height50" style="align-items: flex-end"

	68 ><div class="child1 paddingA"><div class="filler"/></div><div class="ch ild2 paddingB"><div class="filler"/></div><div class="child1 marginA"></div><div class="child2 marginB"></div></div>

	69

	70 <!-- ...and finally, with margin and padding applied to the same items -->

	71 <div class="flexbox height50"

	72 ><div class="child1 paddingA marginA"><div class="filler"/></div><div c lass="child2 paddingB marginB"><div class="filler"/></div></div>

	73 </body>

	74 </html>

OLD	NEW