diff options
Diffstat (limited to 'layout/docs/css-gap-decorations/examples')
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 Binary files differnew file mode 100644 index 0000000000..5478ae2e28 --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/h-diagonal-blue-16.png 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 Binary files differnew file mode 100644 index 0000000000..420a9a0ccc --- /dev/null +++ b/layout/docs/css-gap-decorations/examples/v-diagonal-blue-16.png |
