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<!--
7     Testcase with fixed-position children of a flex container.
8     The positioning is with respect to the containing block's left edge.
9-->
10<html xmlns="http://www.w3.org/1999/xhtml">
11  <head>
12    <style>
13      div.containingBlock {
14        top: 15px;
15        left: 20px;
16        height: 400px;
17        position: absolute;
18        border: 2px dashed purple;
19      }
20      .fixedpos {
21        position: fixed;
22        left: 5px;
23        border: 2px dotted black;
24      }
25      div.flexbox {
26        width: 200px;
27        height: 100px;
28        display: flex;
29      }
30      div.a {
31        flex: 1 0 auto;
32        width: 30px;
33        height: 100px;
34        background: lightgreen;
35      }
36      div.b {
37        flex: 2 0 auto;
38        width: 20px;
39        height: 100px;
40        background: yellow;
41      }
42      div.inflex {
43        flex: none;
44        width: 20px;
45        height: 100px;
46        background: gray;
47      }
48      div.noFlexFn {
49        width: 15px;
50        height: 15px;
51        background: teal;
52      }
53    </style>
54  </head>
55  <body>
56    <div class="containingBlock">
57      <!-- First child fixedpos: -->
58      <div class="flexbox"><div class="a fixedpos"/><div class="b"/></div>
59      <!-- Second child fixedpos: -->
60      <div class="flexbox"><div class="a"/><div class="b fixedpos"/></div>
61      <!-- Middle child fixedpos: -->
62      <div class="flexbox"
63           ><div class="a"/><div class="inflex fixedpos"/><div class="b"/></div>
64      <!-- Third child fixedpos, w/ inflexible items & justify-content: space-around: -->
65      <div class="flexbox" style="justify-content: space-around"
66           ><div class="inflex"/><div class="inflex"/><div class="inflex"
67          /><div class="noFlexFn fixedpos"/><div class="inflex"/></div>
68    </div>
69  </body>
70</html>
71