intrinsic-percent-replaced-028.html (1757B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#replaced-percentage-min-contribution"> 5 <meta name="assert" content="A preferred or max inline size property set to a percentage is treated as zero when computing the min-content contribution."> 6 7 <style> 8 .wrapper { 9 display: inline-block; 10 border: solid; 11 margin: 5px; 12 } 13 </style> 14 15 <div style="width: 0px"> 16 <!-- Set 'width' to a percentage --> 17 <div class="wrapper" data-expected-client-width="0"> 18 <canvas style="width: 0%; max-width: 100px"></canvas> 19 </div> 20 <div class="wrapper" data-expected-client-width="0"> 21 <canvas style="width: 50%; max-width: 100px"></canvas> 22 </div> 23 <div class="wrapper" data-expected-client-width="0"> 24 <canvas style="width: 100%; max-width: 100px"></canvas> 25 </div> 26 <div class="wrapper" data-expected-client-width="0"> 27 <canvas style="width: 200%; max-width: 100px"></canvas> 28 </div> 29 30 <!-- Set 'max-width' to a percentage --> 31 <div class="wrapper" data-expected-client-width="0"> 32 <canvas style="width: 100px; max-width: 0%"></canvas> 33 </div> 34 <div class="wrapper" data-expected-client-width="0"> 35 <canvas style="width: 100px; max-width: 50%"></canvas> 36 </div> 37 <div class="wrapper" data-expected-client-width="0"> 38 <canvas style="width: 100px; max-width: 100%"></canvas> 39 </div> 40 <div class="wrapper" data-expected-client-width="0"> 41 <canvas style="width: 100px; max-width: 200%"></canvas> 42 </div> 43 </div> 44 45 <script src="/resources/testharness.js"></script> 46 <script src="/resources/testharnessreport.js"></script> 47 <script src="/resources/check-layout-th.js"></script> 48 <script> 49 checkLayout(".wrapper"); 50 </script>