mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 05:08:36 +02:00
def66880ae
Automatic update from web-platform-tests [LayoutNG] Fix bug in resolving flex-basis:auto When a column flexbox and an item had orthogonal writing modes (meaning the child's inline direction matches the container's main axis), we were using the item's max content size in the parent's writing mode to resolve its flex-basis, but we should have been using it in the child's writing mode. Bug: 845235 Change-Id: I53bd5ba39f9c8cb4ac84dc4638c8abc57e38f974 Reviewed-on: https://chromium-review.googlesource.com/c/1409810 Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Commit-Queue: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/master@{#622688} -- wpt-commits: cb5b7dca248814309cb145b43ba2a3c5f2c27ae1 wpt-pr: 14853
42 lines
1.2 KiB
HTML
42 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<script src='/resources/testharness.js'></script>
|
|
<script src='/resources/testharnessreport.js'></script>
|
|
<script src='/resources/check-layout-th.js'></script>
|
|
<link rel="author" title="David Grogan" href="dgrogan@chromium.org">
|
|
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-basis-auto">
|
|
<meta name="flags" content="" />
|
|
<meta name="assert" content="flex-basis:auto on orthogonal item in horizontal column flexbox is calculated correctly" />
|
|
|
|
<style>
|
|
x-word-h {
|
|
display: inline-block;
|
|
height: 10px;
|
|
width: 20px;
|
|
background: blue;
|
|
}
|
|
|
|
x-word-v {
|
|
display: inline-block;
|
|
height: 20px;
|
|
width: 10px;
|
|
background: blue;
|
|
}
|
|
|
|
* {
|
|
/* This is for easier manual calculations, not necessary to demonstrate behavior. */
|
|
line-height: 0;
|
|
}
|
|
</style>
|
|
|
|
<div id=flexbox style="width:150px; background:green; height:400px; display:flex; flex-direction:column">
|
|
<div style="writing-mode: vertical-rl;background:orange; flex:1 1 auto" data-expected-height=225>
|
|
<x-word-v></x-word-v><x-word-v></x-word-v><x-word-v></x-word-v>
|
|
</div>
|
|
<div style="background:lightblue; flex: 1 1 auto">
|
|
<x-word-h></x-word-h><x-word-h></x-word-h><x-word-h></x-word-h>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
checkLayout('#flexbox');
|
|
</script>
|