padding-percent-orthogonal-dynamic.html (1092B)
1 <!doctype html> 2 <title>CSS Writing Modes Test: Re-layout of orthogonal layouts with percentage padding</title> 3 <link rel="help" href="https://drafts.csswg.org/css-writing-modes/#dimension-mapping"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #vertical { 8 width: 400px; 9 writing-mode: vertical-lr; 10 } 11 12 #padded { 13 width: 100%; 14 box-sizing: border-box; 15 padding-right: 100%; 16 } 17 18 #horizontal { 19 writing-mode: horizontal-tb; 20 width: 100%; 21 } 22 23 #container { 24 width: 100%; 25 background-color: green; 26 } 27 28 #child { height: 100px; } 29 </style> 30 <div id="vertical"> 31 <div id="padded"> 32 <div id="horizontal"> 33 <div id="container"> 34 <div id="child"></div> 35 </div> 36 </div> 37 </div> 38 </div> 39 <script> 40 test(() => assert_equals(container.offsetWidth, 300), 41 "400px minus 100px padding based on #child height"); 42 43 vertical.style.width = "200px"; 44 45 test(() => assert_equals(container.offsetWidth, 100), 46 "200px minus 100px padding based on #child height"); 47 </script>