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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-automatic-minimum-intrinsic-aspect-ratio.html

Issue 1778853002: [css-grid] Fix height computation for items with intrinsic aspect ratios (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Reverted unneeded changes Created 4 years, 9 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
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/resources/blue-100x50.png » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">
3 <style>
4 .container {
5 border: 5px solid orange;
6 display: grid;
7 }
8 </style>
9 <script src="../../resources/testharness.js"></script>
10 <script src="../../resources/testharnessreport.js"></script>
11 <script src="../../resources/check-layout-th.js"></script>
12
13 <body onload="checkLayout('.container')">
14 <div id="log"></div>
15
16 <p>This test shows how min-width|height:auto is computed for items with intrinis c aspect ratios</p>
17
18 <p>Check that width respects the intrinsic aspect ratio when specifying the heig ht</p>
19 <div class="container min-content" data-expected-width="60" data-expected-height ="35">
Manuel Rego 2016/03/21 12:13:29 Nit: dunno if we want to check the size of the gri
svillar 2016/03/21 13:22:27 I do want to check them because as you could see,
20 <img src="resources/blue-100x50.png" style="height: 25px;" data-expected-wid th="50" data-expected-height="25"/>
21 </div>
22
23 <div class="container min-content" data-expected-width="150" data-expected-heigh t="80">
24 <img src="resources/blue-100x50.png" style="min-height: 70px;" data-expected -width="140" data-expected-height="70"/>
25 </div>
26
27 <div class="container min-content" data-expected-width="110" data-expected-heigh t="60">
28 <img src="resources/blue-100x50.png" style="max-height: 50px;" data-expected -width="100" data-expected-height="50"/>
Manuel Rego 2016/03/21 12:13:29 Nit: "max-height: 50px" is not really useful, what
svillar 2016/03/21 13:22:27 good point
29 </div>
30
31 <div class="container min-content" data-expected-width="70" data-expected-height ="40">
32 <img src="resources/blue-100x50.png" style="height: 25px; min-height: 30px;" data-expected-width="60" data-expected-height="30"/>
33 </div>
34
35 <div class="container min-content" data-expected-width="30" data-expected-height ="20">
36 <img src="resources/blue-100x50.png" style="height: 25px; max-height: 10px;" data-expected-width="20" data-expected-height="10"/>
37 </div>
38
39 <div class="container min-content" data-expected-width="50" data-expected-height ="35">
40 <img src="resources/blue-100x50.png" style="height: 25px; max-width: 40px;" data-expected-width="40" data-expected-height="25"/>
41 </div>
42
43 <div class="container min-content" data-expected-width="60" data-expected-height ="40">
44 <img src="resources/blue-100x50.png" style="height: 25px; min-height: 30px; max-width: 50px;" data-expected-width="50" data-expected-height="30"/>
45 </div>
46
47
48 <p>Check that height respects the intrinsic aspect ratio when specifying the wid th</p>
49 <div class="container min-content" data-expected-width="60" data-expected-height ="35">
50 <img src="resources/blue-100x50.png" style="width: 50px;" data-expected-widt h="50" data-expected-height="25"/>
51 </div>
52
53 <div class="container min-content" data-expected-width="70" data-expected-height ="40">
54 <img src="resources/blue-100x50.png" style="max-width: 60px;" data-expected- width="60" data-expected-height="30"/>
55 </div>
56
57 <div class="container min-content" data-expected-width="130" data-expected-heigh t="70">
58 <img src="resources/blue-100x50.png" style="min-width: 120px;" data-expected -width="120" data-expected-height="60"/>
59 </div>
60
61 <div class="container min-content" data-expected-width="90" data-expected-height ="50">
62 <img src="resources/blue-100x50.png" style="width: 60px; min-width: 80px;" d ata-expected-width="80" data-expected-height="40"/>
63 </div>
64
65 <div class="container min-content" data-expected-width="34" data-expected-height ="22">
66 <img src="resources/blue-100x50.png" style="width: 24px; max-width: 40px;" d ata-expected-width="24" data-expected-height="12"/>
67 </div>
68
69 <div class="container min-content" data-expected-width="110" data-expected-heigh t="35">
70 <img src="resources/blue-100x50.png" style="width: 100px; max-height: 25px;" data-expected-width="100" data-expected-height="25"/>
Manuel Rego 2016/03/21 12:13:29 Nit: "width: 100px" maybe better "width: 120px".
svillar 2016/03/21 13:22:28 Another good point.
71 </div>
72
73 <div class="container min-content" data-expected-width="35" data-expected-height ="110">
74 <img src="resources/blue-100x50.png" style="width: 25px; min-height: 100px;" data-expected-width="25" data-expected-height="100"/>
75 </div>
76
77 </body>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/resources/blue-100x50.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698