Propagate flex sizes to the table wrapper.
parent
e189101140
commit
2f682470b8
|
@ -46,6 +46,9 @@
|
|||
backface-visibility: inherit;
|
||||
clip: inherit;
|
||||
/* When the table wrapper is a Flex/Grid item we need these: */
|
||||
flex-grow: inherit;
|
||||
flex-shrink: inherit;
|
||||
flex-basis: inherit;
|
||||
align-self: inherit;
|
||||
justify-self: inherit;
|
||||
grid-column-start: inherit;
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
[table-item-flex-percentage-width.html]
|
||||
expected: FAIL
|
||||
bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1674268
|
|
@ -0,0 +1,140 @@
|
|||
<!doctype html>
|
||||
<title>Reference: display:table flex items with flex-shrink/flex-grow/flex-basis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
width: 180px;
|
||||
border: 1px solid blue;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background-color: cyan;
|
||||
display: block;
|
||||
}
|
||||
.test1 > * {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.test2 > * {
|
||||
flex-shrink: 0;
|
||||
width: 50%;
|
||||
}
|
||||
.test3 > * {
|
||||
flex-shrink: 0.5;
|
||||
width: 50%;
|
||||
}
|
||||
.test4 > * {
|
||||
flex-grow: 0.1;
|
||||
width: 50%;
|
||||
}
|
||||
.test5 > * {
|
||||
flex-shrink: 0.2;
|
||||
flex-grow: 0.5;
|
||||
width: 10%;
|
||||
}
|
||||
.base > * {
|
||||
flex-basis: 100px;
|
||||
}
|
||||
.large-base {
|
||||
width: 100px;
|
||||
}
|
||||
.large-base > * {
|
||||
flex-basis: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container test1">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test2">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test3">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test4">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test5">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test1 base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test2 base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test3 base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test4 base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test5 base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test1 large-base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test2 large-base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test3 large-base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test4 large-base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test5 large-base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
|
@ -0,0 +1,144 @@
|
|||
<!doctype html>
|
||||
<title>Flexbox Test: display:table flex items with flex-shrink/flex-grow/flex-basis</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1454330">
|
||||
<link rel="match" href="table-item-flex-percentage-width-ref.html">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
width: 180px;
|
||||
border: 1px solid blue;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background-color: cyan;
|
||||
display: table;
|
||||
}
|
||||
.test1 > * {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.test2 > * {
|
||||
flex-shrink: 0;
|
||||
width: 50%;
|
||||
}
|
||||
.test3 > * {
|
||||
flex-shrink: 0.5;
|
||||
width: 50%;
|
||||
}
|
||||
.test4 > * {
|
||||
flex-grow: 0.1;
|
||||
width: 50%;
|
||||
}
|
||||
.test5 > * {
|
||||
flex-shrink: 0.2;
|
||||
flex-grow: 0.5;
|
||||
width: 10%;
|
||||
}
|
||||
.base > * {
|
||||
flex-basis: 100px;
|
||||
}
|
||||
.large-base {
|
||||
width: 100px;
|
||||
}
|
||||
.large-base > * {
|
||||
flex-basis: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container test1">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test2">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test3">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test4">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test5">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test1 base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test2 base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test3 base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test4 base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test5 base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test1 large-base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test2 large-base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test3 large-base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test4 large-base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
|
||||
<div class="container test5 large-base">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
Loading…
Reference in New Issue