third_party/WebKit/LayoutTests/css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item.html - Issue 1742973002: [css-flexbox] Correctly resolve percentages in children of stretched flex items

Side by Side Diff

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Keyboard Shortcuts

	File
u :	up to issue
j / k :	jump to file after / before current file
J / K :	jump to next file with a comment after / before current file
	Side-by-side diff
i :	toggle intra-line diffs
e :	expand all comments
c :	collapse all comments
s :	toggle showing all comments
n / p :	next / previous diff chunk or comment
N / P :	next / previous comment
<Up> / <Down> :	next / previous line

	Issue
u :	up to list of issues
j / k :	jump to patch after / before current patch
o / <Enter> :	open current patch in side-by-side view
i :	open current patch in unified diff view

	Issue List
j / k :	jump to issue after / before current issue
o / <Enter> :	open current issue

Side by Side Diff: third_party/WebKit/LayoutTests/css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item.html

Issue 1742973002: [css-flexbox] Correctly resolve percentages in children of stretched flex items (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: add comment 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 | « third_party/WebKit/LayoutTests/css3/flexbox/definite-cross-sizes.html ('k') | third_party/WebKit/Source/core/layout/LayoutBox.h » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <link href="resources/flexbox.css" rel="stylesheet">

	3 <style>

	4 .horizontal {

	5 height: 50px;

	6 background-color: purple;

	7 position: relative;

	8 }

	9 .vertical {

	10 width: 50px;

	11 height: 10px;

	12 background-color: purple;

	13 position: relative;

	14 writing-mode: vertical-rl;

	15 }

	16 .flex-one {

	17 background-color: red;

	18 }

	19 </style>

	20 <script src="../../resources/testharness.js"></script>

	21 <script src="../../resources/testharnessreport.js"></script>

	22 <script src="../../resources/check-layout-th.js"></script>

	23 <script>

	24 function changeHeight()

	25 {

	26 document.getElementById('dynamicHorizontalChild').style.height = "90%";

	27 document.getElementById('dynamicVerticalChild').style.width = "30%";

	28 checkLayout('.flexbox');

	29 }

	30 </script>

	31 <body onload="changeHeight()">

	32 <div class="flexbox horizontal">

	33 <div data-expected-height="50" class="flex-one">

	34 <div data-expected-height="35" style="height: 70%; background-color: lime">< /div>

	35 </div>

	36 </div>

	37 <div class="flexbox horizontal">

	38 <div data-expected-height="50" class="flex-one">

	39 <div id="dynamicHorizontalChild" data-expected-height="45" style="height: 70 %; background-color: lime"></div>

	40 </div>

	41 </div>

	42 <div class="flexbox horizontal">

	43 <div data-expected-height="50" class="flex-one" style="padding: 10px; border: 2px solid black">

	44 <div data-expected-height="18" style="height: 70%; background-color: lime">< /div>

	45 </div>

	46 </div>

	47 <div class="flexbox horizontal">

	48 <img data-expected-height="25" style="max-height: 50%" src="../images/resource s/green-10.png" />

	49 </div>

	50 <div class="flexbox horizontal">

	51 <div data-expected-height="25" class="flex-one" style="max-height:50%">

	52 <div data-expected-height="13" style="height: 50%; background-color: lime">< /div>

	53 </div>

	54 </div>

	55 <div class="flexbox vertical">

	56 <div data-expected-width="50" class="flex-one">

	57 <div data-expected-width="25" style="width: 50%; background-color: lime"></d iv>

	58 </div>

	59 </div>

	60 <div class="flexbox vertical">

	61 <div data-expected-width="50" class="flex-one">

	62 <div id="dynamicVerticalChild" data-expected-width="15" style="width: 50%; b ackground-color: lime"></div>

	63 </div>

	64 </div>

	65 <div class="flexbox vertical">

	66 <div data-expected-width="50" class="flex-one" style="padding: 10px; border: 2 px solid black">

	67 <div data-expected-width="13" style="width: 50%; background-color: lime"></d iv>

	68 </div>

	69 </div>

	70 <div class="flexbox vertical">

	71 <img data-expected-width="25" style="max-width: 50%" src="../images/resources/ green-10.png" />

	72 </div>

	73 <div class="flexbox vertical">

	74 <div data-expected-width="25" class="flex-one" style="max-width: 50%">

	75 <div data-expected-width="13" style="width: 50%; background-color: lime"></d iv>

	76 </div>

	77 </div>

	78 </body>

OLD	NEW