Skip to content

Commit 1d7656f

Browse files
Gyuyoungchromium-wpt-export-bot
Gyuyoung
authored and
chromium-wpt-export-bot
committed
[css-flexbox] Move flex-item-contains-strict.html test to WPT
This CL moves flex-item-contains-strict.html test from css3/css-flexbox to external/wpt/css/css-flexbox with WPT styles, adding links to the relevant specs, a proper title, and test description. Bug: 1063749 Change-Id: I5559de07cc72a44a36ed39c951562a156dfeabca Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2123695 Reviewed-by: Robert Ma <[email protected]> Reviewed-by: David Grogan <[email protected]> Commit-Queue: Gyuyoung Kim <[email protected]> Commit-Queue: Robert Ma <[email protected]> Cr-Commit-Position: refs/heads/master@{#754029}
1 parent f94621b commit 1d7656f

File tree

1 file changed

+56
-0
lines changed

1 file changed

+56
-0
lines changed

‎css/css-flexbox/flex-item-contains-strict.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<title>CSS Flexbox: 'contain' property strict value</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
4+
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers">
5+
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">
6+
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property">
7+
<meta name="assert" content="This test ensures that the strict value of the 'contain'
8+
property in combination with mixing of 'display' inline-flex value, 'align-items' flex-start
9+
value, column direction works properly.">
10+
<style>
11+
.inline-flex {
12+
display: inline-flex;
13+
outline: solid;
14+
background: red;
15+
}
16+
</style>
17+
18+
<script src="/resources/testharness.js"></script>
19+
<script src="/resources/testharnessreport.js"></script>
20+
<script src="/resources/check-layout-th.js"></script>
21+
22+
<body onload="checkLayout('.inline-flex')">
23+
<p>Stretched:</p>
24+
<div class="inline-flex" style="display: inline-flex; flex-direction: column;" data-expected-width="0" data-expected-height="0">
25+
<div style="contain: strict;" data-expected-width="0" data-expected-height="0">Column</div>
26+
</div>
27+
28+
<div class="inline-flex" data-expected-width="0" data-expected-height="0">
29+
<div style="contain: strict;" data-expected-width="0" data-expected-height="0">Row</div>
30+
</div>
31+
32+
<div class="inline-flex" style="display: inline-flex; flex-direction: column;" data-expected-width="30" data-expected-height="30">
33+
<div style="contain: strict; width: 30px; height: 30px;" data-expected-width="30" data-expected-height="30">Column</div>
34+
</div>
35+
36+
<div class="inline-flex" style="display: inline-flex;" data-expected-width="30" data-expected-height="30">
37+
<div style="contain: strict; width: 30px; height: 30px;" data-expected-width="30" data-expected-height="30">Row</div>
38+
</div>
39+
40+
41+
<p>Flex-start:</p>
42+
<div class="inline-flex" style="flex-direction: column; align-items: flex-start;" data-expected-width="0" data-expected-height="0">
43+
<div style="contain: strict;" data-expected-width="0" data-expected-height="0">Column</div>
44+
</div>
45+
46+
<div class="inline-flex" style="align-items: flex-start;" data-expected-width="0" data-expected-height="0">
47+
<div style="contain: strict;" data-expected-width="0" data-expected-height="0">Row</div>
48+
</div>
49+
50+
<div class="inline-flex" style="flex-direction: column; align-items: flex-start;" data-expected-width="30" data-expected-height="30">
51+
<div style="contain: strict; width: 30px; height: 30px;" data-expected-width="30" data-expected-height="30">Column</div>
52+
</div>
53+
54+
<div class="inline-flex" style="align-items: flex-start;" data-expected-width="30" data-expected-height="30">
55+
<div style="contain: strict; width: 30px; height: 30px;" data-expected-width="30" data-expected-height="30">Row</div>
56+
</div>

0 commit comments

Comments
 (0)