forked from mirrors/gecko-dev
Bug 1735445 - Land initial CSS Gap Decorations draft spec in tree for internal reviewing purposes. NPOTB DONTBUILD
Differential Revision: https://phabricator.services.mozilla.com/D128324
This commit is contained in:
Mats Palmgren
parent
377995ccb8
commit
31935fdc02
60 changed files with 6408 additions and 0 deletions
1147
layout/docs/css-gap-decorations/Overview.bs
Normal file
1147
layout/docs/css-gap-decorations/Overview.bs
Normal file
File diff suppressed because it is too large
Load diff
3611
layout/docs/css-gap-decorations/Overview.html
Normal file
3611
layout/docs/css-gap-decorations/Overview.html
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<title>An example of rule lateral properties</title>
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.flex {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
|
||||
column-rule: 8px solid blue;
|
||||
|
||||
place-content: center;
|
||||
border: 5px solid;
|
||||
margin: 2em;
|
||||
block-size: 4em;
|
||||
inline-size: 150px;
|
||||
background: lightgrey;
|
||||
}
|
||||
|
||||
x {
|
||||
inline-size: 50px;
|
||||
block-size: 2em;
|
||||
background: grey;
|
||||
}
|
||||
.flex::after {
|
||||
position: absolute;
|
||||
bottom: -2em;
|
||||
content: attr(test);
|
||||
}
|
||||
.test1 {
|
||||
column-rule-width: auto;
|
||||
column-rule-inset: 1px 3px;
|
||||
}
|
||||
.test2 {
|
||||
column-rule-width: auto;
|
||||
column-rule-inset: auto 3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="flex test1"><x>1</x><x>2</x></div>
|
||||
<div class="flex test2"><x>1</x><x>2</x></div>
|
||||
83
layout/docs/css-gap-decorations/examples/grid-align-001.html
Normal file
83
layout/docs/css-gap-decorations/examples/grid-align-001.html
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!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(2, 30px 20px 40px);
|
||||
grid-auto-flow: dense;
|
||||
gap: 10px 3px;
|
||||
|
||||
row-rule: 4px solid purple;
|
||||
|
||||
border: 2px solid;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 30px;
|
||||
background: lightgrey;
|
||||
}
|
||||
.test1 { row-rule-extent: segment; }
|
||||
.test2 { row-rule-extent: short; }
|
||||
.test3 { row-rule-extent: long; }
|
||||
.test4 { row-rule-extent: start; }
|
||||
.test5 { row-rule-extent: end; }
|
||||
.test6 { row-rule-extent: short allow-overlap; }
|
||||
.test7 { row-rule-extent: long allow-overlap; }
|
||||
|
||||
x {
|
||||
background: grey;
|
||||
opacity: .5;
|
||||
}
|
||||
x:nth-child(1) { grid-column: span 2; }
|
||||
x:nth-child(3) { grid-column: 4; grid-row: 1 / span 2; background: pink; }
|
||||
x:nth-child(4) { grid-column: span 2; }
|
||||
x:nth-child(5) { grid-row: 2; }
|
||||
x:nth-child(6) { grid-row: 2; grid-column: 2 / span 3; background: lime; xvisibility:hidden;}
|
||||
|
||||
.grid::after {
|
||||
position: absolute;
|
||||
bottom: -1.5em;
|
||||
font-size: 10px;
|
||||
vertical-align: top;
|
||||
content: attr(test);
|
||||
}
|
||||
</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><x>8</x></div>
|
||||
|
||||
<script>
|
||||
window.onload = function() {
|
||||
[...document.querySelectorAll('.grid')].forEach(function(elm) {
|
||||
const cs = window.getComputedStyle(elm);
|
||||
elm.setAttribute("test",
|
||||
"row-rule-extent: " + cs.rowRuleExtent
|
||||
);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -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 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);
|
||||
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: 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>
|
||||
|
|
@ -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>
|
||||
49
layout/docs/css-gap-decorations/examples/grid-image-001.html
Normal file
49
layout/docs/css-gap-decorations/examples/grid-image-001.html
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!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;
|
||||
}
|
||||
|
||||
.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>
|
||||
62
layout/docs/css-gap-decorations/examples/grid-image-002.html
Normal file
62
layout/docs/css-gap-decorations/examples/grid-image-002.html
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<!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: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>
|
||||
103
layout/docs/css-gap-decorations/examples/grid-lateral-001.html
Normal file
103
layout/docs/css-gap-decorations/examples/grid-lateral-001.html
Normal file
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!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;
|
||||
}
|
||||
|
||||
x {
|
||||
block-size: 48px;
|
||||
background: grey;
|
||||
}
|
||||
x:nth-child(2), x:nth-child(6) {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.grid::after {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
font-size: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.test1::after { content: "*-rule-length: auto; longitudinal insets: 4px"; }
|
||||
.test2::after { content: "*-rule-length: 50%; longitudinal insets: auto"; }
|
||||
.test3::after { content: "*-rule-width: 100%"; }
|
||||
.test4::after { content: "*-rule-width: 30%; lateral end insets: 0px"; }
|
||||
</style>
|
||||
|
||||
<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><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>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!doctype html>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!doctype html>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!doctype html>
|
||||
<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>
|
||||
BIN
layout/docs/css-gap-decorations/examples/h-diagonal-blue-16.png
Normal file
BIN
layout/docs/css-gap-decorations/examples/h-diagonal-blue-16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 274 B |
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<title>Example 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
BIN
layout/docs/css-gap-decorations/examples/v-diagonal-blue-16.png
Normal file
BIN
layout/docs/css-gap-decorations/examples/v-diagonal-blue-16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 273 B |
BIN
layout/docs/css-gap-decorations/media/flexbox-coupon-rule.png
Normal file
BIN
layout/docs/css-gap-decorations/media/flexbox-coupon-rule.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
layout/docs/css-gap-decorations/media/flexbox-extent-end-001.png
Normal file
BIN
layout/docs/css-gap-decorations/media/flexbox-extent-end-001.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
layout/docs/css-gap-decorations/media/grid-align-001.png
Normal file
BIN
layout/docs/css-gap-decorations/media/grid-align-001.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
layout/docs/css-gap-decorations/media/grid-extent-001.png
Normal file
BIN
layout/docs/css-gap-decorations/media/grid-extent-001.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
layout/docs/css-gap-decorations/media/grid-gradient-001.png
Normal file
BIN
layout/docs/css-gap-decorations/media/grid-gradient-001.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
layout/docs/css-gap-decorations/media/grid-image-001.png
Normal file
BIN
layout/docs/css-gap-decorations/media/grid-image-001.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
layout/docs/css-gap-decorations/media/grid-image-002.webm
Normal file
BIN
layout/docs/css-gap-decorations/media/grid-image-002.webm
Normal file
Binary file not shown.
BIN
layout/docs/css-gap-decorations/media/grid-lateral-001.png
Normal file
BIN
layout/docs/css-gap-decorations/media/grid-lateral-001.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
layout/docs/css-gap-decorations/media/grid-longitudinal-001.png
Normal file
BIN
layout/docs/css-gap-decorations/media/grid-longitudinal-001.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
layout/docs/css-gap-decorations/media/grid-longitudinal-002.webm
Normal file
BIN
layout/docs/css-gap-decorations/media/grid-longitudinal-002.webm
Normal file
Binary file not shown.
BIN
layout/docs/css-gap-decorations/media/grid-masonry-001.png
Normal file
BIN
layout/docs/css-gap-decorations/media/grid-masonry-001.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
layout/docs/css-gap-decorations/media/grid-masonry-002.png
Normal file
BIN
layout/docs/css-gap-decorations/media/grid-masonry-002.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
layout/docs/css-gap-decorations/media/grid-segment-001.png
Normal file
BIN
layout/docs/css-gap-decorations/media/grid-segment-001.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
layout/docs/css-gap-decorations/media/grid-segment-002.png
Normal file
BIN
layout/docs/css-gap-decorations/media/grid-segment-002.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
layout/docs/css-gap-decorations/media/grid-subgrid-001.png
Normal file
BIN
layout/docs/css-gap-decorations/media/grid-subgrid-001.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
layout/docs/css-gap-decorations/media/masonry-all-shorter.png
Normal file
BIN
layout/docs/css-gap-decorations/media/masonry-all-shorter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
layout/docs/css-gap-decorations/media/multicol-colspan-2.png
Normal file
BIN
layout/docs/css-gap-decorations/media/multicol-colspan-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
layout/docs/css-gap-decorations/media/multicol-row-rule-001.png
Normal file
BIN
layout/docs/css-gap-decorations/media/multicol-row-rule-001.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
layout/docs/css-gap-decorations/media/rule-alignment-values.png
Normal file
BIN
layout/docs/css-gap-decorations/media/rule-alignment-values.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
layout/docs/css-gap-decorations/media/table-rules-001.png
Normal file
BIN
layout/docs/css-gap-decorations/media/table-rules-001.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -99,6 +99,7 @@ js/src/vtune/jitprofiling.c
|
|||
js/src/vtune/jitprofiling.h
|
||||
js/src/vtune/legacy/
|
||||
js/src/zydis/
|
||||
layout/docs/css-gap-decorations/
|
||||
media/ffvpx/
|
||||
media/kiss_fft/
|
||||
media/libaom/
|
||||
|
|
|
|||
Loading…
Reference in a new issue