position-absolute-fit-content-auto-margin.html (4409B)
1 <!DOCTYPE html> 2 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> 3 <link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-auto-size"> 4 <link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-margins"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1983756"> 6 <meta name="assert" content="Checks that automatic margins are computed correctly for size auto abspos boxes."> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/check-layout-th.js"></script> 10 <style> 11 .container { 12 width: 40px; 13 height: 40px; 14 border: 1px solid; 15 position: relative; 16 } 17 18 .abspos { 19 inset: 0; 20 margin: auto; 21 background: orange; 22 position: absolute; 23 } 24 25 :is(.vrl, .vlr) .abspos { 26 writing-mode: horizontal-tb; 27 } 28 29 .vrl { 30 writing-mode: vertical-rl; 31 } 32 33 .vlr { 34 writing-mode: vertical-lr; 35 } 36 37 .content { 38 width: 20px; 39 height: 20px; 40 } 41 </style> 42 <!-- Tests with .container's writing-mode: horizontal-tb. --> 43 <template id=outerHtb> 44 <div class=container> 45 <div class=abspos style="align-self: start;" data-offset-y=10 data-expected-height=20><div class=content></div></div> 46 <div class=abspos style="justify-self: start;" data-offset-x=10 data-expected-width=20><div class=content></div></div> 47 <div class=abspos style="display: table;" data-offset-y=10 data-expected-height=20><div class=content></div></div> 48 </div> 49 <div class=container> 50 <div class=abspos style="margin-top: 0; align-self: start;" data-offset-y=0 data-expected-height=20><div class=content></div></div> 51 <div class=abspos style="margin-left: 0; justify-self: start;" data-offset-x=0 data-expected-width=20><div class=content></div></div> 52 <div class=abspos style="margin-top: 0; margin-left: 0; display: table;" data-offset-y=0 data-expected-height=20><div class=content></div></div> 53 </div> 54 <div class=container> 55 <div class=abspos style="margin-bottom: 0; align-self: start;" data-offset-y=20 data-expected-height=20><div class=content></div></div> 56 <div class=abspos style="margin-right: 0; justify-self: start;" data-offset-x=20 data-expected-width=20><div class=content></div></div> 57 <div class=abspos style="margin-bottom: 0; margin-right: 0; display: table;" data-offset-y=20 data-expected-height=20><div class=content></div></div> 58 </div> 59 </template> 60 <!-- Tests with .abspos' writing-mode: horizontal-tb. --> 61 <template id=innerHtb> 62 <div class=container> 63 <div class=abspos style="align-self: start;" data-offset-y=0 data-expected-width=20><div class=content></div></div> 64 <div class=abspos style="justify-self: start;" data-offset-x=0 data-expected-height=20><div class=content></div></div> 65 <div class=abspos style="display: table;" data-offset-y=10 data-expected-width=20><div class=content></div></div> 66 </div> 67 <div class=container> 68 <div class=abspos style="margin-top: 0; align-self: start;" data-offset-y=0 data-expected-width=20><div class=content></div></div> 69 <div class=abspos style="margin-left: 0; justify-self: start;" data-offset-x=0 data-expected-height=20><div class=content></div></div> 70 <div class=abspos style="margin-top: 0; margin-left: 0; display: table;" data-offset-y=0 data-expected-width=20><div class=content></div></div> 71 </div> 72 <div class=container> 73 <div class=abspos style="margin-bottom: 0; align-self: start;" data-offset-y=0 data-expected-width=20><div class=content></div></div> 74 <div class=abspos style="margin-right: 0; justify-self: start;" data-offset-x=0 data-expected-height=20><div class=content></div></div> 75 <div class=abspos style="margin-bottom: 0; margin-right: 0; display: table;" data-offset-y=20 data-expected-width=20><div class=content></div></div> 76 </div> 77 </template> 78 <div id=tests></div> 79 <div id=log></div> 80 </body> 81 <script> 82 function add_tests(template, query, for_each_queried) { 83 const t = template.content.cloneNode(true); 84 for(const q of t.querySelectorAll(query)) { 85 for_each_queried(q); 86 } 87 tests.append(t); 88 } 89 add_tests(outerHtb, '.abspos', a => {}); 90 add_tests(outerHtb, '.abspos', a => a.classList.add('vlr')); 91 add_tests(outerHtb, '.abspos', a => a.classList.add('vrl')); 92 add_tests(innerHtb, '.container', a => a.classList.add('vlr')); 93 add_tests(innerHtb, '.container', a => a.classList.add('vrl')); 94 document.body.offsetTop; 95 checkLayout('#tests .abspos') 96 </script>