resize-021.html (1188B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Basic User Interface Test: resizing min-height/width constraints</title> 4 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> 5 <link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> 6 <meta name="flags" content="interact"> 7 <meta name="assert" content="max-width and max-height constraints are honored."> 8 <style> 9 #test { 10 position: absolute; 11 background: linear-gradient(to right, transparent 200px, red 200px) no-repeat, 12 linear-gradient(to bottom, transparent 200px, red 200px) no-repeat, 13 orange; 14 max-height: 200px; 15 max-width: 200px; 16 height: 100px; 17 width: 100px; 18 overflow: auto; 19 resize: both; 20 } 21 #ref { 22 position: absolute; 23 background: blue; 24 height: 300px; 25 width: 300px; 26 } 27 </style> 28 29 <p>Attempt to resize the orange box below so that it is large enough to fully cover the blue one.</p> 30 <p>If you cannot enlarge the orange box, the test fails.<br> 31 If you can fully cover the blue box, the test fails.<br> 32 Even if the blue box is not fully covered, if you see any red, the test fails.<br> 33 Otherwise, the test passes.</p> 34 35 <div id=ref></div> 36 <div id=test></div>