Percentage in inset property resolves with respect to the wrong size in vertical writing mode |
|||||
Issue descriptionChrome Version: (copy from 68.0.3440.106) OS: Lubuntu 18.04 What steps will reproduce the problem? Run this code: http://jsfiddle.net/2h6ogvjx/ ```css #container { border: 5px solid; width: 200px; height: 100px; } #test { position: relative; top: 50%; writing-mode: vertical-lr; } ``` ```html <div id="container"> <div id="test">test</div> </div> ``` ```js var test = document.getElementById("test"); document.body.append(getComputedStyle(test).top); ``` What is the expected result? 'top' is set to '50%', which should be resolved with respect to the height of the containing block, '100px'. So the result should be '50px'. What happens instead? getComputedStyle resolves '50%' with respect to the width of the containing block, so the result is '100px' instead. The bug affects relative, sticky, absolute and fixed positioning in orthogonal flows. The element appears at the correct position, it's just that the resolved value provided by getComputedStyle is wrong.
,
Sep 13
,
Sep 20
More precisely, this seems to happen when the positioned element has a vertical writing mode, not with orthogonal flows.
,
Sep 24
In fact 'top' and 'bottom' resolve with respect to the width of the containing block if the positioned element has a vertical writing mode, and percentages in 'left' and 'right' are resolved with respect to the height of the containing block if the CB has a vertical writing mode.
,
Sep 26
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/e35686989389384250a10dd2f1d7451d123d1a8e commit e35686989389384250a10dd2f1d7451d123d1a8e Author: Oriol Brufau <obrufau@igalia.com> Date: Wed Sep 26 01:12:22 2018 Use the right CB size to resolve percentages in vertical writing mode Currently percentages in 'top' and 'bottom' are resolved with respect to the width of the containing block if the positioned element has a vertical writing mode, and percentages in 'left' and 'right' are resolved with respect to the height of the containing block if the CB has a vertical writing mode. The change only affects the value returned by getComputedStyle, the used value was already correct. BUG= 883582 TEST=external/wpt/css/cssom/getComputedStyle-insets-absolute.html TEST=external/wpt/css/cssom/getComputedStyle-insets-fixed.html TEST=external/wpt/css/cssom/getComputedStyle-insets-relative.html TEST=external/wpt/css/cssom/getComputedStyle-insets-sticky.html Tests for absolute and fixed positionings still have some failures due to http://crbug.com/883574 and http://crbug.com/888532. Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_layout_ng Change-Id: I06bff26e9ef36dc74686627e7752794b83e63dfb Reviewed-on: https://chromium-review.googlesource.com/1240283 Commit-Queue: Oriol Brufau <obrufau@igalia.com> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#594171} [modify] https://crrev.com/e35686989389384250a10dd2f1d7451d123d1a8e/third_party/WebKit/LayoutTests/external/wpt/css/cssom/getComputedStyle-insets-absolute-expected.txt [modify] https://crrev.com/e35686989389384250a10dd2f1d7451d123d1a8e/third_party/WebKit/LayoutTests/external/wpt/css/cssom/getComputedStyle-insets-fixed-expected.txt [delete] https://crrev.com/ae2df6543e4b35f7f864a84504259d889a7f1844/third_party/WebKit/LayoutTests/external/wpt/css/cssom/getComputedStyle-insets-relative-expected.txt [delete] https://crrev.com/ae2df6543e4b35f7f864a84504259d889a7f1844/third_party/WebKit/LayoutTests/external/wpt/css/cssom/getComputedStyle-insets-sticky-expected.txt [modify] https://crrev.com/e35686989389384250a10dd2f1d7451d123d1a8e/third_party/WebKit/LayoutTests/flag-specific/enable-blink-features=LayoutNG/external/wpt/css/cssom/getComputedStyle-insets-absolute-expected.txt [modify] https://crrev.com/e35686989389384250a10dd2f1d7451d123d1a8e/third_party/WebKit/LayoutTests/flag-specific/enable-blink-features=LayoutNG/external/wpt/css/cssom/getComputedStyle-insets-fixed-expected.txt [modify] https://crrev.com/e35686989389384250a10dd2f1d7451d123d1a8e/third_party/blink/renderer/core/css/properties/computed_style_utils.cc [modify] https://crrev.com/e35686989389384250a10dd2f1d7451d123d1a8e/third_party/blink/renderer/core/layout/layout_box.cc
,
Sep 26
|
|||||
►
Sign in to add a comment |
|||||
Comment 1 by dtapu...@chromium.org
, Sep 13