| <!DOCTYPE html> |
| <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name"> |
| <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos"> |
| <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-size"> |
| <link rel="author" href="mailto:kojii@chromium.org"> |
| <link rel="author" href="mailto:mstensho@chromium.org"> |
| <link rel="match" href="anchor-position-multicol-002-ref.html"> |
| <style> |
| .cb { |
| transform: translate(0); /* Make it a containing block. */ |
| border: solid transparent; |
| border-width: 5px 6px 7px 8px; |
| padding: 5px 6px 7px 8px; |
| } |
| .columns { |
| columns: 3; |
| column-fill: auto; |
| column-gap: 10px; |
| width: 320px; |
| height: 100px; |
| } |
| .anchor1 { |
| anchor-name: --a1; |
| margin-left: 10px; |
| width: 50px; |
| height: 90px; |
| background: yellow; |
| } |
| .target { |
| position: absolute; |
| } |
| .target.fixed { |
| position: fixed; |
| } |
| .all { |
| left: anchor(--a1 left); |
| top: anchor(--a1 top); |
| width: anchor-size(--a1 width); |
| height: anchor-size(--a1 height); |
| } |
| .rb { |
| right: anchor(--a1 right); |
| bottom: anchor(--a1 bottom); |
| width: 10px; |
| height: 10px; |
| } |
| .target::before { |
| position: absolute; |
| content: ""; |
| background: green; |
| } |
| .target.inner.all::before { |
| width: 100%; |
| height: 50%; |
| } |
| .target.inner.all.part2::before { |
| top: 50%; |
| } |
| /* Mark the .rb area red again. */ |
| .target.inner.all.part2::after { |
| position: absolute; |
| content: ""; |
| right: 0; |
| bottom: 0; |
| width: 10px; |
| height: 10px; |
| background: red; |
| } |
| .target.inner.rb::before { |
| width: 50%; |
| height: 100%; |
| } |
| .target.inner.rb.part2::before { |
| left: 50%; |
| } |
| .target.outer::before { |
| left: 50px; |
| right: 50px; |
| height: 25%; |
| } |
| .target.outer.part2::before { |
| top: 25%; |
| } |
| .target.outer.part3::before { |
| top: 50%; |
| } |
| .target.outer.part4::before { |
| top: 75%; |
| } |
| </style> |
| <p>There should be a green rectangle below, no red.</p> |
| <div class="cb outer"> |
| <div style="position:absolute; z-index:-1; left:144px; width:160px; height:100px; background:red;"></div> |
| <div class="columns"> |
| <div style="height:30px;"></div> |
| <div class="cb inner"> |
| <!-- This spacer fills up to the middle of the 2nd column. --> |
| <div style="height:60px;"></div> |
| <div style="margin-left:10px; width:50px; height:70px; background:green;"></div> |
| <div class="anchor1"></div> |
| <div style="margin-right:12px; height:40px; background:green;"></div> |
| <div style="height:60px;"></div> |
| |
| <!-- The containing block of querying elements is block-fragmented. --> |
| <div class="target all inner part1"></div> |
| <div class="target all fixed inner part2"></div> |
| <div class="target rb inner part1"></div> |
| <div class="target rb fixed inner part2"></div> |
| </div> |
| |
| <!-- The containing block of querying elements is a multi-column, i.e. not fragmented. --> |
| <div class="target all outer part1"></div> |
| <div class="target all fixed outer part2"></div> |
| <div class="target rb outer part1"></div> |
| <div class="target rb fixed outer part2"></div> |
| </div> |
| |
| <!-- The containing block of querying elements is not fragmented. --> |
| <div class="target all outer part3"></div> |
| <div class="target all fixed outer part4"></div> |
| <div class="target rb outer part3"></div> |
| <div class="target rb fixed outer part4"></div> |
| </div> |
