<!DOCTYPE html>
<html>
<head>
<style>
h5 {
margin: 0;
}
div {
font-family: monospace;
}
.container {
position: relative;
left: 150px;
font-size: 0.8em;
}
.main {
width: 400px;
}
.relative {
position: relative;
}
.fixed {
position: fixed;
}
.green {
background-color: lime;
}
.blue {
background-color: cyan;
}
.grey {
background-color: silver;
}
.rtl {
direction: rtl;
}
.inline {
display: inline-block;
position: relative;
}
</style>
</head>
<body>
<h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issues/detail?id=31286">31286</a>. css rendering bug : fixed-position-element and 'left'.</h3>
<p>If fixed position inline element does not have left and/or right position then it should render as normal flow.</p>
<h5>Case 1: fixed text box (blue) should be just after relative text box (green).</h5>
<div class="container">
<div class="main relative green" style="left: 100px;">
relative<div class="inline blue">fixed</div>
</div>
</div>
<h5>Case 2: fixed text box (blue) should be just before relative text box (green).</h5>
<div class="container">
<div class="main relative green rtl" style="left: 100px;">
relative<div class="inline blue">fixed</div>
</div>
</div>
<h5>Case 3: fixed text box (blue) should be just after relative text box (green).</h5>
<div class="container">
<div class="main relative green" style="right: 100px;">
relative<div class="inline blue">fixed</div>
</div>
</div>
<h5>Case 4: fixed text box (blue) should be just before relative text box (green).</h5>
<div class="container">
<div class="main relative green rtl" style="right: 100px;">
relative<div class="inline blue">fixed</div>
</div>
</div>
<h5>Case 5: fixed text box (blue) should be just after relative2 text box (green).</h5>
<div class="container">
<div class="main relative grey" style="left: 100px;">
relative
<span class="relative green" style="left: 100px;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
<h5>Case 6: fixed text box (blue) should be after relative text box (grey) in some distance and before the other relative2 text box (green) in some distance.</h5>
<div class="container">
<div class="main relative grey rtl" style="left: 100px;">
relative
<span class="relative green" style="left: 100px;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
<h5>Case 7: fixed text box (blue) should be just after relative2 text box (green).</h5>
<div class="container">
<div class="main relative grey" style="left: 100px;">
relative
<span class="relative green" style="right: 100px;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
<h5>Case 8: fixed text box (blue) should be before relative2 text box (green) in some distance.</h5>
<div class="container">
<div class="main relative grey rtl" style="left: 100px;">
relative
<span class="relative green" style="right: 100px;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
<h5>Case 9: fixed text box (blue) should be just after relative2 text box (green).</h5>
<div class="container">
<div class="main relative grey" style="right: 100px;">
relative
<span class="relative green" style="left: 100px;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
<h5>Case 10: fixed text box (blue) should be after relative text box (grey) in some distance and before other relative2 text box (green) in some distance.</h5>
<div class="container">
<div class="main relative grey rtl" style="right: 100px;">
relative
<span class="relative green" style="left: 100px;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
<h5>Case 11: fixed text box (blue) should be just after relative2 text box (green).</h5>
<div class="container">
<div class="main relative grey" style="right: 100px;">
relative
<span class="relative green" style="right: 100px;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
<h5>Case 12: fixed text box (blue) should be before relative2 text box (green) in some distance.</h5>
<div class="container">
<div class="main relative grey rtl" style="right: 100px;">
relative
<span class="relative green" style="right: 100px;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
<h5>Case 13: fixed text box (blue) should be just after relative2 text box (green).</h5>
<div class="container">
<div class="main relative grey" style="left: 100px;">
relative
<span class="relative green" style="left: 25%;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
<h5>Case 14: fixed text box (blue) should be after relative text box (grey) in some distance and before the other relative2 text box (green) in some distance.</h5>
<div class="container">
<div class="main relative grey rtl" style="left: 100px;">
relative
<span class="relative green" style="left: 25%;">
relative2<div class="inline blue">fixed</div>
</span>
</div>
</div>
</body>
</html>
Codebase Browser
chromium