Chromium Code Reviews Chromium Code Reviews
Issue 1674323002:
Detect a change in border that affects a positioned object's height or position (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| Index: third_party/WebKit/LayoutTests/fast/block/positioning/positioned-container-changes-block-direction-border-with-positioned-descendant.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/block/positioning/positioned-container-changes-block-direction-border-with-positioned-descendant.html b/third_party/WebKit/LayoutTests/fast/block/positioning/positioned-container-changes-block-direction-border-with-positioned-descendant.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..9e75ac95df484067fa44efb46fa7c77b5c18b332 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/block/positioning/positioned-container-changes-block-direction-border-with-positioned-descendant.html |
| @@ -0,0 +1,40 @@ |
| +<!DOCTYPE html> |
| +<style> |
| +#container { |
| + position: relative; |
| + width: 500px; |
| + height: 500px; |
| + background: #C0C0C0; |
| + border-width: 150px 150px; |
|
mstensho (USE GERRIT)
2016/02/09 09:08:51
This has no effect with border-style being none, s
|
| +} |
| +#parent { |
| + position: absolute; |
| + top: 0; |
| + bottom: 0; |
| + left: 0; |
| + right: 0; |
| + border: 0px solid rgba(255, 255, 255, .5); |
| + border-width: 150px 150px; |
|
mstensho (USE GERRIT)
2016/02/09 09:08:51
This overrides the width set in the shorthand abov
|
| +} |
| +#parent div { |
|
mstensho (USE GERRIT)
2016/02/09 09:08:51
looks like #child to me. :)
|
| + position: absolute; |
| + left: 1px; |
| + top: 1px; |
| + right: 1px; |
| + bottom: 1px; |
| + border: 1px solid #000; |
| +} |
| +</style> |
| +<script src="../../../resources/check-layout.js"></script> |
| +<p>crbug.com/581612: Changing block-direction border width on a positioned element with auto height should flex the height of its descendants.</p> |
|
mstensho (USE GERRIT)
2016/02/09 09:08:51
How about a human observable pass condition? There
|
| +<div id="console"></div> |
| +<div id="container"> |
| + <div id="parent"> |
| + <div id="child" data-expected-height=338></div> |
| + </div> |
| +</div> |
| +<script> |
| +document.body.offsetTop; |
| +document.getElementById('parent').style.borderTopWidth = '10px'; |
| +checkLayout('#child', document.getElementById('console')); |
| +</script> |
