SSL Overview.html

Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/layout/docs/css-gap-decorations/Overview.html

<!doctype html><html lang="en">
<head>
 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 <title>CSS Gap Decorations</title>
 <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
 <meta content="exploring" name="csswg-work-status">
 <meta content="ED" name="w3c-status">
 <meta content="This is a proposal to extend <a href="https://drafts.csswg.org/css-align">CSS Box Alignment</a> to support gap decorations." name="abstract">
 <link href="../default.css" rel="stylesheet" type="text/css">
 <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
 <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet" type="text/css">
 <meta content="Bikeshed version dfbc2b297, updated Thu Nov 11 15:52:32 2021 -0800" name="generator">
 <link href="https://matspalmgren.github.io/css-gap-decorations/Overview.html" rel="canonical">
 <link href="https://drafts.csswg.org/csslogo.ico" rel="icon">
 <meta content="0978a49f760a6618d883efc621c36673a0720e2a" name="document-revision">
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
 color: var(--a-normal-text);
 font-size: inherit;
 font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
 content: "‘";
}
.css::after, .property::after, .descriptor::after {
 content: "’";
}
.property, .descriptor {
 /* Don't wrap property and descriptor names */
 white-space: nowrap;
}
.type { /* CSS value <type> */
 font-style: italic;
}
pre .property::before, pre .property::after {
 content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
 content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
 content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
 content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
 font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
 font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after { content: ">" }

[data-link-type=biblio] {
 white-space: pre;
}</style>
<style>/* style-colors */

/* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */
:root {
 color-scheme: light dark;

 --text: black;
 --bg: white;

 --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark);

 --logo-bg: #1a5e9a;
 --logo-active-bg: #c00;
 --logo-text: white;

 --tocnav-normal-text: #707070;
 --tocnav-normal-bg: var(--bg);
 --tocnav-hover-text: var(--tocnav-normal-text);
 --tocnav-hover-bg: #f8f8f8;
 --tocnav-active-text: #c00;
 --tocnav-active-bg: var(--tocnav-normal-bg);

 --tocsidebar-text: var(--text);
 --tocsidebar-bg: #f7f8f9;
 --tocsidebar-shadow: rgba(0,0,0,.1);
 --tocsidebar-heading-text: hsla(203,20%,40%,.7);

 --toclink-text: var(--text);
 --toclink-underline: #3980b5;
 --toclink-visited-text: var(--toclink-text);
 --toclink-visited-underline: #054572;

 --heading-text: #005a9c;

 --hr-text: var(--text);

 --algo-border: #def;

 --del-text: red;
 --del-bg: transparent;
 --ins-text: #080;
 --ins-bg: transparent;

 --a-normal-text: #034575;
 --a-normal-underline: #bbb;
 --a-visited-text: var(--a-normal-text);
 --a-visited-underline: #707070;
 --a-hover-bg: rgba(75%, 75%, 75%, .25);
 --a-active-text: #c00;
 --a-active-underline: #c00;

 --blockquote-border: silver;
 --blockquote-bg: transparent;
 --blockquote-text: currentcolor;

 --issue-border: #e05252;
 --issue-bg: #fbe9e9;
 --issue-text: var(--text);
 --issueheading-text: #831616;

 --example-border: #e0cb52;
 --example-bg: #fcfaee;
 --example-text: var(--text);
 --exampleheading-text: #574b0f;

 --note-border: #52e052;
 --note-bg: #e9fbe9;
 --note-text: var(--text);
 --noteheading-text: hsl(120, 70%, 30%);
 --notesummary-underline: silver;

 --assertion-border: #aaa;
 --assertion-bg: #eee;
 --assertion-text: black;

 --advisement-border: orange;
 --advisement-bg: #fec;
 --advisement-text: var(--text);
 --advisementheading-text: #b35f00;

 --warning-border: red;
 --warning-bg: hsla(40,100%,50%,0.95);
 --warning-text: var(--text);

 --amendment-border: #330099;
 --amendment-bg: #F5F0FF;
 --amendment-text: var(--text);
 --amendmentheading-text: #220066;

 --def-border: #8ccbf2;
 --def-bg: #def;
 --def-text: var(--text);
 --defrow-border: #bbd7e9;

 --datacell-border: silver;

 --indexinfo-text: #707070;

 --indextable-hover-text: black;
 --indextable-hover-bg: #f7f8f9;

 --outdatedspec-bg: rgba(0, 0, 0, .5);
 --outdatedspec-text: black;
 --outdated-bg: maroon;
 --outdated-text: white;
 --outdated-shadow: red;

 --editedrec-bg: darkorange;
}</style>
<style>/* style-counters */

body {
 counter-reset: example figure issue;
}
.issue {
 counter-increment: issue;
}
.issue:not(.no-marker)::before {
 content: "Issue " counter(issue);
}

.example {
 counter-increment: example;
}
.example:not(.no-marker)::before {
 content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
 content: "Invalid Example" counter(example);
}

figcaption {
 counter-increment: figure;
}
figcaption:not(.no-marker)::before {
 content: "Figure " counter(figure) " ";
}</style>
<style>/* style-dfn-panel */

:root {
 --dfnpanel-bg: #ddd;
 --dfnpanel-text: var(--text);
}
.dfn-panel {
 position: absolute;
 z-index: 35;
 height: auto;
 width: -webkit-fit-content;
 width: fit-content;
 max-width: 300px;
 max-height: 500px;
 overflow: auto;
 padding: 0.5em 0.75em;
 font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
 background: var(--dfnpanel-bg);
 color: var(--dfnpanel-text);
 border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: var(--dfnpanel-text); }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
 display: inline-block;
 position: fixed;
 left: .5em;
 bottom: 2em;
 margin: 0 auto;
 max-width: calc(100vw - 1.5em - .4em - .5em);
 max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-issues */

a[href].issue-return {
 float: right;
 float: inline-end;
 color: var(--issueheading-text);
 font-weight: bold;
 text-decoration: none;
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
 regarding paragraph and lists. */
[data-md] > :first-child {
 margin-top: 0;
}
[data-md] > :last-child {
 margin-bottom: 0;
}</style>
<style>/* style-selflinks */

:root {
 --selflink-text: white;
 --selflink-bg: gray;
 --selflink-hover-text: black;
}
.heading, .issue, .note, .example, li, dt {
 position: relative;
}
a.self-link {
 position: absolute;
 top: 0;
 left: calc(-1 * (3.5rem - 26px));
 width: calc(3.5rem - 26px);
 height: 2em;
 text-align: center;
 border: none;
 transition: opacity .2s;
 opacity: .5;
}
a.self-link:hover {
 opacity: 1;
}
.heading > a.self-link {
 font-size: 83%;
}
li > a.self-link {
 left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
 top: auto;
 left: auto;
 opacity: 0;
 width: 1.5em;
 height: 1.5em;
 background: var(--selflink-bg);
 color: var(--selflink-text);
 font-style: normal;
 transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
 opacity: 1;
}
dfn > a.self-link:hover {
 color: var(--selflink-hover-text);
}

a.self-link::before { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before { content: "#"; }
</style>
<style>/* style-syntax-highlighting */

code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }

.highlight:not(.idl) { background: rgba(0, 0, 0, .03); }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
<style>/* style-wpt */

:root {
 --wpt-border: hsl(0, 0%, 60%);
 --wpt-bg: hsl(0, 0%, 95%);
 --wpt-text: var(--text);
 --wptheading-text: hsl(0, 0%, 30%);
}
@media (prefers-color-scheme: dark) {
 :root {
 --wpt-border: hsl(0, 0%, 30%);
 --wpt-bg: var(--borderedblock-bg);
 --wpt-text: var(--text);
 --wptheading-text: hsl(0, 0%, 60%);
 }
}
.wpt-tests-block {
 list-style: none;
 border-left: .5em solid var(--wpt-border);
 background: var(--wpt-bg);
 color: var(--wpt-text);
 margin: 1em auto;
 padding: .5em;
}
.wpt-tests-block summary {
 color: var(--wptheading-text);
 font-weight: normal;
 text-transform: uppercase;
}
.wpt-tests-block summary::marker{
 color: var(--wpt-border);
}
.wpt-tests-block summary:hover::marker{
 color: var(--wpt-text);
}
/*
 The only content of a wpt test block in its closed state is the <summary>,
 which contains the word TESTS,
 and that is absolutely positioned.
 In that closed state, wpt test blocks are styled
 to have a top margin whose height is exactly equal
 to the height of the absolutely positioned <summary>,
 and no other background/padding/margin/border.
 The wpt test block elements will therefore allow the maring
 of the previous/next block elements
 to collapse through them;
 if this combined margin would be larger than its own top margin,
 it stays as is,
 and therefore the pre-existing vertical rhythm of the document is undisturbed.
 If that combined margin would be smaller, it is grown to that size.
 This means that the wpt test block ensures
 that there's always enough vertical space to insert the summary,
 without adding more than is needed.
*/
.wpt-tests-block:not([open]){
 padding: 0;
 border: none;
 background: none;
 font-size: 0.75em;
 line-height: 1;
 position: relative;
 margin: 1em 0 0;
}
.wpt-tests-block:not([open]) summary {
 position: absolute;
 right: 0;
 bottom: 0;
}
/*
 It is possible that both the last child of a block element
 and the block element itself
 would be annotated with a <wpt> block each.
 If the block element has a padding or a border,
 that's fine, but otherwise
 the bottom margin of the block and of its last child would collapse
 and both <wpt> elements would overlap, being both placed there.
 To avoid that, add 1px of padding to the <wpt> element annotating the last child
 to prevent the bottom margin of the block and of its last child from collapsing
 (and as much negative margin,
 as wel only want to prevent margin collapsing,
 but are not trying to actually take more space).
*/
.wpt-tests-block:not([open]):last-child {
 padding-bottom: 1px;
 margin-bottom: -1px;
}
/*
 Exception to the previous rule:
 don't do that in non-last list items,
 because it's not necessary,
 and would therefore consume more space than strictly needed.
 Lists must have list items as children, not <wpt> elements,
 so a <wpt> element cannot be a sibling of a list item,
 and the collision that the previous rule avoids cannot happen.
*/
li:not(:last-child) > .wpt-tests-block:not([open]):last-child,
dd:not(:last-child) > .wpt-tests-block:not([open]):last-child {
 padding-bottom: 0;
 margin-bottom: 0;
}
.wpt-tests-block:not([open]):not(:hover){
 opacity: 0.5;
}
.wpt-tests-list {
 list-style: none;
 display: grid;
 margin: 0;
 padding: 0;
 grid-template-columns: 1fr max-content auto auto;
 grid-column-gap: .5em;
}
.wpt-tests-block hr:last-child {
 display: none;
}
.wpt-test {
 display: contents;
}
.wpt-test > a {
 text-decoration: underline;
 border: none;
}
.wpt-test > .wpt-name { grid-column: 1; }
.wpt-test > .wpt-results { grid-column: 2; }
.wpt-test > .wpt-live { grid-column: 3; }
.wpt-test > .wpt-source { grid-column: 4; }

.wpt-test > .wpt-results {
 display: flex;
 gap: .1em;
}
.wpt-test .wpt-result {
 display: inline-block;
 height: 1em;
 width: 1em;
 border-radius: 50%;
 position: relative;
}
</style>
<style>/* style-darkmode */

@media (prefers-color-scheme: dark) {
 :root {
 --text: #ddd;
 --bg: black;

 --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E");

 --logo-bg: #1a5e9a;
 --logo-active-bg: #c00;
 --logo-text: white;

 --tocnav-normal-text: #999;
 --tocnav-normal-bg: var(--bg);
 --tocnav-hover-text: var(--tocnav-normal-text);
 --tocnav-hover-bg: #080808;
 --tocnav-active-text: #f44;
 --tocnav-active-bg: var(--tocnav-normal-bg);

 --tocsidebar-text: var(--text);
 --tocsidebar-bg: #080808;
 --tocsidebar-shadow: rgba(255,255,255,.1);
 --tocsidebar-heading-text: hsla(203,20%,40%,.7);

 --toclink-text: var(--text);
 --toclink-underline: #6af;
 --toclink-visited-text: var(--toclink-text);
 --toclink-visited-underline: #054572;

 --heading-text: #8af;

 --hr-text: var(--text);

 --algo-border: #456;

 --del-text: #f44;
 --del-bg: transparent;
 --ins-text: #4a4;
 --ins-bg: transparent;

 --a-normal-text: #6af;
 --a-normal-underline: #555;
 --a-visited-text: var(--a-normal-text);
 --a-visited-underline: var(--a-normal-underline);
 --a-hover-bg: rgba(25%, 25%, 25%, .2);
 --a-active-text: #f44;
 --a-active-underline: var(--a-active-text);

 --borderedblock-bg: rgba(255, 255, 255, .05);

 --blockquote-border: silver;
 --blockquote-bg: var(--borderedblock-bg);
 --blockquote-text: currentcolor;

 --issue-border: #e05252;
 --issue-bg: var(--borderedblock-bg);
 --issue-text: var(--text);
 --issueheading-text: hsl(0deg, 70%, 70%);

 --example-border: hsl(50deg, 90%, 60%);
 --example-bg: var(--borderedblock-bg);
 --example-text: var(--text);
 --exampleheading-text: hsl(50deg, 70%, 70%);

 --note-border: hsl(120deg, 100%, 35%);
 --note-bg: var(--borderedblock-bg);
 --note-text: var(--text);
 --noteheading-text: hsl(120, 70%, 70%);
 --notesummary-underline: silver;

 --assertion-border: #444;
 --assertion-bg: var(--borderedblock-bg);
 --assertion-text: var(--text);

 --advisement-border: orange;
 --advisement-bg: #222218;
 --advisement-text: var(--text);
 --advisementheading-text: #f84;

 --warning-border: red;
 --warning-bg: hsla(40,100%,20%,0.95);
 --warning-text: var(--text);

 --amendment-border: #330099;
 --amendment-bg: #080010;
 --amendment-text: var(--text);
 --amendmentheading-text: #cc00ff;

 --def-border: #8ccbf2;
 --def-bg: #080818;
 --def-text: var(--text);
 --defrow-border: #136;

 --datacell-border: silver;

 --indexinfo-text: #aaa;

 --indextable-hover-text: var(--text);
 --indextable-hover-bg: #181818;

 --outdatedspec-bg: rgba(255, 255, 255, .5);
 --outdatedspec-text: black;
 --outdated-bg: maroon;
 --outdated-text: white;
 --outdated-shadow: red;

 --editedrec-bg: darkorange;
 }
 /* In case a transparent-bg image doesn't expect to be on a dark bg,
 which is quite common in practice... */
 img { background: white; }
}
@media (prefers-color-scheme: dark) {
 :root {
 --selflink-text: black;
 --selflink-bg: silver;
 --selflink-hover-text: white;
 }
}

@media (prefers-color-scheme: dark) {
 :root {
 --dfnpanel-bg: #222;
 --dfnpanel-text: var(--text);
 }
}
@media (prefers-color-scheme: dark) {
 .highlight:not(.idl) { background: rgba(255, 255, 255, .05); }

 c-[a] { color: #d33682 } /* Keyword.Declaration */
 c-[b] { color: #d33682 } /* Keyword.Type */
 c-[c] { color: #2aa198 } /* Comment */
 c-[d] { color: #2aa198 } /* Comment.Multiline */
 c-[e] { color: #268bd2 } /* Name.Attribute */
 c-[f] { color: #b58900 } /* Name.Tag */
 c-[g] { color: #cb4b16 } /* Name.Variable */
 c-[k] { color: #d33682 } /* Keyword */
 c-[l] { color: #657b83 } /* Literal */
 c-[m] { color: #657b83 } /* Literal.Number */
 c-[n] { color: #268bd2 } /* Name */
 c-[o] { color: #657b83 } /* Operator */
 c-[p] { color: #657b83 } /* Punctuation */
 c-[s] { color: #6c71c4 } /* Literal.String */
 c-[t] { color: #6c71c4 } /* Literal.String.Single */
 c-[u] { color: #6c71c4 } /* Literal.String.Double */
 c-[ch] { color: #2aa198 } /* Comment.Hashbang */
 c-[cp] { color: #2aa198 } /* Comment.Preproc */
 c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */
 c-[c1] { color: #2aa198 } /* Comment.Single */
 c-[cs] { color: #2aa198 } /* Comment.Special */
 c-[kc] { color: #d33682 } /* Keyword.Constant */
 c-[kn] { color: #d33682 } /* Keyword.Namespace */
 c-[kp] { color: #d33682 } /* Keyword.Pseudo */
 c-[kr] { color: #d33682 } /* Keyword.Reserved */
 c-[ld] { color: #657b83 } /* Literal.Date */
 c-[nc] { color: #268bd2 } /* Name.Class */
 c-[no] { color: #268bd2 } /* Name.Constant */
 c-[nd] { color: #268bd2 } /* Name.Decorator */
 c-[ni] { color: #268bd2 } /* Name.Entity */
 c-[ne] { color: #268bd2 } /* Name.Exception */
 c-[nf] { color: #268bd2 } /* Name.Function */
 c-[nl] { color: #268bd2 } /* Name.Label */
 c-[nn] { color: #268bd2 } /* Name.Namespace */
 c-[py] { color: #268bd2 } /* Name.Property */
 c-[ow] { color: #657b83 } /* Operator.Word */
 c-[mb] { color: #657b83 } /* Literal.Number.Bin */
 c-[mf] { color: #657b83 } /* Literal.Number.Float */
 c-[mh] { color: #657b83 } /* Literal.Number.Hex */
 c-[mi] { color: #657b83 } /* Literal.Number.Integer */
 c-[mo] { color: #657b83 } /* Literal.Number.Oct */
 c-[sa] { color: #6c71c4 } /* Literal.String.Affix */
 c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */
 c-[sc] { color: #6c71c4 } /* Literal.String.Char */
 c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */
 c-[sd] { color: #6c71c4 } /* Literal.String.Doc */
 c-[se] { color: #6c71c4 } /* Literal.String.Escape */
 c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */
 c-[si] { color: #6c71c4 } /* Literal.String.Interpol */
 c-[sx] { color: #6c71c4 } /* Literal.String.Other */
 c-[sr] { color: #6c71c4 } /* Literal.String.Regex */
 c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */
 c-[fm] { color: #268bd2 } /* Name.Function.Magic */
 c-[vc] { color: #cb4b16 } /* Name.Variable.Class */
 c-[vg] { color: #cb4b16 } /* Name.Variable.Global */
 c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */
 c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */
 c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */
}
</style>
<body class="h-entry">
 <div class="head">
 <a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> 
 <h1 class="p-name no-ref" id="title">CSS Gap Decorations</h1>
 <a href="https://www.w3.org/standards/types#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2021-12-18">18 December 2021</time>
 <details>
 <summary>Specification Metadata</summary>
 <div data-fill-with="spec-metadata">
 <dl>
 <dt>This version:
 <dd><a class="u-url" href="https://matspalmgren.github.io/css-gap-decorations/Overview.html">https://matspalmgren.github.io/css-gap-decorations/Overview.html</a>
 <dt>Issue Tracking:
 <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-gap-decorations-1">CSSWG Issues Repository</a>
 <dd><a href="https://github.com/w3c/csswg-drafts/issues/6748">CSSWG github issue #6748</a>
 <dd><a href="#issues-index">Inline In Spec</a>
 <dt class="editor">Editor:
 <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:mats@mozilla.com">Mats Palmgren</a> (<a class="p-org org" href="http://mozilla.com">Mozilla Corporation</a>)
 <dt>Suggest an Edit for this Spec:
 <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-gap-decorations-1/Overview.bs">GitHub Editor</a>
 </dl>
 </div>
 </details>
 <div data-fill-with="warning"></div>
 <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2021 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a>® (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" rel="license">permissive document license</a> rules apply. 
 <hr title="Separator for header">
 </div>
 <div class="p-summary" data-fill-with="abstract">
 <h2 class="no-num no-toc no-ref heading settled" id="abstract">Abstract</h2>
 This is a proposal to extend <a href="https://drafts.csswg.org/css-align">CSS Box Alignment</a> to support gap decorations.
 <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc.
 </div>
 <h2 class="no-num no-toc no-ref heading settled" id="status">Status of this document</h2>
 <div data-fill-with="status">
 This is a public copy of the editors’ draft.
It is provided for discussion only and may change at any moment.
Its publication here does not imply endorsement of its contents by W3C.
Don’t cite this document other than as work in progress. 
 Please send feedback
by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred),
including the spec code “css-gap-decorations” in the title, like this:
“[css-gap-decorations] …summary of comment…”.
All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>.
Alternately, feedback can be sent to the (<a href="https://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-gap-decorations%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. 
 This document is governed by the <a href="https://www.w3.org/2021/Process-20211102/" id="w3c_process_revision">2 November 2021 W3C Process Document</a>. 
 
 </div>
 <div data-fill-with="at-risk"></div>
 <nav data-fill-with="table-of-contents" id="toc">
 <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
 <ol class="toc" role="directory">
 <li>
 <a href="#intro">1 Introduction</a>
 <ol class="toc">
 <li><a href="#overview">1.1 Overview</a>
 <li><a href="#placement">1.2 Module Interactions</a>
 <li><a href="#definitions">1.3 Definitions</a>
 </ol>
 <li>
 <a href="#rule-image">2 Rule Images and Gradients</a>
 <ol class="toc">
 <li><a href="#column-rule-image-source">2.1 The column-rule-image-source and row-rule-image-source Properties</a>
 <li><a href="#column-rule-image-slice">2.2 The column-rule-image-slice and row-rule-image-slice Properties</a>
 <li><a href="#column-rule-image-repeat">2.3 The column-rule-image-repeat and row-rule-image-repeat Properties</a>
 <li><a href="#column-rule-image">2.4 The column-rule-image and row-rule-image Shorthands</a>
 </ol>
 <li>
 <a href="#size">3 Rule Positioning and Sizing</a>
 <ol class="toc">
 <li><a href="#column-rule-width">3.1 The column-rule-width and row-rule-width Properties</a>
 <li><a href="#column-rule-length">3.2 The column-rule-length and row-rule-length Properties</a>
 <li><a href="#column-rule-lateral-inset-start">3.3 The Rule Lateral Inset Properties</a>
 <li><a href="#resolving-position-and-size-algo">3.4 Resolving a rule’s position and size</a>
 <li><a href="#column-rule-lateral-inset">3.5 The column-rule-lateral-inset and row-rule-lateral-inset Shorthands</a>
 <li><a href="#column-rule-longitudinal-inset-start">3.6 The Rule Longitudinal Inset Properties</a>
 <li><a href="#column-rule-longitudinal-inset">3.7 The column-rule-longitudinal-inset and row-rule-longitudinal-inset Shorthands</a>
 <li><a href="#column-rule-longitudinal-edge-inset-start">3.8 The Rule Longitudinal Edge Inset Properties</a>
 <li><a href="#column-rule-longitudinal-edge-inset">3.9 The column-rule-longitudinal-edge-inset and row-rule-longitudinal-edge-inset Shorthands</a>
 </ol>
 <li>
 <a href="#row-rule-props">4 Row Rule Style and Color</a>
 <ol class="toc">
 <li><a href="#row-rule-style">4.1 The row-rule-style and row-rule-color Properties</a>
 <li><a href="#row-rule">4.2 The row-rule Shorthand</a>
 </ol>
 <li>
 <a href="#rule-align">5 Rule Alignment</a>
 <ol class="toc">
 <li><a href="#column-rule-align">5.1 The column-rule-align and row-rule-align Properties</a>
 <li><a href="#column-rule-edge-align">5.2 The column-rule-edge-align and row-rule-edge-align Properties</a>
 </ol>
 <li>
 <a href="#rule-extent">6 Rule Extent</a>
 <ol class="toc">
 <li>
 <a href="#column-rule-extent">6.1 The column-rule-extent and row-rule-extent Properties</a>
 <ol class="toc">
 <li>
 <a href="#rule-extent-grid">6.1.1 Grid Containers</a>
 <ol class="toc">
 <li><a href="#rule-extent-subgrid">6.1.1.1 Subgrid</a>
 <li><a href="#rule-extent-masonry">6.1.1.2 Masonry</a>
 </ol>
 <li><a href="#rule-extent-flexbox">6.1.2 Flex Containers</a>
 <li><a href="#rule-extent-table">6.1.3 Table Containers</a>
 <li><a href="#rule-extent-table-row-group">6.1.4 Table Row Group Containers</a>
 <li><a href="#rule-extent-multicol">6.1.5 Multi-Column Containers</a>
 </ol>
 </ol>
 <li><a href="#rule-containing-rectangle">7 The Rule Containing Rectangle</a>
 <li><a href="#rule-painting-order">8 Rule Painting Order</a>
 <li><a href="#rule-overflow">9 Rule Overflow</a>
 <li>
 <a href="#w3c-conformance"> Conformance</a>
 <ol class="toc">
 <li><a href="#w3c-conventions"> Document conventions</a>
 <li><a href="#w3c-conformance-classes"> Conformance classes</a>
 <li>
 <a href="#w3c-partial"> Partial implementations</a>
 <ol class="toc">
 <li><a href="#w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features</a>
 </ol>
 <li><a href="#w3c-testing"> Non-experimental implementations</a>
 </ol>
 <li>
 <a href="#index"> Index</a>
 <ol class="toc">
 <li><a href="#index-defined-here"> Terms defined by this specification</a>
 <li><a href="#index-defined-elsewhere"> Terms defined by reference</a>
 </ol>
 <li>
 <a href="#references"> References</a>
 <ol class="toc">
 <li><a href="#normative"> Normative References</a>
 <li><a href="#informative"> Informative References</a>
 </ol>
 <li><a href="#property-index"> Property Index</a>
 <li><a href="#issues-index"> Issues Index</a>
 </ol>
 </nav>
 <main>
 <h2 class="heading settled" data-level="1" id="intro">1. Introduction<a class="self-link" href="#intro"></a></h2>
 This section is not normative.
 <h3 class="heading settled" data-level="1.1" id="overview">1.1. Overview<a class="self-link" href="#overview"></a></h3>
 This is a proposal to add CSS features for decorating <a href="https://drafts.csswg.org/css-align#gaps">gaps</a>.
 (Some use cases and background discussion can be found in <a href="https://github.com/w3c/csswg-drafts/issues/2748">issue #2748</a>.)
 We propose to extend the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width" id="ref-for-propdef-column-rule-width">column-rule-width</a> property with new values.
 Add properties to support images and gradients.
 Add properties for aligning the rule to specific anchor points,
 specifying its extent area, and to control its position and length within that area.
 We add support for row rules by adding the corresponding <a class="property" data-link-type="propdesc">row-*</a> properties.
 We also widen the scope of these properties so that they can be used in <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group">table-row-group</a> containers,
 as well as <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container">multi-column containers</a>.
 <h3 class="heading settled" data-level="1.2" id="placement">1.2. Module Interactions<a class="self-link" href="#placement"></a></h3>
 This module extends the definition of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width" id="ref-for-propdef-column-rule-width①">column-rule-width</a> property,
 adding <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value"><percentage></a> and auto values.
 We also generalize the existing column-rule-* properties to apply to other
 types of containers.
 Accordingly, we propose to move the existing column-rule properties from
 the <a href="https://drafts.csswg.org/css-multicol">Multi-column</a> spec to
 the <a href="https://drafts.csswg.org/css-align">Box Alignment</a> spec.
 Additionally, all new properties and shorthands in this proposal are intended
 as additions to the <a href="https://drafts.csswg.org/css-align">Box Alignment</a> spec.
 <h3 class="heading settled" data-level="1.3" id="definitions">1.3. Definitions<a class="self-link" href="#definitions"></a></h3>
 In this specification, we will use the term <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="lateral-axis">lateral axis</dfn> to refer to
 the axis in which the rule’s thickness grows (i.e. the axis column-rule-width use). The other axis is the rule’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="longitudinal-axis">longitudinal axis</dfn> and
 its size in this axis is the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="rule-length">rule length</dfn>.
 These definitions are relative to the rule itself and does not depend on if
 the rule is a row or column rule, or what the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> is.
 <h2 class="heading settled" data-level="2" id="rule-image">2. Rule Images and Gradients<a class="self-link" href="#rule-image"></a></h2>
 Authors may specify an image or gradient to be used in place of the column-rule-style.
 These properties are loosely modeled after the corresponding <a href="https://drafts.csswg.org/css-backgrounds/#border-images"><a class="property" data-link-type="propdesc">border-image-*</a></a> properties.
 Rules are one-dimensional though, as opposed to borders which have four sides around an area.
 A rule is like a border with just one side rendered with the other sides having <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style" id="ref-for-propdef-border-style">border-style: none</a>.
 <h3 class="heading settled" data-level="2.1" id="column-rule-image-source">2.1. The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-image-source" id="ref-for-propdef-column-rule-image-source">column-rule-image-source</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-image-source" id="ref-for-propdef-row-rule-image-source">row-rule-image-source</a> Properties<a class="self-link" href="#column-rule-image-source"></a></h3>
 <table class="def propdef" data-link-for-hint="column-rule-image-source">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-image-source">column-rule-image-source</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-image-source">row-rule-image-source</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image"><image></a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>none
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group①">table-row-group</a> containers
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>no
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>N/A
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>the keyword none or the computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image①"><image></a>
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>discrete
 </table>
 These properties specify an <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image②"><image></a> to use in place of the rendering specified
 by the column-rule-style/row-rule-style properties.
 As for borders, a rule image is not rendered when the corresponding column-rule-style/row-rule-style is none.
 <h3 class="heading settled" data-level="2.2" id="column-rule-image-slice">2.2. The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-image-slice" id="ref-for-propdef-column-rule-image-slice">column-rule-image-slice</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-image-slice" id="ref-for-propdef-row-rule-image-slice">row-rule-image-slice</a> Properties<a class="self-link" href="#column-rule-image-slice"></a></h3>
 <table class="def propdef" data-link-for-hint="column-rule-image-slice">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-image-slice">column-rule-image-slice</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-image-slice">row-rule-image-slice</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod">[<a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value"><number [0,∞]></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value①"><percentage [0,∞]></a>]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{1,2}</a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>0
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container②">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container②">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container②">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table②">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group②">table-row-group</a> containers
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>no
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>refer to image size in the rule’s longitudinal axis
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>one or two values, each either a number or percentage
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>discrete
 </table>
 <a class="property" data-link-type="propdesc" href="#propdef-column-rule-image-slice" id="ref-for-propdef-column-rule-image-slice①">column-rule-image-slice</a> specify inward offsets from the start and end edges
 of the image in the rule’s longitudinal axis, dividing it into three regions:
 two edge areas and one middle area.
 When two values are specified, they set the offsets on the start and end sides in
 that order. If the end value is missing, it is the same as the start value.
 <dl>
 <dt><dfn class="css" data-dfn-for="column-rule-image-slice" data-dfn-type="value" data-export id="valdef-column-rule-image-slice-percentage-0"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value②"><percentage [0,∞]></a><a class="self-link" href="#valdef-column-rule-image-slice-percentage-0"></a></dfn>
 <dd>Percentages are relative to the image size in the rule’s longitudinal axis
 <dt><dfn class="css" data-dfn-for="column-rule-image-slice" data-dfn-type="value" data-export id="valdef-column-rule-image-slice-number-0"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value①"><number [0,∞]></a><a class="self-link" href="#valdef-column-rule-image-slice-number-0"></a></dfn>
 <dd>Numbers represent pixels in the image (if the image is a raster
 image) or vector coordinates (if the image is a vector image).
 </dl>
 Negative values are not allowed.
 Computed values larger than the size of the image are interpreted as 100%.
 If the image must be sized to determine the slices
 (for example, for SVG images with no intrinsic size),
 then it is sized using the <a href="https://www.w3.org/TR/css-images-3/#default-sizing"><cite>CSS Images 3</cite> § 4.3.1 Default Sizing Algorithm</a> with no <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#specified-size" id="ref-for-specified-size">specified size</a> and the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①">rule containing rectangle</a> as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#default-object-size" id="ref-for-default-object-size">default object size</a>.
 The regions given by the <a class="property" data-link-type="propdesc" href="#propdef-column-rule-image-slice" id="ref-for-propdef-column-rule-image-slice②">column-rule-image-slice</a> values may overlap.
 However if the sum of the start and end values is equal to or greater than
 the size of the image, the middle part becomes empty.
 <h3 class="heading settled" data-level="2.3" id="column-rule-image-repeat">2.3. The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-image-repeat" id="ref-for-propdef-column-rule-image-repeat">column-rule-image-repeat</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-image-repeat" id="ref-for-propdef-row-rule-image-repeat">row-rule-image-repeat</a> Properties<a class="self-link" href="#column-rule-image-repeat"></a></h3>
 <table class="def propdef" data-link-for-hint="column-rule-image-repeat">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-image-repeat">column-rule-image-repeat</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-image-repeat">row-rule-image-repeat</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod">stretch <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> repeat | round | space
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>stretch
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container③">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container③">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container③">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table③">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group③">table-row-group</a> containers
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>no
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>N/A
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>the specified keyword
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>discrete
 </table>
 These properties specify how the middle part of a sliced rule image is scaled and tiled.
 Values have the following meanings:
 <dl>
 <dt><dfn class="css" data-dfn-for="column-rule-image-repeat" data-dfn-type="value" data-export id="valdef-column-rule-image-repeat-stretch">stretch<a class="self-link" href="#valdef-column-rule-image-repeat-stretch"></a></dfn>
 <dd>The image is stretched to fill the area.
 <dt><dfn class="css" data-dfn-for="column-rule-image-repeat" data-dfn-type="value" data-export id="valdef-column-rule-image-repeat-repeat">repeat<a class="self-link" href="#valdef-column-rule-image-repeat-repeat"></a></dfn>
 <dd>The image is tiled (repeated) to fill the area.
 <dt><dfn class="css" data-dfn-for="column-rule-image-repeat" data-dfn-type="value" data-export id="valdef-column-rule-image-repeat-round">round<a class="self-link" href="#valdef-column-rule-image-repeat-round"></a></dfn>
 <dd>The image is tiled (repeated) to fill the area. If it does not
 fill the area with a whole number of tiles, the image is rescaled
 so that it does.
 <dt><dfn class="css" data-dfn-for="column-rule-image-repeat" data-dfn-type="value" data-export id="valdef-column-rule-image-repeat-space">space<a class="self-link" href="#valdef-column-rule-image-repeat-space"></a></dfn>
 <dd>The image is tiled (repeated) to fill the area. If it does not
 fill the area with a whole number of tiles, the extra space is
 distributed around the tiles.
 </dl>
 The exact process for scaling and tiling the image parts is defined by drawing the equivalent border-image with the top and bottom border-image-slice values set from the corresponding column-rule-image-slice values, and the border-image-slice left value set to 100% and
 the right value set to 0. The border-image-width top value set to the column-rule-image-slice top value. The border-image-width top value set to the column-rule-image-slice bottom value. The border-image-width top value set to zero.
 <h3 class="heading settled" data-level="2.4" id="column-rule-image">2.4. The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-image" id="ref-for-propdef-column-rule-image">column-rule-image</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-image" id="ref-for-propdef-row-rule-image">row-rule-image</a> Shorthands<a class="self-link" href="#column-rule-image"></a></h3>
 <table class="def propdef" data-link-for-hint="column-rule-image">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-image">column-rule-image</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-image">row-rule-image</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-column-rule-image-source" id="ref-for-propdef-column-rule-image-source①"><'column-rule-image-source'></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production" data-link-type="propdesc" href="#propdef-column-rule-image-slice" id="ref-for-propdef-column-rule-image-slice③"><'column-rule-image-slice'></a> || <a class="production" data-link-type="propdesc" href="#propdef-column-rule-image-repeat" id="ref-for-propdef-column-rule-image-repeat①"><'column-rule-image-repeat'></a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container④">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container④">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container④">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table④">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group④">table-row-group</a> containers
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 </table>
 <aside class="example" id="example-c9ee9e2e">
 <a class="self-link" href="#example-c9ee9e2e"></a> This <a href="examples/grid-image-001.html">example</a> demonstrates the new
 rule image properties presented above in a grid layout with spanning elements.
 <figure>
 <img height="488" src="media/grid-image-001.png" width="608">
 <figcaption> Example of image rules. </figcaption>
 </figure>
 </aside>
 <aside class="example" id="example-0518370f">
 <a class="self-link" href="#example-0518370f"></a> Here’s a <a href="examples/grid-image-002.html">variation</a> of the example above
 that animates the container’s size and stretch the middle part of the images.
 <figure>
 <video autoplay loop src="media/grid-image-002.webm"></video>
 <figcaption> Example of stretching image rules when the container is resized. </figcaption>
 </figure>
 </aside>
 <aside class="example" id="example-746571da">
 <a class="self-link" href="#example-746571da"></a> This is a similar <a href="examples/grid-gradient-001.html">example</a> using gradients.
 <figure>
 <img height="489" src="media/grid-gradient-001.png" width="608">
 <figcaption> Example of gradient rules. </figcaption>
 </figure>
 </aside>
 <aside class="example" id="example-4f51bab9">
 <a class="self-link" href="#example-4f51bab9"></a> Here’s an <a href="examples/flexbox-coupon-rule.html">example</a> demonstrating
 support for a use case mentioned in <a href="https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-621983931">issue #2748</a>.
 It’s a coupon with a perforation rendered by a semi-transparent rule image between two flex items.
 <figure>
 <img height="108" src="media/flexbox-coupon-rule.png" width="253">
 <figcaption> An example of a semi-transparent column rule image. </figcaption>
 </figure>
 </aside>
 <h2 class="heading settled" data-level="3" id="size">3. Rule Positioning and Sizing<a class="self-link" href="#size"></a></h2>
 <h3 class="heading settled" data-level="3.1" id="column-rule-width">3.1. The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width" id="ref-for-propdef-column-rule-width②">column-rule-width</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-width" id="ref-for-propdef-row-rule-width">row-rule-width</a> Properties<a class="self-link" href="#column-rule-width"></a></h3>
 <table class="def propdef partial" data-link-for-hint="column-rule-width">
 <tbody>
 <tr>
 <th>Name:
 <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width" id="ref-for-propdef-column-rule-width③">column-rule-width</a>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">New values:</a>
 <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value③"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> auto
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>medium
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container⑤">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑤">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑤">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table⑤">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group⑤">table-row-group</a> containers
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>no
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>refer to the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①①">rule containing rectangle’s</a> size in the rule’s <a data-link-type="dfn" href="#lateral-axis" id="ref-for-lateral-axis">lateral axis</a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>absolute length if the specified value is <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-width" id="ref-for-typedef-line-width" title="Expands to: medium | thick | thin"><line-width></a>; 0px if the column rule style is none or hidden. Otherwise, the specified value.
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>by computed value type
 </table>
 <table class="def propdef" data-link-for-hint="row-rule-width">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-width">row-rule-width</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-width" id="ref-for-typedef-line-width①" title="Expands to: medium | thick | thin"><line-width></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value④"><percentage></a> | auto
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>medium
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container⑥">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑥">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑥">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table⑥">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group⑥">table-row-group</a> containers
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>no
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>refer to the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①②">rule containing rectangle’s</a> size in the rule’s <a data-link-type="dfn" href="#lateral-axis" id="ref-for-lateral-axis①">lateral axis</a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>absolute length if the specified value is <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-width" id="ref-for-typedef-line-width②" title="Expands to: medium | thick | thin"><line-width></a>; 0px if the column rule style is none or hidden. Otherwise, the specified value.
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>by computed value type
 </table>
 These properties sets the thickness (lateral size) of a rule in the column and row axis, respectively.
 Negative specified values are not allowed.
 The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value">used value</a> is floored at zero (in case a 'calc()' expression evaluates to a negative value for example).
 See <a href="#resolving-position-and-size-algo">§ 3.4 Resolving a rule’s position and size</a> below for how <a class="property" data-link-type="propdesc">auto</a> is resolved.
 <h3 class="heading settled" data-level="3.2" id="column-rule-length">3.2. The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-length" id="ref-for-propdef-column-rule-length">column-rule-length</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-length" id="ref-for-propdef-row-rule-length">row-rule-length</a> Properties<a class="self-link" href="#column-rule-length"></a></h3>
 <table class="def propdef" data-link-for-hint="column-rule-length">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-length">column-rule-length</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-length">row-rule-length</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage"><length-percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> auto
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>auto
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container⑦">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑦">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑦">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table⑦">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group⑦">table-row-group</a> containers
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>no
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>refer to the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①③">rule containing rectangle’s</a> size in the rule’s <a data-link-type="dfn" href="#longitudinal-axis" id="ref-for-longitudinal-axis">longitudinal axis</a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>the specified value
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>by computed value type
 </table>
 These properties sets the <a data-link-type="dfn" href="#rule-length" id="ref-for-rule-length">rule length</a> (longitudinal size) of a rule in the column and row axis, respectively.
 Negative specified values are not allowed.
 The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value①">used value</a> is floored at zero (in case a 'calc()' expression evaluates to a negative value for example).
 See <a href="#resolving-position-and-size-algo">§ 3.4 Resolving a rule’s position and size</a> below for how <a class="property" data-link-type="propdesc">auto</a> is resolved.
 Note: These properties work the same as the <a class="property" data-link-type="propdesc">*-rule-width</a> properties in the <a data-link-type="dfn" href="#lateral-axis" id="ref-for-lateral-axis②">lateral axis</a>, except that they have a different initial value.
 <h3 class="heading settled" data-level="3.3" id="column-rule-lateral-inset-start">3.3. The Rule Lateral Inset Properties<a class="self-link" href="#column-rule-lateral-inset-start"></a></h3>
 <table class="def propdef" data-link-for-hint="column-rule-lateral-inset-start">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-lateral-inset-start">column-rule-lateral-inset-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-lateral-inset-end">column-rule-lateral-inset-end</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-lateral-inset-start">row-rule-lateral-inset-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-lateral-inset-end">row-rule-lateral-inset-end</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①"><length-percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> auto
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>auto
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container⑧">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑧">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑧">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table⑧">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group⑧">table-row-group</a> containers
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>no
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>refer to the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①④">rule containing rectangle’s</a> size in the rule’s <a data-link-type="dfn" href="#lateral-axis" id="ref-for-lateral-axis③">lateral axis</a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>the specified value
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>by computed value type
 </table>
 These properties sets the lateral start/end offset of the rule in the column and row axis, respectively.
 A positive value moves the position inward and a negative value outward from the corresponding <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①⑤">rule containing rectangle’s</a> edge.
 <aside class="example" id="example-2ebfce9b">
 <a class="self-link" href="#example-2ebfce9b"></a> This <a href="examples/grid-lateral-002.html">example</a> demonstrates aligning a rule at the start of the gap.
 <figure>
 <img height="170" src="media/grid-lateral-002.png" width="941">
 <figcaption> Examples of aligning a rule at the start of the gap with a lateral start offset. </figcaption>
 </figure>
 </aside>
 <aside class="example" id="example-c7a1d008">
 <a class="self-link" href="#example-c7a1d008"></a> This <a href="examples/grid-lateral-003.html">example</a> demonstrates aligning a rule at the end of the gap.
 <figure>
 <img height="170" src="media/grid-lateral-003.png" width="928">
 <figcaption> Examples of aligning a rule at the end of the gap with a lateral end offset. </figcaption>
 </figure>
 </aside>
 NOTE: The column-rule-lateral-inset and column-rule-width <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value②">used values</a> are calculated in a similar way to how <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left">left</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right">right</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width">width</a> are <a href="https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width">calculated</a> for an absolutely positioned
 box. The precise algorithm is described next.
 <h3 class="heading settled" data-level="3.4" id="resolving-position-and-size-algo">3.4. Resolving a rule’s position and size<a class="self-link" href="#resolving-position-and-size-algo"></a></h3>
 Given a triplet of values: inset-start/end and a size for an axis, auto values
 are resolved so that the sum of the three values equals the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①⑥">rule containing rectangle</a> size in
 the same axis. These are the rules for resolving them:
 <ol id="rule-sizing">
 <li>if all the values are auto then set both inset values to zero and solve for size
 <li>if none of the values are auto then the situation is over-constrained: solve by
 treating the end inset value as auto
 <li>if both inset properties are auto, but the size is not, then solve with the additional constraint
 that the inset values must have equal values (resulting in the rule being centered)
 <li>if the size is auto and only one of the inset values is auto then set the auto inset value to zero
 and solve for size, if that makes size negative then set the size to zero and solve for the auto inset value instead (i.e. the rule is sized to fill the remaining space, until it becomes zero in
 which case its positioned at the non-auto inset edge)
 <li>if the size is auto and both inset values are non-auto then solve for size,
 if that makes the size negative then set the size to zero and solve again by
 treating the end inset value as auto
 </ol>
 These rules resolves the column-rule-width, column-rule-lateral-inset-start, and column-rule-lateral-inset-end triplet
 of values in a rule’s lateral axis.
 The same rules are also used to resolve column-rule-length, column-rule-longitudinal-[edge-]inset-start, and column-rule-longitudinal-[edge-]inset-end triplet of values in a rule’s longitudinal axis (see the <a href="#column-rule-longitudinal-inset-start">longitudinal</a> property
 descriptions below for which of the "edge" or non-"edge" values is used).
 Ditto for the corresponding row-rule-* properties.
 <aside class="example" id="example-a31fa0e2">
 <a class="self-link" href="#example-a31fa0e2"></a> This <a href="examples/grid-lateral-001.html">example</a> demonstrates the rules above.
 Note in particular the latter two grids, which shows what happens when the sum of the
 insets are greater than the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①⑦">rule containing rectangle’s</a> size. There’s still
 a zero-sized column rule there, which the row rule (purple) aligns to.
 <figure>
 <img height="651" src="media/grid-lateral-001.png" width="997">
 <figcaption> Examples of lateral rule sizing with various inset values. </figcaption>
 </figure>
 </aside>
 <h3 class="heading settled" data-level="3.5" id="column-rule-lateral-inset">3.5. The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-lateral-inset" id="ref-for-propdef-column-rule-lateral-inset">column-rule-lateral-inset</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-lateral-inset" id="ref-for-propdef-row-rule-lateral-inset">row-rule-lateral-inset</a> Shorthands<a class="self-link" href="#column-rule-lateral-inset"></a></h3>
 <table class="def propdef" data-link-for-hint="column-rule-lateral-inset">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-lateral-inset">column-rule-lateral-inset</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-column-rule-lateral-inset-start" id="ref-for-propdef-column-rule-lateral-inset-start"><'column-rule-lateral-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-column-rule-lateral-inset-end" id="ref-for-propdef-column-rule-lateral-inset-end"><'column-rule-lateral-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 </table>
 <table class="def propdef" data-link-for-hint="row-rule-lateral-inset">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-lateral-inset">row-rule-lateral-inset</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-row-rule-lateral-inset-start" id="ref-for-propdef-row-rule-lateral-inset-start"><'row-rule-lateral-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-row-rule-lateral-inset-end" id="ref-for-propdef-row-rule-lateral-inset-end"><'row-rule-lateral-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 </table>
 These are shortands for specifying the corresponding start/end values.
 If one value is specified it is used for both start and end.
 <h3 class="heading settled" data-level="3.6" id="column-rule-longitudinal-inset-start">3.6. The Rule Longitudinal Inset Properties<a class="self-link" href="#column-rule-longitudinal-inset-start"></a></h3>
 <table class="def propdef" data-link-for-hint="column-rule-longitudinal-inset-start">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-longitudinal-inset-start">column-rule-longitudinal-inset-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-longitudinal-inset-end">column-rule-longitudinal-inset-end</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-longitudinal-inset-start">row-rule-longitudinal-inset-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-longitudinal-inset-end">row-rule-longitudinal-inset-end</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②"><length-percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> auto
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>0
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container⑨">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container⑨">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑨">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table⑨">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group⑨">table-row-group</a> containers
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>no
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>refer to the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①⑧">rule containing rectangle’s</a> size in the rule’s <a data-link-type="dfn" href="#longitudinal-axis" id="ref-for-longitudinal-axis①">longitudinal axis</a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>the specified value
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>by computed value type
 </table>
 These properties sets the longitudinal start/end inset of the rule in the column
 and row axis, respectively. They are only used on a rule’s edges that are interior.
 The <a href="#column-rule-longitudinal-edge-inset-start">*-rule-longitudinal-edge-inset</a> properties are used for rule edges that are on the outer edges of an axis.
 The <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#used-value" id="ref-for-used-value③">used values</a> are calculated the same as for the lateral properties above.
 <aside class="example" id="example-7f768fba">
 <a class="self-link" href="#example-7f768fba"></a> This <a href="examples/grid-lateral-004.html">example</a> shows the default rule alignment and size in both axes.
 <figure>
 <img height="280" src="media/grid-lateral-004.png" width="514">
 <figcaption> Example of a rule with default rule alignment and size in both axes. </figcaption>
 </figure>
 </aside>
 Note: These have a different initial value than the lateral inset properties, meaning the rule will stretch to fill the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①⑨">rule containing rectangle</a> in this axis. The initial values as specified above are backward compatible with how column rules are sized and positioned in legacy <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-layout" id="ref-for-multi-column-layout">multi-column layout</a>.
 <aside class="example" id="example-156ca2f0">
 <a class="self-link" href="#example-156ca2f0"></a> Here’s a few simple <a href="examples/grid-longitudinal-001.html">examples</a> of
 the rule sizing and inset properties.
 Note that the grid items have <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity">opacity: 0.5</a> to show any rules underneath them.
 <figure>
 <img height="889" src="media/grid-longitudinal-001.png" width="629">
 <figcaption> Examples of rule sizing and inset values. </figcaption>
 </figure>
 </aside>
 <aside class="example" id="example-3020da77">
 <a class="self-link" href="#example-3020da77"></a> This <a href="examples/grid-longitudinal-002.html">example</a> demonstrates
 that the inset properties can be animated and that they are relative the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①①⓪">rule containing rectangle</a>,
 which itself depends on the <a href="#rule-align">rule’s alignment</a> in its longitudinal axis.
 Note that the longitudinal insets in this example are definite and not animated. The reason
 they follow the animated lateral position of the rule in the orthogonal axis is that they have <a href="#column-rule-align">rule alignment</a>.
 <figure>
 <video autoplay loop src="media/grid-longitudinal-002.webm"></video>
 <figcaption> Example of rule alignment and animated inset values. </figcaption>
 </figure>
 </aside>
 <h3 class="heading settled" data-level="3.7" id="column-rule-longitudinal-inset">3.7. The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-inset" id="ref-for-propdef-column-rule-longitudinal-inset">column-rule-longitudinal-inset</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-longitudinal-inset" id="ref-for-propdef-row-rule-longitudinal-inset">row-rule-longitudinal-inset</a> Shorthands<a class="self-link" href="#column-rule-longitudinal-inset"></a></h3>
 <table class="def propdef" data-link-for-hint="column-rule-longitudinal-inset">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-longitudinal-inset">column-rule-longitudinal-inset</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-inset-start" id="ref-for-propdef-column-rule-longitudinal-inset-start"><'column-rule-longitudinal-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-inset-end" id="ref-for-propdef-column-rule-longitudinal-inset-end"><'column-rule-longitudinal-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 </table>
 <table class="def propdef" data-link-for-hint="row-rule-longitudinal-inset">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-longitudinal-inset">row-rule-longitudinal-inset</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-row-rule-longitudinal-inset-start" id="ref-for-propdef-row-rule-longitudinal-inset-start"><'row-rule-longitudinal-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-row-rule-longitudinal-inset-end" id="ref-for-propdef-row-rule-longitudinal-inset-end"><'row-rule-longitudinal-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt③">?</a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 </table>
 These shortands specify the corresponding start/end values. If one value is specified it is used for both start/end.
 <h3 class="heading settled" data-level="3.8" id="column-rule-longitudinal-edge-inset-start">3.8. The Rule Longitudinal Edge Inset Properties<a class="self-link" href="#column-rule-longitudinal-edge-inset-start"></a></h3>
 <table class="def propdef" data-link-for-hint="column-rule-longitudinal-edge-inset-start">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-longitudinal-edge-inset-start">column-rule-longitudinal-edge-inset-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-longitudinal-edge-inset-end">column-rule-longitudinal-edge-inset-end</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-longitudinal-edge-inset-start">row-rule-longitudinal-edge-inset-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-longitudinal-edge-inset-end">row-rule-longitudinal-edge-inset-end</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage③"><length-percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> auto
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>0
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①⓪">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①⓪">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⓪">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①⓪">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group①⓪">table-row-group</a> containers
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>no
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>refer to the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①①①">rule containing rectangle’s</a> size in the rule’s <a data-link-type="dfn" href="#longitudinal-axis" id="ref-for-longitudinal-axis②">longitudinal axis</a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>the specified value
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>by computed value type
 </table>
 These properties are identical to their non-"edge" counter-parts. These properties are used
 on the start edge of the first rule that on the container’s start edge in its <a data-link-type="dfn" href="#longitudinal-axis" id="ref-for-longitudinal-axis③">longitudinal axis</a>, and the end edge of the last rule at the end of the container.
 For interior rule edges, the <a href="#column-rule-longitudinal-inset-start">non-"edge" properties</a> are used.
 In other words, these properties are used together with the <a href="#column-rule-edge-align">*-rule-edge-align</a> properties (defined below) and the *-rule-longitudinal-inset properties are used together with <a href="#column-rule-align">*-rule-align</a>.
 <h3 class="heading settled" data-level="3.9" id="column-rule-longitudinal-edge-inset">3.9. The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-edge-inset" id="ref-for-propdef-column-rule-longitudinal-edge-inset">column-rule-longitudinal-edge-inset</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-longitudinal-edge-inset" id="ref-for-propdef-row-rule-longitudinal-edge-inset">row-rule-longitudinal-edge-inset</a> Shorthands<a class="self-link" href="#column-rule-longitudinal-edge-inset"></a></h3>
 <table class="def propdef" data-link-for-hint="column-rule-longitudinal-edge-inset">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-longitudinal-edge-inset">column-rule-longitudinal-edge-inset</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-edge-inset-start" id="ref-for-propdef-column-rule-longitudinal-edge-inset-start"><'column-rule-longitudinal-edge-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-edge-inset-end" id="ref-for-propdef-column-rule-longitudinal-edge-inset-end"><'column-rule-longitudinal-edge-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt④">?</a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 </table>
 <table class="def propdef" data-link-for-hint="row-rule-longitudinal-edge-inset">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-longitudinal-edge-inset">row-rule-longitudinal-edge-inset</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-row-rule-longitudinal-edge-inset-start" id="ref-for-propdef-row-rule-longitudinal-edge-inset-start"><'row-rule-longitudinal-edge-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-row-rule-longitudinal-edge-inset-end" id="ref-for-propdef-row-rule-longitudinal-edge-inset-end"><'row-rule-longitudinal-edge-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑤">?</a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 </table>
 These shortands specify the corresponding start/end values. If one value is specified it is used for both start/end.
 <h2 class="heading settled" data-level="4" id="row-rule-props">4. Row Rule Style and Color<a class="self-link" href="#row-rule-props"></a></h2>
 <h3 class="heading settled" data-level="4.1" id="row-rule-style">4.1. The <a class="property" data-link-type="propdesc" href="#propdef-row-rule-style" id="ref-for-propdef-row-rule-style">row-rule-style</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-color" id="ref-for-propdef-row-rule-color">row-rule-color</a> Properties<a class="self-link" href="#row-rule-style"></a></h3>
 <table class="def propdef" data-link-for-hint="row-rule-style">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-style">row-rule-style</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-style" id="ref-for-typedef-line-style" title="Expands to: dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid"><line-style></a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>none
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①①">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①①">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①①">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①①">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group①①">table-row-group</a> containers
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>no
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>N/A
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>specified keyword
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>discrete
 </table>
 <table class="def propdef" data-link-for-hint="row-rule-color">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-color">row-rule-color</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-4/#typedef-color" id="ref-for-typedef-color" title="Expands to: aliceblue | antiquewhite | aqua | aquamarine | azure | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | cadetblue | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | currentcolor | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | green | greenyellow | grey | honeydew | hotpink | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | magenta | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | none | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | tomato | transparent | turquoise | violet | wheat | white | whitesmoke | yellow | yellowgreen"><color></a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>currentcolor
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①②">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①②">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①②">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①②">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group①②">table-row-group</a> containers
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>no
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>N/A
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>computed color
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>by computed value type
 </table>
 These properties are the same as the column- properties but for the row rules.
 <h3 class="heading settled" data-level="4.2" id="row-rule">4.2. The <a class="property" data-link-type="propdesc" href="#propdef-row-rule" id="ref-for-propdef-row-rule">row-rule</a> Shorthand<a class="self-link" href="#row-rule"></a></h3>
 This shorthand works the same as column-rule.
 <table class="def propdef" data-link-for-hint="row-rule">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule">row-rule</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-row-rule-width" id="ref-for-propdef-row-rule-width①"><'row-rule-width'></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any②">||</a> <a class="production" data-link-type="propdesc" href="#propdef-row-rule-style" id="ref-for-propdef-row-rule-style①"><'row-rule-style'></a> || <a class="production" data-link-type="propdesc" href="#propdef-row-rule-color" id="ref-for-propdef-row-rule-color①"><'row-rule-color'></a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>see individual properties
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 </table>
 <a class="self-link" href="#issue-53073ff7"></a> lots of new possible shorthands... we now have many
 properties (and shorthands) with a column-rule and row-rule prefix.
 Should we add shorthands for some of those with a <a class="property" data-link-type="propdesc">rule</a> prefix to specify
 both axes, like so: 'rule-foo: <row-rule-foo> <column-rule-foo>?'.
 As usual, we have to be careful with the separator though, to make it
 forward-compatible with any changes we might want to make...
 <h2 class="heading settled" data-level="5" id="rule-align">5. Rule Alignment<a class="self-link" href="#rule-align"></a></h2>
 <h3 class="heading settled" data-level="5.1" id="column-rule-align">5.1. The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-align" id="ref-for-propdef-column-rule-align">column-rule-align</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-align" id="ref-for-propdef-row-rule-align">row-rule-align</a> Properties<a class="self-link" href="#column-rule-align"></a></h3>
 <table class="def propdef" data-link-for-hint="column-rule-align">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-align">column-rule-align</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-align">row-rule-align</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod">[gap <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> gap-center | gap-over | rule | rule-center | rule-over]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range①">{1,2}</a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>gap
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①③">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①③">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①③">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①③">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group①③">table-row-group</a> containers
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>no
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>N/A
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>the specified value
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>discrete
 </table>
 These properties specify the start/end attachment point of the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①①②">rule containing rectangle</a> in the <a data-link-type="dfn" href="#longitudinal-axis" id="ref-for-longitudinal-axis④">longitudinal axis</a>. The start value is specified first, the end value second.
 If only one value is specified it is used for both start and end.
 These properties are only used for interior edges. The <a class="property" data-link-type="propdesc">*-rule-edge-align</a> properties
 described below specify the alignment on the outer edges. The initial value, gap,
 means that, by default, a rule will stretch its longitudinal size to fill the space
 from the end of the gap "above" to the start of the gap "below" ("above" meaning the gap
 in the orthogonal axis on the rule’s start side).
 <aside class="example" id="example-d52ec54e">
 <a class="self-link" href="#example-d52ec54e"></a> This <a href="examples/grid-align-001.html">example</a> illustrates a few alignment options.
 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 the rule-center position
 from the gap-center position)
 <figure>
 <img height="596" src="media/grid-align-001.png" width="692">
 <figcaption> Example of <a class="property" data-link-type="propdesc" href="#propdef-row-rule-align" id="ref-for-propdef-row-rule-align①">row-rule-align</a> in a grid container. </figcaption>
 </figure>
 You might be wondering if there’s a bug in the bottom-right example.
 Why is the gap-over not honored there?
 That’s a non-interior rule edge and it’s controlled separately with row-rule-edge-align, see below.
 </aside>
 <h3 class="heading settled" data-level="5.2" id="column-rule-edge-align">5.2. The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-edge-align" id="ref-for-propdef-column-rule-edge-align">column-rule-edge-align</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-edge-align" id="ref-for-propdef-row-rule-edge-align">row-rule-edge-align</a> Properties<a class="self-link" href="#column-rule-edge-align"></a></h3>
 <table class="def propdef" data-link-for-hint="column-rule-edge-align">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-edge-align">column-rule-edge-align</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-edge-align">row-rule-edge-align</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod">[gap <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑦">|</a> gap-center | gap-over]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range②">{1,2}</a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>gap
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①④">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①④">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①④">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①④">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group①④">table-row-group</a> containers
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>no
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>N/A
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>the specified value
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>discrete
 </table>
 These properties specify the start/end attachment point of the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①①③">rule containing rectangle</a> in the <a data-link-type="dfn" href="#longitudinal-axis" id="ref-for-longitudinal-axis⑤">longitudinal axis</a> for the outer edges only. That is, the start edge of the first rule
 and the end edge of the last rule (which may be the same rule).
 The start value is specified first, the end value second. If only one value is specified it
 is used for both start and end. (Attachment points for the interior rule edges are
 specified with the <a href="#column-rule-align"><a class="property" data-link-type="propdesc">*-rule-align</a></a> properties above.)
 Note: The rule/rule-center/rule-over keywords are omitted here (compared with column-rule-align) since there are no rules in the edge gutters.
 The figure below illustrates the alignment values.
 The red values are used for the top column rule’s start edge and the yellow
 values are used for its end edge. The yellow values are also used for the bottom
 column rule’s start edge. However, in this
 case the roles of gap / gap-over and rule / rule-over are swapped. It’s only the
 center values that are shared. Also note that gap-center isn’t necessarily aligned with rule-center. In this case they aren’t
 aligned because the row rule (purple) is using a lateral start inset. The cyan colored
 values are used for the bottom column border’s end edge. (If the top border were to
 stretch over the entire grid, then they would be used for its end edge.)
 column-rule-edge-align controls which of the red and cyan colored
 attachment points should be used. column-rule-edge-align the yellow colored
 ones (and all other interior edges if there were more rows).
 <figure>
 <img height="585" src="media/rule-alignment-values.png" width="621">
 <figcaption> Illustration of rule alignment values. </figcaption>
 </figure>
 Here’s the rule styling used for the above example:
<pre class="language-css highlight"> <c- k>column-rule</c-><c- p>:</c-> <c- m>14</c-><c- k>px</c-> solid blue<c- p>;</c->
 <c- k>column-rule-align</c-><c- p>:</c-> rule-center rule<c- p>;</c->
 <c- k>column-rule-edge-align</c-><c- p>:</c-> gap-center gap-over<c- p>;</c->

 <c- k>row-rule</c-><c- p>:</c-> <c- m>16</c-><c- k>px</c-> solid #7000ff<c- p>;</c->
 <c- k>row-rule-lateral-inset-start</c-><c- p>:</c-> <c- m>30</c-><c- k>px</c-><c- p>;</c->
</pre>
 The alignment points follow the same pattern in the other axis for the row rules.
 In this case the row rule is using the initial values (gap)
 so they align with the inline axis gap edges.
 <a class="self-link" href="#issue-13842b6f"></a> Are there use cases for other box-related edge attachment points?
 e.g. 'padding | padding-center | padding-over | border...'
 <h2 class="heading settled" data-level="6" id="rule-extent">6. Rule Extent<a class="self-link" href="#rule-extent"></a></h2>
 <h3 class="heading settled" data-level="6.1" id="column-rule-extent">6.1. The <a class="property" data-link-type="propdesc" href="#propdef-column-rule-extent" id="ref-for-propdef-column-rule-extent">column-rule-extent</a> and <a class="property" data-link-type="propdesc" href="#propdef-row-rule-extent" id="ref-for-propdef-row-rule-extent">row-rule-extent</a> Properties<a class="self-link" href="#column-rule-extent"></a></h3>
 <table class="def propdef" data-link-for-hint="column-rule-extent">
 <tbody>
 <tr>
 <th>Name:
 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-extent">column-rule-extent</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-extent">row-rule-extent</dfn>
 <tr class="value">
 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a>
 <td class="prod">[segment <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑨">|</a> start | end | short | long | all-start | all-end | all-short | all-long ] allow-overlap<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑥">?</a>
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a>
 <td>long
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a>
 <td><a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①⑤">multi-column containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①⑤">flex containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⑤">grid containers</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①⑤">table</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group①⑤">table-row-group</a> containers
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a>
 <td>no
 <tr>
 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a>
 <td>N/A
 <tr>
 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a>
 <td>the specified value
 <tr>
 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a>
 <td>per grammar
 <tr>
 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
 <td>discrete
 </table>
 <a class="self-link" href="#issue-70dc1ba4"></a> perhaps make <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-box-4/#valdef-margin-trim-all" id="ref-for-valdef-margin-trim-all">all</a> a separate keyword? like so: [segment | [[start | end | short | long] all?] ] allow-overlap?
 These properties specify the extent of the rule in its <a data-link-type="dfn" href="#longitudinal-axis" id="ref-for-longitudinal-axis⑥">longitudinal axis</a>. <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="segment">segment</dfn> is an abstract term to describe the distance between two consecutive gaps.
 An extent can cover one or more segments and the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="extent-size">extent size</dfn> is the distance between
 the start position of the first of those segments and the end position of the last segment.
 We’ll define segment in more detail in the container-specific sub-sections that follow.
 The allow-overlap only affects rules in grid and table layout with spanning items/cells.
 It controls whether a rule should continue through such a span.
 Note: It’s only an item’s <a href="https://drafts.csswg.org/css-grid/#grid-span">grid span</a> that are considered when determining if an item is spanning or not, not its layout position or size.
 The all-* values makes a rule extend over all segments in an axis,
 subject to not being interrupted by a span. In grid and table layout, where the tracks/table groups/rows
 all have the same length in a rule’s longitudinal axis, all the all-* have
 the same behavior. They are intended for flexbox and masonry layout, where the gaps may fall at different
 positions in adjacent flex lines and masonry tracks.
 The lateral position of a rule is determined by its first segment.
 The following sub-sections will describe the rule extent for each type of layout container in more detail.
 <h4 class="heading settled" data-level="6.1.1" id="rule-extent-grid">6.1.1. Grid Containers<a class="self-link" href="#rule-extent-grid"></a></h4>
 In a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⑥">grid container</a>, gaps are placed between tracks, so the segment value maps to the extent of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-cell" id="ref-for-grid-cell">grid cell</a>.
 This <a href="examples/grid-segment-001.html">example</a> illustrates segment rules.
 Note that rules are generated in all gaps, whether there are items in a grid cell or not.
 <aside class="example" id="example-9ccc5773">
 <a class="self-link" href="#example-9ccc5773"></a>
 <figure>
 <img height="228" src="media/grid-segment-001.png" width="312">
 <figcaption> Example of column and row rules with segment extent in a grid container. </figcaption>
 </figure>
 </aside>
 <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#collapsed-track" id="ref-for-collapsed-track">Collapsed tracks</a> don’t count -- they don’t generate gaps and thus don’t have gap rules.
 They generally behave as if they don’t exist as far as rules are concerned.
 The <a href="examples/grid-segment-002.html">example</a> below also
 illustrates that the position and size of the items don’t affect the rules; it’s only the position and size
 of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-cell" id="ref-for-grid-cell①">grid cells</a> that count.
 <aside class="example" id="example-9818bbbb">
 <a class="self-link" href="#example-9818bbbb"></a>
 <figure>
 <img height="228" src="media/grid-segment-002.png" width="608">
 <figcaption> Example of column and row rules with in a grid container with <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#collapsed-track" id="ref-for-collapsed-track①">collapsed tracks</a>. </figcaption>
 </figure>
 </aside>
 Rules behave symmetrically in the grid axes, but a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-3/#masonry-axis" id="ref-for-masonry-axis">masonry axis</a> in a <a href="https://drafts.csswg.org/css-grid-3">masonry grid layout</a> behaves
 differently; we’ll cover that case in a separate <a href="#rule-extent-masonry">section</a> later.
 In a grid axis, rules are created between adjacent (non-collapsed) tracks and their <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size">extent sizes</a> are controlled by the column-rule-extent/row-rule-extent values as follows:
 <dl>
 <dt><dfn class="css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-segment">segment<a class="self-link" href="#valdef-row-rule-extent-segment"></a></dfn>
 <dd>the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size①">extent size</a> is the size of <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-cell" id="ref-for-grid-cell②">grid cell</a> in the relevant axis
 <dt><dfn class="css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-start">start<a class="self-link" href="#valdef-row-rule-extent-start"></a></dfn>
 <dd>the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size②">extent size</a> is the size of the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span">next grid cell span</a> in the start-most of the two adjacent tracks
 <dt><dfn class="css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-end">end<a class="self-link" href="#valdef-row-rule-extent-end"></a></dfn>
 <dd>the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size③">extent size</a> is the size of the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span①">next grid cell span</a> in the end-most of the two adjacent tracks
 <dt><dfn class="dfn-paneled css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-short">short</dfn>
 <dd>the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size④">extent size</a> is the smaller of the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span②">next grid cell span</a> sizes of the two adjacent tracks
 <dt><dfn class="dfn-paneled css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-long">long</dfn>
 <dd>the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size⑤">extent size</a> is the larger of the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span③">next grid cell span</a> sizes of the two adjacent tracks
 <dt><dfn class="css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-all-start">all-start<a class="self-link" href="#valdef-row-rule-extent-all-start"></a></dfn>, <dfn class="css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-all-end">all-end<a class="self-link" href="#valdef-row-rule-extent-all-end"></a></dfn>, <dfn class="css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-all-short">all-short<a class="self-link" href="#valdef-row-rule-extent-all-short"></a></dfn>, <dfn class="css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-all-long">all-long<a class="self-link" href="#valdef-row-rule-extent-all-long"></a></dfn>
 <dd>the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size⑥">extent size</a> is the length of the track in the relevant axis
 (they all behave the same because all tracks in a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid" id="ref-for-grid">grid</a> axis have the same size)
 <dt><dfn class="css" data-dfn-for="row-rule-extent" data-dfn-type="value" data-export id="valdef-row-rule-extent-allow-overlap">allow-overlap<a class="self-link" href="#valdef-row-rule-extent-allow-overlap"></a></dfn>
 <dd>controls whether the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span④">next grid cell span</a> stops short of a cell which has an item spanning
 over the gap (see the <a href="#rule-extent-grid-algorithm">algorithm</a> below)
 </dl>
 The following algorithm determines the rule segments to create in an axis and their <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size⑦">extent sizes</a>.
 For each pair of adjacent tracks, we first find the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="next-grid-cell-span">next grid cell span</dfn> for
 each track. Then select one of those per the property values above.
 For each pair of adjacent tracks, start by setting each track’s <var>current cell</var> to
 be its first cell in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#implicit-grid" id="ref-for-implicit-grid">implicit grid</a>, then:
 <ol id="rule-extent-grid-algorithm">
 <li>if allow-overlap was not specified, and the <var>current cell</var> in
 the start-most of the pair of tracks contains an item that spans into the end-most of the tracks,
 then skip this cell and let the <var>current cell</var> of each track be the cell after it,
 then go to step 1 or exit if there are no more cells
 <li>if the *-rule-extent is one of the all-* values,
 then the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span⑤">next grid cell span</a> is the span of cells from the <var>current cell</var> to
 last cell in the track (inclusive); if allow-overlap was not specified,
 then stop before the first (opposite axis) track that contains an item spanning between this
 pair of tracks
 <li>otherwise, if the <var>current cell</var> is empty, or *-rule-extent is segment,
 then the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span⑥">next grid cell span</a> of that track is the <var>current cell</var>
 <li>otherwise, if the <var>current cell</var> contains items that are spanning in the same axis,
 then that track’s <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span⑦">next grid cell span</a> is the longest of those spans;
 if allow-overlap was not specified, then stop before
 the first (opposite axis) track that contains an item spanning between this pair of tracks
 <li>
 create a rule segment with the following <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size⑧">extent size</a>:
 <ol type="lower-alpha">
 <li>for short(long),
 the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size⑨">extent size</a> is the length of the shortest(longest) of
 the two <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span⑧">next grid cell spans</a>
 <li>for start(end),
 the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size①⓪">extent size</a> is the length of the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span⑨">next grid cell span</a> of the start-most(end-most) track
 <li>for all-*,
 the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size①①">extent size</a> is the length of the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span①⓪">next grid cell span</a> (which is always the same for the two tracks)
 </ol>
 <li>set the <var>current cell</var> to the next cell, in each track, that is after the last cell
 of the <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span①①">next grid cell span</a> that we picked in the steps above; exit if there are no more cells;
 otherwise, go to step 1.
 </ol>
 <aside class="example" id="example-a07793b6">
 <a class="self-link" href="#example-a07793b6"></a> This <a href="examples/grid-extent-001.html">example</a> demonstrates the difference between
 the row-rule-extent values in a grid with spanning items. The grid has seven columns.
 The grid items are semi-transparent to show any rules or overlapping items under them.
 Item 7 for example has <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-column" id="ref-for-propdef-grid-column">grid-column: 2 / span 3</a> and item 3 has <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-row" id="ref-for-propdef-grid-row">grid-row: 1 / span 2</a>.
 They are both forced to span into the cell in row 2, column 4 to illustrate what happens
 when items span like this.
 <figure>
 <img height="811" src="media/grid-extent-001.png" width="805">
 <figcaption> Examples of row-rule-extent in a grid container. </figcaption>
 </figure>
 </aside>
 <h5 class="heading settled" data-level="6.1.1.1" id="rule-extent-subgrid">6.1.1.1. Subgrid<a class="self-link" href="#rule-extent-subgrid"></a></h5>
 A subgrid creates its own set of gap rules. It uses its own gaps, which are centered with, but
 may have a different size than the ancestor grid(s), as described in <a href="https://drafts.csswg.org/css-grid/#subgrids">subgrids</a>.
 Other than that, rules are created inside a subgrid in the same way as in a regular grid.
 A grid item that is a subgrid affects its parent grid’s rule formation exactly as
 a regular non-subgrid item would (whether the parent is also a subgrid or not),
 i.e. its span (if any) affects the <a href="#rule-extent-grid-algorithm">algorithm</a> above in the same way.
 allow-overlap can be used in the parent to extend its rules under
 the subgrid. The subgrid’s rules, if any, are rendered by the subgrid and thus render
 on top of the parent, as usual.
 When the subgrid determines its rule extents, it does not consider any items that
 aren’t its own grid items, i.e. any items in an ancestor grid that have been placed into
 the same grid cell that the subgrid occupies are not considered. Furthermore, it only uses
 its own local gap and rule metrics for positioning and sizing its rules. It doesn’t
 consider any gaps or rules that originate outside of the subgrid.
 <aside class="example" id="example-c3d8a4e8">
 <a class="self-link" href="#example-c3d8a4e8"></a> This <a href="examples/grid-subgrid-001.html">example</a> illustrates that
 a subgrid uses its own local gap and rule metrics for positioning and sizing
 its rules. It also shows what happens when a parent rule crosses a subgrid item.
 Note that the parent’s column rule passing through the subgrid is not used for
 the <a class="css" data-link-type="propdesc" href="#propdef-row-rule-align" id="ref-for-propdef-row-rule-align②">row-rule-align: rule</a> in the subgrid. The subgrid is in fact completely
 unaware of any parent rules.
 <figure>
 <img height="256" src="media/grid-subgrid-001.png" width="826">
 <figcaption> Example of gap rules in a subgrid. </figcaption>
 </figure>
 </aside>
 <h5 class="heading settled" data-level="6.1.1.2" id="rule-extent-masonry">6.1.1.2. Masonry<a class="self-link" href="#rule-extent-masonry"></a></h5>
 Masonry layout has one grid axis (which may be <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#subgrid" id="ref-for-subgrid">subgridded</a>) and one <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-3/#masonry-axis" id="ref-for-masonry-axis①">masonry axis</a>.
 The grid axis works the same as has been described above. The masonry axis is special
 since an item is placed into a grid track based on the layout size of the items before
 it, so they are typically not aligned over the tracks. Furthermore,
 the grid tracks may have a different start position
 (due to masonry axis <a href="https://drafts.csswg.org/css-grid-3/#tracks-alignment">alignment</a>)
 and size.
 <aside class="example" id="example-7a037cfa">
 <a class="self-link" href="#example-7a037cfa"></a> This <a href="examples/grid-masonry-001.html">example</a> illustrates a few
 variations of rules in a masonry grid layout. All the grids have <a class="css" data-link-type="propdesc" href="#propdef-column-rule-edge-align" id="ref-for-propdef-column-rule-edge-align①">column-rule-edge-align: gap-over</a> to extend the edge rules out to
 the content-box edge.
 <figure>
 <img height="785" src="media/grid-masonry-001.png" width="691">
 <figcaption> Example of gap rules in a masonry grid. </figcaption>
 </figure>
 </aside>
 <aside class="example" id="example-a0ffc13c">
 <a class="self-link" href="#example-a0ffc13c"></a> This <a href="examples/grid-masonry-002.html">example</a> illustrates
 some of the <a class="css" data-link-type="propdesc" href="#propdef-column-rule-extent" id="ref-for-propdef-column-rule-extent①">column-rule-extent: all-*</a> values.
 <figure>
 <img height="772" src="media/grid-masonry-002.png" width="730">
 <figcaption> Example of gap rules in a masonry grid. </figcaption>
 </figure>
 </aside>
 <a class="self-link" href="#issue-b6f1d65c"></a> TODO: add definition list and algorithm here...
 <a class="self-link" href="#issue-3e9abc31"></a> is it useful to be able to create a rule extent for the intersection or union between two tracks, like so: <img height="435" src="media/masonry-all-shorter.png" style="display:block" width="701">It’s pretty easy to implement, fwiw... (I accidently implemented short/long like that before I realized it was inconsistent with how they work elsewhere). I think it’s a case that is unique to a masonry axis though, at least currently...
 <h4 class="heading settled" data-level="6.1.2" id="rule-extent-flexbox">6.1.2. Flex Containers<a class="self-link" href="#rule-extent-flexbox"></a></h4>
 In a <a href="https://drafts.csswg.org/css-flexbox/#valdef-flex-direction-row">row-oriented flex container</a>,
 the row-rule-* properties creates rules between flex lines,
 and the column-rule-* properties creates rules between <a href="css-flexbox">flex items</a> within a <a href="cs-flexbox">flex line</a>.
 In <a href="https://drafts.csswg.org/css-flexbox/#valdef-flex-direction-row">column-oriented flex container</a>,
 the roles of row-rule-extent and column-rule-extent are swapped. For the rest of this sub-section we
 will describe the row-oriented case (just swap column/row in the text below to get the column-oriented case).
 Flex items can’t span multiple lines so there are no collisions possible for the main axis rules,
 hence the allow-overlap keyword is ignored in flex layout in the main axis.
 A subsequent flex line is considered as a collision for the cross axis rules, i.e. a cross axis rule
 has the extent of one flex line, unless allow-overlap is used (together with
 one the all-* values). The reason is that items in different lines
 typically don’t line up in a way that the gaps between items are aligned across the lines
 (unless an author is very careful to arrange that), so this is to have a safe default behavior.
 all-long allow-overlap can be used to override that and
 the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size①②">extent size</a> is then from the cross axis start edge of the first flex line
 to the cross axis end edge of the last flex line (all the all-* behave the same).
 Only the first flex line creates column rules in this case,
 and the rule’s lateral position is taken from the gap in the first line.
 Authors are advised to not use the allow-overlap value in
 the main axis of a multi-line flex container since it’s likely to make items
 on subsequent lines overlap the rules. It may be used when all flex items are
 guaranteed to have the exact same main axis <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#outer-size" id="ref-for-outer-size">outer size</a> and align such that
 the gaps are aligned between all the lines.
 Rules are created between adjacent flex lines, and their <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size①③">extent sizes</a> are controlled by
 the row-rule-extent values defined as follows:
 <dl>
 <dt>segment
 <dd>behaves as <a class="css" data-link-type="maybe" href="#valdef-row-rule-extent-short" id="ref-for-valdef-row-rule-extent-short">short</a>
 <dt>start
 <dd>use the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#outer-size" id="ref-for-outer-size①">outer size</a> of the items in the flex line on the block axis start side
 <dt>end
 <dd>use the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#outer-size" id="ref-for-outer-size②">outer size</a> of the items in the flex line on the block axis end side
 <dt>short
 <dd>use the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#outer-size" id="ref-for-outer-size③">outer size</a> of the <a data-link-type="dfn" href="#next-flex-line-item" id="ref-for-next-flex-line-item">next flex line item</a> which has the smaller size (see detailed algorithm below)
 <dt>long
 <dd>use the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#outer-size" id="ref-for-outer-size④">outer size</a> of the <a data-link-type="dfn" href="#next-flex-line-item" id="ref-for-next-flex-line-item①">next flex line item</a> which has the larger size (see detailed algorithm below)
 <dt>all-start
 <dd>the distance between the start position of the first item to the end position of the last item on the start side flex line
 <dt>all-end
 <dd>the distance between the start position of the first item to the end position of the last item on the end side flex line
 <dt>all-short
 <dd>the distance between the end-most start position of the first item on each flex line to the start-most end position of the last item on each flex line
 <dt>all-long
 <dd>the distance between the start-most start position of the first item on each flex line to the end-most end position of the last item on each flex line
 <dt>allow-overlap
 <dd>is ignored in this axis since flex items can’t span between flex lines so there are no collisions (as defined in this spec)
 </dl>
 The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="next-flex-line-item">next flex line item</dfn> is assigned by the following algorithm.
 For each pair of adjacent flex lines, start with assigning the <a data-link-type="dfn" href="#next-flex-line-item" id="ref-for-next-flex-line-item②">next flex line item</a> to
 the first item (in <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#order-modified-document-order" id="ref-for-order-modified-document-order">order-modified document order</a>) on the respective line, then:
 <ol id="rule-extent-flexbox-algorithm" start="0">
 <li>exit if neither line has a <a data-link-type="dfn" href="#next-flex-line-item" id="ref-for-next-flex-line-item③">next flex line item</a>
 <li>
 <ol type="lower-alpha">
 <li>if only one line has a <a data-link-type="dfn" href="#next-flex-line-item" id="ref-for-next-flex-line-item④">next flex line item</a> then pick that item and go to 2
 <li>if either of the two <a data-link-type="dfn" href="#next-flex-line-item" id="ref-for-next-flex-line-item⑤">next flex line items</a> has a start position that is
 beyond the other item’s end position, then pick the start-most item and go to 2.
 <li>otherwise, pick the item with the smallest(largest) <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#outer-size" id="ref-for-outer-size⑤">outer size</a> for <a class="css" data-link-type="maybe" href="#valdef-row-rule-extent-short" id="ref-for-valdef-row-rule-extent-short①">short</a>(<a class="css" data-link-type="maybe" href="#valdef-row-rule-extent-long" id="ref-for-valdef-row-rule-extent-long">long</a>)
 </ol>
 <li>use the picked item’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#outer-size" id="ref-for-outer-size⑥">outer size</a> as this rule segment’s <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size①④">extent size</a>, then change
 the <a data-link-type="dfn" href="#next-flex-line-item" id="ref-for-next-flex-line-item⑥">next flex line item</a> for the picked item’s line to the next item on its line
 <li>assign the <a data-link-type="dfn" href="#next-flex-line-item" id="ref-for-next-flex-line-item⑦">next flex line item</a> for the other line to the next item on this line
 that has an inline start position that is greater than the end position of the picked item
 </ol>
 (start/end position and sizes above are referring to the item’s margin-box in
 the rule’s longitudinal axis; the phrase "next item" refers to the next item
 in <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#order-modified-document-order" id="ref-for-order-modified-document-order①">order-modified document order</a>)
 <aside class="example" id="example-374fda56">
 <a class="self-link" href="#example-374fda56"></a> Here are a few examples to illustrate the row-rule-extent values.
 <figure>
 <img height="194" src="media/flexbox-extent-start-001.png" width="314">
 <figcaption> A <a class="css" data-link-type="propdesc" href="#propdef-row-rule-extent" id="ref-for-propdef-row-rule-extent①">row-rule-extent: start</a> <a href="examples/flexbox-extent-start-001.html">example</a>. </figcaption>
 </figure>
 <figure>
 <img height="194" src="media/flexbox-extent-end-001.png" width="314">
 <figcaption> A <a class="css" data-link-type="propdesc" href="#propdef-row-rule-extent" id="ref-for-propdef-row-rule-extent②">row-rule-extent: end</a> <a href="examples/flexbox-extent-end-001.html">example</a>. </figcaption>
 </figure>
 <figure>
 <img height="194" src="media/flexbox-extent-long-001.png" width="314">
 <figcaption> A <a class="css" data-link-type="propdesc" href="#propdef-row-rule-extent" id="ref-for-propdef-row-rule-extent③">row-rule-extent: long</a> <a href="examples/flexbox-extent-long-001.html">example</a>. </figcaption>
 </figure>
 <figure>
 <img height="194" src="media/flexbox-extent-all-short-001.png" width="314">
 <figcaption> A <a class="css" data-link-type="propdesc" href="#propdef-row-rule-extent" id="ref-for-propdef-row-rule-extent④">row-rule-extent: all-short</a> <a href="examples/flexbox-extent-all-short-001.html">example</a>. </figcaption>
 </figure>
 <figure>
 <img height="194" src="media/flexbox-extent-all-long-001.png" width="314">
 <figcaption> A <a class="css" data-link-type="propdesc" href="#propdef-row-rule-extent" id="ref-for-propdef-row-rule-extent⑤">row-rule-extent: all-long</a> <a href="examples/flexbox-extent-all-long-001.html">example</a>. </figcaption>
 </figure>
 </aside>
 <aside class="example" id="example-b631e64a">
 <a class="self-link" href="#example-b631e64a"></a> This is an <a href="examples/flexbox-extent-all-long-allow-overlap-001.html">example</a> to illustrate
 what happens when an <a class="css" data-link-type="propdesc" href="#propdef-column-rule-extent" id="ref-for-propdef-column-rule-extent②">column-rule-extent: all-long allow-overlap</a> rule is
 used and the gaps aren’t aligned. (The flex items are semi-transparent
 to show the column rules underneath).
 <figure>
 <img height="194" src="media/flexbox-extent-all-long-allow-overlap-001.png" width="314">
 <figcaption> A <a class="css" data-link-type="propdesc" href="#propdef-column-rule-extent" id="ref-for-propdef-column-rule-extent③">column-rule-extent: all-long allow-overlap</a> example. </figcaption>
 </figure>
 </aside>
 <h4 class="heading settled" data-level="6.1.3" id="rule-extent-table">6.1.3. Table Containers<a class="self-link" href="#rule-extent-table"></a></h4>
 A <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①⑥">table</a> container creates rules between its <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-column-group" id="ref-for-table-column-group">table-column-groups</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group①⑥">table-row-groups</a>. <a href="https://drafts.csswg.org/css-tables/#visibility-collapse-rendering">Collapsed</a> column-groups and row-groups are treated as if they don’t exist.
 Column rules (between table-column-groups) collide with table-row-groups.
 Row rules (between table-row-groups) collide with table-column-groups.
 The allow-overlap can be used to create rules that extend over
 the entire column/row length. Given that all table-column-groups have the same block
 axis size and all table-row-groups have same the inline axis size,
 the short/long/start/end keywords behave the same. Ditto for the all-* keywords.
 <aside class="example" id="example-5015561d">
 <a class="self-link" href="#example-5015561d"></a> Note, column 2 is collapsed in this example.
 <figure>
 <img height="346" src="media/table-rules-001.png" width="818">
 <figcaption> An <a href="examples/table-rules-001.html">example</a> of table rules. </figcaption>
 </figure>
 </aside>
 <a class="self-link" href="#issue-0ca7394a"></a> sort out if non-collapsed column-groups that only contain collapsed columns should generate rules, ditto row-groups/rows
 <h4 class="heading settled" data-level="6.1.4" id="rule-extent-table-row-group">6.1.4. Table Row Group Containers<a class="self-link" href="#rule-extent-table-row-group"></a></h4>
 A <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row-group" id="ref-for-table-row-group②⓪">table-row-group</a> container creates rules between its <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row" id="ref-for-table-row">table-rows</a> and between each <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-cell" id="ref-for-table-cell">table-cell</a> in a row. Collapsed table-rows are treated as if they don’t exist.
 Collapsed <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-column" id="ref-for-table-column">table-columns</a> are treated as if they don’t exist.
 Row rules (between <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-row" id="ref-for-table-row②">table-rows</a>) collide with cells that have
 a row <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#span" id="ref-for-span">span</a> crossing it.
 Column rules (between <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-cell" id="ref-for-table-cell①">table-cells</a>) collide with cells that have
 a column span crossing it. allow-overlap can be used to create rules that
 extend over such spanning cells.
 <aside class="example" id="example-2d35e879">
 <a class="self-link" href="#example-2d35e879"></a> This <a href="examples/table-row-group-rules-001.html">example</a> illustrates rules between
 table rows and cells. And also what happens when the table rules from
 the last example is also applied.
 <figure>
 <img height="784" src="media/table-row-group-rules-001.png" width="879">
 <figcaption> Example of table row and cell rules. </figcaption>
 </figure>
 </aside>
 visibility:collapse on <a data-link-type="dfn">table-cells</a> does not affect the rules in any way.
 <h4 class="heading settled" data-level="6.1.5" id="rule-extent-multicol">6.1.5. Multi-Column Containers<a class="self-link" href="#rule-extent-multicol"></a></h4>
 <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①⑥">Multi-column containers</a> already support rendering column rules between their columns.
 That’s now extended with all the new features described above. The changes described
 above are backwards-compatible with existing web content that use valid column-rule style values. Some previously invalid column-rule values are now valid though, which could cause problems. For example, <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width" id="ref-for-propdef-column-rule-width④">column-rule-width: 100%</a>, which
 previously would not parse, will now start doing something.
 The row-rule-* properties apply to <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①⑦">multi-column containers</a>, and create
 row rules between <a href="https://drafts.csswg.org/css-multicol-1/#multi-column-line">multicol lines</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#spanner" id="ref-for-spanner">spanners</a>,
 separating them in the block axis.
 The <a data-link-type="dfn" href="#segment" id="ref-for-segment">segments</a> are the columns and the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-box-4/#valdef-box-margin-box" id="ref-for-valdef-box-margin-box">margin-box</a> of <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#spanner" id="ref-for-spanner①">spanners</a>.
 <a class="self-link" href="#issue-409a7220"></a> this proposal makes the assumption that the related proposal that row-gap should apply to multi-column containers is also adopted
 (<a href="https://github.com/w3c/csswg-drafts/issues/6746">issue #6746</a>).
 <aside class="example" id="example-b0c3427d">
 <a class="self-link" href="#example-b0c3427d"></a> This <a href="examples/multicol-row-rule-001.html">example</a> illustrates rules in
 a multi-column container.
 <figure>
 <img height="854" src="media/multicol-row-rule-001.png" width="827">
 <figcaption> Example of column and row rules in a multi-column. </figcaption>
 </figure>
 </aside>
 <aside class="example" id="example-1f836c9e">
 <a class="self-link" href="#example-1f836c9e"></a> If <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container①⑧">multi-column containers</a> add support for
 'column-span: <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value"><integer></a>' some time in the future,
 this is how row rules will work:
 <figure>
 <img height="195" src="media/multicol-colspan-2.png" width="808">
 <figcaption> Example of <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-multicol-2/#propdef-column-span" id="ref-for-propdef-column-span">column-span: 2</a> in a multi-column with column and row rules. </figcaption>
 </figure>
 </aside>
 <h2 class="heading settled" data-level="7" id="rule-containing-rectangle">7. The Rule Containing Rectangle<a class="self-link" href="#rule-containing-rectangle"></a></h2>
 The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="rule-containing-rectangle①">rule containing rectangle</dfn> is formed by the <a href="#rule-extent">rule extent</a> and <a href="#rule-align">alignment</a> in the <a data-link-type="dfn" href="#longitudinal-axis" id="ref-for-longitudinal-axis⑦">longitudinal axis</a>, and by the size of the <a href="https://drafts.csswg.org/css-align/#gutter">gutter</a> in the <a data-link-type="dfn" href="#lateral-axis" id="ref-for-lateral-axis④">lateral axis</a>.
 (For clarity, the size of the gutter is calculated from the <a href="https://drafts.csswg.org/css-align/#gaps">gap</a> properties plus any extra space contributed by <a href="https://drafts.csswg.org/css-align/#distribution-values">alignment distribution</a> but does not include any item margins.)
 It is important to note that the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①①④">rule containing rectangle’s</a> size in an axis isn’t affected by any of
 the <a href="#column-rule-lateral-inset">inset properties</a> in the same axis as that would lead to a circular
 dependency when resolving inset percentage values. (The rule containing rectangle is the percentage basis
 for all the rule properties which take percentage values.) However, a rule that uses <a class="css" data-link-type="propdesc" href="#propdef-column-rule-align" id="ref-for-propdef-column-rule-align①">column-rule-align: rule | rule-center | rule-over</a> is affected by the <a href="#column-rule-lateral-inset">lateral inset properties</a> of the rule it aligns to in the opposite axis.
 Here’s an illustration of the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①①⑥">rule containing rectangle</a> (the dashed green rectangle) for the top blue rule.
 This is a 2x2 grid using the default extent, so the <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size①⑤">extent size</a> is the row’s block size.
 It has the following non-default rule properties:
<pre class="language-css highlight"> <c- k>column-rule</c-><c- p>:</c-> <c- m>14</c-><c- k>px</c-> solid blue<c- p>;</c->
 <c- k>column-rule-align</c-><c- p>:</c-> rule<c- p>;</c->
 <c- k>column-rule-edge-align</c-><c- p>:</c-> gap-center<c- p>;</c->
 <c- k>column-rule-longitudinal-inset-end</c-><c- p>:</c-> <c- m>8</c-><c- k>px</c-><c- p>;</c->

 <c- k>row-rule</c-><c- p>:</c-> <c- m>6</c-><c- k>px</c-> solid black<c- p>;</c->
 <c- k>row-rule-lateral-inset-start</c-><c- p>:</c-> <c- m>20</c-><c- k>px</c-><c- p>;</c->
</pre>
 <figure>
 <img height="584" src="media/rule-containing-rectangle.png" width="620">
 <figcaption> The Rule Containing Rectangle </figcaption>
 </figure>
 Note that the <a data-link-type="dfn" href="#rule-containing-rectangle①" id="ref-for-rule-containing-rectangle①①⑦">rule containing rectangle</a> extends to the start of the black horizontal rule, which has a 20px lateral inset (making it non-centered). We align to its start with <a class="css" data-link-type="propdesc" href="#propdef-column-rule-align" id="ref-for-propdef-column-rule-align②">column-rule-align: rule</a>. From there,
 we move the bottom edge of the blue rule up by 8px with <a class="css" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-inset-end" id="ref-for-propdef-column-rule-longitudinal-inset-end①">column-rule-longitudinal-inset-end: 8px</a>.
 The default <a class="css" data-link-type="propdesc" href="#propdef-column-rule-length" id="ref-for-propdef-column-rule-length①">column-rule-length: auto</a> then fills the resulting area. If we were to use column-rule-length: 100% here instead, then the rule would fill the rule containing rectangle vertically, since that’s its percentage basis. (The end inset would then be ignored since the start inset
 is zero by default so the situation is over-constrained, and we resolve by ignoring the end inset, per the <a href="#rule-sizing">sizing rules</a>.)
 <h2 class="heading settled" data-level="8" id="rule-painting-order">8. Rule Painting Order<a class="self-link" href="#rule-painting-order"></a></h2>
 Column and row rules are painted in the same layer as the element’s border.
 They are painted after (on top of) the element’s border.
 All column rules for an element are painted first, then all of its row rules.
 The rules for an axis are painted in the order they were generated by
 the <a href="#rule-extent">rule extent</a> algorithms described above.
 Typically from the logical start to the end of the axis.
 For table layout, all the <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table" id="ref-for-table①⑦">table</a> rules (in both axes)
 are painted before the rules for the row-groups. The painting order between
 multiple row-groups is whatever the <a href="https://drafts.csswg.org/css-tables">table spec</a> specifies. For an individual row-group, the rules are painted in logical
 start to end order in both axes.
 Again, note that for a specific fragment, all the column rules are painted before all the row rules,
 the above merely tries to clarify the painting order of the rules for
 a specific axis.
 <h2 class="heading settled" data-level="9" id="rule-overflow">9. Rule Overflow<a class="self-link" href="#rule-overflow"></a></h2>
 The column and row rule areas contributes to a fragment’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#ink-overflow" id="ref-for-ink-overflow">ink overflow</a>.
 Note that they can overflow an fragment’s border-box due to negative inset
 values etc.
 <aside class="example" id="example-13dcb258">
 <a class="self-link" href="#example-13dcb258"></a> Here’s an <a href="examples/grid-longitudinal-003.html">example</a> showing
 rules that overflow their container and how they are clipped.
 Both grids have large negative insets to extend the rules outside of the container.
 The right grid has <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow: hidden</a> which clips its rules at the padding area edge.
 <figure>
 <img height="680" src="media/grid-longitudinal-003.png" width="771">
 <figcaption> Examples of rule overflow and clipping. </figcaption>
 </figure>
 </aside>
 For clarity, none of the properties in this spec affects layout in any way.
 Column and row rules are purely a painting effect.
 </main>
 <h2 class="no-ref no-num heading settled" id="w3c-conformance"> Conformance<a class="self-link" href="#w3c-conformance"></a></h2>
 <h3 class="no-ref heading settled" id="w3c-conventions"> Document conventions<a class="self-link" href="#w3c-conventions"></a></h3>
 Conformance requirements are expressed with a combination of
 descriptive assertions and RFC 2119 terminology. The key words “MUST”,
 “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
 “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
 document are to be interpreted as described in RFC 2119.
 However, for readability, these words do not appear in all uppercase
 letters in this specification. 
 All of the text of this specification is normative except sections
 explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a>
 Examples in this specification are introduced with the words “for example”
 or are set apart from the normative text with <code>class="example"</code>,
 like this: 
 <div class="example" id="w3c-example">
 <a class="self-link" href="#w3c-example"></a>
 This is an example of an informative example.
 </div>
 Informative notes begin with the word “Note” and are set apart from the
 normative text with <code>class="note"</code>, like this: 
 Note, this is an informative note.
 
 Advisements are normative sections styled to evoke special attention and are
 set apart from other normative text with <code></code>, like
 this: UAs MUST provide an accessible alternative. 
 <details class="wpt-tests-block" dir="ltr" lang="en" open>
 <summary>Tests</summary>
 Tests relating to the content of this specification
 may be documented in “Tests” blocks like this one.
 Any such block is non-normative.
 <ul class="wpt-tests-list"></ul>
 <hr>
 </details>
 
 <h3 class="no-ref heading settled" id="w3c-conformance-classes"> Conformance classes<a class="self-link" href="#w3c-conformance-classes"></a></h3>
 Conformance to this specification
 is defined for three conformance classes: 
 <dl>
 <dt>style sheet
 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
 style sheet</a>.
 <dt>renderer
 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
 documents that use them.
 <dt>authoring tool
 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet.
 </dl>
 A style sheet is conformant to this specification
 if all of its statements that use syntax defined in this module are valid
 according to the generic CSS grammar and the individual grammars of each
 feature defined in this module. 
 A renderer is conformant to this specification
 if, in addition to interpreting the style sheet as defined by the
 appropriate specifications, it supports all the features defined
 by this specification by parsing them correctly
 and rendering the document accordingly. However, the inability of a
 UA to correctly render a document due to limitations of the device
 does not make the UA non-conformant. (For example, a UA is not
 required to render color on a monochrome monitor.) 
 An authoring tool is conformant to this specification
 if it writes style sheets that are syntactically correct according to the
 generic CSS grammar and the individual grammars of each feature in
 this module, and meet all other conformance requirements of style sheets
 as described in this module. 
 <h3 class="no-ref heading settled" id="w3c-partial"> Partial implementations<a class="self-link" href="#w3c-partial"></a></h3>
 So that authors can exploit the forward-compatible parsing rules to
 assign fallback values, CSS renderers must treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
 as appropriate</a>) any at-rules, properties, property values, keywords,
 and other syntactic constructs for which they have no usable level of
 support. In particular, user agents must not selectively
 ignore unsupported component values and honor supported values in a single
 multi-value property declaration: if any value is considered invalid
 (as unsupported values must be), CSS requires that the entire declaration
 be ignored.
 <h4 class="heading settled" id="w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features<a class="self-link" href="#w3c-conform-future-proofing"></a></h4>
 To avoid clashes with future stable CSS features,
 the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. 
 <h3 class="no-ref heading settled" id="w3c-testing"> Non-experimental implementations<a class="self-link" href="#w3c-testing"></a></h3>
 Once a specification reaches the Candidate Recommendation stage,
 non-experimental implementations are possible, and implementors should
 release an unprefixed implementation of any CR-level feature they
 can demonstrate to be correctly implemented according to spec. 
 To establish and maintain the interoperability of CSS across
 implementations, the CSS Working Group requests that non-experimental
 CSS renderers submit an implementation report (and, if necessary, the
 testcases used for that implementation report) to the W3C before
 releasing an unprefixed implementation of any CSS features. Testcases
 submitted to W3C are subject to review and correction by the CSS
 Working Group. 
 Further information on submitting testcases and implementation reports
 can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
 Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list.
<script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script>
 <h2 class="no-num no-ref heading settled" id="index">Index<a class="self-link" href="#index"></a></h2>
 <h3 class="no-num no-ref heading settled" id="index-defined-here">Terms defined by this specification<a class="self-link" href="#index-defined-here"></a></h3>
 <ul class="index">
 <li><a href="#valdef-row-rule-extent-all-end">all-end</a>, in § 6.1.1
 <li><a href="#valdef-row-rule-extent-all-long">all-long</a>, in § 6.1.1
 <li><a href="#valdef-row-rule-extent-allow-overlap">allow-overlap</a>, in § 6.1.1
 <li><a href="#valdef-row-rule-extent-all-short">all-short</a>, in § 6.1.1
 <li><a href="#valdef-row-rule-extent-all-start">all-start</a>, in § 6.1.1
 <li><a href="#propdef-column-rule-align">column-rule-align</a>, in § 5.1
 <li><a href="#propdef-column-rule-edge-align">column-rule-edge-align</a>, in § 5.2
 <li><a href="#propdef-column-rule-extent">column-rule-extent</a>, in § 6.1
 <li><a href="#propdef-column-rule-image">column-rule-image</a>, in § 2.4
 <li><a href="#propdef-column-rule-image-repeat">column-rule-image-repeat</a>, in § 2.3
 <li><a href="#propdef-column-rule-image-slice">column-rule-image-slice</a>, in § 2.2
 <li><a href="#propdef-column-rule-image-source">column-rule-image-source</a>, in § 2.1
 <li><a href="#propdef-column-rule-lateral-inset">column-rule-lateral-inset</a>, in § 3.5
 <li><a href="#propdef-column-rule-lateral-inset-end">column-rule-lateral-inset-end</a>, in § 3.3
 <li><a href="#propdef-column-rule-lateral-inset-start">column-rule-lateral-inset-start</a>, in § 3.3
 <li><a href="#propdef-column-rule-length">column-rule-length</a>, in § 3.2
 <li><a href="#propdef-column-rule-longitudinal-edge-inset">column-rule-longitudinal-edge-inset</a>, in § 3.9
 <li><a href="#propdef-column-rule-longitudinal-edge-inset-end">column-rule-longitudinal-edge-inset-end</a>, in § 3.8
 <li><a href="#propdef-column-rule-longitudinal-edge-inset-start">column-rule-longitudinal-edge-inset-start</a>, in § 3.8
 <li><a href="#propdef-column-rule-longitudinal-inset">column-rule-longitudinal-inset</a>, in § 3.7
 <li><a href="#propdef-column-rule-longitudinal-inset-end">column-rule-longitudinal-inset-end</a>, in § 3.6
 <li><a href="#propdef-column-rule-longitudinal-inset-start">column-rule-longitudinal-inset-start</a>, in § 3.6
 <li><a href="#valdef-row-rule-extent-end">end</a>, in § 6.1.1
 <li><a href="#extent-size">extent size</a>, in § 6.1
 <li><a href="#lateral-axis">lateral axis</a>, in § 1.3
 <li><a href="#valdef-row-rule-extent-long">long</a>, in § 6.1.1
 <li><a href="#longitudinal-axis">longitudinal axis</a>, in § 1.3
 <li><a href="#next-flex-line-item">next flex line item</a>, in § 6.1.2
 <li><a href="#next-grid-cell-span">next grid cell span</a>, in § 6.1.1
 <li><a href="#valdef-column-rule-image-slice-number-0"><number [0,∞]></a>, in § 2.2
 <li><a href="#valdef-column-rule-image-slice-percentage-0"><percentage [0,∞]></a>, in § 2.2
 <li><a href="#valdef-column-rule-image-repeat-repeat">repeat</a>, in § 2.3
 <li><a href="#valdef-column-rule-image-repeat-round">round</a>, in § 2.3
 <li><a href="#propdef-row-rule">row-rule</a>, in § 4.2
 <li><a href="#propdef-row-rule-align">row-rule-align</a>, in § 5.1
 <li><a href="#propdef-row-rule-color">row-rule-color</a>, in § 4.1
 <li><a href="#propdef-row-rule-edge-align">row-rule-edge-align</a>, in § 5.2
 <li><a href="#propdef-row-rule-extent">row-rule-extent</a>, in § 6.1
 <li><a href="#propdef-row-rule-image">row-rule-image</a>, in § 2.4
 <li><a href="#propdef-row-rule-image-repeat">row-rule-image-repeat</a>, in § 2.3
 <li><a href="#propdef-row-rule-image-slice">row-rule-image-slice</a>, in § 2.2
 <li><a href="#propdef-row-rule-image-source">row-rule-image-source</a>, in § 2.1
 <li><a href="#propdef-row-rule-lateral-inset">row-rule-lateral-inset</a>, in § 3.5
 <li><a href="#propdef-row-rule-lateral-inset-end">row-rule-lateral-inset-end</a>, in § 3.3
 <li><a href="#propdef-row-rule-lateral-inset-start">row-rule-lateral-inset-start</a>, in § 3.3
 <li><a href="#propdef-row-rule-length">row-rule-length</a>, in § 3.2
 <li><a href="#propdef-row-rule-longitudinal-edge-inset">row-rule-longitudinal-edge-inset</a>, in § 3.9
 <li><a href="#propdef-row-rule-longitudinal-edge-inset-end">row-rule-longitudinal-edge-inset-end</a>, in § 3.8
 <li><a href="#propdef-row-rule-longitudinal-edge-inset-start">row-rule-longitudinal-edge-inset-start</a>, in § 3.8
 <li><a href="#propdef-row-rule-longitudinal-inset">row-rule-longitudinal-inset</a>, in § 3.7
 <li><a href="#propdef-row-rule-longitudinal-inset-end">row-rule-longitudinal-inset-end</a>, in § 3.6
 <li><a href="#propdef-row-rule-longitudinal-inset-start">row-rule-longitudinal-inset-start</a>, in § 3.6
 <li><a href="#propdef-row-rule-style">row-rule-style</a>, in § 4.1
 <li><a href="#propdef-row-rule-width">row-rule-width</a>, in § 3.1
 <li><a href="#rule-containing-rectangle①">rule containing rectangle</a>, in § 7
 <li><a href="#rule-length">rule length</a>, in § 1.3
 <li>
 segment
 <ul>
 <li><a href="#segment">definition of</a>, in § 6.1
 <li><a href="#valdef-row-rule-extent-segment">value for row-rule-extent</a>, in § 6.1.1
 </ul>
 <li><a href="#valdef-row-rule-extent-short">short</a>, in § 6.1.1
 <li><a href="#valdef-column-rule-image-repeat-space">space</a>, in § 2.3
 <li><a href="#valdef-row-rule-extent-start">start</a>, in § 6.1.1
 <li><a href="#valdef-column-rule-image-repeat-stretch">stretch</a>, in § 2.3
 </ul>
 <aside class="dfn-panel" data-for="term-for-typedef-line-style">
 <a href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-style">https://drafts.csswg.org/css-backgrounds-3/#typedef-line-style</a>Referenced in:
 <ul>
 <li><a href="#ref-for-typedef-line-style">4.1. The row-rule-style and row-rule-color Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-typedef-line-width">
 <a href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-width">https://drafts.csswg.org/css-backgrounds-3/#typedef-line-width</a>Referenced in:
 <ul>
 <li><a href="#ref-for-typedef-line-width">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-typedef-line-width①">(2)</a> <a href="#ref-for-typedef-line-width②">(3)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-propdef-border-style">
 <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-border-style">2. Rule Images and Gradients</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-valdef-margin-trim-all">
 <a href="https://drafts.csswg.org/css-box-4/#valdef-margin-trim-all">https://drafts.csswg.org/css-box-4/#valdef-margin-trim-all</a>Referenced in:
 <ul>
 <li><a href="#ref-for-valdef-margin-trim-all">6.1. The column-rule-extent and row-rule-extent Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-valdef-box-margin-box">
 <a href="https://drafts.csswg.org/css-box-4/#valdef-box-margin-box">https://drafts.csswg.org/css-box-4/#valdef-box-margin-box</a>Referenced in:
 <ul>
 <li><a href="#ref-for-valdef-box-margin-box">6.1.5. Multi-Column Containers</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-used-value">
 <a href="https://drafts.csswg.org/css-cascade-5/#used-value">https://drafts.csswg.org/css-cascade-5/#used-value</a>Referenced in:
 <ul>
 <li><a href="#ref-for-used-value">3.1. The column-rule-width and row-rule-width Properties</a>
 <li><a href="#ref-for-used-value①">3.2. The column-rule-length and row-rule-length Properties</a>
 <li><a href="#ref-for-used-value②">3.3. The Rule Lateral Inset Properties</a>
 <li><a href="#ref-for-used-value③">3.6. The Rule Longitudinal Inset Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-typedef-color">
 <a href="https://drafts.csswg.org/css-color-4/#typedef-color">https://drafts.csswg.org/css-color-4/#typedef-color</a>Referenced in:
 <ul>
 <li><a href="#ref-for-typedef-color">4.1. The row-rule-style and row-rule-color Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-propdef-opacity">
 <a href="https://drafts.csswg.org/css-color-4/#propdef-opacity">https://drafts.csswg.org/css-color-4/#propdef-opacity</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-opacity">3.6. The Rule Longitudinal Inset Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-order-modified-document-order">
 <a href="https://drafts.csswg.org/css-display-3/#order-modified-document-order">https://drafts.csswg.org/css-display-3/#order-modified-document-order</a>Referenced in:
 <ul>
 <li><a href="#ref-for-order-modified-document-order">6.1.2. Flex Containers</a> <a href="#ref-for-order-modified-document-order①">(2)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-flex-container">
 <a href="https://drafts.csswg.org/css-flexbox-1/#flex-container">https://drafts.csswg.org/css-flexbox-1/#flex-container</a>Referenced in:
 <ul>
 <li><a href="#ref-for-flex-container">1.1. Overview</a>
 <li><a href="#ref-for-flex-container①">2.1. The column-rule-image-source and row-rule-image-source Properties</a>
 <li><a href="#ref-for-flex-container②">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a>
 <li><a href="#ref-for-flex-container③">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a>
 <li><a href="#ref-for-flex-container④">2.4. The column-rule-image and row-rule-image Shorthands</a>
 <li><a href="#ref-for-flex-container⑤">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-flex-container⑥">(2)</a>
 <li><a href="#ref-for-flex-container⑦">3.2. The column-rule-length and row-rule-length Properties</a>
 <li><a href="#ref-for-flex-container⑧">3.3. The Rule Lateral Inset Properties</a>
 <li><a href="#ref-for-flex-container⑨">3.6. The Rule Longitudinal Inset Properties</a>
 <li><a href="#ref-for-flex-container①⓪">3.8. The Rule Longitudinal Edge Inset Properties</a>
 <li><a href="#ref-for-flex-container①①">4.1. The row-rule-style and row-rule-color Properties</a> <a href="#ref-for-flex-container①②">(2)</a>
 <li><a href="#ref-for-flex-container①③">5.1. The column-rule-align and row-rule-align Properties</a>
 <li><a href="#ref-for-flex-container①④">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a>
 <li><a href="#ref-for-flex-container①⑤">6.1. The column-rule-extent and row-rule-extent Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-collapsed-track">
 <a href="https://drafts.csswg.org/css-grid-2/#collapsed-track">https://drafts.csswg.org/css-grid-2/#collapsed-track</a>Referenced in:
 <ul>
 <li><a href="#ref-for-collapsed-track">6.1.1. Grid Containers</a> <a href="#ref-for-collapsed-track①">(2)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-grid">
 <a href="https://drafts.csswg.org/css-grid-2/#grid">https://drafts.csswg.org/css-grid-2/#grid</a>Referenced in:
 <ul>
 <li><a href="#ref-for-grid">6.1.1. Grid Containers</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-grid-cell">
 <a href="https://drafts.csswg.org/css-grid-2/#grid-cell">https://drafts.csswg.org/css-grid-2/#grid-cell</a>Referenced in:
 <ul>
 <li><a href="#ref-for-grid-cell">6.1.1. Grid Containers</a> <a href="#ref-for-grid-cell①">(2)</a> <a href="#ref-for-grid-cell②">(3)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-grid-container">
 <a href="https://drafts.csswg.org/css-grid-2/#grid-container">https://drafts.csswg.org/css-grid-2/#grid-container</a>Referenced in:
 <ul>
 <li><a href="#ref-for-grid-container">1.1. Overview</a>
 <li><a href="#ref-for-grid-container①">2.1. The column-rule-image-source and row-rule-image-source Properties</a>
 <li><a href="#ref-for-grid-container②">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a>
 <li><a href="#ref-for-grid-container③">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a>
 <li><a href="#ref-for-grid-container④">2.4. The column-rule-image and row-rule-image Shorthands</a>
 <li><a href="#ref-for-grid-container⑤">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-grid-container⑥">(2)</a>
 <li><a href="#ref-for-grid-container⑦">3.2. The column-rule-length and row-rule-length Properties</a>
 <li><a href="#ref-for-grid-container⑧">3.3. The Rule Lateral Inset Properties</a>
 <li><a href="#ref-for-grid-container⑨">3.6. The Rule Longitudinal Inset Properties</a>
 <li><a href="#ref-for-grid-container①⓪">3.8. The Rule Longitudinal Edge Inset Properties</a>
 <li><a href="#ref-for-grid-container①①">4.1. The row-rule-style and row-rule-color Properties</a> <a href="#ref-for-grid-container①②">(2)</a>
 <li><a href="#ref-for-grid-container①③">5.1. The column-rule-align and row-rule-align Properties</a>
 <li><a href="#ref-for-grid-container①④">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a>
 <li><a href="#ref-for-grid-container①⑤">6.1. The column-rule-extent and row-rule-extent Properties</a>
 <li><a href="#ref-for-grid-container①⑥">6.1.1. Grid Containers</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-propdef-grid-column">
 <a href="https://drafts.csswg.org/css-grid-2/#propdef-grid-column">https://drafts.csswg.org/css-grid-2/#propdef-grid-column</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-grid-column">6.1.1. Grid Containers</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-propdef-grid-row">
 <a href="https://drafts.csswg.org/css-grid-2/#propdef-grid-row">https://drafts.csswg.org/css-grid-2/#propdef-grid-row</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-grid-row">6.1.1. Grid Containers</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-implicit-grid">
 <a href="https://drafts.csswg.org/css-grid-2/#implicit-grid">https://drafts.csswg.org/css-grid-2/#implicit-grid</a>Referenced in:
 <ul>
 <li><a href="#ref-for-implicit-grid">6.1.1. Grid Containers</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-subgrid">
 <a href="https://drafts.csswg.org/css-grid-2/#subgrid">https://drafts.csswg.org/css-grid-2/#subgrid</a>Referenced in:
 <ul>
 <li><a href="#ref-for-subgrid">6.1.1.2. Masonry</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-masonry-axis">
 <a href="https://drafts.csswg.org/css-grid-3/#masonry-axis">https://drafts.csswg.org/css-grid-3/#masonry-axis</a>Referenced in:
 <ul>
 <li><a href="#ref-for-masonry-axis">6.1.1. Grid Containers</a>
 <li><a href="#ref-for-masonry-axis①">6.1.1.2. Masonry</a> <a href="#ref-for-masonry-axis②">(2)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-typedef-image">
 <a href="https://drafts.csswg.org/css-images-3/#typedef-image">https://drafts.csswg.org/css-images-3/#typedef-image</a>Referenced in:
 <ul>
 <li><a href="#ref-for-typedef-image">2.1. The column-rule-image-source and row-rule-image-source Properties</a> <a href="#ref-for-typedef-image①">(2)</a> <a href="#ref-for-typedef-image②">(3)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-default-object-size">
 <a href="https://drafts.csswg.org/css-images-3/#default-object-size">https://drafts.csswg.org/css-images-3/#default-object-size</a>Referenced in:
 <ul>
 <li><a href="#ref-for-default-object-size">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-specified-size">
 <a href="https://drafts.csswg.org/css-images-3/#specified-size">https://drafts.csswg.org/css-images-3/#specified-size</a>Referenced in:
 <ul>
 <li><a href="#ref-for-specified-size">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-propdef-column-rule-width">
 <a href="https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width">https://drafts.csswg.org/css-multicol-1/#propdef-column-rule-width</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-width">1.1. Overview</a>
 <li><a href="#ref-for-propdef-column-rule-width①">1.2. Module Interactions</a>
 <li><a href="#ref-for-propdef-column-rule-width②">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-propdef-column-rule-width③">(2)</a>
 <li><a href="#ref-for-propdef-column-rule-width④">6.1.5. Multi-Column Containers</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-multi-column-container">
 <a href="https://drafts.csswg.org/css-multicol-1/#multi-column-container">https://drafts.csswg.org/css-multicol-1/#multi-column-container</a>Referenced in:
 <ul>
 <li><a href="#ref-for-multi-column-container">1.1. Overview</a>
 <li><a href="#ref-for-multi-column-container①">2.1. The column-rule-image-source and row-rule-image-source Properties</a>
 <li><a href="#ref-for-multi-column-container②">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a>
 <li><a href="#ref-for-multi-column-container③">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a>
 <li><a href="#ref-for-multi-column-container④">2.4. The column-rule-image and row-rule-image Shorthands</a>
 <li><a href="#ref-for-multi-column-container⑤">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-multi-column-container⑥">(2)</a>
 <li><a href="#ref-for-multi-column-container⑦">3.2. The column-rule-length and row-rule-length Properties</a>
 <li><a href="#ref-for-multi-column-container⑧">3.3. The Rule Lateral Inset Properties</a>
 <li><a href="#ref-for-multi-column-container⑨">3.6. The Rule Longitudinal Inset Properties</a>
 <li><a href="#ref-for-multi-column-container①⓪">3.8. The Rule Longitudinal Edge Inset Properties</a>
 <li><a href="#ref-for-multi-column-container①①">4.1. The row-rule-style and row-rule-color Properties</a> <a href="#ref-for-multi-column-container①②">(2)</a>
 <li><a href="#ref-for-multi-column-container①③">5.1. The column-rule-align and row-rule-align Properties</a>
 <li><a href="#ref-for-multi-column-container①④">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a>
 <li><a href="#ref-for-multi-column-container①⑤">6.1. The column-rule-extent and row-rule-extent Properties</a>
 <li><a href="#ref-for-multi-column-container①⑥">6.1.5. Multi-Column Containers</a> <a href="#ref-for-multi-column-container①⑦">(2)</a> <a href="#ref-for-multi-column-container①⑧">(3)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-multi-column-layout">
 <a href="https://drafts.csswg.org/css-multicol-1/#multi-column-layout">https://drafts.csswg.org/css-multicol-1/#multi-column-layout</a>Referenced in:
 <ul>
 <li><a href="#ref-for-multi-column-layout">3.6. The Rule Longitudinal Inset Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-spanner">
 <a href="https://drafts.csswg.org/css-multicol-1/#spanner">https://drafts.csswg.org/css-multicol-1/#spanner</a>Referenced in:
 <ul>
 <li><a href="#ref-for-spanner">6.1.5. Multi-Column Containers</a> <a href="#ref-for-spanner①">(2)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-propdef-column-span">
 <a href="https://drafts.csswg.org/css-multicol-2/#propdef-column-span">https://drafts.csswg.org/css-multicol-2/#propdef-column-span</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-span">6.1.5. Multi-Column Containers</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-ink-overflow">
 <a href="https://drafts.csswg.org/css-overflow-3/#ink-overflow">https://drafts.csswg.org/css-overflow-3/#ink-overflow</a>Referenced in:
 <ul>
 <li><a href="#ref-for-ink-overflow">9. Rule Overflow</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-propdef-overflow">
 <a href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">https://drafts.csswg.org/css-overflow-3/#propdef-overflow</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-overflow">9. Rule Overflow</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-propdef-left">
 <a href="https://drafts.csswg.org/css-position-3/#propdef-left">https://drafts.csswg.org/css-position-3/#propdef-left</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-left">3.3. The Rule Lateral Inset Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-propdef-right">
 <a href="https://drafts.csswg.org/css-position-3/#propdef-right">https://drafts.csswg.org/css-position-3/#propdef-right</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-right">3.3. The Rule Lateral Inset Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-outer-size">
 <a href="https://drafts.csswg.org/css-sizing-3/#outer-size">https://drafts.csswg.org/css-sizing-3/#outer-size</a>Referenced in:
 <ul>
 <li><a href="#ref-for-outer-size">6.1.2. Flex Containers</a> <a href="#ref-for-outer-size①">(2)</a> <a href="#ref-for-outer-size②">(3)</a> <a href="#ref-for-outer-size③">(4)</a> <a href="#ref-for-outer-size④">(5)</a> <a href="#ref-for-outer-size⑤">(6)</a> <a href="#ref-for-outer-size⑥">(7)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-propdef-width">
 <a href="https://drafts.csswg.org/css-sizing-3/#propdef-width">https://drafts.csswg.org/css-sizing-3/#propdef-width</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-width">3.3. The Rule Lateral Inset Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-span">
 <a href="https://drafts.csswg.org/css-tables-3/#span">https://drafts.csswg.org/css-tables-3/#span</a>Referenced in:
 <ul>
 <li><a href="#ref-for-span">6.1.4. Table Row Group Containers</a> <a href="#ref-for-span①">(2)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-table">
 <a href="https://drafts.csswg.org/css-tables-3/#table">https://drafts.csswg.org/css-tables-3/#table</a>Referenced in:
 <ul>
 <li><a href="#ref-for-table">1.1. Overview</a>
 <li><a href="#ref-for-table①">2.1. The column-rule-image-source and row-rule-image-source Properties</a>
 <li><a href="#ref-for-table②">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a>
 <li><a href="#ref-for-table③">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a>
 <li><a href="#ref-for-table④">2.4. The column-rule-image and row-rule-image Shorthands</a>
 <li><a href="#ref-for-table⑤">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-table⑥">(2)</a>
 <li><a href="#ref-for-table⑦">3.2. The column-rule-length and row-rule-length Properties</a>
 <li><a href="#ref-for-table⑧">3.3. The Rule Lateral Inset Properties</a>
 <li><a href="#ref-for-table⑨">3.6. The Rule Longitudinal Inset Properties</a>
 <li><a href="#ref-for-table①⓪">3.8. The Rule Longitudinal Edge Inset Properties</a>
 <li><a href="#ref-for-table①①">4.1. The row-rule-style and row-rule-color Properties</a> <a href="#ref-for-table①②">(2)</a>
 <li><a href="#ref-for-table①③">5.1. The column-rule-align and row-rule-align Properties</a>
 <li><a href="#ref-for-table①④">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a>
 <li><a href="#ref-for-table①⑤">6.1. The column-rule-extent and row-rule-extent Properties</a>
 <li><a href="#ref-for-table①⑥">6.1.3. Table Containers</a>
 <li><a href="#ref-for-table①⑦">8. Rule Painting Order</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-table-cell">
 <a href="https://drafts.csswg.org/css-tables-3/#table-cell">https://drafts.csswg.org/css-tables-3/#table-cell</a>Referenced in:
 <ul>
 <li><a href="#ref-for-table-cell">6.1.4. Table Row Group Containers</a> <a href="#ref-for-table-cell①">(2)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-table-column">
 <a href="https://drafts.csswg.org/css-tables-3/#table-column">https://drafts.csswg.org/css-tables-3/#table-column</a>Referenced in:
 <ul>
 <li><a href="#ref-for-table-column">6.1.4. Table Row Group Containers</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-table-column-group">
 <a href="https://drafts.csswg.org/css-tables-3/#table-column-group">https://drafts.csswg.org/css-tables-3/#table-column-group</a>Referenced in:
 <ul>
 <li><a href="#ref-for-table-column-group">6.1.3. Table Containers</a> <a href="#ref-for-table-column-group①">(2)</a> <a href="#ref-for-table-column-group②">(3)</a> <a href="#ref-for-table-column-group③">(4)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-table-row">
 <a href="https://drafts.csswg.org/css-tables-3/#table-row">https://drafts.csswg.org/css-tables-3/#table-row</a>Referenced in:
 <ul>
 <li><a href="#ref-for-table-row">6.1.4. Table Row Group Containers</a> <a href="#ref-for-table-row①">(2)</a> <a href="#ref-for-table-row②">(3)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-table-row-group">
 <a href="https://drafts.csswg.org/css-tables-3/#table-row-group">https://drafts.csswg.org/css-tables-3/#table-row-group</a>Referenced in:
 <ul>
 <li><a href="#ref-for-table-row-group">1.1. Overview</a>
 <li><a href="#ref-for-table-row-group①">2.1. The column-rule-image-source and row-rule-image-source Properties</a>
 <li><a href="#ref-for-table-row-group②">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a>
 <li><a href="#ref-for-table-row-group③">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a>
 <li><a href="#ref-for-table-row-group④">2.4. The column-rule-image and row-rule-image Shorthands</a>
 <li><a href="#ref-for-table-row-group⑤">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-table-row-group⑥">(2)</a>
 <li><a href="#ref-for-table-row-group⑦">3.2. The column-rule-length and row-rule-length Properties</a>
 <li><a href="#ref-for-table-row-group⑧">3.3. The Rule Lateral Inset Properties</a>
 <li><a href="#ref-for-table-row-group⑨">3.6. The Rule Longitudinal Inset Properties</a>
 <li><a href="#ref-for-table-row-group①⓪">3.8. The Rule Longitudinal Edge Inset Properties</a>
 <li><a href="#ref-for-table-row-group①①">4.1. The row-rule-style and row-rule-color Properties</a> <a href="#ref-for-table-row-group①②">(2)</a>
 <li><a href="#ref-for-table-row-group①③">5.1. The column-rule-align and row-rule-align Properties</a>
 <li><a href="#ref-for-table-row-group①④">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a>
 <li><a href="#ref-for-table-row-group①⑤">6.1. The column-rule-extent and row-rule-extent Properties</a>
 <li><a href="#ref-for-table-row-group①⑥">6.1.3. Table Containers</a> <a href="#ref-for-table-row-group①⑦">(2)</a> <a href="#ref-for-table-row-group①⑧">(3)</a> <a href="#ref-for-table-row-group①⑨">(4)</a>
 <li><a href="#ref-for-table-row-group②⓪">6.1.4. Table Row Group Containers</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-integer-value">
 <a href="https://drafts.csswg.org/css-values-4/#integer-value">https://drafts.csswg.org/css-values-4/#integer-value</a>Referenced in:
 <ul>
 <li><a href="#ref-for-integer-value">6.1.5. Multi-Column Containers</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-typedef-length-percentage">
 <a href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage">https://drafts.csswg.org/css-values-4/#typedef-length-percentage</a>Referenced in:
 <ul>
 <li><a href="#ref-for-typedef-length-percentage">3.2. The column-rule-length and row-rule-length Properties</a>
 <li><a href="#ref-for-typedef-length-percentage①">3.3. The Rule Lateral Inset Properties</a>
 <li><a href="#ref-for-typedef-length-percentage②">3.6. The Rule Longitudinal Inset Properties</a>
 <li><a href="#ref-for-typedef-length-percentage③">3.8. The Rule Longitudinal Edge Inset Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-number-value">
 <a href="https://drafts.csswg.org/css-values-4/#number-value">https://drafts.csswg.org/css-values-4/#number-value</a>Referenced in:
 <ul>
 <li><a href="#ref-for-number-value">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> <a href="#ref-for-number-value①">(2)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-percentage-value">
 <a href="https://drafts.csswg.org/css-values-4/#percentage-value">https://drafts.csswg.org/css-values-4/#percentage-value</a>Referenced in:
 <ul>
 <li><a href="#ref-for-percentage-value">1.2. Module Interactions</a>
 <li><a href="#ref-for-percentage-value①">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> <a href="#ref-for-percentage-value②">(2)</a>
 <li><a href="#ref-for-percentage-value③">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-percentage-value④">(2)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-mult-opt">
 <a href="https://drafts.csswg.org/css-values-4/#mult-opt">https://drafts.csswg.org/css-values-4/#mult-opt</a>Referenced in:
 <ul>
 <li><a href="#ref-for-mult-opt">3.5. The column-rule-lateral-inset and row-rule-lateral-inset Shorthands</a> <a href="#ref-for-mult-opt①">(2)</a>
 <li><a href="#ref-for-mult-opt②">3.7. The column-rule-longitudinal-inset and row-rule-longitudinal-inset Shorthands</a> <a href="#ref-for-mult-opt③">(2)</a>
 <li><a href="#ref-for-mult-opt④">3.9. The column-rule-longitudinal-edge-inset and row-rule-longitudinal-edge-inset Shorthands</a> <a href="#ref-for-mult-opt⑤">(2)</a>
 <li><a href="#ref-for-mult-opt⑥">6.1. The column-rule-extent and row-rule-extent Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-mult-num-range">
 <a href="https://drafts.csswg.org/css-values-4/#mult-num-range">https://drafts.csswg.org/css-values-4/#mult-num-range</a>Referenced in:
 <ul>
 <li><a href="#ref-for-mult-num-range">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a>
 <li><a href="#ref-for-mult-num-range①">5.1. The column-rule-align and row-rule-align Properties</a>
 <li><a href="#ref-for-mult-num-range②">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-comb-one">
 <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a>Referenced in:
 <ul>
 <li><a href="#ref-for-comb-one">2.1. The column-rule-image-source and row-rule-image-source Properties</a>
 <li><a href="#ref-for-comb-one①">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a>
 <li><a href="#ref-for-comb-one②">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a> <a href="#ref-for-comb-one③">(2)</a> <a href="#ref-for-comb-one④">(3)</a>
 <li><a href="#ref-for-comb-one⑤">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-comb-one⑥">(2)</a> <a href="#ref-for-comb-one⑦">(3)</a>
 <li><a href="#ref-for-comb-one⑧">3.2. The column-rule-length and row-rule-length Properties</a>
 <li><a href="#ref-for-comb-one⑨">3.3. The Rule Lateral Inset Properties</a>
 <li><a href="#ref-for-comb-one①⓪">3.6. The Rule Longitudinal Inset Properties</a>
 <li><a href="#ref-for-comb-one①①">3.8. The Rule Longitudinal Edge Inset Properties</a>
 <li><a href="#ref-for-comb-one①②">5.1. The column-rule-align and row-rule-align Properties</a> <a href="#ref-for-comb-one①③">(2)</a> <a href="#ref-for-comb-one①④">(3)</a> <a href="#ref-for-comb-one①⑤">(4)</a> <a href="#ref-for-comb-one①⑥">(5)</a>
 <li><a href="#ref-for-comb-one①⑦">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> <a href="#ref-for-comb-one①⑧">(2)</a>
 <li><a href="#ref-for-comb-one①⑨">6.1. The column-rule-extent and row-rule-extent Properties</a> <a href="#ref-for-comb-one②⓪">(2)</a> <a href="#ref-for-comb-one②①">(3)</a> <a href="#ref-for-comb-one②②">(4)</a> <a href="#ref-for-comb-one②③">(5)</a> <a href="#ref-for-comb-one②④">(6)</a> <a href="#ref-for-comb-one②⑤">(7)</a> <a href="#ref-for-comb-one②⑥">(8)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-comb-any">
 <a href="https://drafts.csswg.org/css-values-4/#comb-any">https://drafts.csswg.org/css-values-4/#comb-any</a>Referenced in:
 <ul>
 <li><a href="#ref-for-comb-any">2.4. The column-rule-image and row-rule-image Shorthands</a> <a href="#ref-for-comb-any①">(2)</a>
 <li><a href="#ref-for-comb-any②">4.2. The row-rule Shorthand</a> <a href="#ref-for-comb-any③">(2)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="term-for-propdef-writing-mode">
 <a href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode">https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-writing-mode">1.3. Definitions</a>
 </ul>
 </aside>
 <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere">Terms defined by reference<a class="self-link" href="#index-defined-elsewhere"></a></h3>
 <ul class="index">
 <li>
 <a data-link-type="biblio">[css-backgrounds-3]</a> defines the following terms:
 <ul>
 <li><line-style>
 <li><line-width>
 <li>border-style
 </ul>
 <li>
 <a data-link-type="biblio">[css-box-4]</a> defines the following terms:
 <ul>
 <li>all
 <li>margin-box
 </ul>
 <li>
 <a data-link-type="biblio">[css-cascade-5]</a> defines the following terms:
 <ul>
 <li>used value
 </ul>
 <li>
 <a data-link-type="biblio">[css-color-4]</a> defines the following terms:
 <ul>
 <li><color>
 <li>opacity
 </ul>
 <li>
 <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
 <ul>
 <li>order-modified document order
 </ul>
 <li>
 <a data-link-type="biblio">[css-flexbox-1]</a> defines the following terms:
 <ul>
 <li>flex container
 </ul>
 <li>
 <a data-link-type="biblio">[css-grid-2]</a> defines the following terms:
 <ul>
 <li>collapsed track
 <li>grid
 <li>grid cell
 <li>grid container
 <li>grid-column
 <li>grid-row
 <li>implicit grid
 <li>subgrid
 </ul>
 <li>
 <a data-link-type="biblio">[css-grid-3]</a> defines the following terms:
 <ul>
 <li>masonry axis
 </ul>
 <li>
 <a data-link-type="biblio">[css-images-3]</a> defines the following terms:
 <ul>
 <li><image>
 <li>default object size
 <li>specified size
 </ul>
 <li>
 <a data-link-type="biblio">[css-multicol-1]</a> defines the following terms:
 <ul>
 <li>column-rule-width
 <li>multi-column container
 <li>multi-column layout
 <li>spanner
 </ul>
 <li>
 <a data-link-type="biblio">[css-multicol-2]</a> defines the following terms:
 <ul>
 <li>column-span
 </ul>
 <li>
 <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms:
 <ul>
 <li>ink overflow
 <li>overflow
 </ul>
 <li>
 <a data-link-type="biblio">[css-position-3]</a> defines the following terms:
 <ul>
 <li>left
 <li>right
 </ul>
 <li>
 <a data-link-type="biblio">[css-sizing-3]</a> defines the following terms:
 <ul>
 <li>outer size
 <li>width
 </ul>
 <li>
 <a data-link-type="biblio">[css-tables-3]</a> defines the following terms:
 <ul>
 <li>span
 <li>table
 <li>table-cell
 <li>table-column
 <li>table-column-group
 <li>table-row
 <li>table-row-group
 </ul>
 <li>
 <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
 <ul>
 <li><integer>
 <li><length-percentage>
 <li><number>
 <li><percentage>
 <li>?
 <li>{a,b}
 <li>|
 <li>||
 </ul>
 <li>
 <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms:
 <ul>
 <li>writing-mode
 </ul>
 </ul>
 <h2 class="no-num no-ref heading settled" id="references">References<a class="self-link" href="#references"></a></h2>
 <h3 class="no-num no-ref heading settled" id="normative">Normative References<a class="self-link" href="#normative"></a></h3>
 <dl>
 <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3]
 <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. 26 July 2021. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
 <dt id="biblio-css-box-4">[CSS-BOX-4]
 <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-4/"><cite>CSS Box Model Module Level 4</cite></a>. 21 April 2020. WD. URL: <a href="https://www.w3.org/TR/css-box-4/">https://www.w3.org/TR/css-box-4/</a>
 <dt id="biblio-css-cascade-5">[CSS-CASCADE-5]
 <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. 15 October 2021. WD. URL: <a href="https://www.w3.org/TR/css-cascade-5/">https://www.w3.org/TR/css-cascade-5/</a>
 <dt id="biblio-css-color-4">[CSS-COLOR-4]
 <dd>Tab Atkins Jr.; Chris Lilley. <a href="https://www.w3.org/TR/css-color-4/"><cite>CSS Color Module Level 4</cite></a>. 1 June 2021. WD. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a>
 <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
 <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/"><cite>CSS Display Module Level 3</cite></a>. 3 September 2021. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
 <dt id="biblio-css-flexbox-1">[CSS-FLEXBOX-1]
 <dd>Tab Atkins Jr.; et al. <a href="https://www.w3.org/TR/css-flexbox-1/"><cite>CSS Flexible Box Layout Module Level 1</cite></a>. 19 November 2018. CR. URL: <a href="https://www.w3.org/TR/css-flexbox-1/">https://www.w3.org/TR/css-flexbox-1/</a>
 <dt id="biblio-css-grid-2">[CSS-GRID-2]
 <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="https://www.w3.org/TR/css-grid-2/"><cite>CSS Grid Layout Module Level 2</cite></a>. 18 December 2020. CR. URL: <a href="https://www.w3.org/TR/css-grid-2/">https://www.w3.org/TR/css-grid-2/</a>
 <dt id="biblio-css-grid-3">[CSS-GRID-3]
 <dd>CSS Grid Layout Level 3 URL: <a href="https://drafts.csswg.org/css-grid-3/">https://drafts.csswg.org/css-grid-3/</a>
 <dt id="biblio-css-images-3">[CSS-IMAGES-3]
 <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://www.w3.org/TR/css-images-3/"><cite>CSS Images Module Level 3</cite></a>. 17 December 2020. CR. URL: <a href="https://www.w3.org/TR/css-images-3/">https://www.w3.org/TR/css-images-3/</a>
 <dt id="biblio-css-multicol-1">[CSS-MULTICOL-1]
 <dd>Florian Rivoal; Rachel Andrew. <a href="https://www.w3.org/TR/css-multicol-1/"><cite>CSS Multi-column Layout Module Level 1</cite></a>. 12 October 2021. CR. URL: <a href="https://www.w3.org/TR/css-multicol-1/">https://www.w3.org/TR/css-multicol-1/</a>
 <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3]
 <dd>David Baron; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/"><cite>CSS Overflow Module Level 3</cite></a>. 3 June 2020. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a>
 <dt id="biblio-css-sizing-3">[CSS-SIZING-3]
 <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-sizing-3/"><cite>CSS Box Sizing Module Level 3</cite></a>. 17 March 2021. WD. URL: <a href="https://www.w3.org/TR/css-sizing-3/">https://www.w3.org/TR/css-sizing-3/</a>
 <dt id="biblio-css-tables-3">[CSS-TABLES-3]
 <dd>François Remy; Greg Whitworth; David Baron. <a href="https://www.w3.org/TR/css-tables-3/"><cite>CSS Table Module Level 3</cite></a>. 27 July 2019. WD. URL: <a href="https://www.w3.org/TR/css-tables-3/">https://www.w3.org/TR/css-tables-3/</a>
 <dt id="biblio-css-values-4">[CSS-VALUES-4]
 <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. 16 October 2021. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
 <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]
 <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/"><cite>CSS Writing Modes Level 4</cite></a>. 30 July 2019. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a>
 <dt id="biblio-rfc2119">[RFC2119]
 <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a>
 </dl>
 <h3 class="no-num no-ref heading settled" id="informative">Informative References<a class="self-link" href="#informative"></a></h3>
 <dl>
 <dt id="biblio-css-multicol-2">[CSS-MULTICOL-2]
 <dd>CSS Multi-column Layout Module Level 2 URL: <a href="https://drafts.csswg.org/css-multicol-2/">https://drafts.csswg.org/css-multicol-2/</a>
 <dt id="biblio-css-position-3">[CSS-POSITION-3]
 <dd>Elika Etemad; et al. <a href="https://www.w3.org/TR/css-position-3/"><cite>CSS Positioned Layout Module Level 3</cite></a>. 19 May 2020. WD. URL: <a href="https://www.w3.org/TR/css-position-3/">https://www.w3.org/TR/css-position-3/</a>
 </dl>
 <h2 class="no-num no-ref heading settled" id="property-index">Property Index<a class="self-link" href="#property-index"></a></h2>
 <div class="big-element-wrapper">
 <table class="index">
 <thead>
 <tr>
 <th scope="col">Name
 <th scope="col">Value
 <th scope="col">Initial
 <th scope="col">Applies to
 <th scope="col">Inh.
 <th scope="col">%ages
 <th scope="col">Animation type
 <th scope="col">Canonical order
 <th scope="col">Computed value
 <tbody>
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-align" id="ref-for-propdef-column-rule-align③">column-rule-align</a>
 <td>[gap | gap-center | gap-over | rule | rule-center | rule-over]{1,2}
 <td>gap
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>N/A
 <td>discrete
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-edge-align" id="ref-for-propdef-column-rule-edge-align②">column-rule-edge-align</a>
 <td>[gap | gap-center | gap-over]{1,2}
 <td>gap
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>N/A
 <td>discrete
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-extent" id="ref-for-propdef-column-rule-extent④">column-rule-extent</a>
 <td>[segment | start | end | short | long | all-start | all-end | all-short | all-long ] allow-overlap?
 <td>long
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>N/A
 <td>discrete
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-image" id="ref-for-propdef-column-rule-image①">column-rule-image</a>
 <td><'column-rule-image-source'> || <'column-rule-image-slice'> || <'column-rule-image-repeat'>
 <td>see individual properties
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>per grammar
 <td>see individual properties
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-image-repeat" id="ref-for-propdef-column-rule-image-repeat②">column-rule-image-repeat</a>
 <td>stretch | repeat | round | space
 <td>stretch
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>N/A
 <td>discrete
 <td>per grammar
 <td>the specified keyword
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-image-slice" id="ref-for-propdef-column-rule-image-slice④">column-rule-image-slice</a>
 <td>[<number [0,∞]> | <percentage [0,∞]>]{1,2}
 <td>0
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>refer to image size in the rule’s longitudinal axis
 <td>discrete
 <td>per grammar
 <td>one or two values, each either a number or percentage
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-image-source" id="ref-for-propdef-column-rule-image-source②">column-rule-image-source</a>
 <td>none | <image>
 <td>none
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>N/A
 <td>discrete
 <td>per grammar
 <td>the keyword none or the computed <image>
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-lateral-inset" id="ref-for-propdef-column-rule-lateral-inset①">column-rule-lateral-inset</a>
 <td><'column-rule-lateral-inset-start'> <'column-rule-lateral-inset-end'>?
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>per grammar
 <td>see individual properties
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-lateral-inset-end" id="ref-for-propdef-column-rule-lateral-inset-end①">column-rule-lateral-inset-end</a>
 <td><length-percentage> | auto
 <td>auto
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>refer to the rule containing rectangle’s size in the rule’s lateral axis
 <td>by computed value type
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-lateral-inset-start" id="ref-for-propdef-column-rule-lateral-inset-start①">column-rule-lateral-inset-start</a>
 <td><length-percentage> | auto
 <td>auto
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>refer to the rule containing rectangle’s size in the rule’s lateral axis
 <td>by computed value type
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-length" id="ref-for-propdef-column-rule-length③">column-rule-length</a>
 <td><length-percentage> | auto
 <td>auto
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis
 <td>by computed value type
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-longitudinal-edge-inset" id="ref-for-propdef-column-rule-longitudinal-edge-inset①">column-rule-longitudinal-edge-inset</a>
 <td><'column-rule-longitudinal-edge-inset-start'> <'column-rule-longitudinal-edge-inset-end'>?
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>per grammar
 <td>see individual properties
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-longitudinal-edge-inset-end" id="ref-for-propdef-column-rule-longitudinal-edge-inset-end①">column-rule-longitudinal-edge-inset-end</a>
 <td><length-percentage> | auto
 <td>0
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis
 <td>by computed value type
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-longitudinal-edge-inset-start" id="ref-for-propdef-column-rule-longitudinal-edge-inset-start①">column-rule-longitudinal-edge-inset-start</a>
 <td><length-percentage> | auto
 <td>0
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis
 <td>by computed value type
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-longitudinal-inset" id="ref-for-propdef-column-rule-longitudinal-inset①">column-rule-longitudinal-inset</a>
 <td><'column-rule-longitudinal-inset-start'> <'column-rule-longitudinal-inset-end'>?
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>per grammar
 <td>see individual properties
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-longitudinal-inset-end" id="ref-for-propdef-column-rule-longitudinal-inset-end②">column-rule-longitudinal-inset-end</a>
 <td><length-percentage> | auto
 <td>0
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis
 <td>by computed value type
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-column-rule-longitudinal-inset-start" id="ref-for-propdef-column-rule-longitudinal-inset-start①">column-rule-longitudinal-inset-start</a>
 <td><length-percentage> | auto
 <td>0
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis
 <td>by computed value type
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule" id="ref-for-propdef-row-rule①">row-rule</a>
 <td><'row-rule-width'> || <'row-rule-style'> || <'row-rule-color'>
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>per grammar
 <td>see individual properties
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-align" id="ref-for-propdef-row-rule-align③">row-rule-align</a>
 <td>[gap | gap-center | gap-over | rule | rule-center | rule-over]{1,2}
 <td>gap
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>N/A
 <td>discrete
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-color" id="ref-for-propdef-row-rule-color②">row-rule-color</a>
 <td><color>
 <td>currentcolor
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>N/A
 <td>by computed value type
 <td>per grammar
 <td>computed color
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-edge-align" id="ref-for-propdef-row-rule-edge-align①">row-rule-edge-align</a>
 <td>[gap | gap-center | gap-over]{1,2}
 <td>gap
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>N/A
 <td>discrete
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-extent" id="ref-for-propdef-row-rule-extent⑥">row-rule-extent</a>
 <td>[segment | start | end | short | long | all-start | all-end | all-short | all-long ] allow-overlap?
 <td>long
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>N/A
 <td>discrete
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-image" id="ref-for-propdef-row-rule-image①">row-rule-image</a>
 <td><'column-rule-image-source'> || <'column-rule-image-slice'> || <'column-rule-image-repeat'>
 <td>see individual properties
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>per grammar
 <td>see individual properties
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-image-repeat" id="ref-for-propdef-row-rule-image-repeat①">row-rule-image-repeat</a>
 <td>stretch | repeat | round | space
 <td>stretch
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>N/A
 <td>discrete
 <td>per grammar
 <td>the specified keyword
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-image-slice" id="ref-for-propdef-row-rule-image-slice①">row-rule-image-slice</a>
 <td>[<number [0,∞]> | <percentage [0,∞]>]{1,2}
 <td>0
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>refer to image size in the rule’s longitudinal axis
 <td>discrete
 <td>per grammar
 <td>one or two values, each either a number or percentage
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-image-source" id="ref-for-propdef-row-rule-image-source①">row-rule-image-source</a>
 <td>none | <image>
 <td>none
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>N/A
 <td>discrete
 <td>per grammar
 <td>the keyword none or the computed <image>
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-lateral-inset" id="ref-for-propdef-row-rule-lateral-inset①">row-rule-lateral-inset</a>
 <td><'row-rule-lateral-inset-start'> <'row-rule-lateral-inset-end'>?
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>per grammar
 <td>see individual properties
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-lateral-inset-end" id="ref-for-propdef-row-rule-lateral-inset-end①">row-rule-lateral-inset-end</a>
 <td><length-percentage> | auto
 <td>auto
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>refer to the rule containing rectangle’s size in the rule’s lateral axis
 <td>by computed value type
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-lateral-inset-start" id="ref-for-propdef-row-rule-lateral-inset-start①">row-rule-lateral-inset-start</a>
 <td><length-percentage> | auto
 <td>auto
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>refer to the rule containing rectangle’s size in the rule’s lateral axis
 <td>by computed value type
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-length" id="ref-for-propdef-row-rule-length①">row-rule-length</a>
 <td><length-percentage> | auto
 <td>auto
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis
 <td>by computed value type
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-longitudinal-edge-inset" id="ref-for-propdef-row-rule-longitudinal-edge-inset①">row-rule-longitudinal-edge-inset</a>
 <td><'row-rule-longitudinal-edge-inset-start'> <'row-rule-longitudinal-edge-inset-end'>?
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>per grammar
 <td>see individual properties
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-longitudinal-edge-inset-end" id="ref-for-propdef-row-rule-longitudinal-edge-inset-end①">row-rule-longitudinal-edge-inset-end</a>
 <td><length-percentage> | auto
 <td>0
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis
 <td>by computed value type
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-longitudinal-edge-inset-start" id="ref-for-propdef-row-rule-longitudinal-edge-inset-start①">row-rule-longitudinal-edge-inset-start</a>
 <td><length-percentage> | auto
 <td>0
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis
 <td>by computed value type
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-longitudinal-inset" id="ref-for-propdef-row-rule-longitudinal-inset①">row-rule-longitudinal-inset</a>
 <td><'row-rule-longitudinal-inset-start'> <'row-rule-longitudinal-inset-end'>?
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>see individual properties
 <td>per grammar
 <td>see individual properties
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-longitudinal-inset-end" id="ref-for-propdef-row-rule-longitudinal-inset-end①">row-rule-longitudinal-inset-end</a>
 <td><length-percentage> | auto
 <td>0
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis
 <td>by computed value type
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-longitudinal-inset-start" id="ref-for-propdef-row-rule-longitudinal-inset-start①">row-rule-longitudinal-inset-start</a>
 <td><length-percentage> | auto
 <td>0
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis
 <td>by computed value type
 <td>per grammar
 <td>the specified value
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-style" id="ref-for-propdef-row-rule-style②">row-rule-style</a>
 <td><line-style>
 <td>none
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>N/A
 <td>discrete
 <td>per grammar
 <td>specified keyword
 <tr>
 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule-width" id="ref-for-propdef-row-rule-width②">row-rule-width</a>
 <td><line-width> | <percentage> | auto
 <td>medium
 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers
 <td>no
 <td>refer to the rule containing rectangle’s size in the rule’s lateral axis
 <td>by computed value type
 <td>per grammar
 <td>absolute length if the specified value is <line-width>; 0px if the column rule style is none or hidden. Otherwise, the specified value.
 </table>
 </div>
 <h2 class="no-num no-ref heading settled" id="issues-index">Issues Index<a class="self-link" href="#issues-index"></a></h2>
 <div style="counter-reset:issue">
 <div class="issue"> lots of new possible shorthands... we now have many
 properties (and shorthands) with a column-rule and row-rule prefix.
 Should we add shorthands for some of those with a <a class="property" data-link-type="propdesc">rule</a> prefix to specify
 both axes, like so: 'rule-foo: <row-rule-foo> <column-rule-foo>?'.
 As usual, we have to be careful with the separator though, to make it
 forward-compatible with any changes we might want to make... <a class="issue-return" href="#issue-53073ff7" title="Jump to section">↵</a></div>
 <div class="issue"> Are there use cases for other box-related edge attachment points?
 e.g. 'padding | padding-center | padding-over | border...' <a class="issue-return" href="#issue-13842b6f" title="Jump to section">↵</a></div>
 <div class="issue"> perhaps make <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-box-4/#valdef-margin-trim-all">all</a> a separate keyword? like so: [segment | [[start | end | short | long] all?] ] allow-overlap? <a class="issue-return" href="#issue-70dc1ba4" title="Jump to section">↵</a></div>
 <div class="issue"> TODO: add definition list and algorithm here... <a class="issue-return" href="#issue-b6f1d65c" title="Jump to section">↵</a></div>
 <div class="issue"> is it useful to be able to create a rule extent for the intersection or union between two tracks, like so: <img height="435" src="media/masonry-all-shorter.png" style="display:block" width="701">It’s pretty easy to implement, fwiw... (I accidently implemented short/long like that before I realized it was inconsistent with how they work elsewhere). I think it’s a case that is unique to a masonry axis though, at least currently... <a class="issue-return" href="#issue-3e9abc31" title="Jump to section">↵</a></div>
 <div class="issue"> sort out if non-collapsed column-groups that only contain collapsed columns should generate rules, ditto row-groups/rows <a class="issue-return" href="#issue-0ca7394a" title="Jump to section">↵</a></div>
 <div class="issue"> this proposal makes the assumption that the related proposal that row-gap should apply to multi-column containers is also adopted
 (<a href="https://github.com/w3c/csswg-drafts/issues/6746">issue #6746</a>). <a class="issue-return" href="#issue-409a7220" title="Jump to section">↵</a></div>
 </div>
 <aside class="dfn-panel" data-for="lateral-axis">
 <a href="#lateral-axis">#lateral-axis</a>Referenced in:
 <ul>
 <li><a href="#ref-for-lateral-axis">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-lateral-axis①">(2)</a>
 <li><a href="#ref-for-lateral-axis②">3.2. The column-rule-length and row-rule-length Properties</a>
 <li><a href="#ref-for-lateral-axis③">3.3. The Rule Lateral Inset Properties</a>
 <li><a href="#ref-for-lateral-axis④">7. The Rule Containing Rectangle</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="longitudinal-axis">
 <a href="#longitudinal-axis">#longitudinal-axis</a>Referenced in:
 <ul>
 <li><a href="#ref-for-longitudinal-axis">3.2. The column-rule-length and row-rule-length Properties</a>
 <li><a href="#ref-for-longitudinal-axis①">3.6. The Rule Longitudinal Inset Properties</a>
 <li><a href="#ref-for-longitudinal-axis②">3.8. The Rule Longitudinal Edge Inset Properties</a> <a href="#ref-for-longitudinal-axis③">(2)</a>
 <li><a href="#ref-for-longitudinal-axis④">5.1. The column-rule-align and row-rule-align Properties</a>
 <li><a href="#ref-for-longitudinal-axis⑤">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a>
 <li><a href="#ref-for-longitudinal-axis⑥">6.1. The column-rule-extent and row-rule-extent Properties</a>
 <li><a href="#ref-for-longitudinal-axis⑦">7. The Rule Containing Rectangle</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="rule-length">
 <a href="#rule-length">#rule-length</a>Referenced in:
 <ul>
 <li><a href="#ref-for-rule-length">3.2. The column-rule-length and row-rule-length Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-column-rule-image-source">
 <a href="#propdef-column-rule-image-source">#propdef-column-rule-image-source</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-image-source">2.1. The column-rule-image-source and row-rule-image-source Properties</a>
 <li><a href="#ref-for-propdef-column-rule-image-source①">2.4. The column-rule-image and row-rule-image Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-image-source">
 <a href="#propdef-row-rule-image-source">#propdef-row-rule-image-source</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-image-source">2.1. The column-rule-image-source and row-rule-image-source Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-column-rule-image-slice">
 <a href="#propdef-column-rule-image-slice">#propdef-column-rule-image-slice</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-image-slice">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> <a href="#ref-for-propdef-column-rule-image-slice①">(2)</a> <a href="#ref-for-propdef-column-rule-image-slice②">(3)</a>
 <li><a href="#ref-for-propdef-column-rule-image-slice③">2.4. The column-rule-image and row-rule-image Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-image-slice">
 <a href="#propdef-row-rule-image-slice">#propdef-row-rule-image-slice</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-image-slice">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-column-rule-image-repeat">
 <a href="#propdef-column-rule-image-repeat">#propdef-column-rule-image-repeat</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-image-repeat">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a>
 <li><a href="#ref-for-propdef-column-rule-image-repeat①">2.4. The column-rule-image and row-rule-image Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-image-repeat">
 <a href="#propdef-row-rule-image-repeat">#propdef-row-rule-image-repeat</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-image-repeat">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-column-rule-image">
 <a href="#propdef-column-rule-image">#propdef-column-rule-image</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-image">2.4. The column-rule-image and row-rule-image Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-image">
 <a href="#propdef-row-rule-image">#propdef-row-rule-image</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-image">2.4. The column-rule-image and row-rule-image Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-width">
 <a href="#propdef-row-rule-width">#propdef-row-rule-width</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-width">3.1. The column-rule-width and row-rule-width Properties</a>
 <li><a href="#ref-for-propdef-row-rule-width①">4.2. The row-rule Shorthand</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-column-rule-length">
 <a href="#propdef-column-rule-length">#propdef-column-rule-length</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-length">3.2. The column-rule-length and row-rule-length Properties</a>
 <li><a href="#ref-for-propdef-column-rule-length①">7. The Rule Containing Rectangle</a> <a href="#ref-for-propdef-column-rule-length②">(2)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-length">
 <a href="#propdef-row-rule-length">#propdef-row-rule-length</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-length">3.2. The column-rule-length and row-rule-length Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-column-rule-lateral-inset-start">
 <a href="#propdef-column-rule-lateral-inset-start">#propdef-column-rule-lateral-inset-start</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-lateral-inset-start">3.5. The column-rule-lateral-inset and row-rule-lateral-inset Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-column-rule-lateral-inset-end">
 <a href="#propdef-column-rule-lateral-inset-end">#propdef-column-rule-lateral-inset-end</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-lateral-inset-end">3.5. The column-rule-lateral-inset and row-rule-lateral-inset Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-lateral-inset-start">
 <a href="#propdef-row-rule-lateral-inset-start">#propdef-row-rule-lateral-inset-start</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-lateral-inset-start">3.5. The column-rule-lateral-inset and row-rule-lateral-inset Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-lateral-inset-end">
 <a href="#propdef-row-rule-lateral-inset-end">#propdef-row-rule-lateral-inset-end</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-lateral-inset-end">3.5. The column-rule-lateral-inset and row-rule-lateral-inset Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-column-rule-lateral-inset">
 <a href="#propdef-column-rule-lateral-inset">#propdef-column-rule-lateral-inset</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-lateral-inset">3.5. The column-rule-lateral-inset and row-rule-lateral-inset Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-lateral-inset">
 <a href="#propdef-row-rule-lateral-inset">#propdef-row-rule-lateral-inset</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-lateral-inset">3.5. The column-rule-lateral-inset and row-rule-lateral-inset Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-inset-start">
 <a href="#propdef-column-rule-longitudinal-inset-start">#propdef-column-rule-longitudinal-inset-start</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-longitudinal-inset-start">3.7. The column-rule-longitudinal-inset and row-rule-longitudinal-inset Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-inset-end">
 <a href="#propdef-column-rule-longitudinal-inset-end">#propdef-column-rule-longitudinal-inset-end</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-longitudinal-inset-end">3.7. The column-rule-longitudinal-inset and row-rule-longitudinal-inset Shorthands</a>
 <li><a href="#ref-for-propdef-column-rule-longitudinal-inset-end①">7. The Rule Containing Rectangle</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-inset-start">
 <a href="#propdef-row-rule-longitudinal-inset-start">#propdef-row-rule-longitudinal-inset-start</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-longitudinal-inset-start">3.7. The column-rule-longitudinal-inset and row-rule-longitudinal-inset Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-inset-end">
 <a href="#propdef-row-rule-longitudinal-inset-end">#propdef-row-rule-longitudinal-inset-end</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-longitudinal-inset-end">3.7. The column-rule-longitudinal-inset and row-rule-longitudinal-inset Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-inset">
 <a href="#propdef-column-rule-longitudinal-inset">#propdef-column-rule-longitudinal-inset</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-longitudinal-inset">3.7. The column-rule-longitudinal-inset and row-rule-longitudinal-inset Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-inset">
 <a href="#propdef-row-rule-longitudinal-inset">#propdef-row-rule-longitudinal-inset</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-longitudinal-inset">3.7. The column-rule-longitudinal-inset and row-rule-longitudinal-inset Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-edge-inset-start">
 <a href="#propdef-column-rule-longitudinal-edge-inset-start">#propdef-column-rule-longitudinal-edge-inset-start</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-longitudinal-edge-inset-start">3.9. The column-rule-longitudinal-edge-inset and row-rule-longitudinal-edge-inset Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-edge-inset-end">
 <a href="#propdef-column-rule-longitudinal-edge-inset-end">#propdef-column-rule-longitudinal-edge-inset-end</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-longitudinal-edge-inset-end">3.9. The column-rule-longitudinal-edge-inset and row-rule-longitudinal-edge-inset Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-edge-inset-start">
 <a href="#propdef-row-rule-longitudinal-edge-inset-start">#propdef-row-rule-longitudinal-edge-inset-start</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-longitudinal-edge-inset-start">3.9. The column-rule-longitudinal-edge-inset and row-rule-longitudinal-edge-inset Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-edge-inset-end">
 <a href="#propdef-row-rule-longitudinal-edge-inset-end">#propdef-row-rule-longitudinal-edge-inset-end</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-longitudinal-edge-inset-end">3.9. The column-rule-longitudinal-edge-inset and row-rule-longitudinal-edge-inset Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-edge-inset">
 <a href="#propdef-column-rule-longitudinal-edge-inset">#propdef-column-rule-longitudinal-edge-inset</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-longitudinal-edge-inset">3.9. The column-rule-longitudinal-edge-inset and row-rule-longitudinal-edge-inset Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-edge-inset">
 <a href="#propdef-row-rule-longitudinal-edge-inset">#propdef-row-rule-longitudinal-edge-inset</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-longitudinal-edge-inset">3.9. The column-rule-longitudinal-edge-inset and row-rule-longitudinal-edge-inset Shorthands</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-style">
 <a href="#propdef-row-rule-style">#propdef-row-rule-style</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-style">4.1. The row-rule-style and row-rule-color Properties</a>
 <li><a href="#ref-for-propdef-row-rule-style①">4.2. The row-rule Shorthand</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-color">
 <a href="#propdef-row-rule-color">#propdef-row-rule-color</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-color">4.1. The row-rule-style and row-rule-color Properties</a>
 <li><a href="#ref-for-propdef-row-rule-color①">4.2. The row-rule Shorthand</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule">
 <a href="#propdef-row-rule">#propdef-row-rule</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule">4.2. The row-rule Shorthand</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-column-rule-align">
 <a href="#propdef-column-rule-align">#propdef-column-rule-align</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-align">5.1. The column-rule-align and row-rule-align Properties</a>
 <li><a href="#ref-for-propdef-column-rule-align①">7. The Rule Containing Rectangle</a> <a href="#ref-for-propdef-column-rule-align②">(2)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-align">
 <a href="#propdef-row-rule-align">#propdef-row-rule-align</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-align">5.1. The column-rule-align and row-rule-align Properties</a> <a href="#ref-for-propdef-row-rule-align①">(2)</a>
 <li><a href="#ref-for-propdef-row-rule-align②">6.1.1.1. Subgrid</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-column-rule-edge-align">
 <a href="#propdef-column-rule-edge-align">#propdef-column-rule-edge-align</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-edge-align">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a>
 <li><a href="#ref-for-propdef-column-rule-edge-align①">6.1.1.2. Masonry</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-edge-align">
 <a href="#propdef-row-rule-edge-align">#propdef-row-rule-edge-align</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-edge-align">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-column-rule-extent">
 <a href="#propdef-column-rule-extent">#propdef-column-rule-extent</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-column-rule-extent">6.1. The column-rule-extent and row-rule-extent Properties</a>
 <li><a href="#ref-for-propdef-column-rule-extent①">6.1.1.2. Masonry</a>
 <li><a href="#ref-for-propdef-column-rule-extent②">6.1.2. Flex Containers</a> <a href="#ref-for-propdef-column-rule-extent③">(2)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="propdef-row-rule-extent">
 <a href="#propdef-row-rule-extent">#propdef-row-rule-extent</a>Referenced in:
 <ul>
 <li><a href="#ref-for-propdef-row-rule-extent">6.1. The column-rule-extent and row-rule-extent Properties</a>
 <li><a href="#ref-for-propdef-row-rule-extent①">6.1.2. Flex Containers</a> <a href="#ref-for-propdef-row-rule-extent②">(2)</a> <a href="#ref-for-propdef-row-rule-extent③">(3)</a> <a href="#ref-for-propdef-row-rule-extent④">(4)</a> <a href="#ref-for-propdef-row-rule-extent⑤">(5)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="segment">
 <a href="#segment">#segment</a>Referenced in:
 <ul>
 <li><a href="#ref-for-segment">6.1.5. Multi-Column Containers</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="extent-size">
 <a href="#extent-size">#extent-size</a>Referenced in:
 <ul>
 <li><a href="#ref-for-extent-size">6.1.1. Grid Containers</a> <a href="#ref-for-extent-size①">(2)</a> <a href="#ref-for-extent-size②">(3)</a> <a href="#ref-for-extent-size③">(4)</a> <a href="#ref-for-extent-size④">(5)</a> <a href="#ref-for-extent-size⑤">(6)</a> <a href="#ref-for-extent-size⑥">(7)</a> <a href="#ref-for-extent-size⑦">(8)</a> <a href="#ref-for-extent-size⑧">(9)</a> <a href="#ref-for-extent-size⑨">(10)</a> <a href="#ref-for-extent-size①⓪">(11)</a> <a href="#ref-for-extent-size①①">(12)</a>
 <li><a href="#ref-for-extent-size①②">6.1.2. Flex Containers</a> <a href="#ref-for-extent-size①③">(2)</a> <a href="#ref-for-extent-size①④">(3)</a>
 <li><a href="#ref-for-extent-size①⑤">7. The Rule Containing Rectangle</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="valdef-row-rule-extent-short">
 <a href="#valdef-row-rule-extent-short">#valdef-row-rule-extent-short</a>Referenced in:
 <ul>
 <li><a href="#ref-for-valdef-row-rule-extent-short">6.1.2. Flex Containers</a> <a href="#ref-for-valdef-row-rule-extent-short①">(2)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="valdef-row-rule-extent-long">
 <a href="#valdef-row-rule-extent-long">#valdef-row-rule-extent-long</a>Referenced in:
 <ul>
 <li><a href="#ref-for-valdef-row-rule-extent-long">6.1.2. Flex Containers</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="next-grid-cell-span">
 <a href="#next-grid-cell-span">#next-grid-cell-span</a>Referenced in:
 <ul>
 <li><a href="#ref-for-next-grid-cell-span">6.1.1. Grid Containers</a> <a href="#ref-for-next-grid-cell-span①">(2)</a> <a href="#ref-for-next-grid-cell-span②">(3)</a> <a href="#ref-for-next-grid-cell-span③">(4)</a> <a href="#ref-for-next-grid-cell-span④">(5)</a> <a href="#ref-for-next-grid-cell-span⑤">(6)</a> <a href="#ref-for-next-grid-cell-span⑥">(7)</a> <a href="#ref-for-next-grid-cell-span⑦">(8)</a> <a href="#ref-for-next-grid-cell-span⑧">(9)</a> <a href="#ref-for-next-grid-cell-span⑨">(10)</a> <a href="#ref-for-next-grid-cell-span①⓪">(11)</a> <a href="#ref-for-next-grid-cell-span①①">(12)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="next-flex-line-item">
 <a href="#next-flex-line-item">#next-flex-line-item</a>Referenced in:
 <ul>
 <li><a href="#ref-for-next-flex-line-item">6.1.2. Flex Containers</a> <a href="#ref-for-next-flex-line-item①">(2)</a> <a href="#ref-for-next-flex-line-item②">(3)</a> <a href="#ref-for-next-flex-line-item③">(4)</a> <a href="#ref-for-next-flex-line-item④">(5)</a> <a href="#ref-for-next-flex-line-item⑤">(6)</a> <a href="#ref-for-next-flex-line-item⑥">(7)</a> <a href="#ref-for-next-flex-line-item⑦">(8)</a>
 </ul>
 </aside>
 <aside class="dfn-panel" data-for="rule-containing-rectangle①">
 <a href="#rule-containing-rectangle①">#rule-containing-rectangle①</a>Referenced in:
 <ul>
 <li><a href="#ref-for-rule-containing-rectangle①">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a>
 <li><a href="#ref-for-rule-containing-rectangle①①">3.1. The column-rule-width and row-rule-width Properties</a> <a href="#ref-for-rule-containing-rectangle①②">(2)</a>
 <li><a href="#ref-for-rule-containing-rectangle①③">3.2. The column-rule-length and row-rule-length Properties</a>
 <li><a href="#ref-for-rule-containing-rectangle①④">3.3. The Rule Lateral Inset Properties</a> <a href="#ref-for-rule-containing-rectangle①⑤">(2)</a>
 <li><a href="#ref-for-rule-containing-rectangle①⑥">3.4. Resolving a rule’s position and size</a> <a href="#ref-for-rule-containing-rectangle①⑦">(2)</a>
 <li><a href="#ref-for-rule-containing-rectangle①⑧">3.6. The Rule Longitudinal Inset Properties</a> <a href="#ref-for-rule-containing-rectangle①⑨">(2)</a> <a href="#ref-for-rule-containing-rectangle①①⓪">(3)</a>
 <li><a href="#ref-for-rule-containing-rectangle①①①">3.8. The Rule Longitudinal Edge Inset Properties</a>
 <li><a href="#ref-for-rule-containing-rectangle①①②">5.1. The column-rule-align and row-rule-align Properties</a>
 <li><a href="#ref-for-rule-containing-rectangle①①③">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a>
 <li><a href="#ref-for-rule-containing-rectangle①①④">7. The Rule Containing Rectangle</a> <a href="#ref-for-rule-containing-rectangle①①⑤">(2)</a> <a href="#ref-for-rule-containing-rectangle①①⑥">(3)</a> <a href="#ref-for-rule-containing-rectangle①①⑦">(4)</a> <a href="#ref-for-rule-containing-rectangle①①⑧">(5)</a>
 </ul>
 </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
 var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
 // Find the dfn element or panel, if any, that was clicked on.
 var el = e.target;
 var target;
 var hitALink = false;
 while(el.parentElement) {
 if(el.tagName == "A") {
 // Clicking on a link in a <dfn> shouldn't summon the panel
 hitALink = true;
 }
 if(el.classList.contains("dfn-paneled")) {
 target = "dfn";
 break;
 }
 if(el.classList.contains("dfn-panel")) {
 target = "dfn-panel";
 break;
 }
 el = el.parentElement;
 }
 if(target != "dfn-panel") {
 // Turn off any currently "on" or "activated" panels.
 queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
 el.classList.remove("on");
 el.classList.remove("activated");
 });
 }
 if(target == "dfn" && !hitALink) {
 // open the panel
 var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
 if(dfnPanel) {
 dfnPanel.classList.add("on");
 var rect = el.getBoundingClientRect();
 dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
 dfnPanel.style.top = window.scrollY + rect.top + "px";
 var panelRect = dfnPanel.getBoundingClientRect();
 var panelWidth = panelRect.right - panelRect.left;
 if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
 // Reposition, because the panel is overflowing
 dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
 }
 } else {
 console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
 }
 } else if(target == "dfn-panel") {
 // Switch it to "activated" state, which pins it.
 el.classList.add("activated");
 el.style.left = null;
 el.style.top = null;
 }

});
</script>
<script>/* script-wpt */
let wptPath = "/";
"use strict";

document.addEventListener("DOMContentLoaded", async ()=>{
 if(wptPath == "/") return;

 const runsUrl = "https://wpt.fyi/api/runs?label=master&label=stable&max-count=1&product=chrome&product=firefox&product=safari&product=edge";
 const runs = await (await fetch(runsUrl)).json();

 const testResults = await( await fetch("https://wpt.fyi/api/search", {
 method:"POST",
 headers:{
 "Content-Type":"application/json",
 },
 body: JSON.stringify({
 "run_ids": runs.map(x=>x.id),
 "query": {"path": wptPath},
 })
 })).json();

 const browsers = runs.map(x=>({name:x.browser_name, version:x.browser_version, passes:0, total: 0}));
 const resultsFromPath = new Map(testResults.results.map(result=>{
 const testPath = result.test;
 const passes = result.legacy_status.map(x=>[x.passes, x.total]);
 return [testPath, passes];
 }));
 document.querySelectorAll(".wpt-name").forEach(nameEl=>{
 const passData = resultsFromPath.get("/" + nameEl.getAttribute("title"));
 const numTests = passData[0][1];
 if(numTests > 1) {
 nameEl.insertAdjacentElement("beforeend",
 el("small", {}, ` (${numTests} tests)`));
 }
 if(passData == undefined) return;
 passData.forEach((p,i) => {
 browsers[i].passes += p[0];
 browsers[i].total += p[1];
 })
 const resultsEl = el("span",{"class":"wpt-results"},
 ...passData.map((p,i) => el("span",
 {
 "title": `${browsers[i].name} ${p[0]}/${p[1]}`,
 "class": "wpt-result",
 "style": `background: conic-gradient(forestgreen ${p[0]/p[1]*360}deg, darkred 0deg);`,
 })),
 );
 nameEl.insertAdjacentElement("afterend", resultsEl);
 });
 const overview = document.querySelector(".wpt-overview");
 if(overview) {
 overview.appendChild(el('ul',{}, ...browsers.map(formatWptResult)));
 document.head.appendChild(el('style', {},
 `.wpt-overview ul { display: flex; flex-flow: row wrap; gap: .2em; justify-content: start; list-style: none; padding: 0; margin: 0;}
 .wpt-overview li { padding: .25em 1em; color: black; text-align: center; }
 .wpt-overview img { height: 1.5em; height: max(1.5em, 32px); background: transparent; }
 .wpt-overview .browser { font-weight: bold; }
 .wpt-overview .passes-none { background: #e57373; }
 .wpt-overview .passes-hardly { background: #ffb74d; }
 .wpt-overview .passes-a-few { background: #ffd54f; }
 .wpt-overview .passes-half { background: #fff176; }
 .wpt-overview .passes-lots { background: #dce775; }
 .wpt-overview .passes-most { background: #aed581; }
 .wpt-overview .passes-all { background: #81c784; }`));
 }
});
function el(name, attrs, ...content) {
 const x = document.createElement(name);
 for(const [k,v] of Object.entries(attrs)) {
 x.setAttribute(k, v);
 }
 for(let child of content) {
 if(typeof child == "string") child = document.createTextNode(child);
 try {
 x.appendChild(child);
 } catch(e) { console.log({x, child}); }
 }
 return x;
}
function formatWptResult({name, version, passes, total}) {
 const passRate = passes/total;
 let passClass = "";
 if(passRate == 0) passClass = "passes-none";
 else if(passRate < .2) passClass = "passes-hardly";
 else if(passRate < .4) passClass = "passes-a-few";
 else if(passRate < .6) passClass = "passes-half";
 else if(passRate < .8) passClass = "passes-lots";
 else if(passRate < 1) passClass = "passes-most";
 else passClass = "passes-all";

 name = name[0].toUpperCase() + name.slice(1);
 const shortVersion = /^\d+/.exec(version);
 const icon = []

 if(name == "Chrome") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/chrome-dev_64x64.png"}));
 if(name == "Edge") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/edge-dev_64x64.png"}));
 if(name == "Safari") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/safari-preview_64x64.png"}));
 if(name == "Firefox") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/firefox-nightly_64x64.png"}));

 return el('li', {"class":passClass},
 el('nobr', {'class':'browser'}, ...icon, ` ${name} ${shortVersion}`),
 el('br', {}),
 el('nobr', {'class':'pass-rate'}, `${passes}/${total}`)
 );
}</script>

Messung V0.5 in Prozent

¤ Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.0.124Bemerkung: (Wie Sie bei der Firma Beratungs- und Dienstleistungen beauftragen können 2026-04-28) ¤

*Eine klare Vorstellung vom Zielzustand

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.