| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <meta charset=utf-8> |
| 4 <title>Test whether the input box is rendered properly in case that the form has
the height value or not</title> |
| 5 <head> |
| 6 <style type="text/css"> |
| 7 :root { |
| 8 --input-height: 100%; |
| 9 } |
| 10 |
| 11 body { |
| 12 background-color: gray; |
| 13 } |
| 14 |
| 15 div { |
| 16 background-color: blue; |
| 17 height: 32px; |
| 18 width: 175px; |
| 19 margin: 25px; |
| 20 } |
| 21 .search input.query { |
| 22 background: yellow; |
| 23 border: none; |
| 24 float: left; |
| 25 height: var(--input-height); |
| 26 line-height: 24px; |
| 27 padding: 0 0 0 5px; |
| 28 width: 143px; |
| 29 } |
| 30 </style> |
| 31 </head> |
| 32 <body> |
| 33 <p>form without height value: the percentage value of the height of the search
box is ignored.</p> |
| 34 <div> |
| 35 <form action="http://cbslocal.com/search/" class="search"> |
| 36 <input type="text" class="query" name="q" id="s" size="31" placeholder="Sea
rch" autocomplete="off" style="color: black;"> |
| 37 <input type="reset" class="reset" value="Reset"> |
| 38 <input type="submit" class="submit" value="Search"> |
| 39 </form> |
| 40 </div> |
| 41 <p>form with height value: the percentage value of the height of the search bo
x is honored.</p> |
| 42 <div> |
| 43 <form action="http://cbslocal.com/search/" class="search"> |
| 44 <input type="text" class="query" name="q" id="s" size="31" placeholder="Sea
rch" autocomplete="off" style="color: black; height: 9.6px"> |
| 45 <input type="reset" class="reset" value="Reset"> |
| 46 <input type="submit" class="submit" value="Search"> |
| 47 </form> |
| 48 </div> |
| 49 </body> |
| 50 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2478483003:
Ignore the percentage value to calculate the logical height of input control
