mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-08 10:44:56 +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
72 lines
2.0 KiB
HTML
72 lines
2.0 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!--
|
|
Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/
|
|
-->
|
|
<!--
|
|
Testcase with fixed-position children of a flex container.
|
|
In this testcase, we simply specify "position: fixed" without
|
|
actually doing any positioning, to test the "static position" of these
|
|
children.
|
|
-->
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<style>
|
|
div.containingBlock {
|
|
top: 15px;
|
|
left: 20px;
|
|
height: 400px;
|
|
position: absolute;
|
|
border: 2px dashed purple;
|
|
}
|
|
.fixedpos {
|
|
position: fixed;
|
|
border: 2px dotted black;
|
|
}
|
|
div.flexbox {
|
|
width: 200px;
|
|
height: 100px;
|
|
display: flex;
|
|
}
|
|
div.a {
|
|
flex: 1 0 auto;
|
|
width: 30px;
|
|
height: 100px;
|
|
background: lightgreen;
|
|
}
|
|
div.b {
|
|
flex: 2 0 auto;
|
|
width: 20px;
|
|
height: 100px;
|
|
background: yellow;
|
|
}
|
|
div.inflex {
|
|
flex: none;
|
|
width: 20px;
|
|
height: 100px;
|
|
background: gray;
|
|
}
|
|
div.noFlexFn {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: teal;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="containingBlock">
|
|
<!-- First child fixedpos: -->
|
|
<div class="flexbox"><div class="a fixedpos"/><div class="b"/></div>
|
|
<!-- Second child fixedpos: -->
|
|
<div class="flexbox"><div class="a"/><div class="b fixedpos"/></div>
|
|
<!-- Middle child fixedpos: -->
|
|
<div class="flexbox"
|
|
><div class="a"/><div class="inflex fixedpos"/><div class="b"/></div>
|
|
<!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
|
|
<div class="flexbox" style="justify-content: space-around"
|
|
><div class="inflex"/><div class="inflex"/><div class="inflex"
|
|
/><div class="noFlexFn fixedpos"/><div class="inflex"/></div>
|
|
</div>
|
|
</body>
|
|
</html>
|