1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
<!DOCTYPE html>
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
<link rel="help" href="https://crbug.com/1445937">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<meta name="assert"
content="Changing flex intrinsic sizing algorithm doesn't break any of these cases." />
<style>
section.bugreport {
outline: 1px solid grey;
margin-bottom: 25px;
padding: 3px;
}
#wrapping-broke .flex {
display: flex;
width: min-content;
outline: 2px solid;
margin-bottom: 10px;
}
#wrapping-broke span.orange100 {
float: left;
height: 25px;
width: 100px;
background: orange;
}
#bug1454306 .fourUpList {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
width: 800px;
background: yellow;
}
#bug1454306 .thumbnail-list--item {
display: flex;
width: 100%;
outline: 1px solid;
}
#bug1454306 .thumbnail-list--item-photo {
height: 50px;
width: 50px;
}
#bug1454306 .thumbnail-list--item-header {
flex: 1 0 calc(70% - 10.5px)
}
</style>
<section id="wrapping-broke" class="bugreport">
<p>https://crbug.com/1445937 We need to see a 100x100 orange square, not a
400x25 orange rectangle.</p>
<div class="flex" data-expected-width="100">
<!-- one item with very negative desired flex fraction -->
<div>
<span class="orange100"></span>
<span class="orange100"></span>
<span class="orange100"></span>
<span class="orange100"></span>
</div>
<!-- second item with desired flex fraction 0 -->
<div></div>
</div>
</section>
<section id="bug1454306" class="bugreport">
<p>https://crbug.com/1454306 The boxes each must be 1/4 the size of the yellow
containing block. No overflow.</p>
<!-- This compat case needs the item in the example below to contribute its
min-content to container's min-content. In one of our earlier
implementations, the item contributed its flex-basis (aka max-content).
<item style="flex: 1 0 calc(70% - 10.5px)">
max-content larger than flex basis
</item>
-->
<div class=fourUpList>
<div class=thumbnail-list--item data-expected-width="200">
<div class=thumbnail-list--item-header>Some News Headline</div>
<div class=thumbnail-list--item-photo></div>
</div>
<div class=thumbnail-list--item data-expected-width="200">
<div class=thumbnail-list--item-header>Some Other News Headline 2</div>
<div class=thumbnail-list--item-photo></div>
</div>
<div class=thumbnail-list--item data-expected-width="200">
<div class=thumbnail-list--item-header>Even another Headline 3</div>
<div class=thumbnail-list--item-photo></div>
</div>
<div class=thumbnail-list--item data-expected-width="200">
<div class=thumbnail-list--item-header>
Peets Coffee announces plans to move Oakland
</div>
<div class=thumbnail-list--item-photo></div>
</div>
</div>
</section>
<section id="gmail-tables" class="bugreport">
<p>https://bugs.chromium.org/p/chromium/issues/detail?id=1457103 We need a
100x100 green square here.</p>
<!-- This case requires that the %-width fixed table has a large flex basis, which means the table's intrinsic max width has to be large.-->
<div style="width: 100px;">
<div style="display: table;">
<div style="display: table-cell">
<div class=flex style="display: flex; height: 100px; background: green;"
data-expected-width="100">
<table style="width: 100%; table-layout: fixed;"></table>
</div>
</div>
</div>
</div>
</section>
<script>
checkLayout('#wrapping-broke .flex');
checkLayout('#bug1454306');
checkLayout('#gmail-tables .flex');
</script>
|
