third_party/WebKit/LayoutTests/fast/table/table-size-must-consider-stretch-alignment.html - Issue 2740063003: Revert of [table] Stretching tables when needed due to self-alignment properties

Side by Side Diff: third_party/WebKit/LayoutTests/fast/table/table-size-must-consider-stretch-alignment.html

Issue 2740063003: Revert of [table] Stretching tables when needed due to self-alignment properties (Closed)

Patch Set: Created 3 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:

OLD	NEW
	(Empty)
1 <!DOCTYPE HTML>

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

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

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

5 <style>

6 .block {

7 width: 200px;

8 height: 200px;

9 background: lightgrey;

10 }

11

12 .flex { display: flex; }

13 .grid {

14 display: grid;

15 grid: 100px / 150px;

16 }

17

18 .itemsStart {

19 align-items: start;

20 justify-items: start;

21 }

22 .itemsFlexStart {

23 align-items: flex-start;

24 justify-items: flex-start;

25 }

26

27 .item {

28 display: table;

29 background: lime;

30 border-spacing: 0px;

31 font: 10px/1 Ahem;

32 }

33

34 td { padding: 0px; }

35 caption { background: grey; }

36

37 </style>

38

39 <p>This test verifies that table sizing logic considers stretch alignment when c omputing its width and height.</p>

40

41 <p>Regular block container of a table element and 1 implicit row and column.<br> The align-self property doesn't apply to block-level boxes.</br>The justify-self property has its initial/default value 'normal', which behaves like 'start'.</p >

42 <div class="block">

43 <div class="item" data-expected-width="100" data-expected-height="10">table cell</div>

44 </div>

45

46 <br><br>

47

48 <p>Regular block container of an empty table.<br>The align-self property doesn't apply to block-level boxes.</br>The justify-self property has its initial/defau lt value 'normal', which behaves like 'start'.</p>

49 <div class="block">

50 <table class="item" data-expected-width="70" data-expected-height="10">

51 <caption>caption</caption>

52 </table>

53 </div>

54

55 <br><br>

56

57 <p>Regular block container of a table element and 1 explicit row and column.<br> The align-self property doesn't apply to block-level boxes.</br>The justify-self property has its initial/default value 'normal', which behaves like 'start'.</p >

58 <div class="block">

59 <table class="item" data-expected-width="100" data-expected-height="20">

60 <tr data-expected-width="100" data-expected-height="10">

61 <td>table cell</td>

62 </tr>

63 <caption>caption</caption>

64 </table>

65 </div>

66

67 <br><br>

68

69 <p>Grid container of table element and 1 implicit row and column.<br>Both the al ign-self and justify-self properties have their initial/default value 'normal', which behaves like 'stretch'.</p>

70 <div class="block grid">

71 <div class="item" data-expected-width="150" data-expected-height="100">table cell</div>

72 </div>

73

74 <br><br>

75

76 <p>Grid container of an empty table element.<br>Both the align-self and justify- self properties have their initial/default value 'normal', which behaves like 's tretch'.</p>

77 <div class="block grid">

78 <table class="item" data-expected-width="150" data-expected-height="110">

79 <caption>caption</caption>

80 </table>

81 </div>

82

83 <br><br>

84

85 <p>Grid container of an empty table element.<br>Both the align-self and justify- self properties have a value 'start', which should prevent the item to be stretc hed.</p>

86 <div class="block grid itemsStart">

87 <table class="item" data-expected-width="70" data-expected-height="10">

88 <caption>caption</caption>

89 </table>

90 </div>

91

92 <br><br>

93

94 <p>Grid container of table element and 1 explicit row and column.<br>Both the al ign-self and justify-self properties have their initial/default value 'normal', which behaves like 'stretch'.</p>

95 <div class="block grid">

96 <table class="item" data-expected-width="150" data-expected-height="110">

97 <tr data-expected-width="150" data-expected-height="100">

98 <td>table cell</td>

99 </tr>

100 <caption>caption</caption>

101 </table>

102 </div>

103

104 <br><br>

105

106 <p>Flex container of table element and 1 implicit row and column.<br>Both the al ign-self and justify-self properties have their initial/default value 'normal', which behaves like 'stretch'.</p>

107 <div class="block flex">

108 <div class="item" class="item" data-expected-width="200" data-expected-heigh t="200">table cell</div>

109 </div>

110

111 <br><br>

112

113 <p>Flex container of an empty table element.<br>Both the align-self and justify- self properties have their initial/default value 'normal', which behaves like 's tretch'.</p>

114 <div class="block flex">

115 <table class="item" data-expected-width="200" data-expected-height="210">

116 <caption>caption</caption>

117 </table>

118 </div>

119

120 <br><br>

121

122 <p>Flex container of an empty table element.<br>Both the align-self and justify- self properties have a value 'start', which should prevent the item to be stretc hed.</p>

123 <div class="block flex itemsFlexStart">

124 <table class="item" data-expected-width="70" data-expected-height="10">

125 <caption>caption</caption>

126 </table>

127 </div>

128

129 <br><br>

130

131 <p>Flex container of table element and 1 explicit row and column.<br>Both the al ign-self and justify-self properties have their initial/default value 'normal', which behaves like 'stretch'.</p>

132 <div class="block flex">

133 <table class="item" class="item" data-expected-width="200" data-expected-hei ght="210">

134 <tr data-expected-width="200" data-expected-height="200">

135 <td>table cell</td>

136 </tr>

137 <caption>caption</caption>

138 </table>

139 </div>

140 <script>

141 checkLayout('.block');

142 </script>

OLD	NEW