mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 851379, part 3: Add reftest with percent-valued vertical margin & padding on flex items. r=mats
This commit is contained in:
Daniel Holbert
parent
a0d53d01a9
commit
45db79fd3b
93
layout/reftests/flexbox/flexbox-mbp-horiz-4-ref.xhtml
Normal file
93
layout/reftests/flexbox/flexbox-mbp-horiz-4-ref.xhtml
Normal file
@ -0,0 +1,93 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Reference case - identical to the testcase, but with with the flex items'
|
||||
vertical margin and padding values set to 0 by default, and then set to
|
||||
specific pixel values for the items that have a 50px percent-basis.
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div { border: 0; }
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
margin-bottom: 2px;
|
||||
border: 1px dotted black;
|
||||
}
|
||||
div.height50 { height: 50px; }
|
||||
|
||||
.marginA { margin: 0 8% 0 4%; }
|
||||
.marginB { margin: 0 10% 0 14%; }
|
||||
.paddingA { padding: 0 6% 0 2%; }
|
||||
.paddingB { padding: 0 8% 0 12%; }
|
||||
|
||||
div.height50 > .marginA {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
div.height50 > .marginB {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
div.height50 > .paddingA {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
div.height50 > .paddingB {
|
||||
padding-top: 3px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
div.child1 {
|
||||
flex: none;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.child2 {
|
||||
flex: none;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: purple;
|
||||
}
|
||||
|
||||
div.filler {
|
||||
/* Filler-div to fill up content-box and make padding easier to see. */
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
background: lightgrey;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox"
|
||||
><div class="child1 paddingA"><div class="filler"/></div
|
||||
><div class="child2 paddingB"><div class="filler"/></div
|
||||
><div class="child1 marginA"></div
|
||||
><div class="child2 marginB"></div
|
||||
></div>
|
||||
|
||||
<div class="flexbox height50"
|
||||
><div class="child1 paddingA"><div class="filler"/></div
|
||||
><div class="child2 paddingB"><div class="filler"/></div
|
||||
><div class="child1 marginA"></div
|
||||
><div class="child2 marginB"></div
|
||||
></div>
|
||||
|
||||
<div class="flexbox height50" style="align-items: flex-end"
|
||||
><div class="child1 paddingA"><div class="filler"/></div
|
||||
><div class="child2 paddingB"><div class="filler"/></div
|
||||
><div class="child1 marginA"></div
|
||||
><div class="child2 marginB"></div
|
||||
></div>
|
||||
|
||||
<div class="flexbox height50"
|
||||
><div class="child1 paddingA marginA"><div class="filler"/></div
|
||||
><div class="child2 paddingB marginB"><div class="filler"/></div
|
||||
></div>
|
||||
</body>
|
||||
</html>
|
||||
84
layout/reftests/flexbox/flexbox-mbp-horiz-4.xhtml
Normal file
84
layout/reftests/flexbox/flexbox-mbp-horiz-4.xhtml
Normal file
@ -0,0 +1,84 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!-- Testcase with percent-valued padding and/or margin on flex items. The spec
|
||||
says that percentage values on padding/margin-top and -bottom should be
|
||||
resolved against the flex container's height (not its width, as would
|
||||
be the case in a block).
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style>
|
||||
div { border: 0; }
|
||||
div.flexbox {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
margin-bottom: 2px;
|
||||
border: 1px dotted black;
|
||||
}
|
||||
div.height50 { height: 50px; }
|
||||
|
||||
.marginA { margin: 10% 8% 6% 4%; }
|
||||
.marginB { margin: 8% 10% 12% 14%; }
|
||||
.paddingA { padding: 8% 6% 4% 2%; }
|
||||
.paddingB { padding: 6% 8% 10% 12%; }
|
||||
|
||||
div.child1 {
|
||||
flex: none;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.child2 {
|
||||
flex: none;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: purple;
|
||||
}
|
||||
|
||||
div.filler {
|
||||
/* Filler-div to fill up content-box and make padding easier to see. */
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
background: lightgrey;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Flex container is auto-height - vertical margin and padding should
|
||||
resolve to 0, since they don't have anything to resolve % against. -->
|
||||
<div class="flexbox"
|
||||
><div class="child1 paddingA"><div class="filler"/></div
|
||||
><div class="child2 paddingB"><div class="filler"/></div
|
||||
><div class="child1 marginA"></div
|
||||
><div class="child2 marginB"></div
|
||||
></div>
|
||||
|
||||
<!-- Flex container has height: 50px - vertical margin and padding should
|
||||
resolve % values against that. -->
|
||||
<div class="flexbox height50"
|
||||
><div class="child1 paddingA"><div class="filler"/></div
|
||||
><div class="child2 paddingB"><div class="filler"/></div
|
||||
><div class="child1 marginA"></div
|
||||
><div class="child2 marginB"></div
|
||||
></div>
|
||||
|
||||
<!-- ...and now with align-items: flex-end, so we can see the margin-bottom
|
||||
in action -->
|
||||
<div class="flexbox height50" style="align-items: flex-end"
|
||||
><div class="child1 paddingA"><div class="filler"/></div
|
||||
><div class="child2 paddingB"><div class="filler"/></div
|
||||
><div class="child1 marginA"></div
|
||||
><div class="child2 marginB"></div
|
||||
></div>
|
||||
|
||||
<!-- ...and finally, with margin and padding applied to the same items -->
|
||||
<div class="flexbox height50"
|
||||
><div class="child1 paddingA marginA"><div class="filler"/></div
|
||||
><div class="child2 paddingB marginB"><div class="filler"/></div
|
||||
></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -190,6 +190,7 @@ fails == flexbox-minSize-vert-1.xhtml flexbox-minSize-vert-1-ref.xhtml # bug 85
|
||||
== flexbox-mbp-horiz-2b.xhtml flexbox-mbp-horiz-2-ref.xhtml
|
||||
== flexbox-mbp-horiz-3.xhtml flexbox-mbp-horiz-3-ref.xhtml
|
||||
== flexbox-mbp-horiz-3-reverse.xhtml flexbox-mbp-horiz-3-reverse-ref.xhtml
|
||||
== flexbox-mbp-horiz-4.xhtml flexbox-mbp-horiz-4-ref.xhtml
|
||||
|
||||
# Tests for flex containers with the "overflow" property set
|
||||
== flexbox-overflow-horiz-1.html flexbox-overflow-horiz-1-ref.html
|
||||
|
||||
Loading…
Reference in New Issue
Block a user