зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1653728 [wpt PR 24653] - [css-flexbox] Don't always reuse cached layout for row flex containers, a=testonly
Automatic update from web-platform-tests [css-flexbox] Don't always reuse cached layout for row flex containers CalculateSizeBasedLayoutCacheStatusWithGeometry checks if the cached layout information can be reused. The problem was that, if a flex container had a percentage height, and the size of its containing block changed, a new layout would only be performed in case it was a column flex container. For row flex containers, the cached layout would be reused. However, row containers may also need a new layout in some cases. This patch removes the check for column flex containers, so that row ones can be included too. Bug: 1103592 TEST=external/wpt/css/css-flexbox/height-percentage-with-dynamic-container-size.html Change-Id: Ib2c119febdfa56b31f5524be3df85c9749dd1f6a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2302997 Commit-Queue: Oriol Brufau <obrufau@igalia.com> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#789788} -- wpt-commits: 29ba1e01865ce5fb8ca21f37a0f13d394428de84 wpt-pr: 24653
This commit is contained in:
Родитель
a1ad523ccf
Коммит
3f88667151
|
@ -0,0 +1,69 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS Flexbox Test: Flex container with height percentage and dynamic container size</title>
|
||||||
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||||
|
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1">
|
||||||
|
<meta name="assert" content="Checks that if a flex container has a definite height percentage, but then the height of the container is dynamically changed to be intrinsic, the resolved value of the percentage is correctly updated.">
|
||||||
|
<style>
|
||||||
|
.container {
|
||||||
|
width: 100px;
|
||||||
|
background: cyan;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
.changed .container {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/resources/check-layout-th.js"></script>
|
||||||
|
|
||||||
|
<div id="log"></div>
|
||||||
|
|
||||||
|
<pre>height: 0%</pre>
|
||||||
|
|
||||||
|
<div class="container" data-expected-height="100">
|
||||||
|
<div class="flex" style="height: 0%" data-expected-height="100">
|
||||||
|
<div data-expected-height="100">
|
||||||
|
<div class="content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<pre>height: 100%</pre>
|
||||||
|
|
||||||
|
<div class="container" data-expected-height="100">
|
||||||
|
<div class="flex" style="height: 100%" data-expected-height="100">
|
||||||
|
<div data-expected-height="100">
|
||||||
|
<div class="content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<pre>height: 200%</pre>
|
||||||
|
|
||||||
|
<div class="container" data-expected-height="100">
|
||||||
|
<div class="flex" style="height: 200%" data-expected-height="100">
|
||||||
|
<div data-expected-height="100">
|
||||||
|
<div class="content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Force layout
|
||||||
|
document.body.offsetLeft;
|
||||||
|
|
||||||
|
// Change 'height' to 'auto'.
|
||||||
|
document.body.classList.add("changed");
|
||||||
|
|
||||||
|
// Check final layout
|
||||||
|
checkLayout('.container');
|
||||||
|
</script>
|
Загрузка…
Ссылка в новой задаче