min-width-max-width-precedence.html (849B)
1 <!DOCTYPE html> 2 <title>CSS Test: check precedence between min-width and max-width</title> 3 <link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> 4 <meta name="assert" content="Test that the used value of 'width' is resolved properly." /> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 .tooltip { 9 height: 68px; 10 position: relative; 11 max-width: 200px; 12 min-width: 260px; 13 background-color: red; 14 } 15 16 #outer { 17 background-color: blue; 18 position: absolute; 19 height: 136px; 20 } 21 </style> 22 23 <div id="outer"> 24 <div id="inner" class="tooltip" role="tooltip"></div> 25 </div> 26 <script> 27 test(() => { 28 assert_equals(getComputedStyle(document.querySelector("#outer")).width, '260px'); 29 }, "When used value is resolved, min-width should win over max-width"); 30 </script>