third_party/WebKit/LayoutTests/fast/css/css-properties-position-relative-as-parent-fixed-expected.html - chromium/src - Git at Google

 <!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>
	<!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>