anchor-getComputedStyle-002.html (2792B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Tests getComputedStyle() resolving anchor() in fragmentation context</title> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1"> 5 <link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value"> 6 <link rel="author" href="mailto:xiaochengh@chromium.org"> 7 <link rel="stylesheet" href="/fonts/ahem.css"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 11 <style> 12 body { 13 margin: 0; 14 } 15 16 .rel { 17 position: relative; 18 background: lightgray; 19 } 20 21 .anchor { 22 anchor-name: --a; 23 background: orange; 24 } 25 26 .target { 27 position: absolute; 28 left: anchor(--a left); 29 right: anchor(--a right); 30 top: anchor(--a top); 31 bottom: anchor(--a bottom); 32 background: lime; 33 opacity: 0.5; 34 } 35 </style> 36 37 <!-- anchor is fragmented in second and third columns --> 38 <div class="multicol" id="test1"> 39 <div class="rel"> 40 <div class="spacer"></div> 41 <div class="anchor"></div> 42 <div class="target"></div> 43 </div> 44 </div> 45 <style> 46 #test1.multicol { 47 column-count: 3; 48 column-width: 100px; 49 column-gap: 10px; 50 width: 320px; 51 height: 100px; 52 } 53 54 #test1 .rel{ 55 width: 100px; 56 height: 300px; 57 } 58 59 #test1 .spacer { 60 height: 175px; 61 } 62 63 #test1 .anchor { 64 margin-left: 25px; 65 width: 50px; 66 height: 50px; 67 } 68 </style> 69 <script> 70 setup({ explicit_done: true }); 71 72 test(() => { 73 const target = test1.querySelector('.target'); 74 const style = getComputedStyle(target); 75 assert_equals(style.left, '25px'); 76 assert_equals(style.right, '25px'); 77 assert_equals(style.top, '175px'); 78 assert_equals(style.bottom, '75px'); 79 }, 'getComputedStyle() with fragmented containing block in multicolumn layout'); 80 </script> 81 82 83 <div id="test2" style="font: 20px/1 Ahem; width: 11em"> 84 <div> 85 Lorem 86 <span class="rel"> 87 ipsum <span class="anchor">dolor</span> sit 88 <span class="target"></span> 89 </span> 90 amet. 91 </div> 92 93 <div> 94 Lorem 95 <span class="rel"> 96 ipsum dolor <span class="anchor">sit</span> 97 <span class="target"></span> 98 </span> 99 amet. 100 </div> 101 </div> 102 <script> 103 // Ensure Ahem font has a chance to load before examining layout. 104 document.fonts.ready.then(() => { 105 test(() => { 106 const targets = test2.querySelectorAll('.target'); 107 108 const style1 = getComputedStyle(targets[0]); 109 assert_equals(style1.top, '20px'); 110 assert_equals(style1.bottom, '0px'); 111 assert_equals(style1.left, '-120px'); 112 assert_equals(style1.right, '80px'); 113 114 const style2 = getComputedStyle(targets[1]); 115 assert_equals(style2.top, '20px'); 116 assert_equals(style2.bottom, '0px'); 117 assert_equals(style2.left, '0px'); 118 assert_equals(style2.right, '0px'); 119 }, 'getComputedStyle() with fragmented containing block in inline layout'); 120 121 done(); 122 }) 123 </script>