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

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: Patch for landing 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

OLD	NEW
(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">

	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="90" data-expected-height ="50">

	28 <img src="resources/blue-100x50.png" style="max-height: 40px;" data-expected -width="80" data-expected-height="40"/>

	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="130" data-expected-heigh t="35">

	70 <img src="resources/blue-100x50.png" style="width: 120px; max-height: 25px;" data-expected-width="120" data-expected-height="25"/>

	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>

OLD	NEW

« 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 »