position-try-cascade-layer-reorder.html (1876B)
1 <!DOCTYPE html> 2 <title>Tests that @position-try rules are reordered by cascade layers</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule"> 4 <link rel="help" href="https://www.w3.org/TR/css-cascade-5/#layering"> 5 <link rel="author" href="mailto:xiaochengh@chromium.org"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 body { margin: 0; } 10 #anchor { 11 width: 100px; 12 height: 100px; 13 margin-left: 200px; 14 margin-top: 200px; 15 color: orange; 16 anchor-name: --a; 17 } 18 19 .target { 20 position: absolute; 21 width: 100px; 22 height: 100px; 23 color: lime; 24 position-try-fallbacks: --fallback; 25 left: 999999px; /* force fallback */ 26 } 27 </style> 28 29 <div id="anchor"></div> 30 31 <script> 32 function createTargetWithStyle(test, style) { 33 let styleElement = document.createElement('style'); 34 styleElement.textContent = style; 35 let target = document.createElement('div'); 36 target.classList.add('target'); 37 38 test.add_cleanup(() => { 39 styleElement.remove(); 40 target.remove(); 41 }); 42 43 document.head.appendChild(styleElement); 44 document.body.appendChild(target); 45 return target; 46 } 47 48 test(t => { 49 const target = createTargetWithStyle(t, ` 50 @position-try --fallback { 51 left: auto; 52 right: anchor(--a left); 53 } 54 @position-try --fallback { 55 left: anchor(--a right); 56 } 57 `); 58 assert_equals(target.offsetLeft, 300); 59 }, 'When in the same layer, the last rule of each name wins'); 60 61 test(t => { 62 const target = createTargetWithStyle(t, ` 63 @position-try --fallback { 64 left: auto; 65 bottom: anchor(--a top); 66 } 67 @layer { 68 @position-try --fallback { 69 left: auto; 70 top: anchor(--a bottom); 71 } 72 } 73 `); 74 assert_equals(target.offsetTop, 100); 75 }, 'When in different layers, the rule of each name in the highest layer wins'); 76 </script>