summaryrefslogtreecommitdiffstats
path: root/layout/docs/css-gap-decorations/examples
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/docs/css-gap-decorations/examples
parentInitial commit. (diff)
downloadfirefox-esr-upstream.tar.xz
firefox-esr-upstream.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/docs/css-gap-decorations/examples')
-rw-r--r--layout/docs/css-gap-decorations/examples/flexbox-coupon-rule.html23
-rw-r--r--layout/docs/css-gap-decorations/examples/flexbox-extent-001.html42
-rw-r--r--layout/docs/css-gap-decorations/examples/flexbox-extent-all-long-001.html42
-rw-r--r--layout/docs/css-gap-decorations/examples/flexbox-extent-all-long-allow-overlap-001.html42
-rw-r--r--layout/docs/css-gap-decorations/examples/flexbox-extent-all-short-001.html42
-rw-r--r--layout/docs/css-gap-decorations/examples/flexbox-extent-end-001.html42
-rw-r--r--layout/docs/css-gap-decorations/examples/flexbox-extent-long-001.html42
-rw-r--r--layout/docs/css-gap-decorations/examples/flexbox-extent-start-001.html42
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-align-001.html83
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-extent-001.html80
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-gradient-001.html45
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-gradient-002.html60
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-image-001.html49
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-image-002.html62
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-lateral-001.html103
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-lateral-002.html66
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-lateral-003.html66
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-lateral-004.html63
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-longitudinal-001.html95
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-longitudinal-002.html57
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-longitudinal-003.html46
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-masonry-001.html77
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-masonry-002.html78
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-masonry-003.html70
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-segment-001.html35
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-segment-002.html38
-rw-r--r--layout/docs/css-gap-decorations/examples/grid-subgrid-001.html73
-rw-r--r--layout/docs/css-gap-decorations/examples/h-diagonal-blue-16.pngbin0 -> 274 bytes
-rw-r--r--layout/docs/css-gap-decorations/examples/multicol-row-rule-001.html72
-rw-r--r--layout/docs/css-gap-decorations/examples/table-row-group-rules-001.html105
-rw-r--r--layout/docs/css-gap-decorations/examples/table-rules-001.html66
-rw-r--r--layout/docs/css-gap-decorations/examples/v-diagonal-blue-16.pngbin0 -> 273 bytes
32 files changed, 1806 insertions, 0 deletions
diff --git a/layout/docs/css-gap-decorations/examples/flexbox-coupon-rule.html b/layout/docs/css-gap-decorations/examples/flexbox-coupon-rule.html
new file mode 100644
index 0000000000..505ad756dd
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/flexbox-coupon-rule.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+<head>
+ <meta charset="utf-8">
+ <title>Coupon example</title>
+ <style>
+ div {
+ display: inline-flex;
+ column-gap: .8em;
+ column-rule: 12px solid;
+ 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;
+ font-size: large;
+ padding: 0 .5em;
+ border-radius: 0.2em;
+ min-block-size: 3em;
+ align-items: center;
+ background-image: linear-gradient(270deg, #FFA329 3%, #F56C34);
+ color: #fff;
+ }
+ </style>
+</head>
+
+<div><x>满 100</x><x>减 20</x></div>
diff --git a/layout/docs/css-gap-decorations/examples/flexbox-extent-001.html b/layout/docs/css-gap-decorations/examples/flexbox-extent-001.html
new file mode 100644
index 0000000000..76de01fe8d
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/flexbox-extent-001.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>A 'row-rule-extent: end' example</title>
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+}
+
+.flex {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px;
+
+ column-rule: 8px solid orange;
+ row-rule: 60% solid blue;
+ row-rule-extent: end;
+
+ place-content: center;
+ border: 5px solid;
+ margin: 2em;
+ block-size: 6em;
+ inline-size: 200px;
+ background: lightgrey;
+}
+
+x {
+ inline-size: 50px;
+ block-size: 2em;
+ background: grey;
+ opacity: .6;
+}
+x:nth-child(1) { order: 2; }
+x:nth-child(2) { inline-size: 45px; }
+x:nth-child(3) { inline-size: 35px; }
+x:nth-child(4) { inline-size: 60px; }
+
+</style>
+
+<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>
diff --git a/layout/docs/css-gap-decorations/examples/flexbox-extent-all-long-001.html b/layout/docs/css-gap-decorations/examples/flexbox-extent-all-long-001.html
new file mode 100644
index 0000000000..92f5075882
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/flexbox-extent-all-long-001.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>An example of 'row-rule-extent: all-long'</title>
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+}
+
+.flex {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px;
+
+ column-rule: 8px solid orange;
+ row-rule: 60% solid blue;
+ row-rule-extent: all-long;
+
+ place-content: center;
+ border: 5px solid;
+ margin: 2em;
+ block-size: 6em;
+ inline-size: 200px;
+ background: lightgrey;
+}
+
+x {
+ inline-size: 50px;
+ block-size: 2em;
+ background: grey;
+ opacity: .6;
+}
+x:nth-child(1) { order: 2; }
+x:nth-child(2) { inline-size: 45px; }
+x:nth-child(3) { inline-size: 35px; }
+x:nth-child(4) { inline-size: 60px; }
+
+</style>
+
+<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>
diff --git a/layout/docs/css-gap-decorations/examples/flexbox-extent-all-long-allow-overlap-001.html b/layout/docs/css-gap-decorations/examples/flexbox-extent-all-long-allow-overlap-001.html
new file mode 100644
index 0000000000..80404c44da
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/flexbox-extent-all-long-allow-overlap-001.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>An example of 'column-rule-extent: all-long allow-overlap'</title>
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+}
+
+.flex {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px;
+
+ column-rule: 8px solid orange;
+ column-rule-extent: all-long allow-overlap;
+ row-rule: 60% solid blue;
+
+ place-content: center;
+ border: 5px solid;
+ margin: 2em;
+ block-size: 6em;
+ inline-size: 200px;
+ background: lightgrey;
+}
+
+x {
+ inline-size: 50px;
+ block-size: 2em;
+ background: grey;
+ opacity: .6;
+}
+x:nth-child(1) { order: 2; }
+x:nth-child(2) { inline-size: 45px; }
+x:nth-child(3) { inline-size: 35px; }
+x:nth-child(4) { inline-size: 60px; }
+
+</style>
+
+<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>
diff --git a/layout/docs/css-gap-decorations/examples/flexbox-extent-all-short-001.html b/layout/docs/css-gap-decorations/examples/flexbox-extent-all-short-001.html
new file mode 100644
index 0000000000..211e7d0bd1
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/flexbox-extent-all-short-001.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>An example of 'row-rule-extent: all-short'</title>
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+}
+
+.flex {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px;
+
+ column-rule: 8px solid orange;
+ row-rule: 60% solid blue;
+ row-rule-extent: all-short;
+
+ place-content: center;
+ border: 5px solid;
+ margin: 2em;
+ block-size: 6em;
+ inline-size: 200px;
+ background: lightgrey;
+}
+
+x {
+ inline-size: 50px;
+ block-size: 2em;
+ background: grey;
+ opacity: .6;
+}
+x:nth-child(1) { order: 2; }
+x:nth-child(2) { inline-size: 45px; }
+x:nth-child(3) { inline-size: 35px; }
+x:nth-child(4) { inline-size: 60px; }
+
+</style>
+
+<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>
diff --git a/layout/docs/css-gap-decorations/examples/flexbox-extent-end-001.html b/layout/docs/css-gap-decorations/examples/flexbox-extent-end-001.html
new file mode 100644
index 0000000000..e049ec632b
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/flexbox-extent-end-001.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>An example of 'row-rule-extent: end'</title>
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+}
+
+.flex {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px;
+
+ column-rule: 8px solid orange;
+ row-rule: 60% solid blue;
+ row-rule-extent: end;
+
+ place-content: center;
+ border: 5px solid;
+ margin: 2em;
+ block-size: 6em;
+ inline-size: 200px;
+ background: lightgrey;
+}
+
+x {
+ inline-size: 50px;
+ block-size: 2em;
+ background: grey;
+ opacity: .6;
+}
+x:nth-child(1) { order: 2; }
+x:nth-child(2) { inline-size: 45px; }
+x:nth-child(3) { inline-size: 35px; }
+x:nth-child(4) { inline-size: 60px; }
+
+</style>
+
+<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>
diff --git a/layout/docs/css-gap-decorations/examples/flexbox-extent-long-001.html b/layout/docs/css-gap-decorations/examples/flexbox-extent-long-001.html
new file mode 100644
index 0000000000..e29274eda9
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/flexbox-extent-long-001.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>An example of 'row-rule-extent: long'</title>
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+}
+
+.flex {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px;
+
+ column-rule: 8px solid orange;
+ row-rule: 60% solid blue;
+ row-rule-extent: long;
+
+ place-content: center;
+ border: 5px solid;
+ margin: 2em;
+ block-size: 6em;
+ inline-size: 200px;
+ background: lightgrey;
+}
+
+x {
+ inline-size: 50px;
+ block-size: 2em;
+ background: grey;
+ opacity: .6;
+}
+x:nth-child(1) { order: 2; }
+x:nth-child(2) { inline-size: 45px; }
+x:nth-child(3) { inline-size: 35px; }
+x:nth-child(4) { inline-size: 60px; }
+
+</style>
+
+<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>
diff --git a/layout/docs/css-gap-decorations/examples/flexbox-extent-start-001.html b/layout/docs/css-gap-decorations/examples/flexbox-extent-start-001.html
new file mode 100644
index 0000000000..06688a6605
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/flexbox-extent-start-001.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>An example of 'row-rule-extent: start'</title>
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
+}
+
+.flex {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px;
+
+ column-rule: 8px solid orange;
+ row-rule: 60% solid blue;
+ row-rule-extent: start;
+
+ place-content: center;
+ border: 5px solid;
+ margin: 2em;
+ block-size: 6em;
+ inline-size: 200px;
+ background: lightgrey;
+}
+
+x {
+ inline-size: 50px;
+ block-size: 2em;
+ background: grey;
+ opacity: .6;
+}
+x:nth-child(1) { order: 2; }
+x:nth-child(2) { inline-size: 45px; }
+x:nth-child(3) { inline-size: 35px; }
+x:nth-child(4) { inline-size: 60px; }
+
+</style>
+
+<div class="flex"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>
diff --git a/layout/docs/css-gap-decorations/examples/grid-align-001.html b/layout/docs/css-gap-decorations/examples/grid-align-001.html
new file mode 100644
index 0000000000..c334785183
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-align-001.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Examples of 'row-rule-align' values.</title>
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace;
+}
+
+.grid {
+ position: relative;
+ display: inline-grid;
+ grid-template-columns: 1ch 2ch 2ch;
+ gap: 10px 30px;
+ block-size: calc(2em + 30px);
+ inline-size: calc(10ch + 30px);
+ place-content: center;
+
+ column-rule: 6px solid cyan;
+ column-rule-extent: all-long;
+ column-rule-lateral-inset-start: 20%;
+
+ row-rule: 6px solid purple;
+ row-rule-longitudinal-inset: 1px;
+
+ border: 2px solid;
+ margin-right: 15px;
+ margin-bottom: 30px;
+ background: lightgrey;
+}
+
+.test1 { row-rule-align: gap-center; }
+.test2 { row-rule-align: gap gap-over; }
+.test3 { row-rule-align: rule; }
+.test4 { row-rule-align: rule-center; }
+.test5 { row-rule-align: gap rule-over; }
+.test6 { row-rule-align: gap-over gap; }
+
+x {
+ background: grey;
+}
+x:nth-child(3) {
+ grid-row: span 2;
+}
+
+.grid::after {
+ position: absolute;
+ bottom: -1.5em;
+ width: 400px;
+ font-size: 10px;
+ vertical-align: top;
+ content: attr(test);
+}
+pre { font-size: 10px; }
+</style>
+
+<pre>Note that the row rules all have a 1px longitudinal inset
+to separate the individual rule segments. ('rule-center',
+for example, would otherwise look like one long rule)
+
+Note also that the column rule is intentionally not centered in
+the gap (to separate 'rule-center' from 'gap-center').
+</pre>
+
+<div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>
+<div class="grid test2"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div><br>
+<div class="grid test3"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>
+<div class="grid test4"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div><br>
+<div class="grid test5"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>
+<div class="grid test6"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div><br>
+
+<script>
+window.onload = function() {
+ [...document.querySelectorAll('div')].forEach(function(elm) {
+ const cs = window.getComputedStyle(elm);
+ elm.setAttribute("test",
+ "row-rule-align:" + cs.rowRuleAlign
+ );
+ });
+}
+</script>
diff --git a/layout/docs/css-gap-decorations/examples/grid-extent-001.html b/layout/docs/css-gap-decorations/examples/grid-extent-001.html
new file mode 100644
index 0000000000..c5576bb995
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-extent-001.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Examples of 'column-rule-extent' on a grid container</title>
+
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace;
+}
+
+.grid {
+ position: relative;
+ display: inline-grid;
+ grid: auto auto / repeat(7, 2ch);
+ gap: 10px 3px;
+
+ row-rule: 4px solid purple;
+
+ border: 2px solid;
+ margin-right: 10px;
+ margin-bottom: 30px;
+ background: lightgrey;
+}
+.segment { row-rule-extent: segment; }
+.segment-allow-overlap { row-rule-extent: segment allow-overlap; }
+.short-allow-overlap { row-rule-extent: short allow-overlap; }
+.short { row-rule-extent: short; }
+.long-allow-overlap { row-rule-extent: long allow-overlap; }
+.long { row-rule-extent: long; }
+.start { row-rule-extent: start; }
+.end { row-rule-extent: end; }
+.all-long-allow-overlap { row-rule-extent: all-long allow-overlap; }
+.all-long { row-rule-extent: all-long; }
+
+x {
+ background: grey;
+ opacity: .5;
+}
+x:nth-child(1) { grid-column: span 2; }
+x:nth-child(3) { grid-row: 1 / span 2; grid-column: 4;}
+x:nth-child(4) { grid-column: span 2; }
+x:nth-child(6) { }
+x:nth-child(7) { grid-row: 2; grid-column: 2 / span 3; }
+x:nth-child(8) { grid-column: span 3; }
+
+.grid::after {
+ position: absolute;
+ bottom: -1.5em;
+ font-size: 10px;
+ vertical-align: top;
+ content: attr(test);
+}
+pre { font-size: 10px; }
+</style>
+
+<pre>Test of various 'row-rule-extent' values:</pre>
+
+<div class="grid segment-allow-overlap"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div>
+<div class="grid segment"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br>
+<div class="grid short-allow-overlap"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div>
+<div class="grid short"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br>
+<div class="grid long-allow-overlap"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div>
+<div class="grid long"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br>
+<div class="grid start"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div>
+<div class="grid end"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br>
+<div class="grid all-long-allow-overlap"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div>
+<div class="grid all-long"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br>
+
+<script>
+window.onload = function() {
+ [...document.querySelectorAll('.grid')].forEach(function(elm) {
+ const cs = window.getComputedStyle(elm);
+ elm.setAttribute("test",
+ "'" + cs.rowRuleExtent + "'"
+ );
+ });
+}
+</script>
diff --git a/layout/docs/css-gap-decorations/examples/grid-gradient-001.html b/layout/docs/css-gap-decorations/examples/grid-gradient-001.html
new file mode 100644
index 0000000000..52240f4025
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-gradient-001.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Example of a gradient rule image</title>
+
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace;
+}
+
+.grid {
+ display: inline-grid;
+ grid-template-columns: repeat(3, 50px);
+ width: 300px;
+ height: 240px;
+ place-content: space-around;
+
+ column-rule: min(100%, max(16px, 50%)) solid;
+ column-rule-image: linear-gradient(#f008,#fc08);
+ column-rule-align: rule;
+ column-rule-extent: all-long;
+
+ row-rule: min(16px, 100%) solid;
+ row-rule-image: linear-gradient(90deg,#f008,#fc08);
+ row-rule-align: rule;
+ row-rule-extent: long;
+
+ border: 2px solid;
+ margin-right: 15px;
+ margin-bottom: 30px;
+ background: lightgrey;
+}
+
+x {
+ block-size: 48px;
+ background: grey;
+}
+x:nth-child(2), x:nth-child(6) {
+ grid-column: span 2;
+}
+</style>
+
+<div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div>
diff --git a/layout/docs/css-gap-decorations/examples/grid-gradient-002.html b/layout/docs/css-gap-decorations/examples/grid-gradient-002.html
new file mode 100644
index 0000000000..0a39053ed4
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-gradient-002.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Examples of rule image properties</title>
+
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace;
+}
+
+@keyframes w {
+ 0%, 33% { width:180px }
+ 33%, 50% { width:400px }
+ 50%, 100% { width:180px }
+}
+@keyframes h {
+ 0%, 33% { height:150px }
+ 33%, 50% { height:300px }
+ 50%, 100% { height:150px }
+}
+
+.grid {
+ display: inline-grid;
+ grid-template-columns: repeat(3, 50px);
+ width: 200px;
+ height: 240px;
+ place-content: space-around;
+
+ animation: w 5s infinite, h 5s infinite;
+
+ column-rule: min(100%, max(16px, 50%)) solid;
+ column-rule-image: linear-gradient(#f008,#fc08);
+ column-rule-align: rule;
+ column-rule-extent: all-long;
+
+ row-rule: min(16px, 100%) solid;
+ row-rule-image: url(h-diagonal-blue-16.png) 16 space;
+ row-rule-image: linear-gradient(90deg,#f008,#fc08);
+ row-rule-align: rule;
+ row-rule-extent: long;
+
+ border: 2px solid;
+ margin-right: 15px;
+ margin-bottom: 30px;
+ background: lightgrey;
+}
+
+x {
+ block-size: 48px;
+ background: grey;
+}
+x:nth-child(2), x:nth-child(6) {
+ grid-column: span 2;
+}
+
+</style>
+
+<div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div>
diff --git a/layout/docs/css-gap-decorations/examples/grid-image-001.html b/layout/docs/css-gap-decorations/examples/grid-image-001.html
new file mode 100644
index 0000000000..5d265ef9e7
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-image-001.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Example of rule image properties</title>
+
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace;
+}
+
+.grid {
+ display: inline-grid;
+ grid-template-columns: repeat(3, 50px);
+ gap: 16px;
+ width: 300px;
+ height: 240px;
+ place-content: space-around;
+
+ column-rule: 16px solid blue;
+ column-rule-image: url(v-diagonal-blue-16.png) 16 space;
+ column-rule-extent: segment;
+ column-rule-align: rule-center;
+ column-rule-longitudinal-inset: -8px;
+
+ row-rule: 16px solid purple;
+ row-rule-image: url(h-diagonal-blue-16.png) 16 space;
+ row-rule-extent: segment;
+ row-rule-align: rule-center;
+ row-rule-longitudinal-inset: -8px;
+
+ border: 2px solid;
+ margin-right: 15px;
+ margin-bottom: 30px;
+ background: lightgrey;
+}
+
+x {
+ block-size: 48px;
+ background: grey;
+}
+x:nth-child(2), x:nth-child(6) {
+ grid-column: span 2;
+}
+
+</style>
+
+<div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div>
diff --git a/layout/docs/css-gap-decorations/examples/grid-image-002.html b/layout/docs/css-gap-decorations/examples/grid-image-002.html
new file mode 100644
index 0000000000..2f1b7eb56a
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-image-002.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Example of rule image with animated container size</title>
+
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace;
+}
+
+@keyframes w {
+ 0%, 33% { width:200px }
+ 33%, 50% { width:400px }
+ 50%, 100% { width:200px }
+}
+@keyframes h {
+ 0%, 33% { height:200px }
+ 33%, 50% { height:300px }
+ 50%, 100% { height:200px }
+}
+
+.grid {
+ display: inline-grid;
+ grid-template-columns: repeat(3, 50px);
+ gap: 16px;
+ width: 200px;
+ height: 240px;
+ place-content: space-around;
+
+ animation: w 5s infinite, h 5s infinite;
+
+ column-rule: 16px solid blue;
+ column-rule-image: url(v-diagonal-blue-16.png) 16;
+ column-rule-extent: segment;
+ column-rule-align: rule-center;
+ column-rule-longitudinal-inset: -8px;
+
+ row-rule: 16px solid purple;
+ row-rule-image: url(h-diagonal-blue-16.png) 16;
+ row-rule-extent: segment;
+ row-rule-align: rule-center;
+ row-rule-longitudinal-inset: -8px;
+
+ border: 2px solid;
+ margin-right: 15px;
+ margin-bottom: 30px;
+ background: lightgrey;
+}
+
+x {
+ block-size: 48px;
+ background: grey;
+}
+x:nth-child(2), x:nth-child(6) {
+ grid-column: span 2;
+}
+
+</style>
+
+<div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div>
diff --git a/layout/docs/css-gap-decorations/examples/grid-lateral-001.html b/layout/docs/css-gap-decorations/examples/grid-lateral-001.html
new file mode 100644
index 0000000000..05f80265f6
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-lateral-001.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Examples of rule lateral properties</title>
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace;
+}
+
+.grid {
+ position: relative;
+ display: inline-grid;
+ grid-template-columns: auto auto;
+ gap: 4px 16px;
+
+ column-rule: 8px solid blue;
+
+ row-rule: 2px solid purple;
+ row-rule-align: rule;
+ row-rule-extent: end;
+ row-rule-longitudinal-inset: 2px;
+
+ border: 5px solid;
+ margin-right: 15px;
+ margin-bottom: 30px;
+ background: lightgrey;
+ padding: 10px;
+}
+
+x {
+ inline-size: 50px;
+ block-size: 1.5em;
+ background: grey;
+}
+
+.test1 {
+ column-rule-width: auto;
+ column-rule-lateral-inset: 2px 6px;
+}
+.test2 {
+ column-rule-width: auto;
+ column-rule-lateral-inset: auto 3px;
+}
+.test3 {
+ column-rule-width: auto;
+ column-rule-lateral-inset: auto;
+}
+.test4 {
+ column-rule-width: 2px;
+ column-rule-lateral-inset: 3px auto;
+}
+.test5 {
+ column-rule-width: 2px;
+ column-rule-lateral-inset: 10px 100px;
+}
+.test6 {
+ column-rule-width: auto;
+ column-rule-lateral-inset: 12px 100px;
+}
+.test7 {
+ column-rule-width: auto;
+ column-rule-lateral-inset: auto 30px;
+}
+
+.grid::after {
+ position: absolute;
+ width: 200px;
+ bottom: -2em;
+ content: attr(test);
+ font-size: 10px;
+}
+pre {
+ font-size: 10px;
+}
+</style>
+
+<pre>
+The triplet of values below each grid container are:
+column-rule-lateral-inset-start, column-rule-width, column-rule-lateral-inset-end
+</pre>
+<div class="grid test1"><x>1</x><x>2</x></div>
+<div class="grid test2"><x>1</x><x>2</x></div>
+<div class="grid test3"><x>1</x><x>2</x></div><br>
+<div class="grid test4"><x>1</x><x>2</x></div>
+<div class="grid test5"><x>1</x><x>2</x></div><br>
+<div class="grid test6"><x>1</x><x>2</x><x>3</x><x>4</x></div>
+<div class="grid test7"><x>1</x><x>2</x><x>3</x><x>4</x></div>
+
+
+<script>
+window.onload = function() {
+ [...document.querySelectorAll('.grid')].forEach(function(elm) {
+ const cs = window.getComputedStyle(elm);
+ elm.setAttribute("test",
+ cs.columnRuleLateralInsetStart + ", " +
+ cs.columnRuleWidth + ", " +
+ cs.columnRuleLateralInsetEnd
+ );
+ });
+}
+</script>
diff --git a/layout/docs/css-gap-decorations/examples/grid-lateral-002.html b/layout/docs/css-gap-decorations/examples/grid-lateral-002.html
new file mode 100644
index 0000000000..66ea9c2a38
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-lateral-002.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Examples of column-rule-lateral-inset-start</title>
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace;
+}
+
+.grid {
+ position: relative;
+ display: inline-grid;
+ grid-template-columns: auto auto;
+ gap: 4px 16px;
+
+ column-rule: solid blue;
+
+ margin-right: 8ch;
+ background: lightgrey;
+ padding: 10px;
+}
+
+x {
+ inline-size: 50px;
+ block-size: 1.5em;
+ background: grey;
+}
+
+.test1 {
+ column-rule-lateral-inset-start: 0;
+}
+.test2 {
+ column-rule-lateral-inset-start: 3px;
+}
+
+.grid::after {
+ position: absolute;
+ white-space: pre;
+ bottom: -2em;
+ content: attr(test);
+ font-size: 10px;
+}
+pre {
+ font-size: 10px;
+}
+</style>
+
+<pre>
+Examples of aligning a rule at the start of the gap with a lateral offset:
+</pre>
+<div class="grid test1"><x>1</x><x>2</x></div>
+<div class="grid test2"><x>1</x><x>2</x></div>
+
+
+<script>
+window.onload = function() {
+ [...document.querySelectorAll('.grid')].forEach(function(elm) {
+ const cs = window.getComputedStyle(elm);
+ elm.setAttribute("test",
+ "column-rule-lateral-inset-start: " + cs.columnRuleLateralInsetStart
+ );
+ });
+}
+</script>
diff --git a/layout/docs/css-gap-decorations/examples/grid-lateral-003.html b/layout/docs/css-gap-decorations/examples/grid-lateral-003.html
new file mode 100644
index 0000000000..f478280820
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-lateral-003.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Examples of column-rule-lateral-inset-end</title>
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace;
+}
+
+.grid {
+ position: relative;
+ display: inline-grid;
+ grid-template-columns: auto auto;
+ gap: 4px 16px;
+
+ column-rule: solid blue;
+
+ margin-right: 8ch;
+ background: lightgrey;
+ padding: 10px;
+}
+
+x {
+ inline-size: 50px;
+ block-size: 1.5em;
+ background: grey;
+}
+
+.test1 {
+ column-rule-lateral-inset-end: 0;
+}
+.test2 {
+ column-rule-lateral-inset-end: 3px;
+}
+
+.grid::after {
+ position: absolute;
+ white-space: pre;
+ bottom: -2em;
+ content: attr(test);
+ font-size: 10px;
+}
+pre {
+ font-size: 10px;
+}
+</style>
+
+<pre>
+Examples of aligning a rule at the end of the gap with a lateral offset:
+</pre>
+<div class="grid test1"><x>1</x><x>2</x></div>
+<div class="grid test2"><x>1</x><x>2</x></div>
+
+
+<script>
+window.onload = function() {
+ [...document.querySelectorAll('.grid')].forEach(function(elm) {
+ const cs = window.getComputedStyle(elm);
+ elm.setAttribute("test",
+ "column-rule-lateral-inset-end: " + cs.columnRuleLateralInsetEnd
+ );
+ });
+}
+</script>
diff --git a/layout/docs/css-gap-decorations/examples/grid-lateral-004.html b/layout/docs/css-gap-decorations/examples/grid-lateral-004.html
new file mode 100644
index 0000000000..7c9a249085
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-lateral-004.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Example of default rule alignment and size</title>
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace;
+}
+
+.grid {
+ position: relative;
+ display: inline-grid;
+ grid-template-columns: auto auto;
+ gap: 4px 16px;
+
+ column-rule: solid blue;
+
+ margin-right: 8ch;
+ background: lightgrey;
+ padding: 10px;
+}
+
+x {
+ inline-size: 50px;
+ block-size: 1.5em;
+ background: grey;
+}
+
+.grid::after {
+ position: absolute;
+ white-space: pre;
+ bottom: -8em;
+ content: attr(test);
+ font-size: 10px;
+}
+pre {
+ font-size: 10px;
+}
+</style>
+
+<pre>
+Example showing the default rule alignment and size:
+</pre>
+<div class="grid test1"><x>1</x><x>2</x></div>
+
+
+<script>
+window.onload = function() {
+ [...document.querySelectorAll('.grid')].forEach(function(elm) {
+ const cs = window.getComputedStyle(elm);
+ elm.setAttribute("test",
+ "column-rule-lateral-inset-start: " + cs.columnRuleLateralInsetStart + "\n" +
+ "column-rule-lateral-inset-end: " + cs.columnRuleLateralInsetEnd + "\n" +
+ "column-rule-width: " + cs.columnRuleWidth + "\n\n" +
+ "column-rule-longitudinal-inset-start: " + cs.columnRuleLongitudinalInsetStart + "\n" +
+ "column-rule-longitudinal-inset-end: " + cs.columnRuleLongitudinalInsetEnd + "\n" +
+ "column-rule-length: " + cs.columnRuleLength
+ );
+ });
+}
+</script>
diff --git a/layout/docs/css-gap-decorations/examples/grid-longitudinal-001.html b/layout/docs/css-gap-decorations/examples/grid-longitudinal-001.html
new file mode 100644
index 0000000000..d1eea4188c
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-longitudinal-001.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Examples of rule longitudinal properties</title>
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace;
+}
+
+.grid {
+ position: relative;
+ display: inline-grid;
+ grid-template-columns: 20px 30px 40px;
+ gap: 20px;
+
+ column-rule: 6px solid blue;
+
+ row-rule: 6px solid purple;
+ row-rule-extent: long;
+
+ border: 2px solid;
+ margin-right: 15px;
+ margin-bottom: 30px;
+ background: lightgrey;
+}
+
+.test1 {
+ column-rule-longitudinal-inset: 4px;
+ row-rule-longitudinal-inset: 4px;
+ column-rule-longitudinal-edge-inset: 4px;
+ row-rule-longitudinal-edge-inset: 4px;
+}
+
+.test2 {
+ column-rule-length: 50%;
+ row-rule-length: 50%;
+ column-rule-longitudinal-inset: auto;
+ row-rule-longitudinal-inset: auto;
+ column-rule-longitudinal-edge-inset: auto;
+ row-rule-longitudinal-edge-inset: auto;
+}
+
+.test3 {
+ column-rule-width: 100%;
+ row-rule-width: 100%;
+}
+
+.test4 {
+ column-rule-width: 30%;
+ row-rule-width: 30%;
+ column-rule-lateral-inset-end: 0px;
+ row-rule-lateral-inset-end: 0px;
+}
+
+.test5 {
+ column-rule-width: 150%;
+ row-rule-width: 150%;
+ column-rule-lateral-inset-end: 0px;
+ row-rule-lateral-inset-end: 0px;
+}
+
+x {
+ block-size: 48px;
+ background: grey;
+ opacity: 0.5;
+}
+x:nth-child(2), x:nth-child(6) {
+ grid-column: span 2;
+}
+
+.grid::after {
+ position: absolute;
+ top: 120px;
+ width: 500px;
+ font-size: 10px;
+ vertical-align: top;
+ white-space: pre;
+}
+pre { font-size: 10px; }
+
+.test1::after { content: "*-rule-length: auto;\0Alongitudinal insets: 4px"; }
+.test2::after { content: "*-rule-length: 50%;\0Alongitudinal insets: auto"; }
+.test3::after { content: "*-rule-width: 100%"; }
+.test4::after { content: "*-rule-width: 30%;\0Alateral end insets: 0px"; }
+.test5::after { content: "*-rule-width: 150%;\0Alateral end insets: 0px"; }
+</style>
+<pre>Note that the grid items have 'opacity: 0.5' to show
+any rules underneath them.</pre>
+<div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>
+<div class="grid test2"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div><br>
+<div class="grid test3"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>
+<div class="grid test4"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div><br>
+<div class="grid test5"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x></div>
diff --git a/layout/docs/css-gap-decorations/examples/grid-longitudinal-002.html b/layout/docs/css-gap-decorations/examples/grid-longitudinal-002.html
new file mode 100644
index 0000000000..750fd24a70
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-longitudinal-002.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Examples of rule longitudinal properties</title>
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace;
+}
+
+@keyframes lat {
+ 0%, 33% { column-rule-lateral-inset-start: 0px; row-rule-lateral-inset-end: 0px; }
+ 33%, 50% { column-rule-lateral-inset-start: calc(100% - 6px); row-rule-lateral-inset-end: calc(100% - 6px); }
+ 50%, 100% { column-rule-lateral-inset-start: 0px; row-rule-lateral-inset-end: 0; }
+}
+
+.grid {
+ display: inline-grid;
+ grid-template-columns: repeat(3, 50px);
+ gap: 10px;
+ width: 250px;
+ height: 200px;
+ place-content: space-around;
+
+ animation: lat 5s infinite;
+
+ column-rule: 6px solid blue;
+ column-rule-align: rule;
+ column-rule-longitudinal-inset: 3px;
+ column-rule-edge-align: gap-over;
+ column-rule-longitudinal-edge-inset: 10px;
+
+ row-rule: 6px solid purple;
+ row-rule-align: rule;
+ row-rule-edge-align: gap-over;
+ row-rule-longitudinal-inset: 1px;
+ row-rule-longitudinal-edge-inset: -2px;
+ row-rule-extent: long;
+
+ border: 2px solid;
+ margin-right: 15px;
+ margin-bottom: 30px;
+ background: lightgrey;
+}
+
+x {
+ block-size: 48px;
+ background: grey;
+}
+x:nth-child(2), x:nth-child(6) {
+ grid-column: span 2;
+}
+
+</style>
+
+<div class="grid"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div>
diff --git a/layout/docs/css-gap-decorations/examples/grid-longitudinal-003.html b/layout/docs/css-gap-decorations/examples/grid-longitudinal-003.html
new file mode 100644
index 0000000000..925ce3018b
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-longitudinal-003.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Examples of rule overflow and clipping.</title>
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace;
+}
+
+.grid {
+ position: relative;
+ display: inline-grid;
+ grid-template-columns: 2ch 2ch;
+ gap: 20px;
+
+ column-rule: 6px solid blue;
+ column-rule-longitudinal-edge-inset: min(-100vw, -100vh);
+
+ row-rule: 6px solid lime;
+ row-rule-longitudinal-edge-inset: min(-100vw, -100vh);
+
+ border: 4px dotted;
+ margin: 30px;
+ padding: 1ch;
+ background: lightgrey;
+}
+
+.test2 { overflow: hidden; }
+
+x {
+ block-size: 48px;
+ background: grey;
+}
+
+pre {
+ font-size: 10px;
+}
+</style>
+<body>
+<pre>Both grids have '*-edge-inset: min(-100vw, -100vh)'.
+The right grid has 'overflow: hidden' which clips its rules at the padding edge.</pre>
+ <div class="grid test1"><x>1</x><x>2</x><x>3</x><x>4</x></div>
+ <div class="grid test2" style="top:100px "><x>1</x><x>2</x><x>3</x><x>4</x></div>
+</body>
diff --git a/layout/docs/css-gap-decorations/examples/grid-masonry-001.html b/layout/docs/css-gap-decorations/examples/grid-masonry-001.html
new file mode 100644
index 0000000000..e47dfae1fb
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-masonry-001.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Examples of 'column-rule-extent' values in a Masonry grid layout.</title>
+<style>
+.grid {
+ position: relative;
+ display: inline-grid;
+ grid: masonry / 3ch 4ch 5ch;
+ gap: 20px;
+ margin-right: 20px;
+ margin-bottom: 40px;
+ background: lightgrey;
+
+ block-size: 160px;
+ align-content: center;
+
+ column-rule: solid blue;
+ column-rule-align: rule;
+ column-rule-edge-align: gap-over;
+ row-rule: 6px solid purple;
+ row-rule-extent: all-long;
+}
+.segment { column-rule-extent: segment; }
+.segment-allow-overlap { column-rule-extent: segment allow-overlap; }
+.short-allow-overlap { column-rule-extent: short allow-overlap; }
+.short { column-rule-extent: short; }
+.long-allow-overlap { column-rule-extent: long allow-overlap; }
+.long { column-rule-extent: long; }
+.start { column-rule-extent: start; }
+.end { column-rule-extent: end; }
+.all-long-allow-overlap { column-rule-extent: all-long allow-overlap; }
+.all-long { column-rule-extent: all-long; }
+
+x {
+ background: grey;
+ opacity: 0.5;
+}
+x:nth-child(1) { padding-block-start: 30px; }
+x:nth-child(2) { grid-column:span 2 }
+x:nth-child(3) { padding-block-end: 20px; }
+x:nth-child(7) { grid-column: span 2; }
+x:nth-child(8) { padding-block-end: 10px; }
+
+.grid::after {
+ position: absolute;
+ bottom: -3em;
+ font-size: 10px;
+ font-style: italic;
+ vertical-align: top;
+ content: attr(test);
+ white-space: pre;
+}
+pre { font-size: 10px; }
+</style>
+
+<pre>All have <i>'column-rule-edge-align: gap-over'</i> to extend
+the edge rules out to the content-box edge.</pre>
+
+<div class="grid short"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div>
+<div class="grid long"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br>
+<div class="grid start"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div>
+<div class="grid end"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br>
+
+<script>
+window.onload = function() {
+ [...document.querySelectorAll('.grid')].forEach(function(elm) {
+ const cs = window.getComputedStyle(elm);
+ elm.setAttribute("test",
+ "'column-rule-extent: " + cs.columnRuleExtent + "' \n" +
+ "'column-rule-align: " + cs.columnRuleAlign + "'"
+ );
+ });
+}
+</script>
diff --git a/layout/docs/css-gap-decorations/examples/grid-masonry-002.html b/layout/docs/css-gap-decorations/examples/grid-masonry-002.html
new file mode 100644
index 0000000000..f984ea36aa
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-masonry-002.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Examples of 'column-rule-extent: all-*' values in a Masonry grid layout.</title>
+<style>
+.grid {
+ position: relative;
+ display: inline-grid;
+ grid: masonry / 3ch 4ch 5ch;
+ gap: 20px;
+ margin-right: 20px;
+ margin-bottom: 40px;
+ background: lightgrey;
+
+ block-size: 160px;
+ align-content: center;
+ align-tracks: center;
+
+ column-rule: solid blue;
+ column-rule-align: rule;
+ row-rule: 6px solid purple;
+ row-rule-align: rule;
+}
+
+.all-start { column-rule-extent: all-start; column-rule-lateral-inset-start: 0; }
+.all-end { column-rule-extent: all-end; column-rule-lateral-inset-end: 0; }
+.all-short { column-rule-extent: all-short; }
+.all-long { column-rule-extent: all-long; }
+
+x {
+ background: grey;
+ opacity: 0.5;
+}
+x:nth-child(1) { }
+x:nth-child(2) { }
+x:nth-child(3) { padding-block-end: 30px; }
+x:nth-child(7) { }
+x:nth-child(8) { padding-block-end: 20px; }
+
+.grid::after {
+ position: absolute;
+ bottom: -2.5em;
+ font-size: 10px;
+ font-style: italic;
+ vertical-align: top;
+ content: attr(test);
+ white-space: pre;
+}
+pre { font-size: 10px; }
+</style>
+
+<pre>All have 'row-rule-align: rule' to make the purple rules
+align with the nearest edge of the blue column rules.
+
+In the bottom two grids, 'column-rule-lateral-inset-start/end'
+is zero, respectively, to make the blue rule attach to the side
+of the track that it used for its longitudinal sizing.
+</pre>
+
+<div class="grid all-short"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div>
+<div class="grid all-long"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br>
+<div class="grid all-start"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div>
+<div class="grid all-end"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x><x>8</x></div><br>
+
+<script>
+window.onload = function() {
+ [...document.querySelectorAll('.grid')].forEach(function(elm) {
+ const cs = window.getComputedStyle(elm);
+ var inset = cs.columnRuleLateralInsetStart + " " + cs.columnRuleLateralInsetEnd;
+ inset = inset != "auto auto" ? ("\n" + "'column-rule-lateral-inset: " + inset) : "";
+ elm.setAttribute("test",
+ "'column-rule-extent: " + cs.columnRuleExtent + inset
+ );
+ });
+}
+</script>
diff --git a/layout/docs/css-gap-decorations/examples/grid-masonry-003.html b/layout/docs/css-gap-decorations/examples/grid-masonry-003.html
new file mode 100644
index 0000000000..aa0e0c5f6a
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-masonry-003.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Examples of 'column-rule-extent' values in a Masonry grid layout.</title>
+<style>
+.grid {
+ position: relative;
+ display: inline-grid;
+ grid: masonry / 3ch 4ch 5ch;
+ gap: 20px;
+ margin-right: 20px;
+ margin-bottom: 40px;
+ background: lightgrey;
+
+ block-size: 180px;
+ align-tracks: start, center, end;
+
+ column-rule: solid blue;
+ column-rule-align: rule;
+ row-rule: 6px solid purple;
+ row-rule-extent: all-long;
+ row-rule-align: rule;
+ row-rule-longitudinal-inset: 2px;
+}
+
+.all-short { column-rule-extent: all-short; }
+.all-start { column-rule-extent: all-start; }
+.all-end { column-rule-extent: all-end; }
+.all-long { column-rule-extent: all-long; }
+
+x {
+ background: grey;
+ opacity: 0.5;
+}
+x:nth-child(1) { padding-block-start: 30px; }
+x:nth-child(2) { }
+x:nth-child(3) { padding-block-end: 20px; }
+x:nth-child(7) { }
+x:nth-child(8) { padding-block-end: 20px; }
+
+.grid::after {
+ position: absolute;
+ bottom: -3em;
+ font-size: 10px;
+ font-style: italic;
+ vertical-align: top;
+ content: attr(test);
+ white-space: pre;
+}
+pre { font-size: 10px; }
+</style>
+
+<pre></pre>
+
+<div class="grid all-short"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div>
+<div class="grid all-long"><x>1</x><x>2</x><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div><br>
+
+<script>
+window.onload = function() {
+ [...document.querySelectorAll('.grid')].forEach(function(elm) {
+ const cs = window.getComputedStyle(elm);
+ elm.setAttribute("test",
+ "'column-rule-extent: " + cs.columnRuleExtent + "' \n" +
+ "'column-rule-align: " + cs.columnRuleAlign + "'"
+ );
+ });
+}
+</script>
diff --git a/layout/docs/css-gap-decorations/examples/grid-segment-001.html b/layout/docs/css-gap-decorations/examples/grid-segment-001.html
new file mode 100644
index 0000000000..8be5060d58
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-segment-001.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Example of 'column-rule-extent: segment' on a grid container</title>
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace;
+}
+
+.grid {
+ display: inline-grid;
+ grid: repeat(3, 30px) / auto 20px 40px;
+ gap: 10px 16px;
+
+ column-rule: solid blue;
+ column-rule-extent: segment;
+ row-rule: solid purple;
+ row-rule-extent: segment;
+
+ border: 2px solid;
+ margin-right: 15px;
+ margin-bottom: 30px;
+ background: lightgrey;
+}
+
+x {
+ grid-column: 1;
+ background: grey;
+}
+
+</style>
+
+<div class="grid"><x>row 1</x><x>row 2</x><x>row 3</x></div>
diff --git a/layout/docs/css-gap-decorations/examples/grid-segment-002.html b/layout/docs/css-gap-decorations/examples/grid-segment-002.html
new file mode 100644
index 0000000000..2e64062c4a
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-segment-002.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Example of 'column-rule-extent: segment' on a grid container with collapsed tracks</title>
+<style>
+html,body {
+ color:black; background-color:white; font:20px/1 monospace;
+}
+
+.grid {
+ display: inline-grid;
+ grid: repeat(3, 30px) / repeat(auto-fit, minmax(0,1fr) 100px minmax(0,1fr));
+ width: 300px;
+ gap: 10px 16px;
+
+ column-rule: solid blue;
+ column-rule-extent: segment;
+ row-rule: solid purple;
+ row-rule-extent: segment;
+
+ border: 2px solid;
+ margin-right: 15px;
+ margin-bottom: 30px;
+ background: lightgrey;
+}
+
+x {
+ grid-column: 1;
+ place-self: start;
+ background: grey;
+}
+x:nth-child(4) { grid-column: 3; }
+
+</style>
+
+<div class="grid"><x>row 1</x><x>row 2</x><x>row 3</x><x>column 3</x></div>
diff --git a/layout/docs/css-gap-decorations/examples/grid-subgrid-001.html b/layout/docs/css-gap-decorations/examples/grid-subgrid-001.html
new file mode 100644
index 0000000000..7c34e9e938
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/grid-subgrid-001.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Examples of subgrid rules.</title>
+<style>
+.grid {
+ position: relative;
+ display: inline-grid;
+ grid-template-columns: 30px 50px 70px;
+ inline-size: 200px;
+ gap: 8px;
+ place-content: center;
+ border: 2px solid;
+
+ column-rule: auto solid;
+ column-rule-image: linear-gradient(#f008,#fc08);
+ column-rule-extent: all-long allow-overlap;
+ row-rule: 6px solid purple;
+ row-rule-extent: all-long;
+}
+
+.subgrid {
+ display: grid;
+ grid: subgrid / subgrid;
+ grid-column: 1 / span 2;
+ grid-row: 2 / span 2;
+ border: 1px dashed;
+ margin: 6px;
+
+ column-rule: 2px solid red;
+ row-rule: solid blue;
+ row-rule-align: rule;
+ row-rule-edge-align: gap-over;
+}
+
+.subgrid.larger {
+ gap: 16px;
+ row-rule-lateral-inset-start: 1px;
+}
+
+.subgrid.smaller {
+ gap: 4px;
+ row-rule-width: 100%;
+}
+
+x {
+ background: grey;
+ opacity: 0.5;
+}
+
+.grid::after {
+ position: absolute;
+ bottom: -3em;
+ font-size: 10px;
+ font-style: italic;
+ vertical-align: top;
+ content: attr(test);
+}
+</style>
+
+<div class="grid" test="A subgrid with a larger gap than the parent.">
+ <x>1</x><x>2</x><x>3</x>
+ <div class="subgrid larger"><x>4</x><x>5</x><x>6</x></div>
+ <x>7</x><x>8</x>
+</div>
+
+<div class="grid" test="A subgrid with a smaller gap than the parent.">
+ <x>1</x><x>2</x><x>3</x>
+ <div class="subgrid smaller"><x>4</x><x>5</x><x>6</x></div>
+ <x>7</x><x>8</x>
+</div>
diff --git a/layout/docs/css-gap-decorations/examples/h-diagonal-blue-16.png b/layout/docs/css-gap-decorations/examples/h-diagonal-blue-16.png
new file mode 100644
index 0000000000..5478ae2e28
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/h-diagonal-blue-16.png
Binary files differ
diff --git a/layout/docs/css-gap-decorations/examples/multicol-row-rule-001.html b/layout/docs/css-gap-decorations/examples/multicol-row-rule-001.html
new file mode 100644
index 0000000000..f44cd2c906
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/multicol-row-rule-001.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Examples of column and row rules in a multi-column container</title>
+<style>
+html,body {
+ color:black; background-color:white; font:10px/1 monospace;
+}
+
+.columns {
+ column-width: 6ch;
+ gap: 16px 10px;
+
+ column-rule: 4px solid blue;
+ row-rule: 4px solid purple;
+ row-rule-align: rule;
+
+ inline-size: 30ch;
+ background: lightgrey;
+}
+.test1 { row-rule-extent: short; }
+.test2 { row-rule-extent: long; }
+.test3 { row-rule-extent: start; }
+.test4 { row-rule-extent: end; }
+.test5 { row-rule-extent: all-short; }
+.test6 { row-rule-extent: all-start; }
+.test7 { row-rule-extent: all-end; }
+.test8 { block-size: calc(32px + 3em); row-rule-extent: all-long; }
+.test9 { block-size: calc(32px + 3em); row-rule-extent: long; }
+
+x,a {
+ display: block;
+ background: grey;
+}
+a { column-span: all; }
+
+wrapper {
+ position: relative;
+ display: inline-block;
+ margin-bottom: 2.5em;
+}
+wrapper::after {
+ position: absolute;
+ bottom: -1.5em;
+ font-size: 10px;
+ vertical-align: top;
+ content: attr(test);
+ white-space: pre;
+}
+</style>
+<wrapper><div class="columns test1"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper>
+<wrapper><div class="columns test2"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper><br>
+<wrapper><div class="columns test3"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper>
+<wrapper><div class="columns test4"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper><br>
+<wrapper><div class="columns test5"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper>
+<wrapper><div class="columns test6"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper><br>
+<wrapper><div class="columns test7"><x>1</x><x>2</x><x>3</x><a>column-span: all</a><x>4</x><x>5</x></div></wrapper>
+<wrapper><div class="columns test8"><x>1</x><x>2</x><a>column-span: all</a><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div></wrapper><br>
+<wrapper><div class="columns test9"><x>1</x><x>2</x><a>column-span: all</a><x>3</x><x>4</x><x>5</x><x>6</x><x>7</x></div></wrapper><br>
+
+<script>
+window.onload = function() {
+ [...document.querySelectorAll('.columns')].forEach(function(elm) {
+ const cs = window.getComputedStyle(elm);
+ elm.parentNode.setAttribute("test",
+ "row-rule-extent: " + cs.rowRuleExtent
+ );
+ });
+}
+</script>
diff --git a/layout/docs/css-gap-decorations/examples/table-row-group-rules-001.html b/layout/docs/css-gap-decorations/examples/table-row-group-rules-001.html
new file mode 100644
index 0000000000..b5a693f0ab
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/table-row-group-rules-001.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Example of rules between table-rows and table-cells</title>
+<style>
+table {
+ display: inline-table;
+ border-spacing: 10px 20px;
+ background-color: lightgrey;
+ caption-side: bottom;
+}
+
+thead, tfoot, tbody {
+ column-rule: solid magenta;
+ column-rule-extent: long;
+
+ row-rule: solid orange;
+ row-rule-extent: long;
+ row-rule-align: rule;
+}
+
+thead {
+ column-rule-color: brown;
+}
+
+table > .all-long {
+ column-rule-extent: all-long;
+ row-rule-extent: all-long;
+ row-rule-align: rule-over;
+}
+
+table.rules {
+ column-rule: 6px solid blue;
+ column-rule-extent: long;
+ column-rule-align: rule;
+
+ row-rule: 3px solid green;
+ row-rule-longitudinal-inset: 1px;
+ row-rule-align: rule;
+}
+table.rules.all-long {
+ column-rule-extent: all-long;
+ column-rule-edge-align: gap-over;
+}
+
+pre,caption { font-size: 10px; text-align: start; }
+</style>
+
+<table>
+ <caption>*-rule-extent: long</caption>
+ <colgroup><col><col></colgroup>
+ <colgroup><col width=100><col></colgroup>
+ <thead>
+ <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
+ </thead>
+ <tbody>
+ <tr><td>1</td><td>2</td><td>3</td><td>4</td><td rowspan=2>5</td>
+ <tr><td colspan=2>1,2</td><td>3</td><td>4</td>
+ </tbody>
+</table>
+
+<table>
+ <caption>*-rule-extent: all-long;<br>row-rule-align: rule-over<br></caption>
+ <colgroup><col><col></colgroup>
+ <colgroup><col width=100><col></colgroup>
+ <thead class="all-long">
+ <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
+ </thead>
+ <tbody class="all-long">
+ <tr><td>1</td><td>2</td><td>3</td><td>4</td><td rowspan=2>5</td>
+ <tr><td colspan=2>1,2</td><td>3</td><td>4</td>
+ </tbody>
+</table>
+
+<br>
+<br>
+<pre>Same thing, now with table rules from the last example also applied:</pre>
+
+<table class="rules">
+ <caption>*-rule-extent: long</caption>
+ <colgroup><col><col></colgroup>
+ <colgroup><col width=100><col></colgroup>
+ <thead>
+ <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
+ </thead>
+ <tbody>
+ <tr><td>1</td><td>2</td><td>3</td><td>4</td><td rowspan=2>5</td>
+ <tr><td colspan=2>1,2</td><td>3</td><td>4</td>
+ </tbody>
+</table>
+
+<table class="rules all-long">
+ <caption>*-rule-extent: all-long;<br>row-rule-align: rule-over<br></caption>
+ <colgroup><col><col></colgroup>
+ <colgroup><col width=100><col></colgroup>
+ <thead class="all-long">
+ <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
+ </thead>
+ <tbody class="all-long">
+ <tr><td>1</td><td>2</td><td>3</td><td>4</td><td rowspan=2>5</td>
+ <tr><td colspan=2>1,2</td><td>3</td><td>4</td>
+ </tbody>
+</table>
diff --git a/layout/docs/css-gap-decorations/examples/table-rules-001.html b/layout/docs/css-gap-decorations/examples/table-rules-001.html
new file mode 100644
index 0000000000..f909a19839
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/table-rules-001.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<title>Example of rules between table-column-groups and table-row-groups</title>
+<style>
+table {
+ display: inline-table;
+ border-spacing: 10px 20px;
+
+ column-rule: 6px solid blue;
+ column-rule-extent: long;
+ column-rule-align: rule;
+
+ row-rule: 3px solid green;
+ row-rule-longitudinal-inset: 1px;
+ row-rule-align: rule;
+
+ background-color: lightgrey;
+ caption-side: bottom;
+}
+
+table:nth-of-type(2) {
+ column-rule-extent: all-long;
+ column-rule-edge-align: gap-over;
+}
+
+pre,caption { font-size: 10px; text-align: start; }
+</style>
+
+<pre>Note: column 2 is collapsed.</pre>
+
+<table>
+ <caption>column-rule-extent: long</caption>
+ <colgroup>
+ <col>
+ <col style="visibility:collapse">
+ </colgroup>
+ <colgroup><col width=100></colgroup>
+ <colgroup><col><col></colgroup>
+ <thead>
+ <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
+ </thead>
+ <tbody>
+ <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
+ <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
+ </tbody>
+</table>
+
+<table>
+ <caption>column-rule-extent: all-long;<br>column-rule-edge-align: gap-over</caption>
+ <colgroup>
+ <col>
+ <col style="visibility:collapse">
+ </colgroup>
+ <colgroup><col width=100></colgroup>
+ <colgroup><col><col></colgroup>
+ <thead>
+ <tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
+ </thead>
+ <tbody>
+ <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
+ <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
+ </tbody>
+</table>
diff --git a/layout/docs/css-gap-decorations/examples/v-diagonal-blue-16.png b/layout/docs/css-gap-decorations/examples/v-diagonal-blue-16.png
new file mode 100644
index 0000000000..420a9a0ccc
--- /dev/null
+++ b/layout/docs/css-gap-decorations/examples/v-diagonal-blue-16.png
Binary files differ