Skip to content

Commit 5be1724

Browse files
author
Mats Palmgren
committed
Bug 1735445 - Land initial CSS Gap Decorations draft spec in tree for internal reviewing purposes. NPOTB DONTBUILD
Differential Revision: https://phabricator.services.mozilla.com/D128324
1 parent 28b29ad commit 5be1724

60 files changed

Lines changed: 6408 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎layout/docs/css-gap-decorations/Overview.bs‎

Lines changed: 1147 additions & 0 deletions
Large diffs are not rendered by default.

‎layout/docs/css-gap-decorations/Overview.html‎

Lines changed: 3611 additions & 0 deletions
Large diffs are not rendered by default.

‎layout/docs/css-gap-decorations/examples/flexbox-coupon-rule.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-cn">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Coupon example</title>
6+
<style>
7+
div {
8+
display: inline-flex;
9+
column-gap: .8em;
10+
column-rule: 12px solid;
11+
column-rule-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAVCAYAAAByrA%2B0AAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAACEklEQVQ4y5WTsUtbURTGf%2Bf1vrwY2ywWQeMgTi4OXf0fwhtLwTFChg4Kzi7OnSwiyKNQFMxSKRQ62HRw0D4c%2Bi%2FIGywlItZEE1%2BS93VoElpoK35w4HLvOd853zn3IOmjpK7ux62k2Ov3%2B28BA8T%2F8QN4Q5IkTyW9ltSTlP2DvSnpHQBbW1tBo9GYkVSTdCWpPQjuD84NSbuSxgG8IAjY3t7%2BbmbPJb2U9AmoA5%2BBD0DZzJbM7EYSDmB6etrb29vLe563C%2Bz%2BTYAkzAxveNHpdBRFkb%2Bzs%2BMnSeJL8jY3N0fvZgbAozAM3S8CZWamSqXSc875p6en3traWg%2FAOUeWZQA4IAOyubm5rNlsusvLy%2FEgCB63220rl8s3x8fHt9VqNR1mckA2Pz%2Bv1dVVxXHsAzPAs0KhwMTExFfnXOL7ftrtdgHwAC0uLmplZcUDAmAWCAc2WywWg42NDTfM4A0nHMcxwB1wBrwf2Nn19fVdmqbZqF1RFNn%2B%2Fr5J4vDw0Jf0RNKUpKmLi4viwcGBn8vl%2BF0DrVaLWq3GyclJVq%2FX22EY3kri6OhIaZqSpumfAWZGq9ViYWGhX6lUKBQKDtD6%2BnoGkM%2Fn6XQ6Iw05IDc2NpY3M6IoolQq9UqlUn9Q8sgZwKIoCs7Pz7PJycnu8vLyEvDczHIDsivgVRAEX0ZlPfS3Pnwfer3ei3uch%2FgmqcpDd%2Fonp%2B72kBTcCEsAAAAASUVORK5CYII%3D) 6 round;
12+
font-size: large;
13+
padding: 0 .5em;
14+
border-radius: 0.2em;
15+
min-block-size: 3em;
16+
align-items: center;
17+
background-image: linear-gradient(270deg, #FFA329 3%, #F56C34);
18+
color: #fff;
19+
}
20+
</style>
21+
</head>
22+
23+
<div><x>满 100</x><x>减 20</x></div>

‎layout/docs/css-gap-decorations/examples/flexbox-extent-001.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!doctype html>
2+
<!--
3+
Any copyright is dedicated to the Public Domain.
4+
http://creativecommons.org/publicdomain/zero/1.0/
5+
-->
6+
<style>
7+
html,body {
8+
color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
9+
}
10+
11+
.flex {
12+
display: flex;
13+
flex-wrap: wrap;
14+
gap: 16px;
15+
16+
column-rule: 8px solid orange;
17+
row-rule: 60% solid blue;
18+
row-rule-extent: end;
19+
20+
place-content: center;
21+
border: 5px solid;
22+
margin: 2em;
23+
block-size: 6em;
24+
inline-size: 200px;
25+
background: lightgrey;
26+
}
27+
28+
x {
29+
inline-size: 50px;
30+
block-size: 2em;
31+
background: grey;
32+
opacity: .6;
33+
}
34+
x:nth-child(1) { order: 2; }
35+
x:nth-child(2) { inline-size: 45px; }
36+
x:nth-child(3) { inline-size: 35px; }
37+
x:nth-child(4) { inline-size: 60px; }
38+
39+
</style>
40+
41+
<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>

‎layout/docs/css-gap-decorations/examples/flexbox-extent-all-long-001.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!doctype html>
2+
<!--
3+
Any copyright is dedicated to the Public Domain.
4+
http://creativecommons.org/publicdomain/zero/1.0/
5+
-->
6+
<title>An example of 'row-rule-extent: all-long</title>
7+
<style>
8+
html,body {
9+
color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
10+
}
11+
12+
.flex {
13+
display: flex;
14+
flex-wrap: wrap;
15+
gap: 16px;
16+
17+
column-rule: 8px solid orange;
18+
row-rule: 60% solid blue;
19+
row-rule-extent: all-long;
20+
21+
place-content: center;
22+
border: 5px solid;
23+
margin: 2em;
24+
block-size: 6em;
25+
inline-size: 200px;
26+
background: lightgrey;
27+
}
28+
29+
x {
30+
inline-size: 50px;
31+
block-size: 2em;
32+
background: grey;
33+
opacity: .6;
34+
}
35+
x:nth-child(1) { order: 2; }
36+
x:nth-child(2) { inline-size: 45px; }
37+
x:nth-child(3) { inline-size: 35px; }
38+
x:nth-child(4) { inline-size: 60px; }
39+
40+
</style>
41+
42+
<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>

‎layout/docs/css-gap-decorations/examples/flexbox-extent-all-long-allow-overlap-001.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!doctype html>
2+
<!--
3+
Any copyright is dedicated to the Public Domain.
4+
http://creativecommons.org/publicdomain/zero/1.0/
5+
-->
6+
<title>An example of 'column-rule-extent: all-long allow-overlap'</title>
7+
<style>
8+
html,body {
9+
color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
10+
}
11+
12+
.flex {
13+
display: flex;
14+
flex-wrap: wrap;
15+
gap: 16px;
16+
17+
column-rule: 8px solid orange;
18+
column-rule-extent: all-long allow-overlap;
19+
row-rule: 60% solid blue;
20+
21+
place-content: center;
22+
border: 5px solid;
23+
margin: 2em;
24+
block-size: 6em;
25+
inline-size: 200px;
26+
background: lightgrey;
27+
}
28+
29+
x {
30+
inline-size: 50px;
31+
block-size: 2em;
32+
background: grey;
33+
opacity: .6;
34+
}
35+
x:nth-child(1) { order: 2; }
36+
x:nth-child(2) { inline-size: 45px; }
37+
x:nth-child(3) { inline-size: 35px; }
38+
x:nth-child(4) { inline-size: 60px; }
39+
40+
</style>
41+
42+
<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>

‎layout/docs/css-gap-decorations/examples/flexbox-extent-all-short-001.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!doctype html>
2+
<!--
3+
Any copyright is dedicated to the Public Domain.
4+
http://creativecommons.org/publicdomain/zero/1.0/
5+
-->
6+
<title>An example of 'row-rule-extent: all-short</title>
7+
<style>
8+
html,body {
9+
color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
10+
}
11+
12+
.flex {
13+
display: flex;
14+
flex-wrap: wrap;
15+
gap: 16px;
16+
17+
column-rule: 8px solid orange;
18+
row-rule: 60% solid blue;
19+
row-rule-extent: all-short;
20+
21+
place-content: center;
22+
border: 5px solid;
23+
margin: 2em;
24+
block-size: 6em;
25+
inline-size: 200px;
26+
background: lightgrey;
27+
}
28+
29+
x {
30+
inline-size: 50px;
31+
block-size: 2em;
32+
background: grey;
33+
opacity: .6;
34+
}
35+
x:nth-child(1) { order: 2; }
36+
x:nth-child(2) { inline-size: 45px; }
37+
x:nth-child(3) { inline-size: 35px; }
38+
x:nth-child(4) { inline-size: 60px; }
39+
40+
</style>
41+
42+
<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>

‎layout/docs/css-gap-decorations/examples/flexbox-extent-end-001.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!doctype html>
2+
<!--
3+
Any copyright is dedicated to the Public Domain.
4+
http://creativecommons.org/publicdomain/zero/1.0/
5+
-->
6+
<title>An example of 'row-rule-extent: end</title>
7+
<style>
8+
html,body {
9+
color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
10+
}
11+
12+
.flex {
13+
display: flex;
14+
flex-wrap: wrap;
15+
gap: 16px;
16+
17+
column-rule: 8px solid orange;
18+
row-rule: 60% solid blue;
19+
row-rule-extent: end;
20+
21+
place-content: center;
22+
border: 5px solid;
23+
margin: 2em;
24+
block-size: 6em;
25+
inline-size: 200px;
26+
background: lightgrey;
27+
}
28+
29+
x {
30+
inline-size: 50px;
31+
block-size: 2em;
32+
background: grey;
33+
opacity: .6;
34+
}
35+
x:nth-child(1) { order: 2; }
36+
x:nth-child(2) { inline-size: 45px; }
37+
x:nth-child(3) { inline-size: 35px; }
38+
x:nth-child(4) { inline-size: 60px; }
39+
40+
</style>
41+
42+
<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>

‎layout/docs/css-gap-decorations/examples/flexbox-extent-long-001.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!doctype html>
2+
<!--
3+
Any copyright is dedicated to the Public Domain.
4+
http://creativecommons.org/publicdomain/zero/1.0/
5+
-->
6+
<title>An example of 'row-rule-extent: long'</title>
7+
<style>
8+
html,body {
9+
color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
10+
}
11+
12+
.flex {
13+
display: flex;
14+
flex-wrap: wrap;
15+
gap: 16px;
16+
17+
column-rule: 8px solid orange;
18+
row-rule: 60% solid blue;
19+
row-rule-extent: long;
20+
21+
place-content: center;
22+
border: 5px solid;
23+
margin: 2em;
24+
block-size: 6em;
25+
inline-size: 200px;
26+
background: lightgrey;
27+
}
28+
29+
x {
30+
inline-size: 50px;
31+
block-size: 2em;
32+
background: grey;
33+
opacity: .6;
34+
}
35+
x:nth-child(1) { order: 2; }
36+
x:nth-child(2) { inline-size: 45px; }
37+
x:nth-child(3) { inline-size: 35px; }
38+
x:nth-child(4) { inline-size: 60px; }
39+
40+
</style>
41+
42+
<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>

‎layout/docs/css-gap-decorations/examples/flexbox-extent-start-001.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!doctype html>
2+
<!--
3+
Any copyright is dedicated to the Public Domain.
4+
http://creativecommons.org/publicdomain/zero/1.0/
5+
-->
6+
<title>An example of 'row-rule-extent: start'</title>
7+
<style>
8+
html,body {
9+
color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
10+
}
11+
12+
.flex {
13+
display: flex;
14+
flex-wrap: wrap;
15+
gap: 16px;
16+
17+
column-rule: 8px solid orange;
18+
row-rule: 60% solid blue;
19+
row-rule-extent: start;
20+
21+
place-content: center;
22+
border: 5px solid;
23+
margin: 2em;
24+
block-size: 6em;
25+
inline-size: 200px;
26+
background: lightgrey;
27+
}
28+
29+
x {
30+
inline-size: 50px;
31+
block-size: 2em;
32+
background: grey;
33+
opacity: .6;
34+
}
35+
x:nth-child(1) { order: 2; }
36+
x:nth-child(2) { inline-size: 45px; }
37+
x:nth-child(3) { inline-size: 35px; }
38+
x:nth-child(4) { inline-size: 60px; }
39+
40+
</style>
41+
42+
<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>

0 commit comments

Comments
 (0)