dynamic-change-inline-size-003-ref.html (667B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: Dynamic change to the inline-size of body</title> 4 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 5 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 6 <link rel="stylesheet" href="/fonts/ahem.css"> 7 8 <style> 9 body { 10 inline-size: 200px; 11 } 12 13 .abs { 14 position: absolute; 15 background: green; 16 inline-size: 100px; 17 padding-top: 100px; 18 } 19 .layout { 20 font: 50px/1 Ahem; 21 color: red; 22 background-color: red; 23 width: 100px; 24 padding-top: 25%; /* This resolves against body's inline-size. */ 25 } 26 </style> 27 28 <body> 29 <div class="abs"></div> 30 <div class="layout">XX</div> 31 </body>