auto-inset-margin-getComputedStyle.html (4484B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Tests that getComputedStyle() returns auto insets and margins 0 when position-area or anchor-center is used with valid default anchor</title> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-area"> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-pos"> 6 <link rel="author" name="David Shin" href="mailto:dshin@mozilla.com"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 .abs-cb { 11 width: 60px; 12 height: 60px; 13 border: 5px solid; 14 position: relative; 15 anchor-scope: all; 16 display: inline-block; 17 /* Nudge static position against padding box. */ 18 padding: 10px; 19 } 20 21 .anchor { 22 anchor-name: --a; 23 position: absolute; 24 left: 20px; 25 top: 20px; 26 width: 20px; 27 height: 20px; 28 background: pink; 29 } 30 31 .positioned { 32 position: absolute; 33 background: purple; 34 width: 20px; 35 height: 20px; 36 } 37 38 .margin-auto > .positioned { 39 inset: 0; 40 margin: auto; 41 } 42 43 .inset-auto > .positioned { 44 inset: auto; 45 } 46 47 .pa { 48 position-area: bottom right; 49 } 50 51 .jac { 52 justify-self: anchor-center; 53 } 54 55 .aac { 56 align-self: anchor-center; 57 } 58 59 .valid-anchor > .positioned { 60 position-anchor: --a; 61 } 62 </style> 63 <div id=insetValidAnchor class="abs-cb inset-auto valid-anchor"> 64 <div class=anchor></div> 65 <div class="positioned pa"></div> 66 <div class="positioned jac"></div> 67 <div class="positioned aac"></div> 68 </div 69 ><div id=insetInvalidAnchor class="abs-cb inset-auto"> 70 <div class=anchor></div> 71 <div class="positioned pa"></div> 72 <div class="positioned jac"></div> 73 <div class="positioned aac"></div> 74 </div><br> 75 <div id=marginValidAnchor class="abs-cb margin-auto valid-anchor"> 76 <div class=anchor></div> 77 <div class="positioned pa"></div> 78 <div class="positioned jac"></div> 79 <div class="positioned aac"></div> 80 </div 81 ><div id=marginInvalidAnchor class="abs-cb margin-auto"> 82 <div class=anchor></div> 83 <div class="positioned pa"></div> 84 <div class="positioned jac"></div> 85 <div class="positioned aac"></div> 86 </div> 87 <script> 88 function assert_zero(e, f, props, t) { 89 test(() => { 90 const s = getComputedStyle(e); 91 for (const prop of props) { 92 f(s.getPropertyValue(prop), "0px"); 93 } 94 }, t); 95 } 96 97 const horizontalInsets = ['left', 'right']; 98 const verticalInsets = ['top', 'bottom']; 99 const allInsets = horizontalInsets.concat(verticalInsets); 100 101 assert_zero(insetValidAnchor.querySelector('.pa'), assert_equals, allInsets, "position-area with valid anchor sets insets to zero"); 102 assert_zero(insetValidAnchor.querySelector('.jac'), assert_equals, horizontalInsets, "justify-self: anchor-center with valid anchor sets insets to zero"); 103 assert_zero(insetValidAnchor.querySelector('.aac'), assert_equals, verticalInsets, "align-self: anchor-center with valid anchor sets insets to zero"); 104 105 assert_zero(insetInvalidAnchor.querySelector('.pa'), assert_not_equals, allInsets, "position-area with invalid anchor does not set insets to zero"); 106 assert_zero(insetInvalidAnchor.querySelector('.jac'), assert_not_equals, horizontalInsets, "justify-self: anchor-center with invalid anchor does not set insets to zero"); 107 assert_zero(insetInvalidAnchor.querySelector('.aac'), assert_not_equals, verticalInsets, "align-self: anchor-center with invalid anchor does not set insets to zero"); 108 109 const horizontalMargins = ['margin-left', 'margin-right']; 110 const verticalMargins = ['margin-top', 'margin-bottom']; 111 const allMargins = horizontalMargins.concat(verticalMargins); 112 113 assert_zero(marginValidAnchor.querySelector('.pa'), assert_equals, allMargins, "position-area with valid anchor sets margins to zero"); 114 assert_zero(marginValidAnchor.querySelector('.jac'), assert_equals, horizontalMargins, "justify-self: anchor-center with valid anchor sets margins to zero"); 115 assert_zero(marginValidAnchor.querySelector('.aac'), assert_equals, verticalMargins, "align-self: anchor-center with valid anchor sets margins to zero"); 116 117 assert_zero(marginInvalidAnchor.querySelector('.pa'), assert_not_equals, allMargins, "position-area with invalid anchor does not set margins to zero"); 118 assert_zero(marginInvalidAnchor.querySelector('.jac'), assert_not_equals, horizontalMargins, "justify-self: anchor-center with invalid anchor does not set margins to zero"); 119 assert_zero(marginInvalidAnchor.querySelector('.aac'), assert_not_equals, verticalMargins, "align-self: anchor-center with invalid anchor does not set margins to zero"); 120 </script>