- From: davidsgrogan via GitHub <sysbot+gh@w3.org>
- Date: Tue, 21 Sep 2021 06:28:31 +0000
- To: public-css-archive@w3.org
@fantasai, these are the test cases from the data collection [patch](https://chromium-review.googlesource.com/c/chromium/src/+/3159204/6/third_party/blink/renderer/core/layout/ng/flex/ng_flex_layout_algorithm_test.cc) that's in review in the chromium repo. We wanted Tab to review these cases but looks like he is on vacation this week.
Could you take a look? Even if you spot check some, I think that's sufficient. Let me know if you see problems or are curious about other cases.
`EXPECT_TRUE` means the behavior would change if we were to apply align-content to single-line flex containers
```c++
// Current: item is at top of container.
// Proposed: item is at bottom of container.
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter1) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; align-content: flex-end; height: 50px">
<div style="height:20px;"></div>
</div>
)HTML");
EXPECT_TRUE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter1b) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; align-content: flex-end; height: 50px; flex-wrap: wrap;">
<div style="height:20px;"></div>
</div>
)HTML");
EXPECT_FALSE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter2) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; align-content: baseline; height: 50px">
<div style="height:20px;"></div>
</div>
)HTML");
EXPECT_FALSE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter2b) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; height: 50px">
<div style="height:20px; align-self: baseline;"></div>
</div>
)HTML");
EXPECT_FALSE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter3) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; align-content: initial; height: 50px">
<div style="height:20px;"></div>
</div>
)HTML");
EXPECT_FALSE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter4) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; align-content: stretch; height: 50px">
<div style="height:20px;"></div>
</div>
)HTML");
EXPECT_FALSE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter5) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; align-content: flex-start; height: 50px">
<div style="height:20px;"></div>
</div>
)HTML");
EXPECT_FALSE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter6) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; height: 50px">
<div style="height:20px;"></div>
</div>
)HTML");
EXPECT_FALSE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter7) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; align-content: flex-end;">
<div style="height:20px;"></div>
</div>
)HTML");
EXPECT_FALSE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
// Current: item gets 50px height.
// Proposed: item gets 0px height and abuts bottom edge of container.
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter9) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; align-content: flex-end; height: 50px;">
<div></div>
</div>
)HTML");
EXPECT_TRUE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
// Current: item abuts left edge of container.
// Proposed: item abuts right edge of container.
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter10) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; flex-flow: column; align-content: flex-end;">
<div style="width:20px;"></div>
</div>
)HTML");
EXPECT_TRUE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter11) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; flex-flow: column; align-content: flex-end;">
<div style="width:20px;"></div>
<div></div>
</div>
)HTML");
EXPECT_FALSE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
// Current: items abut left edge of container.
// Proposed: items abut right edge of container.
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter12) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; flex-flow: column; align-content: flex-end;">
<div style="width:20px;"></div>
<div style="width:20px;"></div>
</div>
)HTML");
EXPECT_TRUE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter14) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; flex-flow: column; align-content: flex-end; width: 200px">
<div style="align-self: flex-end"></div>
</div>
)HTML");
EXPECT_FALSE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter15) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; flex-flow: column; align-content: flex-end; width: 200px">
<div style="align-self: flex-end; width: 100px;"></div>
</div>
)HTML");
EXPECT_FALSE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
// Current: item at top
// Proposed: item at bottom
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter15b) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; align-content: end; height: 200px">
<div style="align-self: flex-start; height: 100px;"></div>
</div>
)HTML");
EXPECT_TRUE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter15c) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; align-content: end; height: 200px;">
<div style="height: 100px; align-self: self-end;"></div>
</div>
)HTML");
EXPECT_FALSE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
// Current: item at top
// Proposed: item in center
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter15d) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; align-content: space-around; height: 200px;">
<div style="height: 100px;"></div>
</div>
)HTML");
EXPECT_TRUE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter15e) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; align-content: space-around; height: 200px;">
<div style="height: 100px; align-self: center;"></div>
</div>
)HTML");
EXPECT_FALSE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter15f) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; align-content: space-between; height: 200px;">
<div style="height: 100px;"></div>
</div>
)HTML");
EXPECT_FALSE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
// Current: first item is on the top
// Proposed: first item is on the bottom
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter15g) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; align-content: end; height: 200px;">
<div style="height: 100px; align-self: start"></div>
<div style="height: 100px; align-self: end"></div>
</div>
)HTML");
EXPECT_TRUE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
// Current: item is on the right.
// Proposed: item is on the left.
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter16) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; flex-flow: column; align-content: flex-start; width: 200px">
<div style="align-self: flex-end; width: 100px;"></div>
</div>
)HTML");
EXPECT_TRUE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
// Current: first item's right edge abuts container's right edge
// second item is horizontally centered
// Proposal: both abut container's right edge
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter17) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; flex-flow: column; align-content: flex-end; width: 200px">
<div style="align-self: flex-end; width: 100px;"></div>
<div style="align-self: center; width: 100px;"></div>
</div>
)HTML");
EXPECT_TRUE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
// Current: first item's bottom edge abuts container's bottom edge
// second item is vertically centered
// Proposal: both abut container's bottom edge
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter18) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; align-content: flex-end; height: 200px">
<div style="align-self: flex-end; height: 100px;"></div>
<div style="align-self: center; height: 100px;"></div>
</div>
)HTML");
EXPECT_TRUE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
// This case has no behavior change but checking the used width of each item is
// too difficult.
TEST_F(NGFlexLayoutAlgorithmTest, UseCounter19) {
SetBodyInnerHTML(R"HTML(
<div style="display: flex; flex-flow: column; align-content: flex-end; width: 20px">
<div style="width:20px;"></div>
<div style="width:100%;"></div>
</div>
)HTML");
EXPECT_TRUE(GetDocument().IsUseCounted(
WebFeature::kFlexboxAlignSingleLineDifference));
}
```
--
GitHub Notification of comment by davidsgrogan
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3052#issuecomment-923679680 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 21 September 2021 06:28:33 UTC