orthogonal-child-with-border.html (1210B)
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=1949151"> 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 borders) after a dynamic change."> 9 <style> 10 #outer { 11 position: absolute; 12 background: red; 13 writing-mode: vertical-lr; 14 } 15 #inner { 16 width: 100px; 17 border: 0px solid green; 18 border-width: 40px 20px 60px 30px; /* top + bottom borders = 100px */ 19 writing-mode: horizontal-tb; 20 } 21 </style> 22 23 <script> 24 function run() { 25 inner.style.width = "50px"; /* left + right borders add a further 50px */ 26 document.documentElement.classList.remove("reftest-wait"); 27 } 28 </script> 29 30 <body onload="run()"> 31 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 32 33 <div id="outer"> 34 <div id="inner"> 35 </div> 36 </div> 37 </body> 38 </html>