diff options
| -rw-r--r-- | src/css/cascade.nim | 12 | ||||
| -rw-r--r-- | test/layout/position-absolute-prevents-blockification.expected | 3 | ||||
| -rw-r--r-- | test/layout/position-absolute-prevents-blockification.html | 35 |
3 files changed, 46 insertions, 4 deletions
diff --git a/src/css/cascade.nim b/src/css/cascade.nim index d98949a1..453b65f8 100644 --- a/src/css/cascade.nim +++ b/src/css/cascade.nim @@ -272,11 +272,15 @@ func buildComputedValues(rules: CSSValueEntryMap; parent: CSSValues; for t in CSSPropertyType: if not inited[t]: result.initialOrInheritFrom(parent, t) - if result{"float"} != FloatNone: + # Quirk: it seems others aren't implementing what the spec says about + # blockification. + # Well, neither will I, because the spec breaks on actual websites. + # Curse CSS. + if result{"position"} in {PositionAbsolute, PositionFixed}: + if result{"display"} == DisplayInline: + result{"display"} = DisplayInlineBlock + elif result{"float"} != FloatNone: result{"display"} = result{"display"}.blockify() - elif result{"position"} in {PositionAbsolute, PositionFixed} and - result{"display"} == DisplayInline: - result{"display"} = DisplayInlineBlock if (result{"overflow-x"} in {OverflowVisible, OverflowClip}) != (result{"overflow-y"} in {OverflowVisible, OverflowClip}): result{"overflow-x"} = result{"overflow-x"}.bfcify() diff --git a/test/layout/position-absolute-prevents-blockification.expected b/test/layout/position-absolute-prevents-blockification.expected new file mode 100644 index 00000000..e99cc285 --- /dev/null +++ b/test/layout/position-absolute-prevents-blockification.expected @@ -0,0 +1,3 @@ +test 1test 2 +test 1test 2 +test 1test 2 diff --git a/test/layout/position-absolute-prevents-blockification.html b/test/layout/position-absolute-prevents-blockification.html new file mode 100644 index 00000000..1fa49f1d --- /dev/null +++ b/test/layout/position-absolute-prevents-blockification.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- +Fun fact: Blink and Gecko agree on inline-flex, but disagree on +inline-table. +The spec disagrees with both, but that breaks websites. +LOL +--> +<div> +<span> +<div style="display: inline-block; float: left"> +test 1 +</div> +<div style="display: inline-block; float: left; position: absolute"> +test 2 +</div> +</span> +</div> +<br> +<div> +<div style="display: inline-block; float: left"> +test 1 +</div> +<div style="display: inline-table; float: left; position: absolute"> +test 2 +</div> +</div> +<br> +<div> +<div style="display: inline-block; float: left"> +test 1 +</div> +<div style="display: inline-flex; float: left; position: absolute"> +test 2 +</div> +</div> |