mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-08 19:04:45 +00:00
3903256ea3
This patch also: * Removes some now-unnecessary code from nsFlexContainerFrame, which was for jumping from wrapped-placeholders to their out-of-flow frames (for DOM comparisons). This code is now unnecessary because placeholders won't be wrapped anymore. * Updates some reftests with abspos content to match the updated spec's expectations, with one marked as "fails" for the time being (until bug 1269046 implements css box alignment, which we need to render that test correctly). MozReview-Commit-ID: 8canWfXk6Kf
75 lines
2.1 KiB
HTML
75 lines
2.1 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!--
|
|
Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/
|
|
-->
|
|
<!-- Reference case for absolutely positioned children of a flex container. -->
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<style>
|
|
div.containingBlock {
|
|
top: 15px;
|
|
left: 20px;
|
|
height: 400px;
|
|
position: absolute;
|
|
border: 2px dashed purple;
|
|
}
|
|
.abspos {
|
|
position: absolute;
|
|
border: 2px dotted black;
|
|
}
|
|
div.flexbox {
|
|
width: 200px;
|
|
height: 100px;
|
|
}
|
|
div.a {
|
|
width: 100%;
|
|
height: 100px;
|
|
background: lightgreen;
|
|
display: inline-block;
|
|
}
|
|
div.b {
|
|
width: 100%;
|
|
height: 100px;
|
|
background: yellow;
|
|
display: inline-block;
|
|
}
|
|
div.inflex {
|
|
width: 20px;
|
|
height: 100px;
|
|
background: gray;
|
|
display: inline-block;
|
|
}
|
|
div.noFlexFn {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: teal;
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="containingBlock">
|
|
<!-- First child abspos: -->
|
|
<div class="flexbox"
|
|
><div class="a abspos" style="width: 30px"/><div class="b"/></div>
|
|
<!-- Second child abspos: -->
|
|
<div class="flexbox"
|
|
><div class="a"/><div class="b abspos"
|
|
style="width: 20px; left: 0"/></div>
|
|
<!-- Middle child abspos: -->
|
|
<div class="flexbox"
|
|
><div class="a" style="width: 80px"
|
|
/><div class="inflex abspos" style="left: 0"
|
|
/><div class="b" style="width: 120px"/></div>
|
|
<!-- Third child abspos, w/ inflexible items & justify-content: space-around: -->
|
|
<div class="flexbox"
|
|
><div class="inflex" style="margin-left: 15px"
|
|
/><div class="inflex" style="margin-left: 30px"
|
|
/><div class="inflex" style="margin-left: 30px"
|
|
/><div class="noFlexFn abspos" style="left: 90px"
|
|
/><div class="inflex" style="margin-left: 30px"/></div>
|
|
</div>
|
|
</body>
|
|
</html>
|