position-try-cascade.html (3430B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning Test: @position-try and cascade interaction</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-apply"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 .cb { 8 position: relative; 9 width: 100px; 10 height: 100px; 11 background: lightpink; 12 display: inline-block; 13 } 14 .abs { 15 position: absolute; 16 background: darkcyan; 17 left: 0px; 18 top: 0px; 19 width: 150px; /* force fallback */ 20 height: 25px; 21 position-try-fallbacks: --pf; 22 } 23 @position-try --pf { 24 width: 50px; 25 left: 50px; 26 top: 50px; 27 } 28 </style> 29 30 <!-- Basic @position-try rule --> 31 <div class=cb> 32 <div id=abs_try class=abs></div> 33 </div> 34 <script> 35 test(() => { 36 assert_equals(abs_try.offsetLeft, 50); 37 assert_equals(abs_try.offsetTop, 50); 38 }, '@position-try rule applies'); 39 </script> 40 41 <!-- Inline style --> 42 <div class=cb> 43 <div id=abs_inline class=abs style="left:20px"></div> 44 </div> 45 <script> 46 test(() => { 47 assert_equals(abs_inline.offsetLeft, 50); 48 assert_equals(abs_inline.offsetTop, 50); 49 }, '@position-try rule wins over inline style'); 50 </script> 51 52 <!-- !important --> 53 <style> 54 #abs_important { 55 left: 10px !important; 56 } 57 </style> 58 <div class=cb> 59 <div id=abs_important class=abs></div> 60 </div> 61 <script> 62 test(() => { 63 assert_equals(abs_important.offsetLeft, 10); 64 assert_equals(abs_important.offsetTop, 50); 65 }, '@position-try rule does not win over !important'); 66 </script> 67 68 <!-- Animations --> 69 <style> 70 @keyframes anim { 71 from { top: 20px; } 72 to { top: 20px; } 73 } 74 #abs_animation { 75 animation: anim 1000s steps(2, start) paused; 76 } 77 </style> 78 <div class=cb> 79 <div id=abs_animation class=abs></div> 80 </div> 81 <script> 82 test(() => { 83 assert_equals(abs_animation.offsetLeft, 50); 84 assert_equals(abs_animation.offsetTop, 20); 85 }, '@position-try rule does not win over animations'); 86 </script> 87 88 <!-- Transitions --> 89 <style> 90 #abs_transition { 91 top: 50px; 92 93 &.move { 94 top: 10px !important; 95 transition: top 1000s steps(2, start); 96 } 97 } 98 </style> 99 <div class=cb> 100 <div id=abs_transition class=abs></div> 101 </div> 102 <script> 103 test(() => { 104 abs_transition.offsetTop; 105 abs_transition.classList.add('move'); 106 assert_equals(abs_transition.offsetLeft, 50); 107 assert_equals(abs_transition.offsetTop, 30); 108 }, '@position-try rule does not win over transitions'); 109 </script> 110 111 <!-- revert / revert-layer --> 112 <style> 113 #abs_revert { 114 position-try-fallbacks: --pf-revert; 115 } 116 @layer author-layer { 117 #abs_revert { 118 top: 30px; 119 left: 30px; 120 } 121 } 122 #abs_revert { 123 top: 20px; 124 left: 20px; 125 /* overflowing .cb to force --pf-revert to be applied */ 126 width: 200px; 127 height: 200px; 128 } 129 @position-try --pf-revert { 130 left: revert; 131 top: revert-layer; 132 width: 30px; 133 height: 30px; 134 } 135 </style> 136 <div class=cb class=abs> 137 <div id=abs_revert class=abs></div> 138 </div> 139 <script> 140 test(() => { 141 assert_equals(abs_revert.offsetLeft, 0, "left reverted back to user origin"); 142 assert_equals(abs_revert.offsetTop, 20, "top reverted back to author"); 143 assert_equals(abs_revert.offsetWidth, 30, "width from --pf-revert"); 144 assert_equals(abs_revert.offsetHeight, 30, "height from --pf-revert"); 145 }, '@position-try revert / revert-layer reverts to user / author origin'); 146 </script>