wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 989436 part 3b: Add some reftests with various cross-axis margins on baseline-aligned flex items, in a fixed-size flexbox. r=mats

Browse Source
This commit is contained in:
Daniel Holbert 2014-03-29 01:20:59 -07:00
parent 08e938e3bc
commit 28f951b606
5 changed files with 348 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-2-ref.xhtml Normal file
View File

@ -0,0 +1,82 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<style>
.flexbox {
width: 40px;
height: 40px;
border: 1px solid gray;
margin: 5px; /* just for visual separation */
float: left;
}
.flexbox > * {
background: yellow;
border: 1px solid black;
height: 20px;
}
</style>
</head>
<body>
<!-- ZEROTH ROW: NO MARGINS -->
<!-- No margins on flex item: -->
<div class="flexbox">
<div>a</div>
</div>
<!-- FIRST ROW: SETTING MARGIN-TOP: -->
<br style="clear: both"/>
<!-- auto: -->
<div class="flexbox">
<div style="margin-top: 18px">a</div>
</div>
<!-- Negative: -->
<div class="flexbox">
<div style="margin-top: -4px">a</div>
</div>
<!-- Small: -->
<div class="flexbox">
<div style="margin-top: 4px">a</div>
</div>
<!-- Large (pushing us out of container): -->
<div class="flexbox">
<div style="margin-top: 25px">a</div>
</div>
<!-- SECOND ROW: SETTING MARGIN-BOTTOM: -->
<br style="clear: both"/>
<!-- auto: -->
<div class="flexbox">
<div>a</div>
</div>
<!-- Negative: -->
<div class="flexbox">
<div>a</div>
</div>
<!-- Small: -->
<div class="flexbox">
<div>a</div>
</div>
<!-- Large: -->
<div class="flexbox">
<div>a</div>
</div>
</body>
</html>

90
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-2.xhtml Normal file
View File

@ -0,0 +1,90 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- Testcase for how a baseline-aligned flex item's position is impacted by
cross-axis margins, in a fixed-size flex container.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Baseline alignment of flex items in fixed-size single-line flex container</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#baseline-participation"/>
<link rel="match" href="flexbox-align-self-baseline-horiz-2-ref.xhtml"/>
<style>
.flexbox {
display: flex;
align-items: baseline;
width: 40px;
height: 40px;
border: 1px solid gray;
margin: 5px; /* just for visual separation */
float: left;
}
.flexbox > * {
background: yellow;
border: 1px solid black;
height: 20px;
flex: 1;
}
</style>
</head>
<body>
<!-- ZEROTH ROW: NO MARGINS -->
<!-- No margins on flex item: -->
<div class="flexbox">
<div>a</div>
</div>
<!-- FIRST ROW: SETTING MARGIN-TOP: -->
<br style="clear: both"/>
<!-- auto: -->
<div class="flexbox">
<div style="margin-top: auto">a</div>
</div>
<!-- Negative: -->
<div class="flexbox">
<div style="margin-top: -4px">a</div>
</div>
<!-- Small: -->
<div class="flexbox">
<div style="margin-top: 4px">a</div>
</div>
<!-- Large (pushing us out of container): -->
<div class="flexbox">
<div style="margin-top: 25px">a</div>
</div>
<!-- SECOND ROW: SETTING MARGIN-BOTTOM: -->
<br style="clear: both"/>
<!-- auto: -->
<div class="flexbox">
<div style="margin-bottom: auto">a</div>
</div>
<!-- Negative: -->
<div class="flexbox">
<div style="margin-bottom: -4px">a</div>
</div>
<!-- Small: -->
<div class="flexbox">
<div style="margin-bottom: 4px">a</div>
</div>
<!-- Large: -->
<div class="flexbox">
<div style="margin-bottom: 25px">a</div>
</div>
</body>
</html>

82
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-3-ref.xhtml Normal file
View File

@ -0,0 +1,82 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<style>
.flexbox {
width: 40px;
height: 40px;
border: 1px solid gray;
margin: 5px; /* just for visual separation */
float: left;
}
.flexbox > * {
background: yellow;
border: 1px solid black;
height: 20px;
}
</style>
</head>
<body>
<!-- ZEROTH ROW: NO MARGINS -->
<!-- No margins on flex item: -->
<div class="flexbox">
<div style="margin-top: 18px">a</div>
</div>
<!-- FIRST ROW: SETTING MARGIN-TOP: -->
<br style="clear: both"/>
<!-- auto: -->
<div class="flexbox">
<div style="margin-top: 18px">a</div>
</div>
<!-- Negative: -->
<div class="flexbox">
<div style="margin-top: 18px">a</div>
</div>
<!-- Small: -->
<div class="flexbox">
<div style="margin-top: 18px">a</div>
</div>
<!-- Large (pushing us out of container): -->
<div class="flexbox">
<div style="margin-top: 18px">a</div>
</div>
<!-- SECOND ROW: SETTING MARGIN-BOTTOM: -->
<br style="clear: both"/>
<!-- auto: -->
<div class="flexbox">
<div>a</div>
</div>
<!-- Negative: -->
<div class="flexbox">
<div style="margin-top: 22px">a</div>
</div>
<!-- Small: -->
<div class="flexbox">
<div style="margin-top: 14px">a</div>
</div>
<!-- Large: -->
<div class="flexbox">
<div style="margin-top: -7px">a</div>
</div>
</body>
</html>

92
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-3.xhtml Normal file
View File

@ -0,0 +1,92 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- Testcase for how a baseline-aligned flex item's position is impacted by
cross-axis margins, in a fixed-size flex container with the cross axis
reversed via "flex-wrap: wrap-reverse".
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Baseline alignment of flex items in fixed-size single-line flex container, with cross axis reversed</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<link rel="help" href="http://www.w3.org/TR/css3-flexbox/#baseline-participation"/>
<link rel="match" href="flexbox-align-self-baseline-horiz-3-ref.xhtml"/>
<style>
.flexbox {
display: flex;
align-items: baseline;
flex-wrap: wrap-reverse; /* Just to flip cross-axis */
width: 40px;
height: 40px;
border: 1px solid gray;
margin: 5px; /* just for visual separation */
float: left;
}
.flexbox > * {
background: yellow;
border: 1px solid black;
height: 20px;
flex: 1;
}
</style>
</head>
<body>
<!-- ZEROTH ROW: NO MARGINS -->
<!-- No margins on flex item: -->
<div class="flexbox">
<div>a</div>
</div>
<!-- FIRST ROW: SETTING MARGIN-TOP: -->
<br style="clear: both"/>
<!-- auto: -->
<div class="flexbox">
<div style="margin-top: auto">a</div>
</div>
<!-- Negative: -->
<div class="flexbox">
<div style="margin-top: -4px">a</div>
</div>
<!-- Small: -->
<div class="flexbox">
<div style="margin-top: 4px">a</div>
</div>
<!-- Large (pushing us out of container): -->
<div class="flexbox">
<div style="margin-top: 25px">a</div>
</div>
<!-- SECOND ROW: SETTING MARGIN-BOTTOM: -->
<br style="clear: both"/>
<!-- auto: -->
<div class="flexbox">
<div style="margin-bottom: auto">a</div>
</div>
<!-- Negative: -->
<div class="flexbox">
<div style="margin-bottom: -4px">a</div>
</div>
<!-- Small: -->
<div class="flexbox">
<div style="margin-bottom: 4px">a</div>
</div>
<!-- Large: -->
<div class="flexbox">
<div style="margin-bottom: 25px">a</div>
</div>
</body>
</html>

2
layout/reftests/w3c-css/submitted/flexbox/reftest.list
View File

@ -14,6 +14,8 @@
# Tests for cross-axis alignment (align-self / align-items properties)
== flexbox-align-self-baseline-horiz-1a.xhtml flexbox-align-self-baseline-horiz-1-ref.xhtml
== flexbox-align-self-baseline-horiz-1b.xhtml flexbox-align-self-baseline-horiz-1-ref.xhtml
== flexbox-align-self-baseline-horiz-2.xhtml flexbox-align-self-baseline-horiz-2-ref.xhtml
== flexbox-align-self-baseline-horiz-3.xhtml flexbox-align-self-baseline-horiz-3-ref.xhtml
== flexbox-align-self-baseline-horiz-4.xhtml flexbox-align-self-baseline-horiz-4-ref.xhtml
== flexbox-align-self-baseline-horiz-5.xhtml flexbox-align-self-baseline-horiz-5-ref.xhtml