contain-intrinsic-size-028.html (7098B)
1 <!DOCTYPE html> 2 <meta charset="utf8"> 3 <title>CSS contain-intrinsic-size: single axis size containment</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> 6 <link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size"> 7 <style> 8 .test { 9 contain: inline-size; 10 display: inline-block; 11 background: green; 12 } 13 .test::before { 14 content: ''; 15 display: block; 16 width: 40px; 17 height: 20px; 18 } 19 .cis-none { 20 contain-intrinsic-size: none none; 21 } 22 .cis-height { 23 contain-intrinsic-size: none 50px; 24 } 25 .cis-width { 26 contain-intrinsic-size: 100px none; 27 } 28 .cis-both { 29 contain-intrinsic-size: 100px 50px; 30 } 31 .vertical { 32 writing-mode: vertical-lr; 33 } 34 canvas { 35 aspect-ratio: auto; 36 } 37 </style> 38 <script src="/resources/testharness.js"></script> 39 <script src="/resources/testharnessreport.js"></script> 40 <script src="/resources/check-layout-th.js"></script> 41 42 <body onload="checkLayout('.test')"> 43 <div id="log"></div> 44 45 <div class="test cis-none" 46 data-expected-client-width="0" data-expected-client-height="20"></div> 47 <div class="test cis-height" 48 data-expected-client-width="0" data-expected-client-height="20"></div> 49 <div class="test cis-width" 50 data-expected-client-width="100" data-expected-client-height="20"></div> 51 <div class="test cis-both" 52 data-expected-client-width="100" data-expected-client-height="20"></div> 53 54 <div class="test cis-none vertical" 55 data-expected-client-width="40" data-expected-client-height="0"></div> 56 <div class="test cis-height vertical" 57 data-expected-client-width="40" data-expected-client-height="50"></div> 58 <div class="test cis-width vertical" 59 data-expected-client-width="40" data-expected-client-height="0"></div> 60 <div class="test cis-both vertical" 61 data-expected-client-width="40" data-expected-client-height="50"></div> 62 63 <hr> 64 65 <img class="test cis-none" src="/css/support/60x60-green.png" 66 data-expected-client-width="0" data-expected-client-height="60"> 67 <img class="test cis-height" src="/css/support/60x60-green.png" 68 data-expected-client-width="0" data-expected-client-height="60"> 69 <img class="test cis-width" src="/css/support/60x60-green.png" 70 data-expected-client-width="100" data-expected-client-height="60"> 71 <img class="test cis-both" src="/css/support/60x60-green.png" 72 data-expected-client-width="100" data-expected-client-height="60"> 73 74 <img class="test cis-none vertical" src="/css/support/60x60-green.png" 75 data-expected-client-width="60" data-expected-client-height="0"> 76 <img class="test cis-height vertical" src="/css/support/60x60-green.png" 77 data-expected-client-width="60" data-expected-client-height="50"> 78 <img class="test cis-width vertical" src="/css/support/60x60-green.png" 79 data-expected-client-width="60" data-expected-client-height="0"> 80 <img class="test cis-both vertical" src="/css/support/60x60-green.png" 81 data-expected-client-width="60" data-expected-client-height="50"> 82 83 <hr> 84 85 <svg class="test cis-none" 86 data-expected-client-width="0" data-expected-client-height="150"></svg> 87 <svg class="test cis-height" 88 data-expected-client-width="0" data-expected-client-height="150"></svg> 89 <svg class="test cis-width" 90 data-expected-client-width="100" data-expected-client-height="150"></svg> 91 <svg class="test cis-both" 92 data-expected-client-width="100" data-expected-client-height="150"></svg> 93 94 <svg class="test cis-none vertical" 95 data-expected-client-width="300" data-expected-client-height="0"></svg> 96 <svg class="test cis-height vertical" 97 data-expected-client-width="300" data-expected-client-height="50"></svg> 98 <svg class="test cis-width vertical" 99 data-expected-client-width="300" data-expected-client-height="0"></svg> 100 <svg class="test cis-both vertical" 101 data-expected-client-width="300" data-expected-client-height="50"></svg> 102 103 <hr> 104 105 <canvas class="test cis-none" width="40" height="20" 106 data-expected-client-width="0" data-expected-client-height="20"></canvas> 107 <canvas class="test cis-height" width="40" height="20" 108 data-expected-client-width="0" data-expected-client-height="20"></canvas> 109 <canvas class="test cis-width" width="40" height="20" 110 data-expected-client-width="100" data-expected-client-height="20"></canvas> 111 <canvas class="test cis-both" width="40" height="20" 112 data-expected-client-width="100" data-expected-client-height="20"></canvas> 113 114 <canvas class="test cis-none vertical" width="40" height="20" 115 data-expected-client-width="40" data-expected-client-height="0"></canvas> 116 <canvas class="test cis-height vertical" width="40" height="20" 117 data-expected-client-width="40" data-expected-client-height="50"></canvas> 118 <canvas class="test cis-width vertical" width="40" height="20" 119 data-expected-client-width="40" data-expected-client-height="0"></canvas> 120 <canvas class="test cis-both vertical" width="40" height="20" 121 data-expected-client-width="40" data-expected-client-height="50"></canvas> 122 123 <hr> 124 125 <iframe class="test cis-none" 126 data-expected-client-width="0" data-expected-client-height="150"></iframe> 127 <iframe class="test cis-height" 128 data-expected-client-width="0" data-expected-client-height="150"></iframe> 129 <iframe class="test cis-width" 130 data-expected-client-width="100" data-expected-client-height="150"></iframe> 131 <iframe class="test cis-both" 132 data-expected-client-width="100" data-expected-client-height="150"></iframe> 133 134 <iframe class="test cis-none vertical" 135 data-expected-client-width="300" data-expected-client-height="0"></iframe> 136 <iframe class="test cis-height vertical" 137 data-expected-client-width="300" data-expected-client-height="50"></iframe> 138 <iframe class="test cis-width vertical" 139 data-expected-client-width="300" data-expected-client-height="0"></iframe> 140 <iframe class="test cis-both vertical" 141 data-expected-client-width="300" data-expected-client-height="50"></iframe> 142 143 <hr> 144 145 <video class="test cis-none" 146 data-expected-client-width="0" data-expected-client-height="150"></video> 147 <video class="test cis-height" 148 data-expected-client-width="0" data-expected-client-height="150"></video> 149 <video class="test cis-width" 150 data-expected-client-width="100" data-expected-client-height="150"></video> 151 <video class="test cis-both" 152 data-expected-client-width="100" data-expected-client-height="150"></video> 153 154 <video class="test cis-none vertical" 155 data-expected-client-width="300" data-expected-client-height="0"></video> 156 <video class="test cis-height vertical" 157 data-expected-client-width="300" data-expected-client-height="50"></video> 158 <video class="test cis-width vertical" 159 data-expected-client-width="300" data-expected-client-height="0"></video> 160 <video class="test cis-both vertical" 161 data-expected-client-width="300" data-expected-client-height="50"></video> 162 </body>