Chromium Code Reviews| 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..0bcd03e75182d2ef21085f319f11988062c5151d 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: 50px;"> |
| + 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: 50px;"> |
| + 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: 150px;"> |
| + 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: 50px;"> |
|
Julien - ping for review
2014/11/10 21:56:27
Is it expected for you to change this value? (it w
Manuel Rego
2014/11/11 10:14:19
Yeah, you're right. These changes are not needed a
|
| + 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: 150px;"> |
| + 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: 50px;"> |
| + 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: 150px;"> |
| + relative2 |
| + <span class="fixed blue"> |
| + fixed |
| + </span> |
| + </span> |
| + </div> |
| + </div> |
| + |
| +</body> |
| +</html> |