Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(226)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-intrinsic-dimensions/intrinsic-sized-absolutes.html

Issue 1293793007: Unprefix min-content, max-content, fit-content (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: review comment Created 5 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « LayoutTests/fast/css-intrinsic-dimensions/height-property-value-expected.txt ('k') | LayoutTests/fast/css-intrinsic-dimensions/intrinsic-sized-blocks.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <style> 2 <style>
3 .container { 3 .container {
4 position:relative; 4 position:relative;
5 border: 5px solid blue; 5 border: 5px solid blue;
6 width: 250px; 6 width: 250px;
7 height: 250px; 7 height: 250px;
8 } 8 }
9 .child { 9 .child {
10 position:absolute; 10 position:absolute;
11 display: -webkit-flex; 11 display: -webkit-flex;
12 -webkit-flex-wrap: wrap; 12 -webkit-flex-wrap: wrap;
13 border: 5px solid pink; 13 border: 5px solid pink;
14 } 14 }
15 .content { 15 .content {
16 display: inline-block; 16 display: inline-block;
17 width: 100px; 17 width: 100px;
18 height: 100px; 18 height: 100px;
19 background-color: salmon; 19 background-color: salmon;
20 } 20 }
21 </style> 21 </style>
22 22
23 Tests that intrinsic width values on absolutely positioned element work. 23 Tests that intrinsic width values on absolutely positioned element work.
24 24
25 <!-- width tests --> 25 <!-- width tests -->
26 <div class="container"> 26 <div class="container">
27 <div class="child" style="width: -webkit-max-content;" data-expected-width=" 210"> 27 <div class="child" style="width: max-content;" data-expected-width="210">
28 <div class="content"></div> 28 <div class="content"></div>
29 <div class="content"></div> 29 <div class="content"></div>
30 </div> 30 </div>
31 </div> 31 </div>
32 32
33 <div class="container"> 33 <div class="container">
34 <div class="child" style="width: -webkit-min-content;" data-expected-width=" 110"> 34 <div class="child" style="width: min-content;" data-expected-width="110">
35 <div class="content"></div> 35 <div class="content"></div>
36 <div class="content"></div> 36 <div class="content"></div>
37 </div> 37 </div>
38 </div> 38 </div>
39 39
40 <div class="container"> 40 <div class="container">
41 <div class="child" style="width: -webkit-fit-content;" data-expected-width=" 210"> 41 <div class="child" style="width: fit-content;" data-expected-width="210">
42 <div class="content"></div> 42 <div class="content"></div>
43 <div class="content"></div> 43 <div class="content"></div>
44 </div> 44 </div>
45 </div> 45 </div>
46 46
47 <div class="container" style="width: 50px"> 47 <div class="container" style="width: 50px">
48 <div class="child" style="width: -webkit-fit-content;" data-expected-width=" 110"> 48 <div class="child" style="width: fit-content;" data-expected-width="110">
49 <div class="content"></div> 49 <div class="content"></div>
50 <div class="content"></div> 50 <div class="content"></div>
51 </div> 51 </div>
52 </div> 52 </div>
53 53
54 <div class="container"> 54 <div class="container">
55 <div class="child" style="width: -webkit-fill-available;" data-expected-widt h="250"> 55 <div class="child" style="width: -webkit-fill-available;" data-expected-widt h="250">
56 <div class="content"></div> 56 <div class="content"></div>
57 <div class="content"></div> 57 <div class="content"></div>
58 </div> 58 </div>
59 </div> 59 </div>
60 60
61 <!-- min-width tests --> 61 <!-- min-width tests -->
62 <div class="container"> 62 <div class="container">
63 <div class="child" style="min-width: -webkit-max-content; width: 10px;" data -expected-width="210"> 63 <div class="child" style="min-width: max-content; width: 10px;" data-expecte d-width="210">
64 <div class="content"></div> 64 <div class="content"></div>
65 <div class="content"></div> 65 <div class="content"></div>
66 </div> 66 </div>
67 </div> 67 </div>
68 68
69 <div class="container"> 69 <div class="container">
70 <div class="child" style="min-width: -webkit-min-content; width: 10px;" data -expected-width="110"> 70 <div class="child" style="min-width: min-content; width: 10px;" data-expecte d-width="110">
71 <div class="content"></div> 71 <div class="content"></div>
72 <div class="content"></div> 72 <div class="content"></div>
73 </div> 73 </div>
74 </div> 74 </div>
75 75
76 <div class="container"> 76 <div class="container">
77 <div class="child" style="min-width: -webkit-fit-content; width: 10px;" data -expected-width="210"> 77 <div class="child" style="min-width: fit-content; width: 10px;" data-expecte d-width="210">
78 <div class="content"></div> 78 <div class="content"></div>
79 <div class="content"></div> 79 <div class="content"></div>
80 </div> 80 </div>
81 </div> 81 </div>
82 82
83 <div class="container" style="width: 50px"> 83 <div class="container" style="width: 50px">
84 <div class="child" style="min-width: -webkit-fit-content; width: 10px;" data -expected-width="110"> 84 <div class="child" style="min-width: fit-content; width: 10px;" data-expecte d-width="110">
85 <div class="content"></div> 85 <div class="content"></div>
86 <div class="content"></div> 86 <div class="content"></div>
87 </div> 87 </div>
88 </div> 88 </div>
89 89
90 <div class="container"> 90 <div class="container">
91 <div class="child" style="min-width: -webkit-fill-available; width: 10px;" d ata-expected-width="250"> 91 <div class="child" style="min-width: -webkit-fill-available; width: 10px;" d ata-expected-width="250">
92 <div class="content"></div> 92 <div class="content"></div>
93 <div class="content"></div> 93 <div class="content"></div>
94 </div> 94 </div>
95 </div> 95 </div>
96 96
97 <!-- max-width tests --> 97 <!-- max-width tests -->
98 <div class="container"> 98 <div class="container">
99 <div class="child" style="max-width: -webkit-max-content; width: 1000px;" da ta-expected-width="210"> 99 <div class="child" style="max-width: max-content; width: 1000px;" data-expec ted-width="210">
100 <div class="content"></div> 100 <div class="content"></div>
101 <div class="content"></div> 101 <div class="content"></div>
102 </div> 102 </div>
103 </div> 103 </div>
104 104
105 <div class="container"> 105 <div class="container">
106 <div class="child" style="max-width: -webkit-min-content; width: 1000px;" da ta-expected-width="110"> 106 <div class="child" style="max-width: min-content; width: 1000px;" data-expec ted-width="110">
107 <div class="content"></div> 107 <div class="content"></div>
108 <div class="content"></div> 108 <div class="content"></div>
109 </div> 109 </div>
110 </div> 110 </div>
111 111
112 <div class="container"> 112 <div class="container">
113 <div class="child" style="max-width: -webkit-fit-content; width: 1000px;" da ta-expected-width="210"> 113 <div class="child" style="max-width: fit-content; width: 1000px;" data-expec ted-width="210">
114 <div class="content"></div> 114 <div class="content"></div>
115 <div class="content"></div> 115 <div class="content"></div>
116 </div> 116 </div>
117 </div> 117 </div>
118 118
119 <div class="container" style="width: 50px"> 119 <div class="container" style="width: 50px">
120 <div class="child" style="max-width: -webkit-fit-content; width: 1000px;" da ta-expected-width="110"> 120 <div class="child" style="max-width: fit-content; width: 1000px;" data-expec ted-width="110">
121 <div class="content"></div> 121 <div class="content"></div>
122 <div class="content"></div> 122 <div class="content"></div>
123 </div> 123 </div>
124 </div> 124 </div>
125 125
126 <div class="container"> 126 <div class="container">
127 <div class="child" style="max-width: -webkit-fill-available; width: 1000px;" data-expected-width="250"> 127 <div class="child" style="max-width: -webkit-fill-available; width: 1000px;" data-expected-width="250">
128 <div class="content"></div> 128 <div class="content"></div>
129 <div class="content"></div> 129 <div class="content"></div>
130 </div> 130 </div>
131 </div> 131 </div>
132 132
133 133
134 134
135 <script src="../../resources/check-layout.js"></script> 135 <script src="../../resources/check-layout.js"></script>
136 <script> 136 <script>
137 checkLayout(".container"); 137 checkLayout(".container");
138 </script> 138 </script>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-intrinsic-dimensions/height-property-value-expected.txt ('k') | LayoutTests/fast/css-intrinsic-dimensions/intrinsic-sized-blocks.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698