| commit-queue@webkit.org | eac40bc | 2012-06-20 19:28:50 +0000 | [diff] [blame] | 1 | <!doctype html> |
| 2 | <!-- |
| 3 | Tests intrinsic width keywords for float avoiding behavior. The way the |
| 4 | spec is written only width: auto elements will allow a float to flow |
| 5 | through them with overflow: auto, so all elements below should avoid the |
| 6 | float by shifting to the right except fill-available which should be forced |
| 7 | below the float since it can't become smaller than the available width. |
| 8 | |
| 9 | Note: This is weird behavior, not sure it was intended by the spec. |
| 10 | --> |
| 11 | <style> |
| 12 | @import "resources/width-keyword-classes.css"; |
| 13 | |
| 14 | body * { |
| 15 | border: 5px solid red; |
| 16 | padding: 5px; |
| 17 | } |
| 18 | |
| 19 | span { |
| 20 | display: inline-block; |
| 21 | width: 200px; |
| 22 | border-color: green; |
| 23 | } |
| 24 | |
| 25 | .float { |
| 26 | float: left; |
| 27 | height: 300px; |
| 28 | } |
| 29 | |
| 30 | .auto, |
| 31 | .max-content, |
| 32 | .min-content, |
| 33 | .fill-available, |
| 34 | .fit-content { |
| 35 | overflow: auto; |
| 36 | } |
| 37 | </style> |
| 38 | |
| 39 | <body> |
| 40 | |
| 41 | <div class="float">Float</div> |
| 42 | |
| 43 | <div class="min-content"> |
| 44 | <span>Min Content</span> on this box. |
| 45 | </div> |
| 46 | |
| 47 | <div class="max-content"> |
| 48 | <span>Max Content</span> on this box. |
| 49 | </div> |
| 50 | |
| 51 | <div class="fit-content"> |
| 52 | <span>Fit Content</span> on this box. |
| 53 | </div> |
| 54 | |
| 55 | <div> |
| 56 | <span>Auto</span> on this box. |
| 57 | </div> |
| 58 | |
| 59 | <div class="fill-available"> |
| 60 | <span>Fill Available</span> on this box. |
| 61 | </div> |
| 62 | |
| 63 | </body> |
