Skip to content

Commit 6e4bfb4

Browse files
Javier Contreras Tenoriochromium-wpt-export-bot
Javier Contreras Tenorio
authored and
chromium-wpt-export-bot
committed
[gap-decorations] Moving flex fragmentation tests to own subfolder
This CL moves the fragmentation related tests for flex gap decorations tests to their own subfolder. `-036` was not fragmentation related, so that one is now `-028` in the non-fragmentation subfolder. All the others [028,035] and [036,042] were moved to the fragmentation subfolder and renumbered accordingly. Bug: 357648037 Change-Id: Ief9d5e74ee67501b0df9673df2a3ede71bdf85c4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7083088 Reviewed-by: Alison Maher <[email protected]> Commit-Queue: Javier Contreras <[email protected]> Cr-Commit-Position: refs/heads/main@{#1535099}
1 parent cf3e012 commit 6e4bfb4

File tree

32 files changed

+224
-224
lines changed

32 files changed

+224
-224
lines changed

‎css/css-gaps/flex/flex-gap-decorations-028-ref.html‎

Lines changed: 44 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
11
<!DOCTYPE html>
22
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
3-
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
3+
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
44
<style>
5-
.multi-column {
6-
columns: 3;
7-
height: 47px;
8-
column-width: 170px;
9-
width: 510px;
10-
}
11-
125
body {
136
margin: 0px;
147
}
15-
168
#flexbox {
179
border: 2px solid rgb(96 139 168);
1810
display: flex;
@@ -21,51 +13,65 @@
2113
width: 170px;
2214
flex-wrap: wrap;
2315
}
24-
2516
.items {
2617
background-color: rgb(96 139 168 / 0.2);
2718
flex-shrink: 1;
2819
width: 50px;
2920
height: 50px;
3021
}
31-
3222
#four {
3323
width: 100px;
24+
padding-inline-start: 20px;
3425
}
35-
36-
.column-rule {
26+
.row-gap {
27+
margin: 0px;
28+
padding: 0px;
29+
height: 10px;
30+
width: 170px;
3731
position: absolute;
38-
top: 0px;
39-
background: red;
40-
width: 10px;
32+
background: blue;
4133
}
42-
43-
.row-rule {
34+
.column-gap {
35+
display: flex;
36+
flex-direction: column;
37+
row-gap: 70px;
38+
height: 170px;
39+
top: 2px;
40+
width: 10px;
4441
position: absolute;
45-
background: blue;
46-
width: 170px;
47-
height: 10px;
48-
top: 5px;
49-
left: 265px;
42+
}
43+
.column {
44+
background: red;
45+
width: 10px;
46+
height: 50px;
5047
}
5148
</style>
49+
<div id="flexbox">
50+
<div class="items">One</div>
51+
<div class="items">Two</div>
52+
<div class="items">Three</div>
53+
<div class="items" id="four">Four</div>
54+
<div class="items">Five</div>
55+
<div class="items">Six</div>
56+
<div class="items">Seven</div>
57+
<div class="items">Eight</div>
58+
</div>
5259

53-
<div class="column-rule" style="top: 2px; height: 45px; left: 52px;"></div>
54-
<div class="column-rule" style="top: 2px; height: 45px; left: 112px;"></div>
60+
<div id="columns1" style="left: 52px;" class="column-gap">
61+
<div id="c1" class="column"></div>
62+
<div id="c2" class="column"></div>
63+
</div>
5564

56-
<div class="column-rule" style="height: 5px; left: 315px;"></div>
57-
<div class="column-rule" style="height: 5px; left: 375px;"></div>
58-
<div class="column-rule" style="top: 15px; height: 32px; left: 365px;"></div>
59-
<div class=row-rule></div>
65+
<div id="columns2" style="left: 112px;" class="column-gap">
66+
<div id="c1" class="column"></div>
67+
<div id="c2" class="column"></div>
68+
</div>
6069

61-
<div class="column-rule" style="height: 18px; left: 628px;"></div>
70+
<div id="row1" class="row-gap" style="top: 52px; left: 2px;">
71+
</div>
72+
73+
<div id="row2" class="row-gap" style="top: 112px; left: 2px;">
74+
</div>
6275

63-
<div class="multi-column">
64-
<div id="flexbox">
65-
<div class="items">One</div>
66-
<div class="items">Two</div>
67-
<div class="items">Three</div>
68-
<div class="items" id="four">Four</div>
69-
<div class="items">Five</div>
70-
</div>
76+
<div id="row3" class="row-gap" style="top: 172px; left: 2px;">
7177
</div>

‎css/css-gaps/flex/flex-gap-decorations-028.html‎

Lines changed: 41 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,48 @@
1-
<!DOCTYPE html>
1+
<html>
22
<title>
3-
CSS Gap Decorations: flex gaps are painted when the container is fragmented.
3+
CSS Gap Decorations: flex column and row gaps are painted with intersection column rule break.
44
</title>
55
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
66
<link rel="match" href="flex-gap-decorations-028-ref.html">
7-
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
7+
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
88
<style>
9-
.multi-column {
10-
columns: 3;
11-
height: 47px;
12-
column-width: 170px;
13-
width: 510px;
14-
}
15-
16-
body {
17-
margin: 0px;
18-
}
19-
20-
#flexbox {
21-
border: 2px solid rgb(96 139 168);
22-
display: flex;
23-
column-gap: 10px;
24-
row-gap: 10px;
25-
row-rule-style: solid;
26-
row-rule-color: blue;
27-
row-rule-width: 10px;
28-
column-rule-style: solid;
29-
column-rule-color: red;
30-
column-rule-width: 10px;
31-
width: 170px;
32-
flex-wrap: wrap;
33-
}
34-
35-
.items {
36-
background-color: rgb(96 139 168 / 0.2);
37-
flex-shrink: 1;
38-
width: 50px;
39-
height: 50px;
40-
}
41-
42-
#four {
43-
width: 100px;
44-
}
9+
body {
10+
margin: 0px;
11+
}
12+
#flexbox {
13+
border: 2px solid rgb(96 139 168);
14+
display: flex;
15+
column-gap: 10px;
16+
row-gap: 10px;
17+
row-rule-style: solid;
18+
row-rule-color: blue;
19+
row-rule-width: 10px;
20+
column-rule-break: intersection;
21+
column-rule-style: solid;
22+
column-rule-color: red;
23+
column-rule-width: 10px;
24+
column-rule-outset: 0;
25+
width: 170px;
26+
flex-wrap: wrap;
27+
}
28+
.items {
29+
background-color: rgb(96 139 168 / 0.2);
30+
flex-shrink: 1;
31+
width: 50px;
32+
height: 50px;
33+
}
34+
#four {
35+
width: 100px;
36+
padding-inline-start: 20px;
37+
}
4538
</style>
46-
47-
<div class="multi-column">
48-
<div id="flexbox">
49-
<div class="items">One</div>
50-
<div class="items">Two</div>
51-
<div class="items">Three</div>
52-
<div class="items" id="four">Four</div>
53-
<div class="items">Five</div>
54-
</div>
39+
<div id="flexbox">
40+
<div class="items">One</div>
41+
<div class="items">Two</div>
42+
<div class="items">Three</div>
43+
<div class="items" id="four">Four</div>
44+
<div class="items">Five</div>
45+
<div class="items">Six</div>
46+
<div class="items">Seven</div>
47+
<div class="items">Eight</div>
5548
</div>

‎css/css-gaps/flex/flex-gap-decorations-036-ref.html‎

Lines changed: 0 additions & 77 deletions
This file was deleted.

‎css/css-gaps/flex/flex-gap-decorations-036.html‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

0 commit comments

Comments
 (0)