Chromium Code Reviews Chromium Code Reviews
Issue 799403006:
[New Multicolumn] Make computeOffsetFromCompositedAncestor() flowthread-aware. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/fast/multicol/composited-layer-single-fragment.html |
| diff --git a/LayoutTests/fast/multicol/composited-layer-single-fragment.html b/LayoutTests/fast/multicol/composited-layer-single-fragment.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..96d56be7fdf785255e14fdea13317209a36bb757 |
| --- /dev/null |
| +++ b/LayoutTests/fast/multicol/composited-layer-single-fragment.html |
| @@ -0,0 +1,84 @@ |
| +<!DOCTYPE html> |
| +<style> |
| +.test { |
| + position: absolute; |
| + padding-left: 10px; |
| +} |
| +.multicol { |
| + width: 60px; |
| + -webkit-column-width: 20px; |
| + -webkit-column-gap: 0; |
| + column-fill: auto; |
| + height: 60px; |
| + border: 5px solid black; |
| +} |
| +.element { |
| + width: 20px; |
| + height: 20px; |
| +} |
| +.e1 { background-color: #bb0; } |
| +.e2 { background-color: #990; } |
| +.e3 { background-color: #660; } |
| +.e4 { background-color: #b0b; } |
| +.e5 { background-color: #909; } |
| +.e6 { background-color: #606; } |
| +.e7 { background-color: #0bb; } |
| +.e8 { background-color: #099; } |
| +.e9 { background-color: #066; } |
| + |
| +.layer { will-change: transform; } |
| + |
| +#test1 { top: 50px; left: 0; } |
| +#test2 { top: 50px; left: 150px; } |
| +#test3 { top: 50px; left: 300px; } |
| + |
| +</style> |
| +Test that composited layers fully contained within a column are rendered. |
| +<div id="test1" class="test"> |
| + 1st col.: |
| + <div class="multicol"> |
| + <div class="element e1"></div> |
|
chrishtr
2014/12/17 19:35:55
Can this test be reduced? It's quite large.
mstensho (USE GERRIT)
2014/12/17 22:26:53
Done.
|
| + <div class="element e2"></div> |
| + <div class="layer"> |
| + <div class="element e3"></div> |
| + </div> |
| + <div class="element e4"></div> |
| + <div class="element e5"></div> |
| + <div class="element e6"></div> |
| + <div class="element e7"></div> |
| + <div class="element e8"></div> |
| + <div class="element e9"></div> |
| + </div> |
| +</div> |
| +<div id="test2" class="test"> |
| + 2nd col.: |
| + <div class="multicol"> |
| + <div class="element e1"></div> |
| + <div class="element e2"></div> |
| + <div class="element e3"></div> |
| + <div class="element e4"></div> |
| + <div class="layer"> |
| + <div class="element e5"></div> |
| + </div> |
| + <div class="element e6"></div> |
| + <div class="element e7"></div> |
| + <div class="element e8"></div> |
| + <div class="element e9"></div> |
| + </div> |
| +</div> |
| +<div id="test3" class="test"> |
| + Entire col.: |
| + <div class="multicol"> |
| + <div class="element e1"></div> |
| + <div class="element e2"></div> |
| + <div class="element e3"></div> |
| + <div class="element e4"></div> |
| + <div class="element e5"></div> |
| + <div class="element e6"></div> |
| + <div class="layer"> |
| + <div class="element e7"></div> |
| + <div class="element e8"></div> |
| + <div class="element e9"></div> |
| + </div> |
| + </div> |
| +</div> |
