LayoutTests/css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item.html - Issue 616583002: Revert of Blink doesn't honor percent heights on children of "align-self:stretch" flex items in a fixed-height

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

Issue 616583002: Revert of Blink doesn't honor percent heights on children of "align-self:stretch" flex items in a fixed-height (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Created 6 years, 2 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 | « LayoutTests/css3/flexbox/flex-flow-padding.html ('k') | LayoutTests/css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item-expected.txt » ('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

10 .vertical {

11 width: 50px;

12 height: 10px;

13 background-color: purple;

14 position: relative;

15 -webkit-writing-mode: vertical-rl;

16 }

17

18 .flex-one {

19 background-color: red;

20 }

21 </style>

22 <script src="../../resources/check-layout.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

38 <div class="flexbox horizontal">

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

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

41 </div>

42 </div>

43

44 <div class="flexbox horizontal">

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

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

47 </div>

48 </div>

49

50 <div class="flexbox horizontal">

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

52 </div>

53

54 <div class="flexbox horizontal">

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

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

57 </div>

58 </div>

59

60 <div class="flexbox wrap align-content-flex-start" style="width: 100px; height: 100px; background-color: yellow; padding: 3px;">

61 <div data-expected-height="30" style="min-height: 30%; width: 80px; background -color: purple; margin: 2px; ">

62 <div data-expected-height="15" style="background-color: red; height: 50%; wi dth: 20px;"></div>

63 </div>

64 <div data-expected-height="40" style="height: 40px; width: 80px; background-co lor: green; margin: 2px;"></div>

65 </div>

66

67 <div class="flexbox vertical">

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

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

70 </div>

71 </div>

72

73 <div class="flexbox vertical">

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

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

76 </div>

77 </div>

78

79 <div class="flexbox vertical">

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

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

82 </div>

83 </div>

84

85 <div class="flexbox vertical">

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

87 </div>

88

89 <div class="flexbox vertical">

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

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

92 </div>

93 </div>

94 </body>

OLD	NEW