blob: 52e896aa9dc9602f104faf6905d37bf42c37f81e [file] [log] [blame]
<!DOCTYPE html>
<!--
| Tests for CSS Flexible Box Layout Module.
| Testing absolutely positioned flex container children.
-->
<html>
<head>
<style>
body {
margin: 0px;
font-family: Roboto;
background-color: gray;
font-size: 12px;
}
.flex {
display: inline-flex;
flex-flow: row wrap;
color: fuchsia;
background-color: yellow;
opacity: 0.75;
min-width: 400px;
min-height: 200px;
margin: 10px 20px 40px 30px;
border: solid white;
border-width: 10px 25px 25px 25px;
-no-position: relative;
-no-transform: translateX(0);
}
.absolute {
background-color: blue;
position: absolute;
}
.fixed {
background-color: purple;
position: fixed;
}
div > span {
padding: 1.25%;
border: 10px solid black;
}
div > video {
opacity: 1;
width: 5%;
height: 5%;
z-index: 1;
}
</style>
</head>
<body>
-gh-
<div style="height: 5px; background-color: black;"></div>
<div style="display: inline-flex; width: 5px; height: 50px; background-color: black;"></div>
<span style="display: inline-block; width: 40px; background-color: lime;">-gh-</span>
<div class="flex">
<video class="absolute" style="top: 20%;"></video>
<video class="absolute" style="top: 30%; left: 0%;"></video>
<video class="absolute" style="left: 20%;"></video>
<video class="absolute" style="left: 30%; top: 0%;"></video>
<video class="fixed" style="top: 40%;"></video>
<video class="fixed" style="top: 50%; left: 0%;"></video>
<video class="fixed" style="left: 40%;"></video>
<video class="fixed" style="left: 50%; top: 0%;"></video>
<span class="absolute" style="top: 60%;"></span>
<span class="absolute" style="top: 70%; left: 0%;"></span>
<span class="absolute" style="left: 60%;"></span>
<span class="absolute" style="left: 70%; top: 0%;"></span>
<span class="fixed" style="top: 80%;"></span>
<span class="fixed" style="top: 90%; left: 0%;"></span>
<span class="fixed" style="left: 80%;"></span>
<span class="fixed" style="left: 90%; top: 0%"></span>
</div>
<div style="display: inline-flex; width: 5px; height: 50px; background-color: black;"></div>
<div style="height: 5px; background-color: black;"></div>
</body>
</html>