Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
commit: 26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree: f435a8308119effd964b339f76abb83a57c29483 /layout/docs/css-gap-decorations/Overview.html
parent: Initial commit. (diff)
download: firefox-upstream/124.0.1.tar.xz
firefox-upstream/124.0.1.zip
1 files changed, 3803 insertions, 0 deletions
diff --git a/layout/docs/css-gap-decorations/Overview.html b/layout/docs/css-gap-decorations/Overview.html
new file mode 100644
index 0000000000..56c46a3468
--- /dev/null
+++ b/layout/docs/css-gap-decorations/Overview.html
@@ -0,0 +1,3803 @@
+<!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=&quot;https://drafts.csswg.org/css-align&quot;>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">
+   <p data-fill-with="logo"><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> </p>
+   <h1 class="p-name no-ref" id="title">CSS Gap Decorations</h1>
+   <p id="w3c-state"><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></p>
+   <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>
+   <p class="copyright" data-fill-with="copyright"><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><sup>®</sup> (<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. </p>
+   <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"><span class="content">Abstract</span></h2>
+   <p>This is a proposal to extend <a href="https://drafts.csswg.org/css-align">CSS Box Alignment</a> to support gap decorations.</p>
+    <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"><span class="content">Status of this document</span></h2>
+  <div data-fill-with="status">
+   <p> 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. </p>
+   <p>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] <i>…summary of comment…</i>”.
+	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>. </p>
+   <p>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>. </p>
+   <p></p>
+  </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"><span class="secno">1</span> <span class="content">Introduction</span></a>
+     <ol class="toc">
+      <li><a href="#overview"><span class="secno">1.1</span> <span class="content">Overview</span></a>
+      <li><a href="#placement"><span class="secno">1.2</span> <span class="content">Module Interactions</span></a>
+      <li><a href="#definitions"><span class="secno">1.3</span> <span class="content">Definitions</span></a>
+     </ol>
+    <li>
+     <a href="#rule-image"><span class="secno">2</span> <span class="content">Rule Images and Gradients</span></a>
+     <ol class="toc">
+      <li><a href="#column-rule-image-source"><span class="secno">2.1</span> <span class="content">The <span class="property">column-rule-image-source</span> and <span class="property">row-rule-image-source</span> Properties</span></a>
+      <li><a href="#column-rule-image-slice"><span class="secno">2.2</span> <span class="content">The <span class="property">column-rule-image-slice</span> and <span class="property">row-rule-image-slice</span> Properties</span></a>
+      <li><a href="#column-rule-image-repeat"><span class="secno">2.3</span> <span class="content">The <span class="property">column-rule-image-repeat</span> and <span class="property">row-rule-image-repeat</span> Properties</span></a>
+      <li><a href="#column-rule-image"><span class="secno">2.4</span> <span class="content">The <span class="property">column-rule-image</span> and <span class="property">row-rule-image</span> Shorthands</span></a>
+     </ol>
+    <li>
+     <a href="#size"><span class="secno">3</span> <span class="content">Rule Positioning and Sizing</span></a>
+     <ol class="toc">
+      <li><a href="#column-rule-width"><span class="secno">3.1</span> <span class="content">The <span class="property">column-rule-width</span> and <span class="property">row-rule-width</span> Properties</span></a>
+      <li><a href="#column-rule-length"><span class="secno">3.2</span> <span class="content">The <span class="property">column-rule-length</span> and <span class="property">row-rule-length</span> Properties</span></a>
+      <li><a href="#column-rule-lateral-inset-start"><span class="secno">3.3</span> <span class="content">The Rule Lateral Inset Properties</span></a>
+      <li><a href="#resolving-position-and-size-algo"><span class="secno">3.4</span> <span class="content">Resolving a rule’s position and size</span></a>
+      <li><a href="#column-rule-lateral-inset"><span class="secno">3.5</span> <span class="content">The <span class="property">column-rule-lateral-inset</span> and <span class="property">row-rule-lateral-inset</span> Shorthands</span></a>
+      <li><a href="#column-rule-longitudinal-inset-start"><span class="secno">3.6</span> <span class="content">The Rule Longitudinal Inset Properties</span></a>
+      <li><a href="#column-rule-longitudinal-inset"><span class="secno">3.7</span> <span class="content">The <span class="property">column-rule-longitudinal-inset</span> and <span class="property">row-rule-longitudinal-inset</span> Shorthands</span></a>
+      <li><a href="#column-rule-longitudinal-edge-inset-start"><span class="secno">3.8</span> <span class="content">The Rule Longitudinal Edge Inset Properties</span></a>
+      <li><a href="#column-rule-longitudinal-edge-inset"><span class="secno">3.9</span> <span class="content">The <span class="property">column-rule-longitudinal-edge-inset</span> and <span class="property">row-rule-longitudinal-edge-inset</span> Shorthands</span></a>
+     </ol>
+    <li>
+     <a href="#row-rule-props"><span class="secno">4</span> <span class="content">Row Rule Style and Color</span></a>
+     <ol class="toc">
+      <li><a href="#row-rule-style"><span class="secno">4.1</span> <span class="content">The <span class="property">row-rule-style</span> and <span class="property">row-rule-color</span> Properties</span></a>
+      <li><a href="#row-rule"><span class="secno">4.2</span> <span class="content">The <span class="property">row-rule</span> Shorthand</span></a>
+     </ol>
+    <li>
+     <a href="#rule-align"><span class="secno">5</span> <span class="content">Rule Alignment</span></a>
+     <ol class="toc">
+      <li><a href="#column-rule-align"><span class="secno">5.1</span> <span class="content">The <span class="property">column-rule-align</span> and <span class="property">row-rule-align</span> Properties</span></a>
+      <li><a href="#column-rule-edge-align"><span class="secno">5.2</span> <span class="content">The <span class="property">column-rule-edge-align</span> and <span class="property">row-rule-edge-align</span> Properties</span></a>
+     </ol>
+    <li>
+     <a href="#rule-extent"><span class="secno">6</span> <span class="content">Rule Extent</span></a>
+     <ol class="toc">
+      <li>
+       <a href="#column-rule-extent"><span class="secno">6.1</span> <span class="content">The <span class="property">column-rule-extent</span> and <span class="property">row-rule-extent</span> Properties</span></a>
+       <ol class="toc">
+        <li>
+         <a href="#rule-extent-grid"><span class="secno">6.1.1</span> <span class="content">Grid Containers</span></a>
+         <ol class="toc">
+          <li><a href="#rule-extent-subgrid"><span class="secno">6.1.1.1</span> <span class="content">Subgrid</span></a>
+          <li><a href="#rule-extent-masonry"><span class="secno">6.1.1.2</span> <span class="content">Masonry</span></a>
+         </ol>
+        <li><a href="#rule-extent-flexbox"><span class="secno">6.1.2</span> <span class="content">Flex Containers</span></a>
+        <li><a href="#rule-extent-table"><span class="secno">6.1.3</span> <span class="content">Table Containers</span></a>
+        <li><a href="#rule-extent-table-row-group"><span class="secno">6.1.4</span> <span class="content">Table Row Group Containers</span></a>
+        <li><a href="#rule-extent-multicol"><span class="secno">6.1.5</span> <span class="content">Multi-Column Containers</span></a>
+       </ol>
+     </ol>
+    <li><a href="#rule-containing-rectangle"><span class="secno">7</span> <span class="content">The Rule Containing Rectangle</span></a>
+    <li><a href="#rule-painting-order"><span class="secno">8</span> <span class="content">Rule Painting Order</span></a>
+    <li><a href="#rule-overflow"><span class="secno">9</span> <span class="content">Rule Overflow</span></a>
+    <li>
+     <a href="#w3c-conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
+     <ol class="toc">
+      <li><a href="#w3c-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
+      <li><a href="#w3c-conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
+      <li>
+       <a href="#w3c-partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a>
+       <ol class="toc">
+        <li><a href="#w3c-conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
+       </ol>
+      <li><a href="#w3c-testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a>
+     </ol>
+    <li>
+     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
+     <ol class="toc">
+      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
+      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
+     </ol>
+    <li>
+     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
+     <ol class="toc">
+      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
+      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
+     </ol>
+    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
+    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
+   </ol>
+  </nav>
+  <main>
+   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
+   <p><em>This section is not normative.</em></p>
+   <h3 class="heading settled" data-level="1.1" id="overview"><span class="secno">1.1. </span><span class="content">Overview</span><a class="self-link" href="#overview"></a></h3>
+   <p>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>.</p>
+   <h3 class="heading settled" data-level="1.2" id="placement"><span class="secno">1.2. </span><span class="content">Module Interactions</span><a class="self-link" href="#placement"></a></h3>
+   <p>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">&lt;percentage></a> and <span class="css">auto</span> values.
+    We also generalize the existing <span class="css">column-rule-*</span> properties to apply to other
+    types of containers.
+    Accordingly, we propose to move the existing <span class="css">column-rule</span> 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.</p>
+   <h3 class="heading settled" data-level="1.3" id="definitions"><span class="secno">1.3. </span><span class="content">Definitions</span><a class="self-link" href="#definitions"></a></h3>
+   <p>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 <span class="css">column-rule-width</span> 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.</p>
+   <h2 class="heading settled" data-level="2" id="rule-image"><span class="secno">2. </span><span class="content">Rule Images and Gradients</span><a class="self-link" href="#rule-image"></a></h2>
+   <p>Authors may specify an image or gradient to be used in place of the <span class="css">column-rule-style</span>.
+    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>.</p>
+   <h3 class="heading settled" data-level="2.1" id="column-rule-image-source"><span class="secno">2.1. </span><span class="content">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</span><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">&lt;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 <span class="css">none</span> 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①">&lt;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>
+   <p>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②">&lt;image></a> to use in place of the rendering specified
+    by the <span class="css">column-rule-style</span>/<span class="css">row-rule-style</span> properties.</p>
+   <p>As for borders, a rule image is not rendered when the corresponding <span class="css">column-rule-style</span>/<span class="css">row-rule-style</span> is <span class="css">none</span>.</p>
+   <h3 class="heading settled" data-level="2.2" id="column-rule-image-slice"><span class="secno">2.2. </span><span class="content">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</span><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">&lt;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①">&lt;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>
+   <p><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.</p>
+   <p>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.</p>
+   <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②">&lt;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①">&lt;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>
+   <p>Negative values are not allowed.
+    Computed values larger than the size of the image are interpreted as <span class="css">100%</span>.</p>
+   <p>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>.</p>
+   <p>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.</p>
+   <h3 class="heading settled" data-level="2.3" id="column-rule-image-repeat"><span class="secno">2.3. </span><span class="content">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</span><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 <span id="ref-for-comb-one③">|</span> round <span id="ref-for-comb-one④">|</span> 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>
+   <p>These properties specify how the middle part of a sliced rule image is scaled and tiled.
+    Values have the following meanings:</p>
+   <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>
+   <p>The exact process for scaling and tiling the image parts is defined by drawing the equivalent <span class="css">border-image</span> with the top and bottom <span class="css">border-image-slice</span> values set from the corresponding <span class="css">column-rule-image-slice</span> values, and the <span class="css">border-image-slice</span> left value set to <span class="css">100%</span> and
+    the right value set to <span class="css">0</span>. The <span class="css">border-image-width</span> top value set to the <span class="css">column-rule-image-slice</span> top value.  The <span class="css">border-image-width</span> top value set to the <span class="css">column-rule-image-slice</span> bottom value. The <span class="css">border-image-width</span> top value set to zero.</p>
+   <h3 class="heading settled" data-level="2.4" id="column-rule-image"><span class="secno">2.4. </span><span class="content">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</span><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①">&lt;'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③">&lt;'column-rule-image-slice'></a> <span id="ref-for-comb-any①">||</span> <a class="production" data-link-type="propdesc" href="#propdef-column-rule-image-repeat" id="ref-for-propdef-column-rule-image-repeat①">&lt;'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"><span class="secno">3. </span><span class="content">Rule Positioning and Sizing</span><a class="self-link" href="#size"></a></h2>
+   <h3 class="heading settled" data-level="3.1" id="column-rule-width"><span class="secno">3.1. </span><span class="content">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</span><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③">&lt;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">&lt;line-width></a>; <span class="css">0px</span> if the column rule style is <span class="css">none</span> or <span class="css">hidden</span>. 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">&lt;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④">&lt;percentage></a> <span id="ref-for-comb-one⑦">|</span> 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">&lt;line-width></a>; <span class="css">0px</span> if the column rule style is <span class="css">none</span> or <span class="css">hidden</span>. 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>
+   <p>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).</p>
+   <p>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.</p>
+   <h3 class="heading settled" data-level="3.2" id="column-rule-length"><span class="secno">3.2. </span><span class="content">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</span><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">&lt;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>
+   <p>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).</p>
+   <p>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.</p>
+   <p class="note" role="note"><span>Note:</span> 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.</p>
+   <h3 class="heading settled" data-level="3.3" id="column-rule-lateral-inset-start"><span class="secno">3.3. </span><span class="content">The Rule Lateral Inset Properties</span><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①">&lt;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>
+   <p>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.</p>
+   <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>
+   <p class="note" role="note"><span>NOTE:</span> The <span class="css">column-rule-lateral-inset</span> and <span class="css">column-rule-width</span> <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.</p>
+   <h3 class="heading settled" data-level="3.4" id="resolving-position-and-size-algo"><span class="secno">3.4. </span><span class="content">Resolving a rule’s position and size</span><a class="self-link" href="#resolving-position-and-size-algo"></a></h3>
+   <p>Given a triplet of values: inset-start/end and a size for an axis, <span class="css">auto</span> 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:</p>
+   <ol id="rule-sizing">
+    <li>if all the values are <span class="css">auto</span> then set both inset values to zero and solve for size 
+    <li>if none of the values are <span class="css">auto</span> then the situation is over-constrained: solve by
+            treating the end inset value as <span class="css">auto</span> 
+    <li>if both inset properties are <span class="css">auto</span>, 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 <span class="css">auto</span> and only one of the inset values is <span class="css">auto</span> then set the <span class="css">auto</span> inset value to zero
+            and solve for size, if that makes size negative then set the size to zero and solve for the <span class="css">auto</span> 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-<span class="css">auto</span> inset edge) 
+    <li>if the size is <span class="css">auto</span> and both inset values are non-<span class="css">auto</span> 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 <span class="css">auto</span> 
+   </ol>
+   <p>These rules resolves the <span class="css">column-rule-width</span>, <span class="css">column-rule-lateral-inset-start</span>, and <span class="css">column-rule-lateral-inset-end</span> triplet
+    of values in a rule’s lateral axis.</p>
+   <p>The same rules are also used to resolve <span class="css">column-rule-length</span>, <span class="css">column-rule-longitudinal-[edge-]inset-start</span>, and <span class="css">column-rule-longitudinal-[edge-]inset-end</span> 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).</p>
+   <p>Ditto for the corresponding <span class="css">row-rule-*</span> properties.</p>
+   <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"><span class="secno">3.5. </span><span class="content">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</span><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">&lt;'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">&lt;'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">&lt;'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">&lt;'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>
+   <p>These are shortands for specifying the corresponding start/end values.
+    If one value is specified it is used for both start and end.</p>
+   <h3 class="heading settled" data-level="3.6" id="column-rule-longitudinal-inset-start"><span class="secno">3.6. </span><span class="content">The Rule Longitudinal Inset Properties</span><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②">&lt;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>
+   <p>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.</p>
+   <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>
+   <p class="note" role="note"><span>Note:</span> 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>.</p>
+   <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"><span class="css">rule</span> 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"><span class="secno">3.7. </span><span class="content">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</span><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">&lt;'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">&lt;'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">&lt;'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">&lt;'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>
+   <p>These shortands specify the corresponding start/end values. If one value is specified it is used for both start/end.</p>
+   <h3 class="heading settled" data-level="3.8" id="column-rule-longitudinal-edge-inset-start"><span class="secno">3.8. </span><span class="content">The Rule Longitudinal Edge Inset Properties</span><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③">&lt;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>
+   <p>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"><span class="css">*-rule-edge-align</span></a> properties (defined below) and the <span class="css">*-rule-longitudinal-inset</span> properties are used together with <a href="#column-rule-align"><span class="css">*-rule-align</span></a>.</p>
+   <h3 class="heading settled" data-level="3.9" id="column-rule-longitudinal-edge-inset"><span class="secno">3.9. </span><span class="content">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</span><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">&lt;'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">&lt;'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">&lt;'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">&lt;'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>
+   <p>These shortands specify the corresponding start/end values. If one value is specified it is used for both start/end.</p>
+   <h2 class="heading settled" data-level="4" id="row-rule-props"><span class="secno">4. </span><span class="content">Row Rule Style and Color</span><a class="self-link" href="#row-rule-props"></a></h2>
+   <h3 class="heading settled" data-level="4.1" id="row-rule-style"><span class="secno">4.1. </span><span class="content">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</span><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">&lt;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">&lt;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>
+   <p>These properties are the same as the <span class="css">column-</span> properties but for the row rules.</p>
+   <h3 class="heading settled" data-level="4.2" id="row-rule"><span class="secno">4.2. </span><span class="content">The <a class="property" data-link-type="propdesc" href="#propdef-row-rule" id="ref-for-propdef-row-rule">row-rule</a> Shorthand</span><a class="self-link" href="#row-rule"></a></h3>
+   <p>This shorthand works the same as <span class="css">column-rule</span>.</p>
+   <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①">&lt;'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①">&lt;'row-rule-style'></a> <span id="ref-for-comb-any③">||</span> <a class="production" data-link-type="propdesc" href="#propdef-row-rule-color" id="ref-for-propdef-row-rule-color①">&lt;'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>
+   <p class="issue" id="issue-53073ff7"><a class="self-link" href="#issue-53073ff7"></a> lots of new possible shorthands... we now have many
+    properties (and shorthands) with a <span class="css">column-rule</span> and <span class="css">row-rule</span> 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: <span class="production">&lt;row-rule-foo></span> <span class="production">&lt;column-rule-foo></span>?'.
+    As usual, we have to be careful with the separator though, to make it
+    forward-compatible with any changes we might want to make...</p>
+   <h2 class="heading settled" data-level="5" id="rule-align"><span class="secno">5. </span><span class="content">Rule Alignment</span><a class="self-link" href="#rule-align"></a></h2>
+   <h3 class="heading settled" data-level="5.1" id="column-rule-align"><span class="secno">5.1. </span><span class="content">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</span><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 <span id="ref-for-comb-one①③">|</span> gap-over <span id="ref-for-comb-one①④">|</span> rule <span id="ref-for-comb-one①⑤">|</span> rule-center <span id="ref-for-comb-one①⑥">|</span> 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>
+   <p>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, <span class="css">gap</span>,
+    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).</p>
+   <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. (<span class="css">rule-center</span>,
+        for example, would otherwise look like one long rule) 
+    <p>Note also that the column rule is intentionally not centered in
+        the gap (to separate the <span class="css">rule-center</span> position
+        from the <span class="css">gap-center</span> position)</p>
+    <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>
+    <p>You might be wondering if there’s a bug in the bottom-right example.
+        Why is the <span class="css">gap-over</span> not honored there?
+        That’s a non-interior rule edge and it’s controlled separately with <span class="css">row-rule-edge-align</span>, see below.</p>
+   </aside>
+   <h3 class="heading settled" data-level="5.2" id="column-rule-edge-align"><span class="secno">5.2. </span><span class="content">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</span><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 <span id="ref-for-comb-one①⑧">|</span> 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>
+   <p>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.)</p>
+   <p class="note" role="note"><span>Note:</span> The <span class="css">rule</span>/<span class="css">rule-center</span>/<span class="css">rule-over</span> keywords are omitted here (compared with <span class="css">column-rule-align</span>) since there are no rules in the edge gutters.</p>
+   <p>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 <span class="css">gap</span> / <span class="css">gap-over</span> and <span class="css">rule</span> / <span class="css">rule-over</span> are swapped.  It’s only the
+    center values that are shared.  Also note that <span class="css">gap-center</span> isn’t necessarily aligned with <span class="css">rule-center</span>. 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.)</p>
+   <p><span class="css">column-rule-edge-align</span> controls which of the red and cyan colored
+    attachment points should be used. <span class="css">column-rule-edge-align</span> the yellow colored
+    ones (and all other interior edges if there were more rows).</p>
+   <figure>
+     <img height="585" src="media/rule-alignment-values.png" width="621"> 
+    <figcaption> Illustration of rule alignment values. </figcaption>
+   </figure>
+   <p>Here’s the rule styling used for the above example:</p>
+<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>
+   <p>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 (<span class="css">gap</span>)
+    so they align with the inline axis gap edges.</p>
+   <p class="issue" id="issue-13842b6f"><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...'</p>
+   <h2 class="heading settled" data-level="6" id="rule-extent"><span class="secno">6. </span><span class="content">Rule Extent</span><a class="self-link" href="#rule-extent"></a></h2>
+   <h3 class="heading settled" data-level="6.1" id="column-rule-extent"><span class="secno">6.1. </span><span class="content">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</span><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 <span id="ref-for-comb-one②⓪">|</span> end <span id="ref-for-comb-one②①">|</span> short <span id="ref-for-comb-one②②">|</span> long <span id="ref-for-comb-one②③">|</span> all-start <span id="ref-for-comb-one②④">|</span> all-end <span id="ref-for-comb-one②⑤">|</span> all-short <span id="ref-for-comb-one②⑥">|</span> 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>
+   <p class="issue" id="issue-70dc1ba4"><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: <span class="css">[segment | [[start | end | short | long] all?] ] allow-overlap?</span></p>
+   <p>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 <span class="css">segment</span> in more detail in the container-specific sub-sections that follow.</p>
+   <p>The <span class="css">allow-overlap</span> only affects rules in grid and table layout with spanning items/cells.
+    It controls whether a rule should continue through such a span.</p>
+   <p class="note" role="note"><span>Note:</span> 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.</p>
+   <p>The <span class="css">all-*</span> 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 <span class="css">all-*</span> 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.</p>
+   <p>The lateral position of a rule is determined by its first segment.</p>
+   <p>The following sub-sections will describe the rule extent for each type of layout container in more detail.</p>
+   <h4 class="heading settled" data-level="6.1.1" id="rule-extent-grid"><span class="secno">6.1.1. </span><span class="content">Grid Containers</span><a class="self-link" href="#rule-extent-grid"></a></h4>
+   <p>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 <span class="css">segment</span> 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>.</p>
+   <p>This <a href="examples/grid-segment-001.html">example</a> illustrates <span class="css">segment</span> rules.
+    Note that rules are generated in all gaps, whether there are items in a grid cell or not.</p>
+   <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 <span class="css">segment</span> extent in a grid container. </figcaption>
+    </figure>
+   </aside>
+   <p><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.</p>
+   <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>
+   <p>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.</p>
+   <p>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 <span class="css">column-rule-extent</span>/<span class="css">row-rule-extent</span> values as follows:</p>
+   <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>
+   <p>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.</p>
+   <p>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:</p>
+   <ol id="rule-extent-grid-algorithm">
+    <li>if <span class="css">allow-overlap</span> 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 <span class="css">*-rule-extent</span> is one of the <span class="css">all-*</span> 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 <span class="css">allow-overlap</span> 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 <span class="css">*-rule-extent</span> is <span class="css">segment</span>,
+           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 <span class="css">allow-overlap</span> 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 <span class="css">short</span>(<span class="css">long</span>),
+                    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 <span class="css">start</span>(<span class="css">end</span>),
+                    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 <span class="css">all-*</span>,
+                    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 <span class="css">row-rule-extent</span> 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 <span class="css">row-rule-extent</span> in a grid container. </figcaption>
+    </figure>
+   </aside>
+   <h5 class="heading settled" data-level="6.1.1.1" id="rule-extent-subgrid"><span class="secno">6.1.1.1. </span><span class="content">Subgrid</span><a class="self-link" href="#rule-extent-subgrid"></a></h5>
+   <p>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.</p>
+   <p>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.</p>
+   <p><span class="css">allow-overlap</span> 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.</p>
+   <p>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.</p>
+   <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. 
+    <p>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.</p>
+    <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"><span class="secno">6.1.1.2. </span><span class="content">Masonry</span><a class="self-link" href="#rule-extent-masonry"></a></h5>
+   <p>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 <span id="ref-for-masonry-axis②">masonry axis</span> <a href="https://drafts.csswg.org/css-grid-3/#tracks-alignment">alignment</a>)
+    and size.</p>
+   <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>
+   <p class="issue" id="issue-b6f1d65c"><a class="self-link" href="#issue-b6f1d65c"></a> TODO: add definition list and algorithm here...</p>
+   <p class="issue" id="issue-3e9abc31"><a class="self-link" href="#issue-3e9abc31"></a> is it useful to be able to create a rule extent for the <i>intersection</i> or <i>union</i> 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 <span class="css">short</span>/<span class="css">long</span> 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 <i>currently</i>...</p>
+   <h4 class="heading settled" data-level="6.1.2" id="rule-extent-flexbox"><span class="secno">6.1.2. </span><span class="content">Flex Containers</span><a class="self-link" href="#rule-extent-flexbox"></a></h4>
+   <p>In a <a href="https://drafts.csswg.org/css-flexbox/#valdef-flex-direction-row">row-oriented flex container</a>,
+    the <span class="css">row-rule-*</span> properties creates rules between flex lines,
+    and the <span class="css">column-rule-*</span> properties creates rules between <a href="css-flexbox">flex items</a> within a <a href="cs-flexbox">flex line</a>.</p>
+   <p>In <a href="https://drafts.csswg.org/css-flexbox/#valdef-flex-direction-row">column-oriented flex container</a>,
+    the roles of <span class="css">row-rule-extent</span> and <span class="css">column-rule-extent</span> 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).</p>
+   <p>Flex items can’t span multiple lines so there are no collisions possible for the main axis rules,
+    hence the <span class="css">allow-overlap</span> 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 <span class="css">allow-overlap</span> is used (together with
+    one the <span class="css">all-*</span> 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.</p>
+   <p><span class="css">all-long allow-overlap</span> 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 <span class="css">all-*</span> 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.</p>
+   <p><strong class="advisement"> Authors are advised to <strong>not</strong> use the <span class="css">allow-overlap</span> 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.</strong></p>
+   <p>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 <span class="css">row-rule-extent</span> values defined as follows:</p>
+   <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>
+   <p>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:</p>
+   <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>
+   <p>(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>)</p>
+   <aside class="example" id="example-374fda56">
+    <a class="self-link" href="#example-374fda56"></a> Here are a few examples to illustrate the <span class="css">row-rule-extent</span> 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"><span class="secno">6.1.3. </span><span class="content">Table Containers</span><a class="self-link" href="#rule-extent-table"></a></h4>
+   <p>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 <span id="ref-for-table-column-group①">table-column-groups</span>) collide with <span id="ref-for-table-row-group①⑦">table-row-groups</span>.
+    Row rules (between <span id="ref-for-table-row-group①⑧">table-row-groups</span>) collide with <span id="ref-for-table-column-group②">table-column-groups</span>.
+    The <span class="css">allow-overlap</span> can be used to create rules that extend over
+    the entire column/row length.  Given that all <span id="ref-for-table-column-group③">table-column-groups</span> have the same block
+    axis size and all <span id="ref-for-table-row-group①⑨">table-row-groups</span> have same the inline axis size,
+    the <span class="css">short</span>/<span class="css">long</span>/<span class="css">start</span>/<span class="css">end</span> keywords behave the same.  Ditto for the <span class="css">all-*</span> keywords.</p>
+   <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>
+   <p class="issue" id="issue-0ca7394a"><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</p>
+   <h4 class="heading settled" data-level="6.1.4" id="rule-extent-table-row-group"><span class="secno">6.1.4. </span><span class="content">Table Row Group Containers</span><a class="self-link" href="#rule-extent-table-row-group"></a></h4>
+   <p>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 <span id="ref-for-table-row①">table-rows</span> 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.</p>
+   <p>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 id="ref-for-span①">span</span> crossing it. <span class="css">allow-overlap</span> can be used to create rules that
+    extend over such spanning cells.</p>
+   <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>
+   <p><span class="css">visibility:collapse</span> on <a data-link-type="dfn">table-cells</a> does not affect the rules in any way.</p>
+   <h4 class="heading settled" data-level="6.1.5" id="rule-extent-multicol"><span class="secno">6.1.5. </span><span class="content">Multi-Column Containers</span><a class="self-link" href="#rule-extent-multicol"></a></h4>
+   <p><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 <i>valid</i> <span class="css">column-rule</span> style values.  Some previously <i>invalid</i> <span class="css">column-rule</span> values are now <i>valid</i> 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.</p>
+   <p>The <span class="css">row-rule-*</span> 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.</p>
+   <p>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>.</p>
+   <p class="issue" id="issue-409a7220"><a class="self-link" href="#issue-409a7220"></a> this proposal makes the assumption that the related proposal that <span class="css">row-gap</span> should apply to multi-column containers is also adopted
+    (<a href="https://github.com/w3c/csswg-drafts/issues/6746">issue #6746</a>).</p>
+   <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">&lt;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"><span class="secno">7. </span><span class="content">The Rule Containing Rectangle</span><a class="self-link" href="#rule-containing-rectangle"></a></h2>
+   <p>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.)</p>
+   <p>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> <i>in the same axis</i> as that would lead to a circular
+    dependency when resolving inset percentage values.  (The <span id="ref-for-rule-containing-rectangle①①⑤">rule containing rectangle</span> 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 <i>opposite axis</i>.</p>
+   <p>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:</p>
+<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>
+   <p>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 <span class="css">20px</span> 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 <span class="css">8px</span> 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 <span class="css" id="ref-for-propdef-column-rule-length②">column-rule-length: 100%</span> here instead, then the rule would fill the <span id="ref-for-rule-containing-rectangle①①⑧">rule containing rectangle</span> 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>.)</p>
+   <h2 class="heading settled" data-level="8" id="rule-painting-order"><span class="secno">8. </span><span class="content">Rule Painting Order</span><a class="self-link" href="#rule-painting-order"></a></h2>
+   <p>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.</p>
+   <p>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.</p>
+   <p>Again, note that for a specific fragment, <strong>all the column rules are painted before all the row rules</strong>,
+    the above merely tries to clarify the painting order of the rules for
+    a specific axis.</p>
+   <h2 class="heading settled" data-level="9" id="rule-overflow"><span class="secno">9. </span><span class="content">Rule Overflow</span><a class="self-link" href="#rule-overflow"></a></h2>
+   <p>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.</p>
+   <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>
+   <p>For clarity, none of the properties in this spec affects layout in any way.
+    Column and row rules are purely a painting effect.</p>
+  </main>
+  <h2 class="no-ref no-num heading settled" id="w3c-conformance"><span class="content"> Conformance</span><a class="self-link" href="#w3c-conformance"></a></h2>
+  <h3 class="no-ref heading settled" id="w3c-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#w3c-conventions"></a></h3>
+  <p>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. </p>
+  <p>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></p>
+  <p>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: </p>
+  <div class="example" id="w3c-example">
+   <a class="self-link" href="#w3c-example"></a> 
+   <p>This is an example of an informative example.</p>
+  </div>
+  <p>Informative notes begin with the word “Note” and are set apart from the
+    normative text with <code>class="note"</code>, like this: </p>
+  <p class="note" role="note">Note, this is an informative note.</p>
+  <p>
+   Advisements are normative sections styled to evoke special attention and are
+    set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
+    this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> 
+   <details class="wpt-tests-block" dir="ltr" lang="en" open>
+    <summary>Tests</summary>
+    <p>Tests relating to the content of this specification
+                     may be documented in “Tests” blocks like this one.
+                     Any such block is non-normative.</p>
+    <ul class="wpt-tests-list"></ul>
+    <hr>
+   </details>
+  </p>
+  <h3 class="no-ref heading settled" id="w3c-conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#w3c-conformance-classes"></a></h3>
+  <p>Conformance to this specification
+    is defined for three conformance classes: </p>
+  <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>
+  <p>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. </p>
+  <p>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.) </p>
+  <p>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. </p>
+  <h3 class="no-ref heading settled" id="w3c-partial"><span class="content"> Partial implementations</span><a class="self-link" href="#w3c-partial"></a></h3>
+  <p>So that authors can exploit the forward-compatible parsing rules to
+    assign fallback values, CSS renderers <strong>must</strong> 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 <strong>must not</strong> 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.</p>
+  <h4 class="heading settled" id="w3c-conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#w3c-conform-future-proofing"></a></h4>
+  <p>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. </p>
+  <h3 class="no-ref heading settled" id="w3c-testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#w3c-testing"></a></h3>
+  <p>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. </p>
+  <p>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. </p>
+  <p>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.</p>
+<script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script>
+  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
+  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><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><span>, in § 6.1.1</span>
+   <li><a href="#valdef-row-rule-extent-all-long">all-long</a><span>, in § 6.1.1</span>
+   <li><a href="#valdef-row-rule-extent-allow-overlap">allow-overlap</a><span>, in § 6.1.1</span>
+   <li><a href="#valdef-row-rule-extent-all-short">all-short</a><span>, in § 6.1.1</span>
+   <li><a href="#valdef-row-rule-extent-all-start">all-start</a><span>, in § 6.1.1</span>
+   <li><a href="#propdef-column-rule-align">column-rule-align</a><span>, in § 5.1</span>
+   <li><a href="#propdef-column-rule-edge-align">column-rule-edge-align</a><span>, in § 5.2</span>
+   <li><a href="#propdef-column-rule-extent">column-rule-extent</a><span>, in § 6.1</span>
+   <li><a href="#propdef-column-rule-image">column-rule-image</a><span>, in § 2.4</span>
+   <li><a href="#propdef-column-rule-image-repeat">column-rule-image-repeat</a><span>, in § 2.3</span>
+   <li><a href="#propdef-column-rule-image-slice">column-rule-image-slice</a><span>, in § 2.2</span>
+   <li><a href="#propdef-column-rule-image-source">column-rule-image-source</a><span>, in § 2.1</span>
+   <li><a href="#propdef-column-rule-lateral-inset">column-rule-lateral-inset</a><span>, in § 3.5</span>
+   <li><a href="#propdef-column-rule-lateral-inset-end">column-rule-lateral-inset-end</a><span>, in § 3.3</span>
+   <li><a href="#propdef-column-rule-lateral-inset-start">column-rule-lateral-inset-start</a><span>, in § 3.3</span>
+   <li><a href="#propdef-column-rule-length">column-rule-length</a><span>, in § 3.2</span>
+   <li><a href="#propdef-column-rule-longitudinal-edge-inset">column-rule-longitudinal-edge-inset</a><span>, in § 3.9</span>
+   <li><a href="#propdef-column-rule-longitudinal-edge-inset-end">column-rule-longitudinal-edge-inset-end</a><span>, in § 3.8</span>
+   <li><a href="#propdef-column-rule-longitudinal-edge-inset-start">column-rule-longitudinal-edge-inset-start</a><span>, in § 3.8</span>
+   <li><a href="#propdef-column-rule-longitudinal-inset">column-rule-longitudinal-inset</a><span>, in § 3.7</span>
+   <li><a href="#propdef-column-rule-longitudinal-inset-end">column-rule-longitudinal-inset-end</a><span>, in § 3.6</span>
+   <li><a href="#propdef-column-rule-longitudinal-inset-start">column-rule-longitudinal-inset-start</a><span>, in § 3.6</span>
+   <li><a href="#valdef-row-rule-extent-end">end</a><span>, in § 6.1.1</span>
+   <li><a href="#extent-size">extent size</a><span>, in § 6.1</span>
+   <li><a href="#lateral-axis">lateral axis</a><span>, in § 1.3</span>
+   <li><a href="#valdef-row-rule-extent-long">long</a><span>, in § 6.1.1</span>
+   <li><a href="#longitudinal-axis">longitudinal axis</a><span>, in § 1.3</span>
+   <li><a href="#next-flex-line-item">next flex line item</a><span>, in § 6.1.2</span>
+   <li><a href="#next-grid-cell-span">next grid cell span</a><span>, in § 6.1.1</span>
+   <li><a href="#valdef-column-rule-image-slice-number-0">&lt;number [0,∞]></a><span>, in § 2.2</span>
+   <li><a href="#valdef-column-rule-image-slice-percentage-0">&lt;percentage [0,∞]></a><span>, in § 2.2</span>
+   <li><a href="#valdef-column-rule-image-repeat-repeat">repeat</a><span>, in § 2.3</span>
+   <li><a href="#valdef-column-rule-image-repeat-round">round</a><span>, in § 2.3</span>
+   <li><a href="#propdef-row-rule">row-rule</a><span>, in § 4.2</span>
+   <li><a href="#propdef-row-rule-align">row-rule-align</a><span>, in § 5.1</span>
+   <li><a href="#propdef-row-rule-color">row-rule-color</a><span>, in § 4.1</span>
+   <li><a href="#propdef-row-rule-edge-align">row-rule-edge-align</a><span>, in § 5.2</span>
+   <li><a href="#propdef-row-rule-extent">row-rule-extent</a><span>, in § 6.1</span>
+   <li><a href="#propdef-row-rule-image">row-rule-image</a><span>, in § 2.4</span>
+   <li><a href="#propdef-row-rule-image-repeat">row-rule-image-repeat</a><span>, in § 2.3</span>
+   <li><a href="#propdef-row-rule-image-slice">row-rule-image-slice</a><span>, in § 2.2</span>
+   <li><a href="#propdef-row-rule-image-source">row-rule-image-source</a><span>, in § 2.1</span>
+   <li><a href="#propdef-row-rule-lateral-inset">row-rule-lateral-inset</a><span>, in § 3.5</span>
+   <li><a href="#propdef-row-rule-lateral-inset-end">row-rule-lateral-inset-end</a><span>, in § 3.3</span>
+   <li><a href="#propdef-row-rule-lateral-inset-start">row-rule-lateral-inset-start</a><span>, in § 3.3</span>
+   <li><a href="#propdef-row-rule-length">row-rule-length</a><span>, in § 3.2</span>
+   <li><a href="#propdef-row-rule-longitudinal-edge-inset">row-rule-longitudinal-edge-inset</a><span>, in § 3.9</span>
+   <li><a href="#propdef-row-rule-longitudinal-edge-inset-end">row-rule-longitudinal-edge-inset-end</a><span>, in § 3.8</span>
+   <li><a href="#propdef-row-rule-longitudinal-edge-inset-start">row-rule-longitudinal-edge-inset-start</a><span>, in § 3.8</span>
+   <li><a href="#propdef-row-rule-longitudinal-inset">row-rule-longitudinal-inset</a><span>, in § 3.7</span>
+   <li><a href="#propdef-row-rule-longitudinal-inset-end">row-rule-longitudinal-inset-end</a><span>, in § 3.6</span>
+   <li><a href="#propdef-row-rule-longitudinal-inset-start">row-rule-longitudinal-inset-start</a><span>, in § 3.6</span>
+   <li><a href="#propdef-row-rule-style">row-rule-style</a><span>, in § 4.1</span>
+   <li><a href="#propdef-row-rule-width">row-rule-width</a><span>, in § 3.1</span>
+   <li><a href="#rule-containing-rectangle①">rule containing rectangle</a><span>, in § 7</span>
+   <li><a href="#rule-length">rule length</a><span>, in § 1.3</span>
+   <li>
+    segment
+    <ul>
+     <li><a href="#segment">definition of</a><span>, in § 6.1</span>
+     <li><a href="#valdef-row-rule-extent-segment">value for row-rule-extent</a><span>, in § 6.1.1</span>
+    </ul>
+   <li><a href="#valdef-row-rule-extent-short">short</a><span>, in § 6.1.1</span>
+   <li><a href="#valdef-column-rule-image-repeat-space">space</a><span>, in § 2.3</span>
+   <li><a href="#valdef-row-rule-extent-start">start</a><span>, in § 6.1.1</span>
+   <li><a href="#valdef-column-rule-image-repeat-stretch">stretch</a><span>, in § 2.3</span>
+  </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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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><b>Referenced in:</b>
+   <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"><span class="content">Terms defined by reference</span><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><span class="dfn-paneled" id="term-for-typedef-line-style">&lt;line-style></span>
+     <li><span class="dfn-paneled" id="term-for-typedef-line-width">&lt;line-width></span>
+     <li><span class="dfn-paneled" id="term-for-propdef-border-style">border-style</span>
+    </ul>
+   <li>
+    <a data-link-type="biblio">[css-box-4]</a> defines the following terms:
+    <ul>
+     <li><span class="dfn-paneled" id="term-for-valdef-margin-trim-all">all</span>
+     <li><span class="dfn-paneled" id="term-for-valdef-box-margin-box">margin-box</span>
+    </ul>
+   <li>
+    <a data-link-type="biblio">[css-cascade-5]</a> defines the following terms:
+    <ul>
+     <li><span class="dfn-paneled" id="term-for-used-value">used value</span>
+    </ul>
+   <li>
+    <a data-link-type="biblio">[css-color-4]</a> defines the following terms:
+    <ul>
+     <li><span class="dfn-paneled" id="term-for-typedef-color">&lt;color></span>
+     <li><span class="dfn-paneled" id="term-for-propdef-opacity">opacity</span>
+    </ul>
+   <li>
+    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
+    <ul>
+     <li><span class="dfn-paneled" id="term-for-order-modified-document-order">order-modified document order</span>
+    </ul>
+   <li>
+    <a data-link-type="biblio">[css-flexbox-1]</a> defines the following terms:
+    <ul>
+     <li><span class="dfn-paneled" id="term-for-flex-container">flex container</span>
+    </ul>
+   <li>
+    <a data-link-type="biblio">[css-grid-2]</a> defines the following terms:
+    <ul>
+     <li><span class="dfn-paneled" id="term-for-collapsed-track">collapsed track</span>
+     <li><span class="dfn-paneled" id="term-for-grid">grid</span>
+     <li><span class="dfn-paneled" id="term-for-grid-cell">grid cell</span>
+     <li><span class="dfn-paneled" id="term-for-grid-container">grid container</span>
+     <li><span class="dfn-paneled" id="term-for-propdef-grid-column">grid-column</span>
+     <li><span class="dfn-paneled" id="term-for-propdef-grid-row">grid-row</span>
+     <li><span class="dfn-paneled" id="term-for-implicit-grid">implicit grid</span>
+     <li><span class="dfn-paneled" id="term-for-subgrid">subgrid</span>
+    </ul>
+   <li>
+    <a data-link-type="biblio">[css-grid-3]</a> defines the following terms:
+    <ul>
+     <li><span class="dfn-paneled" id="term-for-masonry-axis">masonry axis</span>
+    </ul>
+   <li>
+    <a data-link-type="biblio">[css-images-3]</a> defines the following terms:
+    <ul>
+     <li><span class="dfn-paneled" id="term-for-typedef-image">&lt;image></span>
+     <li><span class="dfn-paneled" id="term-for-default-object-size">default object size</span>
+     <li><span class="dfn-paneled" id="term-for-specified-size">specified size</span>
+    </ul>
+   <li>
+    <a data-link-type="biblio">[css-multicol-1]</a> defines the following terms:
+    <ul>
+     <li><span class="dfn-paneled" id="term-for-propdef-column-rule-width">column-rule-width</span>
+     <li><span class="dfn-paneled" id="term-for-multi-column-container">multi-column container</span>
+     <li><span class="dfn-paneled" id="term-for-multi-column-layout">multi-column layout</span>
+     <li><span class="dfn-paneled" id="term-for-spanner">spanner</span>
+    </ul>
+   <li>
+    <a data-link-type="biblio">[css-multicol-2]</a> defines the following terms:
+    <ul>
+     <li><span class="dfn-paneled" id="term-for-propdef-column-span">column-span</span>
+    </ul>
+   <li>
+    <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms:
+    <ul>
+     <li><span class="dfn-paneled" id="term-for-ink-overflow">ink overflow</span>
+     <li><span class="dfn-paneled" id="term-for-propdef-overflow">overflow</span>
+    </ul>
+   <li>
+    <a data-link-type="biblio">[css-position-3]</a> defines the following terms:
+    <ul>
+     <li><span class="dfn-paneled" id="term-for-propdef-left">left</span>
+     <li><span class="dfn-paneled" id="term-for-propdef-right">right</span>
+    </ul>
+   <li>
+    <a data-link-type="biblio">[css-sizing-3]</a> defines the following terms:
+    <ul>
+     <li><span class="dfn-paneled" id="term-for-outer-size">outer size</span>
+     <li><span class="dfn-paneled" id="term-for-propdef-width">width</span>
+    </ul>
+   <li>
+    <a data-link-type="biblio">[css-tables-3]</a> defines the following terms:
+    <ul>
+     <li><span class="dfn-paneled" id="term-for-span">span</span>
+     <li><span class="dfn-paneled" id="term-for-table">table</span>
+     <li><span class="dfn-paneled" id="term-for-table-cell">table-cell</span>
+     <li><span class="dfn-paneled" id="term-for-table-column">table-column</span>
+     <li><span class="dfn-paneled" id="term-for-table-column-group">table-column-group</span>
+     <li><span class="dfn-paneled" id="term-for-table-row">table-row</span>
+     <li><span class="dfn-paneled" id="term-for-table-row-group">table-row-group</span>
+    </ul>
+   <li>
+    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
+    <ul>
+     <li><span class="dfn-paneled" id="term-for-integer-value">&lt;integer></span>
+     <li><span class="dfn-paneled" id="term-for-typedef-length-percentage">&lt;length-percentage></span>
+     <li><span class="dfn-paneled" id="term-for-number-value">&lt;number></span>
+     <li><span class="dfn-paneled" id="term-for-percentage-value">&lt;percentage></span>
+     <li><span class="dfn-paneled" id="term-for-mult-opt">?</span>
+     <li><span class="dfn-paneled" id="term-for-mult-num-range">{a,b}</span>
+     <li><span class="dfn-paneled" id="term-for-comb-one">|</span>
+     <li><span class="dfn-paneled" id="term-for-comb-any">||</span>
+    </ul>
+   <li>
+    <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms:
+    <ul>
+     <li><span class="dfn-paneled" id="term-for-propdef-writing-mode">writing-mode</span>
+    </ul>
+  </ul>
+  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
+  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><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"><span class="content">Informative References</span><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"><span class="content">Property Index</span><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>&lt;'column-rule-image-source'> || &lt;'column-rule-image-slice'> || &lt;'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>[&lt;number [0,∞]> | &lt;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 | &lt;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 &lt;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>&lt;'column-rule-lateral-inset-start'> &lt;'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>&lt;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>&lt;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>&lt;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>&lt;'column-rule-longitudinal-edge-inset-start'> &lt;'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>&lt;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>&lt;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>&lt;'column-rule-longitudinal-inset-start'> &lt;'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>&lt;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>&lt;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>&lt;'row-rule-width'> || &lt;'row-rule-style'> || &lt;'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>&lt;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>&lt;'column-rule-image-source'> || &lt;'column-rule-image-slice'> || &lt;'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>[&lt;number [0,∞]> | &lt;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 | &lt;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 &lt;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>&lt;'row-rule-lateral-inset-start'> &lt;'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>&lt;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>&lt;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>&lt;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>&lt;'row-rule-longitudinal-edge-inset-start'> &lt;'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>&lt;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>&lt;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>&lt;'row-rule-longitudinal-inset-start'> &lt;'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>&lt;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>&lt;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>&lt;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>&lt;line-width> | &lt;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 &lt;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"><span class="content">Issues Index</span><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 <span class="css">column-rule</span> and <span class="css">row-rule</span> 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: <span class="production">&lt;row-rule-foo></span> <span class="production">&lt;column-rule-foo></span>?'.
+    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: <span class="css">[segment | [[start | end | short | long] all?] ] allow-overlap?</span> <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 <i>intersection</i> or <i>union</i> 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 <span class="css">short</span>/<span class="css">long</span> 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 <i>currently</i>... <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 <span class="css">row-gap</span> 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">
+   <b><a href="#lateral-axis">#lateral-axis</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#longitudinal-axis">#longitudinal-axis</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#rule-length">#rule-length</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-column-rule-image-source">#propdef-column-rule-image-source</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-image-source">#propdef-row-rule-image-source</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-column-rule-image-slice">#propdef-column-rule-image-slice</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-image-slice">#propdef-row-rule-image-slice</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-column-rule-image-repeat">#propdef-column-rule-image-repeat</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-image-repeat">#propdef-row-rule-image-repeat</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-column-rule-image">#propdef-column-rule-image</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-image">#propdef-row-rule-image</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-width">#propdef-row-rule-width</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-column-rule-length">#propdef-column-rule-length</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-length">#propdef-row-rule-length</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-column-rule-lateral-inset-start">#propdef-column-rule-lateral-inset-start</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-column-rule-lateral-inset-end">#propdef-column-rule-lateral-inset-end</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-lateral-inset-start">#propdef-row-rule-lateral-inset-start</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-lateral-inset-end">#propdef-row-rule-lateral-inset-end</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-column-rule-lateral-inset">#propdef-column-rule-lateral-inset</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-lateral-inset">#propdef-row-rule-lateral-inset</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-column-rule-longitudinal-inset-start">#propdef-column-rule-longitudinal-inset-start</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-column-rule-longitudinal-inset-end">#propdef-column-rule-longitudinal-inset-end</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-longitudinal-inset-start">#propdef-row-rule-longitudinal-inset-start</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-longitudinal-inset-end">#propdef-row-rule-longitudinal-inset-end</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-column-rule-longitudinal-inset">#propdef-column-rule-longitudinal-inset</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-longitudinal-inset">#propdef-row-rule-longitudinal-inset</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-column-rule-longitudinal-edge-inset-start">#propdef-column-rule-longitudinal-edge-inset-start</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-column-rule-longitudinal-edge-inset-end">#propdef-column-rule-longitudinal-edge-inset-end</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-longitudinal-edge-inset-start">#propdef-row-rule-longitudinal-edge-inset-start</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-longitudinal-edge-inset-end">#propdef-row-rule-longitudinal-edge-inset-end</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-column-rule-longitudinal-edge-inset">#propdef-column-rule-longitudinal-edge-inset</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-longitudinal-edge-inset">#propdef-row-rule-longitudinal-edge-inset</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-style">#propdef-row-rule-style</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-color">#propdef-row-rule-color</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule">#propdef-row-rule</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-column-rule-align">#propdef-column-rule-align</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-align">#propdef-row-rule-align</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-column-rule-edge-align">#propdef-column-rule-edge-align</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-edge-align">#propdef-row-rule-edge-align</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-column-rule-extent">#propdef-column-rule-extent</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#propdef-row-rule-extent">#propdef-row-rule-extent</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#segment">#segment</a></b><b>Referenced in:</b>
+   <ul>
+    <li><a href="#ref-for-segment">6.1.5. Multi-Column Containers</a>
+   </ul>
+  </aside>
+  <aside class="dfn-panel" data-for="extent-size">
+   <b><a href="#extent-size">#extent-size</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#valdef-row-rule-extent-short">#valdef-row-rule-extent-short</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#valdef-row-rule-extent-long">#valdef-row-rule-extent-long</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#next-grid-cell-span">#next-grid-cell-span</a></b><b>Referenced in:</b>
+   <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">
+   <b><a href="#next-flex-line-item">#next-flex-line-item</a></b><b>Referenced in:</b>
+   <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①">
+   <b><a href="#rule-containing-rectangle①">#rule-containing-rectangle①</a></b><b>Referenced in:</b>
+   <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>
+\ No newline at end of file
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
commit	26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree	f435a8308119effd964b339f76abb83a57c29483 /layout/docs/css-gap-decorations/Overview.html
parent	Initial commit. (diff)
download	firefox-upstream/124.0.1.tar.xz firefox-upstream/124.0.1.zip