Chromium Code Reviews Chromium Code Reviews
Issue 669143002:
Make css-properties-position-relative-as-parent-fixed.html a ref-test (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| OLD | NEW |
|---|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style> | |
| 5 h5 { | |
| 6 margin: 0; | |
| 7 } | |
| 8 | |
| 9 .container { | |
| 10 position: relative; | |
| 11 left: 150px; | |
| 12 font-size: 0.8em; | |
| 13 } | |
| 14 | |
| 15 .main { | |
| 16 width: 400px; | |
| 17 } | |
| 18 | |
| 19 .relative { | |
| 20 position: relative; | |
| 21 } | |
| 22 | |
| 23 .fixed { | |
| 24 position: fixed; | |
| 25 } | |
| 26 | |
| 27 .green { | |
| 28 background-color: lime; | |
| 29 } | |
| 30 | |
| 31 .blue { | |
| 32 background-color: cyan; | |
| 33 } | |
| 34 | |
| 35 .grey { | |
| 36 background-color: silver; | |
| 37 } | |
| 38 | |
| 39 .rtl { | |
| 40 direction: rtl; | |
| 41 } | |
| 42 </style> | |
| 4 </head> | 43 </head> |
| 5 <body style="position:fixed; left:150px;"> | 44 <body> |
| 6 <h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issues/d etail?id=31286">31286</a>. css rendering bug : fixed-position-element and 'left' .</h3> | 45 <h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issu es/detail?id=31286">31286</a>. css rendering bug : fixed-position-element and 'l eft'.</h3> |
| 7 <h4>If fixed position inline element does not have left and/or right position th en it should render as normal flow.</h4> | 46 <p>If fixed position inline element does not have left and/or right position then it should render as normal flow.</p> |
| 8 | 47 |
| 9 <h5> | 48 <h5>Case 1: fixed text box (blue) should be just after relative text box (gr een).</h5> |
| 10 Case 1 : fixed text box should be just after relative text box. | 49 <div class="container"> |
| 11 <br/> | 50 <div class="main relative green" style="left: 100px;"> |
| 51 relative | |
| 52 <span class="fixed blue"> | |
| 53 fixed | |
| 54 </span> | |
| 55 </div> | |
| 56 </div> | |
| 12 | 57 |
| 13 <div style="position:relative; left:100px; background:green; width:400px;"> | 58 <h5>Case 2: fixed text box (blue) should be just before relative text box (g reen).</h5> |
| 14 relative | 59 <div class="container"> |
| 15 <span style="position:fixed; background:red;"> | 60 <div class="main relative green rtl" style="left: 100px;"> |
| 16 fixed | 61 relative |
| 17 </span> | 62 <span class="fixed blue"> |
| 18 </span> | 63 fixed |
| 19 </div> | 64 </span> |
| 65 </div> | |
| 66 </div> | |
| 20 | 67 |
| 21 Case 2 : fixed text box should be just before relative text box. | 68 <h5>Case 3: fixed text box (blue) should be just after relative text box (gr een).</h5> |
| 22 <br/> | 69 <div class="container"> |
| 70 <div class="main relative green" style="right: 100px;"> | |
| 71 relative | |
| 72 <span class="fixed blue"> | |
| 73 fixed | |
| 74 </span> | |
| 75 </div> | |
| 76 </div> | |
| 23 | 77 |
| 24 <div style="position:relative; left:100px; background:green; direction:rtl; widt h:400px;"> | 78 <h5>Case 4: fixed text box (blue) should be just before relative text box (g reen).</h5> |
| 25 relative | 79 <div class="container"> |
| 26 <span style="position:fixed; background:red;"> | 80 <div class="main relative green rtl" style="right: 100px;"> |
| 27 fixed | 81 relative |
| 28 </span> | 82 <span class="fixed blue"> |
| 29 </span> | 83 fixed |
| 30 </div> | 84 </span> |
| 85 </div> | |
| 86 </div> | |
| 31 | 87 |
| 32 Case 3 : fixed text box should be just after relative text box. | 88 <h5>Case 5: fixed text box (blue) should be just after relative2 text box (g reen).</h5> |
| 33 <br/> | 89 <div class="container"> |
| 90 <div class="main relative grey" style="left: 100px;"> | |
| 91 relative | |
| 92 <span class="relative green" style="left: 50px;"> | |
| 93 relative2 | |
| 94 <span class="fixed blue"> | |
| 95 fixed | |
| 96 </span> | |
| 97 </span> | |
| 98 </div> | |
| 99 </div> | |
| 34 | 100 |
| 35 <div style="position:relative; right:100px; background:green; width:400px;"> | 101 <h5>Case 6: fixed text box (blue) should be after relative text box (grey) i n some distance and before the other relative2 text box (green) in some distance .</h5> |
| 36 relative | 102 <div class="container"> |
| 37 <span style="position:fixed; background:red;"> | 103 <div class="main relative grey rtl" style="left: 100px;"> |
| 38 fixed | 104 relative |
| 39 </span> | 105 <span class="relative green" style="left: 100px;"> |
| 40 </span> | 106 relative2 |
| 41 </div> | 107 <span class="fixed blue"> |
| 108 fixed | |
| 109 </span> | |
| 110 </span> | |
| 111 </div> | |
| 112 </div> | |
| 42 | 113 |
| 43 Case 4 : fixed text box should be just before relative text box. | 114 <h5>Case 7: fixed text box (blue) should be just after relative2 text box (g reen).</h5> |
| 44 <br/> | 115 <div class="container"> |
| 116 <div class="main relative grey" style="left: 100px;"> | |
| 117 relative | |
| 118 <span class="relative green" style="right: 50px;"> | |
| 119 relative2 | |
| 120 <span class="fixed blue"> | |
| 121 fixed | |
| 122 </span> | |
| 123 </span> | |
| 124 </div> | |
| 125 </div> | |
| 45 | 126 |
| 46 <div style="position:relative; right:100px; background:green; direction:rtl; wid th:400px;"> | 127 <h5>Case 8: fixed text box (blue) should be before relative2 text box (green ) in some distance.</h5> |
| 47 relative | 128 <div class="container"> |
| 48 <span style="position:fixed; background:red;"> | 129 <div class="main relative grey rtl" style="left: 100px;"> |
| 49 fixed | 130 relative |
| 50 </span> | 131 <span class="relative green" style="right: 150px;"> |
| 51 </span> | 132 relative2 |
| 52 </div> | 133 <span class="fixed blue"> |
| 134 fixed | |
| 135 </span> | |
| 136 </span> | |
| 137 </div> | |
| 138 </div> | |
| 53 | 139 |
| 54 Case 5 : fixed text box should be just after relative2 text box. | 140 <h5>Case 9: fixed text box (blue) should be just after relative2 text box (g reen).</h5> |
| 55 <br/> | 141 <div class="container"> |
| 142 <div class="main relative grey" style="right: 100px;"> | |
| 143 relative | |
| 144 <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
| |
| 145 relative2 | |
| 146 <span class="fixed blue"> | |
| 147 fixed | |
| 148 </span> | |
| 149 </span> | |
| 150 </div> | |
| 151 </div> | |
| 56 | 152 |
| 57 <div style="position:relative; left:100px; background:gray; width:400px;"> | 153 <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> |
| 58 relative | 154 <div class="container"> |
| 59 <span style="position:relative; left:100px; background:green;"> | 155 <div class="main relative grey rtl" style="right: 100px;"> |
| 60 relative2 | 156 relative |
| 61 <span style="position:fixed; background:red;"> | 157 <span class="relative green" style="left: 150px;"> |
| 62 fixed | 158 relative2 |
| 63 </span> | 159 <span class="fixed blue"> |
| 64 </span> | 160 fixed |
| 65 </div> | 161 </span> |
| 162 </span> | |
| 163 </div> | |
| 164 </div> | |
| 66 | 165 |
| 67 Case 6 : fixed text box should be after relative text box in some distance and b efore relative2 in some distance. | 166 <h5>Case 11: fixed text box (blue) should be just after relative2 text box ( green).</h5> |
| 68 <br/> | 167 <div class="container"> |
| 168 <div class="main relative grey" style="right: 100px;"> | |
| 169 relative | |
| 170 <span class="relative green" style="right: 50px;"> | |
| 171 relative2 | |
| 172 <span class="fixed blue"> | |
| 173 fixed | |
| 174 </span> | |
| 175 </span> | |
| 176 </div> | |
| 177 </div> | |
| 69 | 178 |
| 70 <div style="position:relative; left:100px; background:gray; direction:rtl; width :400px;"> | 179 <h5>Case 12: fixed text box (blue) should be before relative2 text box (gree n) in some distance.</h5> |
| 71 relative | 180 <div class="container"> |
| 72 <span style="position:relative; left:100px; background:green;"> | 181 <div class="main relative grey rtl" style="right: 100px;"> |
| 73 relative2 | 182 relative |
| 74 <span style="position:fixed; background:red;"> | 183 <span class="relative green" style="right: 150px;"> |
| 75 fixed | 184 relative2 |
| 76 </span> | 185 <span class="fixed blue"> |
| 77 </span> | 186 fixed |
| 78 </div> | 187 </span> |
| 188 </span> | |
| 189 </div> | |
| 190 </div> | |
| 79 | 191 |
| 80 Case 7 : fixed text box should be just after relative2 text box. | 192 </body> |
| 81 <br/> | 193 </html> |
| 82 | |
| 83 <div style="position:relative; left:100px; background:gray; width:400px;"> | |
| 84 relative | |
| 85 <span style="position:relative; right:100px; background:green;"> | |
| 86 relative2 | |
| 87 <span style="position:fixed; background:red;"> | |
| 88 fixed | |
| 89 </span> | |
| 90 </span> | |
| 91 </div> | |
| 92 | |
| 93 Case 8 : fixed text box should be before relative2 text box in some distance. | |
| 94 <br/> | |
| 95 | |
| 96 <div style="position:relative; left:100px; background:gray; direction:rtl; width :400px;"> | |
| 97 relative | |
| 98 <span style="position:relative; right:100px; background:green;"> | |
| 99 relative2 | |
| 100 <span style="position:fixed; background:red;"> | |
| 101 fixed | |
| 102 </span> | |
| 103 </span> | |
| 104 </div> | |
| 105 | |
| 106 Case 9 : fixed text box should be just after relative2 text box. | |
| 107 <br/> | |
| 108 | |
| 109 <div style="position:relative; right:100px; background:gray; width:400px;"> | |
| 110 relative | |
| 111 <span style="position:relative; left:100px; background:green;"> | |
| 112 relative2 | |
| 113 <span style="position:fixed; background:red;"> | |
| 114 fixed | |
| 115 </span> | |
| 116 </span> | |
| 117 </div> | |
| 118 | |
| 119 Case 10 : fixed text box should be after relative text box in some distance and before relative2 in some distance. | |
| 120 <br/> | |
| 121 | |
| 122 <div style="position:relative; right:100px; background:gray; direction:rtl; widt h:400px;"> | |
| 123 relative | |
| 124 <span style="position:relative; left:100px; background:green;"> | |
| 125 relative2 | |
| 126 <span style="position:fixed; background:red;"> | |
| 127 fixed | |
| 128 </span> | |
| 129 </span> | |
| 130 </div> | |
| 131 | |
| 132 Case 11 : fixed text box should be just after relative2 text box. | |
| 133 <br/> | |
| 134 | |
| 135 <div style="position:relative; right:100px; background:gray; width:400px;"> | |
| 136 relative | |
| 137 <span style="position:relative; right:100px; background:green;"> | |
| 138 relative2 | |
| 139 <span style="position:fixed; background:red;"> | |
| 140 fixed | |
| 141 </span> | |
| 142 </span> | |
| 143 </div> | |
| 144 | |
| 145 Case 12 : fixed text box should be before relative2 text box in some distance. | |
| 146 <br/> | |
| 147 | |
| 148 <div style="position:relative; right:100px; background:gray; direction:rtl; widt h:400px;"> | |
| 149 relative | |
| 150 <span style="position:relative; right:100px; background:green;"> | |
| 151 relative2 | |
| 152 <span style="position:fixed; background:red;"> | |
| 153 fixed | |
| 154 </span> | |
| 155 </span> | |
| 156 </div> | |
| 157 | |
| 158 </h5> | |
| OLD | NEW |
