shrink-wrap.html (1844B)
1 <!doctype html> 2 <title>shrink-wrap button</title> 3 <link rel=help href=https://html.spec.whatwg.org/multipage/rendering.html#button-layout> 4 <link rel=help href=https://drafts.csswg.org/css2/visudet.html#shrink-to-fit-float> 5 <script src=/resources/testharness.js></script> 6 <script src=/resources/testharnessreport.js></script> 7 <!-- 8 minimum preferred width 100px 9 preferred width 250px 10 available width vary 11 --> 12 <style> 13 div.available-width { border: thin dotted red; margin: 1em 0; padding: 1em 0 } 14 button { border: none; margin: 0; padding: 0; background: papayawhip; } 15 button > span.minimum-preferred-width { width: 100px } 16 button > span { width: 50px; display: inline-block; outline: thin dotted blue } 17 </style> 18 <div class="available-width" style="width: 50px"> 19 <button data-expected="100"><span class="minimum-preferred-width">x</span><span>x</span><span>x</span><span>x</span></button> 20 </div> 21 22 <div class="available-width" style="width: 200px"> 23 <button data-expected="200"><span class="minimum-preferred-width">x</span><span>x</span><span>x</span><span>x</span></button> 24 </div> 25 26 <div class="available-width" style="width: 300px"> 27 <button data-expected="250"><span class="minimum-preferred-width">x</span><span>x</span><span>x</span><span>x</span></button> 28 </div> 29 30 <script> 31 const styles = ['display: block', 'display: inline', 'display: inline-block', 32 'display: list-item', 'display: table', 'display: table-row', 33 'display: table-cell', 'float: left']; 34 for (const style of styles) { 35 for (const button of [].slice.call(document.querySelectorAll('button'))) { 36 test(() => { 37 button.setAttribute('style', style); 38 assert_equals(button.clientWidth, parseInt(button.dataset.expected, 10)); 39 }, `${style} - available ${button.parentNode.getAttribute('style')}`); 40 } 41 } 42 </script>