orthogonal-child-with-padding.html (1239B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-writing-modes/#orthogonal-flows"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1949153"> 7 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 8 <meta name="assert" content="Size of the outer div fits its orthogonal child (including padding) after a dynamic change."> 9 <style> 10 #outer { 11 position: absolute; 12 background: red; 13 } 14 #inner { 15 height: 50px; 16 min-width: 50px; 17 padding-left: 25px; 18 padding-right: 25px; 19 writing-mode: vertical-rl; 20 } 21 #mask { 22 position: absolute; 23 width: 100px; 24 height: 100px; 25 background: green; 26 } 27 </style> 28 29 <script> 30 function run() { 31 inner.style.height = "100px"; 32 document.documentElement.classList.remove("reftest-wait"); 33 } 34 </script> 35 36 <body onload="run()"> 37 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 38 39 <div id="outer"> 40 <div id="inner"> 41 </div> 42 </div> 43 <div id="mask"> 44 </div> 45 </body> 46 </html>