Chromium Code Reviews Chromium Code Reviews
Issue 13674002:
Support intrinsic values for height, min-height and max-height (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/fast/css-intrinsic-dimensions/height-positioned.html |
| diff --git a/LayoutTests/fast/css-intrinsic-dimensions/height-positioned.html b/LayoutTests/fast/css-intrinsic-dimensions/height-positioned.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..57a224f4ff289e6fcef22b2217bafea4156c8d98 |
| --- /dev/null |
| +++ b/LayoutTests/fast/css-intrinsic-dimensions/height-positioned.html |
| @@ -0,0 +1,129 @@ |
| +<!doctype html> |
|
ojan
2013/04/11 03:21:46
You also need test cases for positioned&&replaced
cbiesinger
2013/04/12 01:17:52
Thanks - that made me realize I forgot to change c
|
| +<!-- |
| +All divs here should shrinkwrap to fit their content, except for fill-available |
| +--> |
| +<style> |
| + @import "resources/height-keyword-classes.css"; |
| + |
| + body * { |
| + border: 2px solid red; |
| + padding: 5px; |
| + clear: both; |
| + } |
| + |
| + .container { |
| + height: 400px; |
| + border-color: blue; |
| + |
| + display: inline-block; |
| + width: 100px; |
| + } |
| + |
| + .position-container { |
| + border-color: green; |
| + position: relative; |
| + height: 100px; |
| + } |
| + |
| + .position-container > * { |
| + position: absolute; |
| + } |
| + |
| + .f-a-container { |
| + height: 100%; |
| + box-sizing: border-box; |
| + } |
| + |
| + .small { |
| + height: 1px; |
| + } |
| + |
| + .big { |
| + height: 200px; |
| + } |
| + |
| + .really-big { |
| + height: 1000px; |
| + } |
| +</style> |
| +<div class="container"> |
| + <div class="position-container"> |
| + <div class="min-content"> |
| + height: min-content<br>on this box. |
| + </div> |
| + </div> |
| + <div class="position-container"> |
| + <div class="max-content"> |
| + height: max-content<br>on this box. |
| + </div> |
| + </div> |
| + <div class="position-container"> |
| + <div class="fit-content"> |
| + height: fit-content<br>on this box. |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="container"> |
| + <div class="position-container f-a-container"> |
| + <div class="fill-available"> |
| + height: fill-available<br> on this box. |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="container"> |
| + <div class="position-container"> |
| + <div class="small min-height-min-content"> |
| + min-height: min-content<br>on this box. |
| + </div> |
| + |
| + </div> |
| + <div class="position-container"> |
| + <div class="small min-height-max-content"> |
| + min-height: max-content<br>on this box. |
| + </div> |
| + |
| + </div> |
| + <div class="position-container"> |
| + <div class="small min-height-fit-content"> |
| + min-height: fit-content<br>on this box. |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="container"> |
| + <div class="position-container f-a-container"> |
| + <div class="small min-height-fill-available"> |
| + min-height: fill-available<br> on this box. |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="container"> |
| + <div class="position-container"> |
| + <div class="big max-height-min-content"> |
| + max-height: min-content<br>on this box. |
| + </div> |
| + |
| + </div> |
| + <div class="position-container"> |
| + <div class="big max-height-max-content"> |
| + max-height: max-content<br>on this box. |
| + </div> |
| + |
| + </div> |
| + <div class="position-container"> |
| + <div class="big max-height-fit-content"> |
| + max-height: fit-content<br>on this box. |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="container"> |
| + <div class="position-container f-a-container"> |
| + <div class="really-big max-height-fill-available"> |
| + max-height: fill-available<br> on this box. |
| + </div> |
| + </div> |
| +</div> |
