Index: LayoutTests/fast/css/css-properties-position-relative-as-parent-fixed.html |
diff --git a/LayoutTests/fast/css/css-properties-position-relative-as-parent-fixed.html b/LayoutTests/fast/css/css-properties-position-relative-as-parent-fixed.html |
index 8b487cdceb8138ea119ad7ac1a54ed5d1ffc5f71..a0158740dd7d4135ee68b48ad90cf5b97ac9e575 100644 |
--- a/LayoutTests/fast/css/css-properties-position-relative-as-parent-fixed.html |
+++ b/LayoutTests/fast/css/css-properties-position-relative-as-parent-fixed.html |
@@ -1,158 +1,193 @@ |
<!DOCTYPE html> |
<html> |
<head> |
+ <style> |
+ h5 { |
+ margin: 0; |
+ } |
+ |
+ .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; |
+ } |
+ </style> |
</head> |
-<body style="position:fixed; left:150px;"> |
-<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> |
-<h4>If fixed position inline element does not have left and/or right position then it should render as normal flow.</h4> |
- |
-<h5> |
-Case 1 : fixed text box should be just after relative text box. |
-<br/> |
- |
-<div style="position:relative; left:100px; background:green; width:400px;"> |
-relative |
-<span style="position:fixed; background:red;"> |
-fixed |
-</span> |
-</span> |
-</div> |
- |
-Case 2 : fixed text box should be just before relative text box. |
-<br/> |
- |
-<div style="position:relative; left:100px; background:green; direction:rtl; width:400px;"> |
-relative |
-<span style="position:fixed; background:red;"> |
-fixed |
-</span> |
-</span> |
-</div> |
- |
-Case 3 : fixed text box should be just after relative text box. |
-<br/> |
- |
-<div style="position:relative; right:100px; background:green; width:400px;"> |
-relative |
-<span style="position:fixed; background:red;"> |
-fixed |
-</span> |
-</span> |
-</div> |
- |
-Case 4 : fixed text box should be just before relative text box. |
-<br/> |
- |
-<div style="position:relative; right:100px; background:green; direction:rtl; width:400px;"> |
-relative |
-<span style="position:fixed; background:red;"> |
-fixed |
-</span> |
-</span> |
-</div> |
- |
-Case 5 : fixed text box should be just after relative2 text box. |
-<br/> |
- |
-<div style="position:relative; left:100px; background:gray; width:400px;"> |
-relative |
-<span style="position:relative; left:100px; background:green;"> |
-relative2 |
-<span style="position:fixed; background:red;"> |
-fixed |
-</span> |
-</span> |
-</div> |
- |
-Case 6 : fixed text box should be after relative text box in some distance and before relative2 in some distance. |
-<br/> |
- |
-<div style="position:relative; left:100px; background:gray; direction:rtl; width:400px;"> |
-relative |
-<span style="position:relative; left:100px; background:green;"> |
-relative2 |
-<span style="position:fixed; background:red;"> |
-fixed |
-</span> |
-</span> |
-</div> |
- |
-Case 7 : fixed text box should be just after relative2 text box. |
-<br/> |
- |
-<div style="position:relative; left:100px; background:gray; width:400px;"> |
-relative |
-<span style="position:relative; right:100px; background:green;"> |
-relative2 |
-<span style="position:fixed; background:red;"> |
-fixed |
-</span> |
-</span> |
-</div> |
- |
-Case 8 : fixed text box should be before relative2 text box in some distance. |
-<br/> |
- |
-<div style="position:relative; left:100px; background:gray; direction:rtl; width:400px;"> |
-relative |
-<span style="position:relative; right:100px; background:green;"> |
-relative2 |
-<span style="position:fixed; background:red;"> |
-fixed |
-</span> |
-</span> |
-</div> |
- |
-Case 9 : fixed text box should be just after relative2 text box. |
-<br/> |
- |
-<div style="position:relative; right:100px; background:gray; width:400px;"> |
-relative |
-<span style="position:relative; left:100px; background:green;"> |
-relative2 |
-<span style="position:fixed; background:red;"> |
-fixed |
-</span> |
-</span> |
-</div> |
- |
-Case 10 : fixed text box should be after relative text box in some distance and before relative2 in some distance. |
-<br/> |
- |
-<div style="position:relative; right:100px; background:gray; direction:rtl; width:400px;"> |
-relative |
-<span style="position:relative; left:100px; background:green;"> |
-relative2 |
-<span style="position:fixed; background:red;"> |
-fixed |
-</span> |
-</span> |
-</div> |
- |
-Case 11 : fixed text box should be just after relative2 text box. |
-<br/> |
- |
-<div style="position:relative; right:100px; background:gray; width:400px;"> |
-relative |
-<span style="position:relative; right:100px; background:green;"> |
-relative2 |
-<span style="position:fixed; background:red;"> |
-fixed |
-</span> |
-</span> |
-</div> |
- |
-Case 12 : fixed text box should be before relative2 text box in some distance. |
-<br/> |
- |
-<div style="position:relative; right:100px; background:gray; direction:rtl; width:400px;"> |
-relative |
-<span style="position:relative; right:100px; background:green;"> |
-relative2 |
-<span style="position:fixed; background:red;"> |
-fixed |
-</span> |
-</span> |
-</div> |
- |
-</h5> |
+<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 |
+ <span class="fixed blue"> |
+ fixed |
+ </span> |
+ </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 |
+ <span class="fixed blue"> |
+ fixed |
+ </span> |
+ </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 |
+ <span class="fixed blue"> |
+ fixed |
+ </span> |
+ </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 |
+ <span class="fixed blue"> |
+ fixed |
+ </span> |
+ </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 |
+ <span class="fixed blue"> |
+ fixed |
+ </span> |
+ </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 |
+ <span class="fixed blue"> |
+ fixed |
+ </span> |
+ </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 |
+ <span class="fixed blue"> |
+ fixed |
+ </span> |
+ </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 |
+ <span class="fixed blue"> |
+ fixed |
+ </span> |
+ </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 |
+ <span class="fixed blue"> |
+ fixed |
+ </span> |
+ </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 |
+ <span class="fixed blue"> |
+ fixed |
+ </span> |
+ </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 |
+ <span class="fixed blue"> |
+ fixed |
+ </span> |
+ </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 |
+ <span class="fixed blue"> |
+ fixed |
+ </span> |
+ </span> |
+ </div> |
+ </div> |
+ |
+</body> |
+</html> |