|
1 | 1 | <!DOCTYPE html>
|
2 | 2 | <style>
|
3 |
| -.container { width:120px; position: absolute; } |
4 |
| -.multicol { -moz-column-width:50px; -moz-column-gap:10px; -webkit-column-width:50px; -webkit-column-gap:10px; column-width:50px; column-gap:10px; column-fill:auto; height:150px; border:5px solid black; } |
5 |
| -.block { width:50px; height:50px } |
6 |
| -.block:hover { background-color: maroon !important; } |
7 |
| -.layer { height:200px; width:50px } |
8 |
| -.line2 { position: absolute; top: 343px; left: 8px; } |
9 |
| -.pos1 { left: 10px; top: 10px; } |
10 |
| -.pos2 { left: 150px; top: 10px; } |
11 |
| -.pos3 { left: 10px; top: 200px; } |
12 |
| -.pos4 { left: 150px; top: 200px; } |
| 3 | + .container { |
| 4 | + width: 120px; |
| 5 | + position: absolute; |
| 6 | + will-change: transform; |
| 7 | + } |
| 8 | + .multicol { |
| 9 | + columns: 2; |
| 10 | + column-gap: 10px; |
| 11 | + column-fill: auto; |
| 12 | + height: 150px; |
| 13 | + border: 5px solid black; |
| 14 | + } |
| 15 | + .block { |
| 16 | + width: 50px; |
| 17 | + height: 50px; |
| 18 | + } |
| 19 | + .layer { |
| 20 | + width: 50px; |
| 21 | + height: 200px; |
| 22 | + } |
| 23 | + .pos1 { left: 10px; top: 10px; } |
| 24 | + .pos2 { left: 150px; top: 10px; } |
| 25 | + .pos3 { left: 10px; top: 200px; } |
| 26 | + .pos4 { left: 150px; top: 200px; } |
13 | 27 | </style>
|
| 28 | + |
14 | 29 | <div class="container pos1">
|
15 |
| -Overflow: |
16 |
| -<div class="multicol"> |
17 |
| -<div class="block" style="background-color:black"></div> |
18 |
| -<div style="overflow:clip;" class="layer"> |
19 |
| -<div class="block" style="background-color: #0000f0"></div> |
20 |
| -<div class="block" style="background-color: #0000d0"></div> |
21 |
| -<div class="block" style="background-color: #0000b0"></div> |
22 |
| -<div class="block" style="background-color: #000090"></div> |
23 |
| -</div> |
24 |
| -<div class="block" style="background-color:black"></div> |
25 |
| -</div> |
| 30 | + Overflow: |
| 31 | + <div class="multicol"> |
| 32 | + <div class="block" style="background-color:black"></div> |
| 33 | + <div style="overflow:clip;" class="layer"> |
| 34 | + <div class="block" style="background-color: #0000f0"></div> |
| 35 | + <div class="block" style="background-color: #0000d0"></div> |
| 36 | + <div class="block" style="background-color: #0000b0"></div> |
| 37 | + <div class="block" style="background-color: #000090"></div> |
| 38 | + </div> |
| 39 | + <div class="block" style="background-color:black"></div> |
| 40 | + </div> |
26 | 41 | </div>
|
27 | 42 |
|
28 | 43 | <div class="container pos2">
|
29 |
| -Transforms: |
30 |
| - |
31 |
| -<div class="multicol"> |
32 |
| -<div class="block" style="background-color:black"></div> |
33 |
| -<div style="margin-left: -100px; transform: translate(100px, 0);" class="layer"> |
34 |
| -<div class="block" style="background-color: #0000f0"></div> |
35 |
| -<div class="block" style="background-color: #0000d0"></div> |
36 |
| -<div class="block" style="background-color: #0000b0"></div> |
37 |
| -<div class="block" style="background-color: #000090"></div> |
38 |
| -</div> |
39 |
| -<div class="block" style="background-color:black"></div> |
40 |
| -</div> |
41 |
| -</div> |
| 44 | + Transforms: |
| 45 | + <div class="multicol"> |
| 46 | + <div class="block" style="background-color:black"></div> |
| 47 | + <div style="margin-left: -100px; transform: translate(100px, 0);" class="layer"> |
| 48 | + <div class="block" style="background-color: #0000f0"></div> |
| 49 | + <div class="block" style="background-color: #0000d0"></div> |
| 50 | + <div class="block" style="background-color: #0000b0"></div> |
| 51 | + <div class="block" style="background-color: #000090"></div> |
| 52 | + </div> |
| 53 | + <div class="block" style="background-color:black"></div> |
| 54 | + </div> |
42 | 55 | </div>
|
43 | 56 |
|
44 | 57 | <div class="container pos3">
|
45 |
| -Relative Pos.: |
46 |
| -<div class="multicol"> |
47 |
| -<div class="block" style="background-color:black"></div> |
48 |
| -<div style="position:relative; margin-left:-100px; left:100px" class="layer"> |
49 |
| -<div class="block" style="background-color: #0000f0"></div> |
50 |
| -<div class="block" style="background-color: #0000d0"></div> |
51 |
| -<div class="block" style="background-color: #0000b0"></div> |
52 |
| -<div class="block" style="background-color: #000090"></div> |
53 |
| -</div> |
54 |
| -<div class="block" style="background-color:black"></div> |
55 |
| -</div> |
| 58 | + Relative Pos.: |
| 59 | + <div class="multicol"> |
| 60 | + <div class="block" style="background-color:black"></div> |
| 61 | + <div style="position:relative; margin-left:-100px; left:100px" class="layer"> |
| 62 | + <div class="block" style="background-color: #0000f0"></div> |
| 63 | + <div class="block" style="background-color: #0000d0"></div> |
| 64 | + <div class="block" style="background-color: #0000b0"></div> |
| 65 | + <div class="block" style="background-color: #000090"></div> |
| 66 | + </div> |
| 67 | + <div class="block" style="background-color:black"></div> |
| 68 | + </div> |
56 | 69 | </div>
|
57 | 70 |
|
58 | 71 | <div class="container pos4">
|
59 |
| -Opacity: |
60 |
| - |
61 |
| -<div class="multicol"> |
62 |
| -<div class="block" style="background-color:black"></div> |
63 |
| -<div style="opacity:0.99;" class="layer"> |
64 |
| -<!-- The extra s below force the creation of transparency layers in Skia to work |
65 |
| - around optimizations that would cause blending differences between the test and the |
66 |
| - expectation. --> |
67 |
| -<div class="block" style="background-color: #0000f0"> </div> |
68 |
| -<div class="block" style="background-color: #0000d0"> </div> |
69 |
| -<div class="block" style="background-color: #0000b0"> </div> |
70 |
| -<div class="block" style="background-color: #000090"> </div> |
71 |
| -</div> |
72 |
| -<div class="block" style="background-color:black"></div> |
73 |
| -</div> |
| 72 | + Opacity: |
| 73 | + <div class="multicol"> |
| 74 | + <div class="block" style="background-color:black"></div> |
| 75 | + <div style="opacity:0.99;" class="layer"> |
| 76 | + <div class="block" style="background-color: #0000f0"></div> |
| 77 | + <div class="block" style="background-color: #0000d0"></div> |
| 78 | + <div class="block" style="background-color: #0000b0"></div> |
| 79 | + <div class="block" style="background-color: #000090"></div> |
| 80 | + </div> |
| 81 | + <div class="block" style="background-color:black"></div> |
| 82 | + </div> |
74 | 83 | </div>
|
0 commit comments