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