Overview.html (280847B)
1 <!doctype html><html lang="en"> 2 <head> 3 <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 4 <title>CSS Gap Decorations</title> 5 <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> 6 <meta content="exploring" name="csswg-work-status"> 7 <meta content="ED" name="w3c-status"> 8 <meta content="This is a proposal to extend <a href="https://drafts.csswg.org/css-align">CSS Box Alignment</a> to support gap decorations." name="abstract"> 9 <link href="../default.css" rel="stylesheet" type="text/css"> 10 <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon"> 11 <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet" type="text/css"> 12 <meta content="Bikeshed version dfbc2b297, updated Thu Nov 11 15:52:32 2021 -0800" name="generator"> 13 <link href="https://matspalmgren.github.io/css-gap-decorations/Overview.html" rel="canonical"> 14 <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> 15 <meta content="0978a49f760a6618d883efc621c36673a0720e2a" name="document-revision"> 16 <style>/* style-autolinks */ 17 18 .css.css, .property.property, .descriptor.descriptor { 19 color: var(--a-normal-text); 20 font-size: inherit; 21 font-family: inherit; 22 } 23 .css::before, .property::before, .descriptor::before { 24 content: "‘"; 25 } 26 .css::after, .property::after, .descriptor::after { 27 content: "’"; 28 } 29 .property, .descriptor { 30 /* Don't wrap property and descriptor names */ 31 white-space: nowrap; 32 } 33 .type { /* CSS value <type> */ 34 font-style: italic; 35 } 36 pre .property::before, pre .property::after { 37 content: ""; 38 } 39 [data-link-type="property"]::before, 40 [data-link-type="propdesc"]::before, 41 [data-link-type="descriptor"]::before, 42 [data-link-type="value"]::before, 43 [data-link-type="function"]::before, 44 [data-link-type="at-rule"]::before, 45 [data-link-type="selector"]::before, 46 [data-link-type="maybe"]::before { 47 content: "‘"; 48 } 49 [data-link-type="property"]::after, 50 [data-link-type="propdesc"]::after, 51 [data-link-type="descriptor"]::after, 52 [data-link-type="value"]::after, 53 [data-link-type="function"]::after, 54 [data-link-type="at-rule"]::after, 55 [data-link-type="selector"]::after, 56 [data-link-type="maybe"]::after { 57 content: "’"; 58 } 59 60 [data-link-type].production::before, 61 [data-link-type].production::after, 62 .prod [data-link-type]::before, 63 .prod [data-link-type]::after { 64 content: ""; 65 } 66 67 [data-link-type=element], 68 [data-link-type=element-attr] { 69 font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; 70 font-size: .9em; 71 } 72 [data-link-type=element]::before { content: "<" } 73 [data-link-type=element]::after { content: ">" } 74 75 [data-link-type=biblio] { 76 white-space: pre; 77 }</style> 78 <style>/* style-colors */ 79 80 /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ 81 :root { 82 color-scheme: light dark; 83 84 --text: black; 85 --bg: white; 86 87 --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); 88 89 --logo-bg: #1a5e9a; 90 --logo-active-bg: #c00; 91 --logo-text: white; 92 93 --tocnav-normal-text: #707070; 94 --tocnav-normal-bg: var(--bg); 95 --tocnav-hover-text: var(--tocnav-normal-text); 96 --tocnav-hover-bg: #f8f8f8; 97 --tocnav-active-text: #c00; 98 --tocnav-active-bg: var(--tocnav-normal-bg); 99 100 --tocsidebar-text: var(--text); 101 --tocsidebar-bg: #f7f8f9; 102 --tocsidebar-shadow: rgba(0,0,0,.1); 103 --tocsidebar-heading-text: hsla(203,20%,40%,.7); 104 105 --toclink-text: var(--text); 106 --toclink-underline: #3980b5; 107 --toclink-visited-text: var(--toclink-text); 108 --toclink-visited-underline: #054572; 109 110 --heading-text: #005a9c; 111 112 --hr-text: var(--text); 113 114 --algo-border: #def; 115 116 --del-text: red; 117 --del-bg: transparent; 118 --ins-text: #080; 119 --ins-bg: transparent; 120 121 --a-normal-text: #034575; 122 --a-normal-underline: #bbb; 123 --a-visited-text: var(--a-normal-text); 124 --a-visited-underline: #707070; 125 --a-hover-bg: rgba(75%, 75%, 75%, .25); 126 --a-active-text: #c00; 127 --a-active-underline: #c00; 128 129 --blockquote-border: silver; 130 --blockquote-bg: transparent; 131 --blockquote-text: currentcolor; 132 133 --issue-border: #e05252; 134 --issue-bg: #fbe9e9; 135 --issue-text: var(--text); 136 --issueheading-text: #831616; 137 138 --example-border: #e0cb52; 139 --example-bg: #fcfaee; 140 --example-text: var(--text); 141 --exampleheading-text: #574b0f; 142 143 --note-border: #52e052; 144 --note-bg: #e9fbe9; 145 --note-text: var(--text); 146 --noteheading-text: hsl(120, 70%, 30%); 147 --notesummary-underline: silver; 148 149 --assertion-border: #aaa; 150 --assertion-bg: #eee; 151 --assertion-text: black; 152 153 --advisement-border: orange; 154 --advisement-bg: #fec; 155 --advisement-text: var(--text); 156 --advisementheading-text: #b35f00; 157 158 --warning-border: red; 159 --warning-bg: hsla(40,100%,50%,0.95); 160 --warning-text: var(--text); 161 162 --amendment-border: #330099; 163 --amendment-bg: #F5F0FF; 164 --amendment-text: var(--text); 165 --amendmentheading-text: #220066; 166 167 --def-border: #8ccbf2; 168 --def-bg: #def; 169 --def-text: var(--text); 170 --defrow-border: #bbd7e9; 171 172 --datacell-border: silver; 173 174 --indexinfo-text: #707070; 175 176 --indextable-hover-text: black; 177 --indextable-hover-bg: #f7f8f9; 178 179 --outdatedspec-bg: rgba(0, 0, 0, .5); 180 --outdatedspec-text: black; 181 --outdated-bg: maroon; 182 --outdated-text: white; 183 --outdated-shadow: red; 184 185 --editedrec-bg: darkorange; 186 }</style> 187 <style>/* style-counters */ 188 189 body { 190 counter-reset: example figure issue; 191 } 192 .issue { 193 counter-increment: issue; 194 } 195 .issue:not(.no-marker)::before { 196 content: "Issue " counter(issue); 197 } 198 199 .example { 200 counter-increment: example; 201 } 202 .example:not(.no-marker)::before { 203 content: "Example " counter(example); 204 } 205 .invalid.example:not(.no-marker)::before, 206 .illegal.example:not(.no-marker)::before { 207 content: "Invalid Example" counter(example); 208 } 209 210 figcaption { 211 counter-increment: figure; 212 } 213 figcaption:not(.no-marker)::before { 214 content: "Figure " counter(figure) " "; 215 }</style> 216 <style>/* style-dfn-panel */ 217 218 :root { 219 --dfnpanel-bg: #ddd; 220 --dfnpanel-text: var(--text); 221 } 222 .dfn-panel { 223 position: absolute; 224 z-index: 35; 225 height: auto; 226 width: -webkit-fit-content; 227 width: fit-content; 228 max-width: 300px; 229 max-height: 500px; 230 overflow: auto; 231 padding: 0.5em 0.75em; 232 font: small Helvetica Neue, sans-serif, Droid Sans Fallback; 233 background: var(--dfnpanel-bg); 234 color: var(--dfnpanel-text); 235 border: outset 0.2em; 236 } 237 .dfn-panel:not(.on) { display: none; } 238 .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } 239 .dfn-panel > b { display: block; } 240 .dfn-panel a { color: var(--dfnpanel-text); } 241 .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } 242 .dfn-panel > b + b { margin-top: 0.25em; } 243 .dfn-panel ul { padding: 0; } 244 .dfn-panel li { list-style: inside; } 245 .dfn-panel.activated { 246 display: inline-block; 247 position: fixed; 248 left: .5em; 249 bottom: 2em; 250 margin: 0 auto; 251 max-width: calc(100vw - 1.5em - .4em - .5em); 252 max-height: 30vh; 253 } 254 255 .dfn-paneled { cursor: pointer; } 256 </style> 257 <style>/* style-issues */ 258 259 a[href].issue-return { 260 float: right; 261 float: inline-end; 262 color: var(--issueheading-text); 263 font-weight: bold; 264 text-decoration: none; 265 } 266 </style> 267 <style>/* style-md-lists */ 268 269 /* This is a weird hack for me not yet following the commonmark spec 270 regarding paragraph and lists. */ 271 [data-md] > :first-child { 272 margin-top: 0; 273 } 274 [data-md] > :last-child { 275 margin-bottom: 0; 276 }</style> 277 <style>/* style-selflinks */ 278 279 :root { 280 --selflink-text: white; 281 --selflink-bg: gray; 282 --selflink-hover-text: black; 283 } 284 .heading, .issue, .note, .example, li, dt { 285 position: relative; 286 } 287 a.self-link { 288 position: absolute; 289 top: 0; 290 left: calc(-1 * (3.5rem - 26px)); 291 width: calc(3.5rem - 26px); 292 height: 2em; 293 text-align: center; 294 border: none; 295 transition: opacity .2s; 296 opacity: .5; 297 } 298 a.self-link:hover { 299 opacity: 1; 300 } 301 .heading > a.self-link { 302 font-size: 83%; 303 } 304 li > a.self-link { 305 left: calc(-1 * (3.5rem - 26px) - 2em); 306 } 307 dfn > a.self-link { 308 top: auto; 309 left: auto; 310 opacity: 0; 311 width: 1.5em; 312 height: 1.5em; 313 background: var(--selflink-bg); 314 color: var(--selflink-text); 315 font-style: normal; 316 transition: opacity .2s, background-color .2s, color .2s; 317 } 318 dfn:hover > a.self-link { 319 opacity: 1; 320 } 321 dfn > a.self-link:hover { 322 color: var(--selflink-hover-text); 323 } 324 325 a.self-link::before { content: "¶"; } 326 .heading > a.self-link::before { content: "§"; } 327 dfn > a.self-link::before { content: "#"; } 328 </style> 329 <style>/* style-syntax-highlighting */ 330 331 code.highlight { padding: .1em; border-radius: .3em; } 332 pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } 333 334 .highlight:not(.idl) { background: rgba(0, 0, 0, .03); } 335 c-[a] { color: #990055 } /* Keyword.Declaration */ 336 c-[b] { color: #990055 } /* Keyword.Type */ 337 c-[c] { color: #708090 } /* Comment */ 338 c-[d] { color: #708090 } /* Comment.Multiline */ 339 c-[e] { color: #0077aa } /* Name.Attribute */ 340 c-[f] { color: #669900 } /* Name.Tag */ 341 c-[g] { color: #222222 } /* Name.Variable */ 342 c-[k] { color: #990055 } /* Keyword */ 343 c-[l] { color: #000000 } /* Literal */ 344 c-[m] { color: #000000 } /* Literal.Number */ 345 c-[n] { color: #0077aa } /* Name */ 346 c-[o] { color: #999999 } /* Operator */ 347 c-[p] { color: #999999 } /* Punctuation */ 348 c-[s] { color: #a67f59 } /* Literal.String */ 349 c-[t] { color: #a67f59 } /* Literal.String.Single */ 350 c-[u] { color: #a67f59 } /* Literal.String.Double */ 351 c-[cp] { color: #708090 } /* Comment.Preproc */ 352 c-[c1] { color: #708090 } /* Comment.Single */ 353 c-[cs] { color: #708090 } /* Comment.Special */ 354 c-[kc] { color: #990055 } /* Keyword.Constant */ 355 c-[kn] { color: #990055 } /* Keyword.Namespace */ 356 c-[kp] { color: #990055 } /* Keyword.Pseudo */ 357 c-[kr] { color: #990055 } /* Keyword.Reserved */ 358 c-[ld] { color: #000000 } /* Literal.Date */ 359 c-[nc] { color: #0077aa } /* Name.Class */ 360 c-[no] { color: #0077aa } /* Name.Constant */ 361 c-[nd] { color: #0077aa } /* Name.Decorator */ 362 c-[ni] { color: #0077aa } /* Name.Entity */ 363 c-[ne] { color: #0077aa } /* Name.Exception */ 364 c-[nf] { color: #0077aa } /* Name.Function */ 365 c-[nl] { color: #0077aa } /* Name.Label */ 366 c-[nn] { color: #0077aa } /* Name.Namespace */ 367 c-[py] { color: #0077aa } /* Name.Property */ 368 c-[ow] { color: #999999 } /* Operator.Word */ 369 c-[mb] { color: #000000 } /* Literal.Number.Bin */ 370 c-[mf] { color: #000000 } /* Literal.Number.Float */ 371 c-[mh] { color: #000000 } /* Literal.Number.Hex */ 372 c-[mi] { color: #000000 } /* Literal.Number.Integer */ 373 c-[mo] { color: #000000 } /* Literal.Number.Oct */ 374 c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ 375 c-[sc] { color: #a67f59 } /* Literal.String.Char */ 376 c-[sd] { color: #a67f59 } /* Literal.String.Doc */ 377 c-[se] { color: #a67f59 } /* Literal.String.Escape */ 378 c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ 379 c-[si] { color: #a67f59 } /* Literal.String.Interpol */ 380 c-[sx] { color: #a67f59 } /* Literal.String.Other */ 381 c-[sr] { color: #a67f59 } /* Literal.String.Regex */ 382 c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ 383 c-[vc] { color: #0077aa } /* Name.Variable.Class */ 384 c-[vg] { color: #0077aa } /* Name.Variable.Global */ 385 c-[vi] { color: #0077aa } /* Name.Variable.Instance */ 386 c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ 387 </style> 388 <style>/* style-wpt */ 389 390 :root { 391 --wpt-border: hsl(0, 0%, 60%); 392 --wpt-bg: hsl(0, 0%, 95%); 393 --wpt-text: var(--text); 394 --wptheading-text: hsl(0, 0%, 30%); 395 } 396 @media (prefers-color-scheme: dark) { 397 :root { 398 --wpt-border: hsl(0, 0%, 30%); 399 --wpt-bg: var(--borderedblock-bg); 400 --wpt-text: var(--text); 401 --wptheading-text: hsl(0, 0%, 60%); 402 } 403 } 404 .wpt-tests-block { 405 list-style: none; 406 border-left: .5em solid var(--wpt-border); 407 background: var(--wpt-bg); 408 color: var(--wpt-text); 409 margin: 1em auto; 410 padding: .5em; 411 } 412 .wpt-tests-block summary { 413 color: var(--wptheading-text); 414 font-weight: normal; 415 text-transform: uppercase; 416 } 417 .wpt-tests-block summary::marker{ 418 color: var(--wpt-border); 419 } 420 .wpt-tests-block summary:hover::marker{ 421 color: var(--wpt-text); 422 } 423 /* 424 The only content of a wpt test block in its closed state is the <summary>, 425 which contains the word TESTS, 426 and that is absolutely positioned. 427 In that closed state, wpt test blocks are styled 428 to have a top margin whose height is exactly equal 429 to the height of the absolutely positioned <summary>, 430 and no other background/padding/margin/border. 431 The wpt test block elements will therefore allow the maring 432 of the previous/next block elements 433 to collapse through them; 434 if this combined margin would be larger than its own top margin, 435 it stays as is, 436 and therefore the pre-existing vertical rhythm of the document is undisturbed. 437 If that combined margin would be smaller, it is grown to that size. 438 This means that the wpt test block ensures 439 that there's always enough vertical space to insert the summary, 440 without adding more than is needed. 441 */ 442 .wpt-tests-block:not([open]){ 443 padding: 0; 444 border: none; 445 background: none; 446 font-size: 0.75em; 447 line-height: 1; 448 position: relative; 449 margin: 1em 0 0; 450 } 451 .wpt-tests-block:not([open]) summary { 452 position: absolute; 453 right: 0; 454 bottom: 0; 455 } 456 /* 457 It is possible that both the last child of a block element 458 and the block element itself 459 would be annotated with a <wpt> block each. 460 If the block element has a padding or a border, 461 that's fine, but otherwise 462 the bottom margin of the block and of its last child would collapse 463 and both <wpt> elements would overlap, being both placed there. 464 To avoid that, add 1px of padding to the <wpt> element annotating the last child 465 to prevent the bottom margin of the block and of its last child from collapsing 466 (and as much negative margin, 467 as wel only want to prevent margin collapsing, 468 but are not trying to actually take more space). 469 */ 470 .wpt-tests-block:not([open]):last-child { 471 padding-bottom: 1px; 472 margin-bottom: -1px; 473 } 474 /* 475 Exception to the previous rule: 476 don't do that in non-last list items, 477 because it's not necessary, 478 and would therefore consume more space than strictly needed. 479 Lists must have list items as children, not <wpt> elements, 480 so a <wpt> element cannot be a sibling of a list item, 481 and the collision that the previous rule avoids cannot happen. 482 */ 483 li:not(:last-child) > .wpt-tests-block:not([open]):last-child, 484 dd:not(:last-child) > .wpt-tests-block:not([open]):last-child { 485 padding-bottom: 0; 486 margin-bottom: 0; 487 } 488 .wpt-tests-block:not([open]):not(:hover){ 489 opacity: 0.5; 490 } 491 .wpt-tests-list { 492 list-style: none; 493 display: grid; 494 margin: 0; 495 padding: 0; 496 grid-template-columns: 1fr max-content auto auto; 497 grid-column-gap: .5em; 498 } 499 .wpt-tests-block hr:last-child { 500 display: none; 501 } 502 .wpt-test { 503 display: contents; 504 } 505 .wpt-test > a { 506 text-decoration: underline; 507 border: none; 508 } 509 .wpt-test > .wpt-name { grid-column: 1; } 510 .wpt-test > .wpt-results { grid-column: 2; } 511 .wpt-test > .wpt-live { grid-column: 3; } 512 .wpt-test > .wpt-source { grid-column: 4; } 513 514 .wpt-test > .wpt-results { 515 display: flex; 516 gap: .1em; 517 } 518 .wpt-test .wpt-result { 519 display: inline-block; 520 height: 1em; 521 width: 1em; 522 border-radius: 50%; 523 position: relative; 524 } 525 </style> 526 <style>/* style-darkmode */ 527 528 @media (prefers-color-scheme: dark) { 529 :root { 530 --text: #ddd; 531 --bg: black; 532 533 --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"); 534 535 --logo-bg: #1a5e9a; 536 --logo-active-bg: #c00; 537 --logo-text: white; 538 539 --tocnav-normal-text: #999; 540 --tocnav-normal-bg: var(--bg); 541 --tocnav-hover-text: var(--tocnav-normal-text); 542 --tocnav-hover-bg: #080808; 543 --tocnav-active-text: #f44; 544 --tocnav-active-bg: var(--tocnav-normal-bg); 545 546 --tocsidebar-text: var(--text); 547 --tocsidebar-bg: #080808; 548 --tocsidebar-shadow: rgba(255,255,255,.1); 549 --tocsidebar-heading-text: hsla(203,20%,40%,.7); 550 551 --toclink-text: var(--text); 552 --toclink-underline: #6af; 553 --toclink-visited-text: var(--toclink-text); 554 --toclink-visited-underline: #054572; 555 556 --heading-text: #8af; 557 558 --hr-text: var(--text); 559 560 --algo-border: #456; 561 562 --del-text: #f44; 563 --del-bg: transparent; 564 --ins-text: #4a4; 565 --ins-bg: transparent; 566 567 --a-normal-text: #6af; 568 --a-normal-underline: #555; 569 --a-visited-text: var(--a-normal-text); 570 --a-visited-underline: var(--a-normal-underline); 571 --a-hover-bg: rgba(25%, 25%, 25%, .2); 572 --a-active-text: #f44; 573 --a-active-underline: var(--a-active-text); 574 575 --borderedblock-bg: rgba(255, 255, 255, .05); 576 577 --blockquote-border: silver; 578 --blockquote-bg: var(--borderedblock-bg); 579 --blockquote-text: currentcolor; 580 581 --issue-border: #e05252; 582 --issue-bg: var(--borderedblock-bg); 583 --issue-text: var(--text); 584 --issueheading-text: hsl(0deg, 70%, 70%); 585 586 --example-border: hsl(50deg, 90%, 60%); 587 --example-bg: var(--borderedblock-bg); 588 --example-text: var(--text); 589 --exampleheading-text: hsl(50deg, 70%, 70%); 590 591 --note-border: hsl(120deg, 100%, 35%); 592 --note-bg: var(--borderedblock-bg); 593 --note-text: var(--text); 594 --noteheading-text: hsl(120, 70%, 70%); 595 --notesummary-underline: silver; 596 597 --assertion-border: #444; 598 --assertion-bg: var(--borderedblock-bg); 599 --assertion-text: var(--text); 600 601 --advisement-border: orange; 602 --advisement-bg: #222218; 603 --advisement-text: var(--text); 604 --advisementheading-text: #f84; 605 606 --warning-border: red; 607 --warning-bg: hsla(40,100%,20%,0.95); 608 --warning-text: var(--text); 609 610 --amendment-border: #330099; 611 --amendment-bg: #080010; 612 --amendment-text: var(--text); 613 --amendmentheading-text: #cc00ff; 614 615 --def-border: #8ccbf2; 616 --def-bg: #080818; 617 --def-text: var(--text); 618 --defrow-border: #136; 619 620 --datacell-border: silver; 621 622 --indexinfo-text: #aaa; 623 624 --indextable-hover-text: var(--text); 625 --indextable-hover-bg: #181818; 626 627 --outdatedspec-bg: rgba(255, 255, 255, .5); 628 --outdatedspec-text: black; 629 --outdated-bg: maroon; 630 --outdated-text: white; 631 --outdated-shadow: red; 632 633 --editedrec-bg: darkorange; 634 } 635 /* In case a transparent-bg image doesn't expect to be on a dark bg, 636 which is quite common in practice... */ 637 img { background: white; } 638 } 639 @media (prefers-color-scheme: dark) { 640 :root { 641 --selflink-text: black; 642 --selflink-bg: silver; 643 --selflink-hover-text: white; 644 } 645 } 646 647 @media (prefers-color-scheme: dark) { 648 :root { 649 --dfnpanel-bg: #222; 650 --dfnpanel-text: var(--text); 651 } 652 } 653 @media (prefers-color-scheme: dark) { 654 .highlight:not(.idl) { background: rgba(255, 255, 255, .05); } 655 656 c-[a] { color: #d33682 } /* Keyword.Declaration */ 657 c-[b] { color: #d33682 } /* Keyword.Type */ 658 c-[c] { color: #2aa198 } /* Comment */ 659 c-[d] { color: #2aa198 } /* Comment.Multiline */ 660 c-[e] { color: #268bd2 } /* Name.Attribute */ 661 c-[f] { color: #b58900 } /* Name.Tag */ 662 c-[g] { color: #cb4b16 } /* Name.Variable */ 663 c-[k] { color: #d33682 } /* Keyword */ 664 c-[l] { color: #657b83 } /* Literal */ 665 c-[m] { color: #657b83 } /* Literal.Number */ 666 c-[n] { color: #268bd2 } /* Name */ 667 c-[o] { color: #657b83 } /* Operator */ 668 c-[p] { color: #657b83 } /* Punctuation */ 669 c-[s] { color: #6c71c4 } /* Literal.String */ 670 c-[t] { color: #6c71c4 } /* Literal.String.Single */ 671 c-[u] { color: #6c71c4 } /* Literal.String.Double */ 672 c-[ch] { color: #2aa198 } /* Comment.Hashbang */ 673 c-[cp] { color: #2aa198 } /* Comment.Preproc */ 674 c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */ 675 c-[c1] { color: #2aa198 } /* Comment.Single */ 676 c-[cs] { color: #2aa198 } /* Comment.Special */ 677 c-[kc] { color: #d33682 } /* Keyword.Constant */ 678 c-[kn] { color: #d33682 } /* Keyword.Namespace */ 679 c-[kp] { color: #d33682 } /* Keyword.Pseudo */ 680 c-[kr] { color: #d33682 } /* Keyword.Reserved */ 681 c-[ld] { color: #657b83 } /* Literal.Date */ 682 c-[nc] { color: #268bd2 } /* Name.Class */ 683 c-[no] { color: #268bd2 } /* Name.Constant */ 684 c-[nd] { color: #268bd2 } /* Name.Decorator */ 685 c-[ni] { color: #268bd2 } /* Name.Entity */ 686 c-[ne] { color: #268bd2 } /* Name.Exception */ 687 c-[nf] { color: #268bd2 } /* Name.Function */ 688 c-[nl] { color: #268bd2 } /* Name.Label */ 689 c-[nn] { color: #268bd2 } /* Name.Namespace */ 690 c-[py] { color: #268bd2 } /* Name.Property */ 691 c-[ow] { color: #657b83 } /* Operator.Word */ 692 c-[mb] { color: #657b83 } /* Literal.Number.Bin */ 693 c-[mf] { color: #657b83 } /* Literal.Number.Float */ 694 c-[mh] { color: #657b83 } /* Literal.Number.Hex */ 695 c-[mi] { color: #657b83 } /* Literal.Number.Integer */ 696 c-[mo] { color: #657b83 } /* Literal.Number.Oct */ 697 c-[sa] { color: #6c71c4 } /* Literal.String.Affix */ 698 c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */ 699 c-[sc] { color: #6c71c4 } /* Literal.String.Char */ 700 c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */ 701 c-[sd] { color: #6c71c4 } /* Literal.String.Doc */ 702 c-[se] { color: #6c71c4 } /* Literal.String.Escape */ 703 c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */ 704 c-[si] { color: #6c71c4 } /* Literal.String.Interpol */ 705 c-[sx] { color: #6c71c4 } /* Literal.String.Other */ 706 c-[sr] { color: #6c71c4 } /* Literal.String.Regex */ 707 c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */ 708 c-[fm] { color: #268bd2 } /* Name.Function.Magic */ 709 c-[vc] { color: #cb4b16 } /* Name.Variable.Class */ 710 c-[vg] { color: #cb4b16 } /* Name.Variable.Global */ 711 c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */ 712 c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */ 713 c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */ 714 } 715 </style> 716 <body class="h-entry"> 717 <div class="head"> 718 <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> 719 <h1 class="p-name no-ref" id="title">CSS Gap Decorations</h1> 720 <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> 721 <details> 722 <summary>Specification Metadata</summary> 723 <div data-fill-with="spec-metadata"> 724 <dl> 725 <dt>This version: 726 <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> 727 <dt>Issue Tracking: 728 <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-gap-decorations-1">CSSWG Issues Repository</a> 729 <dd><a href="https://github.com/w3c/csswg-drafts/issues/6748">CSSWG github issue #6748</a> 730 <dd><a href="#issues-index">Inline In Spec</a> 731 <dt class="editor">Editor: 732 <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>) 733 <dt>Suggest an Edit for this Spec: 734 <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-gap-decorations-1/Overview.bs">GitHub Editor</a> 735 </dl> 736 </div> 737 </details> 738 <div data-fill-with="warning"></div> 739 <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> 740 <hr title="Separator for header"> 741 </div> 742 <div class="p-summary" data-fill-with="abstract"> 743 <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2> 744 <p>This is a proposal to extend <a href="https://drafts.csswg.org/css-align">CSS Box Alignment</a> to support gap decorations.</p> 745 <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents 746 (such as HTML and XML) 747 on screen, on paper, etc. 748 </div> 749 <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2> 750 <div data-fill-with="status"> 751 <p> This is a public copy of the editors’ draft. 752 It is provided for discussion only and may change at any moment. 753 Its publication here does not imply endorsement of its contents by W3C. 754 Don’t cite this document other than as work in progress. </p> 755 <p>Please send feedback 756 by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), 757 including the spec code “css-gap-decorations” in the title, like this: 758 “[css-gap-decorations] <i>…summary of comment…</i>”. 759 All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>. 760 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> 761 <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> 762 <p></p> 763 </div> 764 <div data-fill-with="at-risk"></div> 765 <nav data-fill-with="table-of-contents" id="toc"> 766 <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> 767 <ol class="toc" role="directory"> 768 <li> 769 <a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a> 770 <ol class="toc"> 771 <li><a href="#overview"><span class="secno">1.1</span> <span class="content">Overview</span></a> 772 <li><a href="#placement"><span class="secno">1.2</span> <span class="content">Module Interactions</span></a> 773 <li><a href="#definitions"><span class="secno">1.3</span> <span class="content">Definitions</span></a> 774 </ol> 775 <li> 776 <a href="#rule-image"><span class="secno">2</span> <span class="content">Rule Images and Gradients</span></a> 777 <ol class="toc"> 778 <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> 779 <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> 780 <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> 781 <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> 782 </ol> 783 <li> 784 <a href="#size"><span class="secno">3</span> <span class="content">Rule Positioning and Sizing</span></a> 785 <ol class="toc"> 786 <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> 787 <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> 788 <li><a href="#column-rule-lateral-inset-start"><span class="secno">3.3</span> <span class="content">The Rule Lateral Inset Properties</span></a> 789 <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> 790 <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> 791 <li><a href="#column-rule-longitudinal-inset-start"><span class="secno">3.6</span> <span class="content">The Rule Longitudinal Inset Properties</span></a> 792 <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> 793 <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> 794 <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> 795 </ol> 796 <li> 797 <a href="#row-rule-props"><span class="secno">4</span> <span class="content">Row Rule Style and Color</span></a> 798 <ol class="toc"> 799 <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> 800 <li><a href="#row-rule"><span class="secno">4.2</span> <span class="content">The <span class="property">row-rule</span> Shorthand</span></a> 801 </ol> 802 <li> 803 <a href="#rule-align"><span class="secno">5</span> <span class="content">Rule Alignment</span></a> 804 <ol class="toc"> 805 <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> 806 <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> 807 </ol> 808 <li> 809 <a href="#rule-extent"><span class="secno">6</span> <span class="content">Rule Extent</span></a> 810 <ol class="toc"> 811 <li> 812 <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> 813 <ol class="toc"> 814 <li> 815 <a href="#rule-extent-grid"><span class="secno">6.1.1</span> <span class="content">Grid Containers</span></a> 816 <ol class="toc"> 817 <li><a href="#rule-extent-subgrid"><span class="secno">6.1.1.1</span> <span class="content">Subgrid</span></a> 818 <li><a href="#rule-extent-masonry"><span class="secno">6.1.1.2</span> <span class="content">Masonry</span></a> 819 </ol> 820 <li><a href="#rule-extent-flexbox"><span class="secno">6.1.2</span> <span class="content">Flex Containers</span></a> 821 <li><a href="#rule-extent-table"><span class="secno">6.1.3</span> <span class="content">Table Containers</span></a> 822 <li><a href="#rule-extent-table-row-group"><span class="secno">6.1.4</span> <span class="content">Table Row Group Containers</span></a> 823 <li><a href="#rule-extent-multicol"><span class="secno">6.1.5</span> <span class="content">Multi-Column Containers</span></a> 824 </ol> 825 </ol> 826 <li><a href="#rule-containing-rectangle"><span class="secno">7</span> <span class="content">The Rule Containing Rectangle</span></a> 827 <li><a href="#rule-painting-order"><span class="secno">8</span> <span class="content">Rule Painting Order</span></a> 828 <li><a href="#rule-overflow"><span class="secno">9</span> <span class="content">Rule Overflow</span></a> 829 <li> 830 <a href="#w3c-conformance"><span class="secno"></span> <span class="content"> Conformance</span></a> 831 <ol class="toc"> 832 <li><a href="#w3c-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a> 833 <li><a href="#w3c-conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a> 834 <li> 835 <a href="#w3c-partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a> 836 <ol class="toc"> 837 <li><a href="#w3c-conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a> 838 </ol> 839 <li><a href="#w3c-testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a> 840 </ol> 841 <li> 842 <a href="#index"><span class="secno"></span> <span class="content">Index</span></a> 843 <ol class="toc"> 844 <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a> 845 <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a> 846 </ol> 847 <li> 848 <a href="#references"><span class="secno"></span> <span class="content">References</span></a> 849 <ol class="toc"> 850 <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a> 851 <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a> 852 </ol> 853 <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a> 854 <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a> 855 </ol> 856 </nav> 857 <main> 858 <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> 859 <p><em>This section is not normative.</em></p> 860 <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> 861 <p>This is a proposal to add CSS features for decorating <a href="https://drafts.csswg.org/css-align#gaps">gaps</a>. 862 (Some use cases and background discussion can be found in <a href="https://github.com/w3c/csswg-drafts/issues/2748">issue #2748</a>.) 863 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. 864 Add properties to support images and gradients. 865 Add properties for aligning the rule to specific anchor points, 866 specifying its extent area, and to control its position and length within that area. 867 We add support for row rules by adding the corresponding <a class="property" data-link-type="propdesc">row-*</a> properties. 868 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, 869 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> 870 <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> 871 <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, 872 adding <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value"><percentage></a> and <span class="css">auto</span> values. 873 We also generalize the existing <span class="css">column-rule-*</span> properties to apply to other 874 types of containers. 875 Accordingly, we propose to move the existing <span class="css">column-rule</span> properties from 876 the <a href="https://drafts.csswg.org/css-multicol">Multi-column</a> spec to 877 the <a href="https://drafts.csswg.org/css-align">Box Alignment</a> spec. 878 Additionally, all new properties and shorthands in this proposal are intended 879 as additions to the <a href="https://drafts.csswg.org/css-align">Box Alignment</a> spec.</p> 880 <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> 881 <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 882 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 883 its size in this axis is the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="rule-length">rule length</dfn>. 884 These definitions are relative to the rule itself and does not depend on if 885 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> 886 <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> 887 <p>Authors may specify an image or gradient to be used in place of the <span class="css">column-rule-style</span>. 888 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. 889 Rules are one-dimensional though, as opposed to borders which have four sides around an area. 890 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> 891 <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> 892 <table class="def propdef" data-link-for-hint="column-rule-image-source"> 893 <tbody> 894 <tr> 895 <th>Name: 896 <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> 897 <tr class="value"> 898 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 899 <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-images-3/#typedef-image" id="ref-for-typedef-image"><image></a> 900 <tr> 901 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 902 <td>none 903 <tr> 904 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 905 <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 906 <tr> 907 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 908 <td>no 909 <tr> 910 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 911 <td>N/A 912 <tr> 913 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 914 <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①"><image></a> 915 <tr> 916 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 917 <td>per grammar 918 <tr> 919 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 920 <td>discrete 921 </table> 922 <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②"><image></a> to use in place of the rendering specified 923 by the <span class="css">column-rule-style</span>/<span class="css">row-rule-style</span> properties.</p> 924 <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> 925 <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> 926 <table class="def propdef" data-link-for-hint="column-rule-image-slice"> 927 <tbody> 928 <tr> 929 <th>Name: 930 <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> 931 <tr class="value"> 932 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 933 <td class="prod">[<a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value"><number [0,∞]></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value①"><percentage [0,∞]></a>]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{1,2}</a> 934 <tr> 935 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 936 <td>0 937 <tr> 938 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 939 <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 940 <tr> 941 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 942 <td>no 943 <tr> 944 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 945 <td>refer to image size in the rule’s longitudinal axis 946 <tr> 947 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 948 <td>one or two values, each either a number or percentage 949 <tr> 950 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 951 <td>per grammar 952 <tr> 953 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 954 <td>discrete 955 </table> 956 <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 957 of the image in the rule’s longitudinal axis, dividing it into three regions: 958 two edge areas and one middle area.</p> 959 <p>When two values are specified, they set the offsets on the start and end sides in 960 that order. If the end value is missing, it is the same as the start value.</p> 961 <dl> 962 <dt><dfn class="css" data-dfn-for="column-rule-image-slice" data-dfn-type="value" data-export id="valdef-column-rule-image-slice-percentage-0"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value②"><percentage [0,∞]></a><a class="self-link" href="#valdef-column-rule-image-slice-percentage-0"></a></dfn> 963 <dd>Percentages are relative to the image size in the rule’s longitudinal axis 964 <dt><dfn class="css" data-dfn-for="column-rule-image-slice" data-dfn-type="value" data-export id="valdef-column-rule-image-slice-number-0"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#number-value" id="ref-for-number-value①"><number [0,∞]></a><a class="self-link" href="#valdef-column-rule-image-slice-number-0"></a></dfn> 965 <dd>Numbers represent pixels in the image (if the image is a raster 966 image) or vector coordinates (if the image is a vector image). 967 </dl> 968 <p>Negative values are not allowed. 969 Computed values larger than the size of the image are interpreted as <span class="css">100%</span>.</p> 970 <p>If the image must be sized to determine the slices 971 (for example, for SVG images with no intrinsic size), 972 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> 973 <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. 974 However if the sum of the start and end values is equal to or greater than 975 the size of the image, the middle part becomes empty.</p> 976 <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> 977 <table class="def propdef" data-link-for-hint="column-rule-image-repeat"> 978 <tbody> 979 <tr> 980 <th>Name: 981 <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> 982 <tr class="value"> 983 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 984 <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 985 <tr> 986 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 987 <td>stretch 988 <tr> 989 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 990 <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 991 <tr> 992 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 993 <td>no 994 <tr> 995 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 996 <td>N/A 997 <tr> 998 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 999 <td>the specified keyword 1000 <tr> 1001 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1002 <td>per grammar 1003 <tr> 1004 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1005 <td>discrete 1006 </table> 1007 <p>These properties specify how the middle part of a sliced rule image is scaled and tiled. 1008 Values have the following meanings:</p> 1009 <dl> 1010 <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> 1011 <dd>The image is stretched to fill the area. 1012 <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> 1013 <dd>The image is tiled (repeated) to fill the area. 1014 <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> 1015 <dd>The image is tiled (repeated) to fill the area. If it does not 1016 fill the area with a whole number of tiles, the image is rescaled 1017 so that it does. 1018 <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> 1019 <dd>The image is tiled (repeated) to fill the area. If it does not 1020 fill the area with a whole number of tiles, the extra space is 1021 distributed around the tiles. 1022 </dl> 1023 <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 1024 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> 1025 <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> 1026 <table class="def propdef" data-link-for-hint="column-rule-image"> 1027 <tbody> 1028 <tr> 1029 <th>Name: 1030 <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> 1031 <tr class="value"> 1032 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1033 <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-column-rule-image-source" id="ref-for-propdef-column-rule-image-source①"><'column-rule-image-source'></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production" data-link-type="propdesc" href="#propdef-column-rule-image-slice" id="ref-for-propdef-column-rule-image-slice③"><'column-rule-image-slice'></a> <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①"><'column-rule-image-repeat'></a> 1034 <tr> 1035 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1036 <td>see individual properties 1037 <tr> 1038 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1039 <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 1040 <tr> 1041 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1042 <td>see individual properties 1043 <tr> 1044 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1045 <td>see individual properties 1046 <tr> 1047 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1048 <td>see individual properties 1049 <tr> 1050 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1051 <td>see individual properties 1052 <tr> 1053 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1054 <td>per grammar 1055 </table> 1056 <aside class="example" id="example-c9ee9e2e"> 1057 <a class="self-link" href="#example-c9ee9e2e"></a> This <a href="examples/grid-image-001.html">example</a> demonstrates the new 1058 rule image properties presented above in a grid layout with spanning elements. 1059 <figure> 1060 <img height="488" src="media/grid-image-001.png" width="608"> 1061 <figcaption> Example of image rules. </figcaption> 1062 </figure> 1063 </aside> 1064 <aside class="example" id="example-0518370f"> 1065 <a class="self-link" href="#example-0518370f"></a> Here’s a <a href="examples/grid-image-002.html">variation</a> of the example above 1066 that animates the container’s size and stretch the middle part of the images. 1067 <figure> 1068 <video autoplay loop src="media/grid-image-002.webm"></video> 1069 <figcaption> Example of stretching image rules when the container is resized. </figcaption> 1070 </figure> 1071 </aside> 1072 <aside class="example" id="example-746571da"> 1073 <a class="self-link" href="#example-746571da"></a> This is a similar <a href="examples/grid-gradient-001.html">example</a> using gradients. 1074 <figure> 1075 <img height="489" src="media/grid-gradient-001.png" width="608"> 1076 <figcaption> Example of gradient rules. </figcaption> 1077 </figure> 1078 </aside> 1079 <aside class="example" id="example-4f51bab9"> 1080 <a class="self-link" href="#example-4f51bab9"></a> Here’s an <a href="examples/flexbox-coupon-rule.html">example</a> demonstrating 1081 support for a use case mentioned in <a href="https://github.com/w3c/csswg-drafts/issues/2748#issuecomment-621983931">issue #2748</a>. 1082 It’s a coupon with a perforation rendered by a semi-transparent rule image between two flex items. 1083 <figure> 1084 <img height="108" src="media/flexbox-coupon-rule.png" width="253"> 1085 <figcaption> An example of a semi-transparent column rule image. </figcaption> 1086 </figure> 1087 </aside> 1088 <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> 1089 <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> 1090 <table class="def propdef partial" data-link-for-hint="column-rule-width"> 1091 <tbody> 1092 <tr> 1093 <th>Name: 1094 <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> 1095 <tr class="value"> 1096 <th><a href="https://www.w3.org/TR/css-values/#value-defs">New values:</a> 1097 <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value③"><percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> auto 1098 <tr> 1099 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1100 <td>medium 1101 <tr> 1102 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1103 <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 1104 <tr> 1105 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1106 <td>no 1107 <tr> 1108 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1109 <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> 1110 <tr> 1111 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1112 <td>absolute length if the specified value is <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-width" id="ref-for-typedef-line-width" title="Expands to: medium | thick | thin"><line-width></a>; <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. 1113 <tr> 1114 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1115 <td>by computed value type 1116 </table> 1117 <table class="def propdef" data-link-for-hint="row-rule-width"> 1118 <tbody> 1119 <tr> 1120 <th>Name: 1121 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-width">row-rule-width</dfn> 1122 <tr class="value"> 1123 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1124 <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-width" id="ref-for-typedef-line-width①" title="Expands to: medium | thick | thin"><line-width></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#percentage-value" id="ref-for-percentage-value④"><percentage></a> <span id="ref-for-comb-one⑦">|</span> auto 1125 <tr> 1126 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1127 <td>medium 1128 <tr> 1129 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1130 <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 1131 <tr> 1132 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1133 <td>no 1134 <tr> 1135 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1136 <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> 1137 <tr> 1138 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1139 <td>absolute length if the specified value is <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-width" id="ref-for-typedef-line-width②" title="Expands to: medium | thick | thin"><line-width></a>; <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. 1140 <tr> 1141 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1142 <td>per grammar 1143 <tr> 1144 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1145 <td>by computed value type 1146 </table> 1147 <p>These properties sets the thickness (lateral size) of a rule in the column and row axis, respectively. 1148 Negative specified values are not allowed. 1149 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> 1150 <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> 1151 <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> 1152 <table class="def propdef" data-link-for-hint="column-rule-length"> 1153 <tbody> 1154 <tr> 1155 <th>Name: 1156 <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> 1157 <tr class="value"> 1158 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1159 <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage"><length-percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> auto 1160 <tr> 1161 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1162 <td>auto 1163 <tr> 1164 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1165 <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 1166 <tr> 1167 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1168 <td>no 1169 <tr> 1170 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1171 <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> 1172 <tr> 1173 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1174 <td>the specified value 1175 <tr> 1176 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1177 <td>per grammar 1178 <tr> 1179 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1180 <td>by computed value type 1181 </table> 1182 <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. 1183 Negative specified values are not allowed. 1184 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> 1185 <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> 1186 <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> 1187 <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> 1188 <table class="def propdef" data-link-for-hint="column-rule-lateral-inset-start"> 1189 <tbody> 1190 <tr> 1191 <th>Name: 1192 <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> 1193 <tr class="value"> 1194 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1195 <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①"><length-percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> auto 1196 <tr> 1197 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1198 <td>auto 1199 <tr> 1200 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1201 <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 1202 <tr> 1203 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1204 <td>no 1205 <tr> 1206 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1207 <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> 1208 <tr> 1209 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1210 <td>the specified value 1211 <tr> 1212 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1213 <td>per grammar 1214 <tr> 1215 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1216 <td>by computed value type 1217 </table> 1218 <p>These properties sets the lateral start/end offset of the rule in the column and row axis, respectively. 1219 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> 1220 <aside class="example" id="example-2ebfce9b"> 1221 <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. 1222 <figure> 1223 <img height="170" src="media/grid-lateral-002.png" width="941"> 1224 <figcaption> Examples of aligning a rule at the start of the gap with a lateral start offset. </figcaption> 1225 </figure> 1226 </aside> 1227 <aside class="example" id="example-c7a1d008"> 1228 <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. 1229 <figure> 1230 <img height="170" src="media/grid-lateral-003.png" width="928"> 1231 <figcaption> Examples of aligning a rule at the end of the gap with a lateral end offset. </figcaption> 1232 </figure> 1233 </aside> 1234 <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 1235 box. The precise algorithm is described next.</p> 1236 <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> 1237 <p>Given a triplet of values: inset-start/end and a size for an axis, <span class="css">auto</span> values 1238 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 1239 the same axis. These are the rules for resolving them:</p> 1240 <ol id="rule-sizing"> 1241 <li>if all the values are <span class="css">auto</span> then set both inset values to zero and solve for size 1242 <li>if none of the values are <span class="css">auto</span> then the situation is over-constrained: solve by 1243 treating the end inset value as <span class="css">auto</span> 1244 <li>if both inset properties are <span class="css">auto</span>, but the size is not, then solve with the additional constraint 1245 that the inset values must have equal values (resulting in the rule being centered) 1246 <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 1247 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 1248 which case its positioned at the non-<span class="css">auto</span> inset edge) 1249 <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, 1250 if that makes the size negative then set the size to zero and solve again by 1251 treating the end inset value as <span class="css">auto</span> 1252 </ol> 1253 <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 1254 of values in a rule’s lateral axis.</p> 1255 <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 1256 descriptions below for which of the "edge" or non-"edge" values is used).</p> 1257 <p>Ditto for the corresponding <span class="css">row-rule-*</span> properties.</p> 1258 <aside class="example" id="example-a31fa0e2"> 1259 <a class="self-link" href="#example-a31fa0e2"></a> This <a href="examples/grid-lateral-001.html">example</a> demonstrates the rules above. 1260 Note in particular the latter two grids, which shows what happens when the sum of the 1261 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 1262 a zero-sized column rule there, which the row rule (purple) aligns to. 1263 <figure> 1264 <img height="651" src="media/grid-lateral-001.png" width="997"> 1265 <figcaption> Examples of lateral rule sizing with various inset values. </figcaption> 1266 </figure> 1267 </aside> 1268 <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> 1269 <table class="def propdef" data-link-for-hint="column-rule-lateral-inset"> 1270 <tbody> 1271 <tr> 1272 <th>Name: 1273 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-lateral-inset">column-rule-lateral-inset</dfn> 1274 <tr class="value"> 1275 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1276 <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-column-rule-lateral-inset-start" id="ref-for-propdef-column-rule-lateral-inset-start"><'column-rule-lateral-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-column-rule-lateral-inset-end" id="ref-for-propdef-column-rule-lateral-inset-end"><'column-rule-lateral-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> 1277 <tr> 1278 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1279 <td>see individual properties 1280 <tr> 1281 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1282 <td>see individual properties 1283 <tr> 1284 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1285 <td>see individual properties 1286 <tr> 1287 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1288 <td>see individual properties 1289 <tr> 1290 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1291 <td>see individual properties 1292 <tr> 1293 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1294 <td>see individual properties 1295 <tr> 1296 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1297 <td>per grammar 1298 </table> 1299 <table class="def propdef" data-link-for-hint="row-rule-lateral-inset"> 1300 <tbody> 1301 <tr> 1302 <th>Name: 1303 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-lateral-inset">row-rule-lateral-inset</dfn> 1304 <tr class="value"> 1305 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1306 <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-row-rule-lateral-inset-start" id="ref-for-propdef-row-rule-lateral-inset-start"><'row-rule-lateral-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-row-rule-lateral-inset-end" id="ref-for-propdef-row-rule-lateral-inset-end"><'row-rule-lateral-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> 1307 <tr> 1308 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1309 <td>see individual properties 1310 <tr> 1311 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1312 <td>see individual properties 1313 <tr> 1314 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1315 <td>see individual properties 1316 <tr> 1317 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1318 <td>see individual properties 1319 <tr> 1320 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1321 <td>see individual properties 1322 <tr> 1323 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1324 <td>see individual properties 1325 <tr> 1326 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1327 <td>per grammar 1328 </table> 1329 <p>These are shortands for specifying the corresponding start/end values. 1330 If one value is specified it is used for both start and end.</p> 1331 <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> 1332 <table class="def propdef" data-link-for-hint="column-rule-longitudinal-inset-start"> 1333 <tbody> 1334 <tr> 1335 <th>Name: 1336 <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> 1337 <tr class="value"> 1338 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1339 <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②"><length-percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> auto 1340 <tr> 1341 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1342 <td>0 1343 <tr> 1344 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1345 <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 1346 <tr> 1347 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1348 <td>no 1349 <tr> 1350 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1351 <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> 1352 <tr> 1353 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1354 <td>the specified value 1355 <tr> 1356 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1357 <td>per grammar 1358 <tr> 1359 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1360 <td>by computed value type 1361 </table> 1362 <p>These properties sets the longitudinal start/end inset of the rule in the column 1363 and row axis, respectively. They are only used on a rule’s edges that are interior. 1364 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. 1365 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> 1366 <aside class="example" id="example-7f768fba"> 1367 <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. 1368 <figure> 1369 <img height="280" src="media/grid-lateral-004.png" width="514"> 1370 <figcaption> Example of a rule with default rule alignment and size in both axes. </figcaption> 1371 </figure> 1372 </aside> 1373 <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> 1374 <aside class="example" id="example-156ca2f0"> 1375 <a class="self-link" href="#example-156ca2f0"></a> Here’s a few simple <a href="examples/grid-longitudinal-001.html">examples</a> of 1376 the rule sizing and inset properties. 1377 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. 1378 <figure> 1379 <img height="889" src="media/grid-longitudinal-001.png" width="629"> 1380 <figcaption> Examples of rule sizing and inset values. </figcaption> 1381 </figure> 1382 </aside> 1383 <aside class="example" id="example-3020da77"> 1384 <a class="self-link" href="#example-3020da77"></a> This <a href="examples/grid-longitudinal-002.html">example</a> demonstrates 1385 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>, 1386 which itself depends on the <a href="#rule-align">rule’s alignment</a> in its longitudinal axis. 1387 Note that the longitudinal insets in this example are definite and not animated. The reason 1388 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>. 1389 <figure> 1390 <video autoplay loop src="media/grid-longitudinal-002.webm"></video> 1391 <figcaption> Example of rule alignment and animated inset values. </figcaption> 1392 </figure> 1393 </aside> 1394 <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> 1395 <table class="def propdef" data-link-for-hint="column-rule-longitudinal-inset"> 1396 <tbody> 1397 <tr> 1398 <th>Name: 1399 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-column-rule-longitudinal-inset">column-rule-longitudinal-inset</dfn> 1400 <tr class="value"> 1401 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1402 <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-inset-start" id="ref-for-propdef-column-rule-longitudinal-inset-start"><'column-rule-longitudinal-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-inset-end" id="ref-for-propdef-column-rule-longitudinal-inset-end"><'column-rule-longitudinal-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> 1403 <tr> 1404 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1405 <td>see individual properties 1406 <tr> 1407 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1408 <td>see individual properties 1409 <tr> 1410 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1411 <td>see individual properties 1412 <tr> 1413 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1414 <td>see individual properties 1415 <tr> 1416 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1417 <td>see individual properties 1418 <tr> 1419 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1420 <td>see individual properties 1421 <tr> 1422 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1423 <td>per grammar 1424 </table> 1425 <table class="def propdef" data-link-for-hint="row-rule-longitudinal-inset"> 1426 <tbody> 1427 <tr> 1428 <th>Name: 1429 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-longitudinal-inset">row-rule-longitudinal-inset</dfn> 1430 <tr class="value"> 1431 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1432 <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-row-rule-longitudinal-inset-start" id="ref-for-propdef-row-rule-longitudinal-inset-start"><'row-rule-longitudinal-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-row-rule-longitudinal-inset-end" id="ref-for-propdef-row-rule-longitudinal-inset-end"><'row-rule-longitudinal-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt③">?</a> 1433 <tr> 1434 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1435 <td>see individual properties 1436 <tr> 1437 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1438 <td>see individual properties 1439 <tr> 1440 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1441 <td>see individual properties 1442 <tr> 1443 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1444 <td>see individual properties 1445 <tr> 1446 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1447 <td>see individual properties 1448 <tr> 1449 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1450 <td>see individual properties 1451 <tr> 1452 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1453 <td>per grammar 1454 </table> 1455 <p>These shortands specify the corresponding start/end values. If one value is specified it is used for both start/end.</p> 1456 <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> 1457 <table class="def propdef" data-link-for-hint="column-rule-longitudinal-edge-inset-start"> 1458 <tbody> 1459 <tr> 1460 <th>Name: 1461 <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> 1462 <tr class="value"> 1463 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1464 <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage③"><length-percentage></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> auto 1465 <tr> 1466 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1467 <td>0 1468 <tr> 1469 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1470 <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 1471 <tr> 1472 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1473 <td>no 1474 <tr> 1475 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1476 <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> 1477 <tr> 1478 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1479 <td>the specified value 1480 <tr> 1481 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1482 <td>per grammar 1483 <tr> 1484 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1485 <td>by computed value type 1486 </table> 1487 <p>These properties are identical to their non-"edge" counter-parts. These properties are used 1488 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. 1489 For interior rule edges, the <a href="#column-rule-longitudinal-inset-start">non-"edge" properties</a> are used. 1490 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> 1491 <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> 1492 <table class="def propdef" data-link-for-hint="column-rule-longitudinal-edge-inset"> 1493 <tbody> 1494 <tr> 1495 <th>Name: 1496 <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> 1497 <tr class="value"> 1498 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1499 <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-edge-inset-start" id="ref-for-propdef-column-rule-longitudinal-edge-inset-start"><'column-rule-longitudinal-edge-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-column-rule-longitudinal-edge-inset-end" id="ref-for-propdef-column-rule-longitudinal-edge-inset-end"><'column-rule-longitudinal-edge-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt④">?</a> 1500 <tr> 1501 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1502 <td>see individual properties 1503 <tr> 1504 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1505 <td>see individual properties 1506 <tr> 1507 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1508 <td>see individual properties 1509 <tr> 1510 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1511 <td>see individual properties 1512 <tr> 1513 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1514 <td>see individual properties 1515 <tr> 1516 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1517 <td>see individual properties 1518 <tr> 1519 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1520 <td>per grammar 1521 </table> 1522 <table class="def propdef" data-link-for-hint="row-rule-longitudinal-edge-inset"> 1523 <tbody> 1524 <tr> 1525 <th>Name: 1526 <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> 1527 <tr class="value"> 1528 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1529 <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-row-rule-longitudinal-edge-inset-start" id="ref-for-propdef-row-rule-longitudinal-edge-inset-start"><'row-rule-longitudinal-edge-inset-start'></a> <a class="production" data-link-type="propdesc" href="#propdef-row-rule-longitudinal-edge-inset-end" id="ref-for-propdef-row-rule-longitudinal-edge-inset-end"><'row-rule-longitudinal-edge-inset-end'></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt⑤">?</a> 1530 <tr> 1531 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1532 <td>see individual properties 1533 <tr> 1534 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1535 <td>see individual properties 1536 <tr> 1537 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1538 <td>see individual properties 1539 <tr> 1540 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1541 <td>see individual properties 1542 <tr> 1543 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1544 <td>see individual properties 1545 <tr> 1546 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1547 <td>see individual properties 1548 <tr> 1549 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1550 <td>per grammar 1551 </table> 1552 <p>These shortands specify the corresponding start/end values. If one value is specified it is used for both start/end.</p> 1553 <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> 1554 <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> 1555 <table class="def propdef" data-link-for-hint="row-rule-style"> 1556 <tbody> 1557 <tr> 1558 <th>Name: 1559 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-style">row-rule-style</dfn> 1560 <tr class="value"> 1561 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1562 <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-backgrounds-3/#typedef-line-style" id="ref-for-typedef-line-style" title="Expands to: dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid"><line-style></a> 1563 <tr> 1564 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1565 <td>none 1566 <tr> 1567 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1568 <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 1569 <tr> 1570 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1571 <td>no 1572 <tr> 1573 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1574 <td>N/A 1575 <tr> 1576 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1577 <td>specified keyword 1578 <tr> 1579 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1580 <td>per grammar 1581 <tr> 1582 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1583 <td>discrete 1584 </table> 1585 <table class="def propdef" data-link-for-hint="row-rule-color"> 1586 <tbody> 1587 <tr> 1588 <th>Name: 1589 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule-color">row-rule-color</dfn> 1590 <tr class="value"> 1591 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1592 <td class="prod"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-color-4/#typedef-color" id="ref-for-typedef-color" title="Expands to: aliceblue | antiquewhite | aqua | aquamarine | azure | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | cadetblue | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | currentcolor | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | green | greenyellow | grey | honeydew | hotpink | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | magenta | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | none | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | tomato | transparent | turquoise | violet | wheat | white | whitesmoke | yellow | yellowgreen"><color></a> 1593 <tr> 1594 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1595 <td>currentcolor 1596 <tr> 1597 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1598 <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 1599 <tr> 1600 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1601 <td>no 1602 <tr> 1603 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1604 <td>N/A 1605 <tr> 1606 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1607 <td>computed color 1608 <tr> 1609 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1610 <td>per grammar 1611 <tr> 1612 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1613 <td>by computed value type 1614 </table> 1615 <p>These properties are the same as the <span class="css">column-</span> properties but for the row rules.</p> 1616 <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> 1617 <p>This shorthand works the same as <span class="css">column-rule</span>.</p> 1618 <table class="def propdef" data-link-for-hint="row-rule"> 1619 <tbody> 1620 <tr> 1621 <th>Name: 1622 <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-row-rule">row-rule</dfn> 1623 <tr class="value"> 1624 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1625 <td class="prod"><a class="production" data-link-type="propdesc" href="#propdef-row-rule-width" id="ref-for-propdef-row-rule-width①"><'row-rule-width'></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any②">||</a> <a class="production" data-link-type="propdesc" href="#propdef-row-rule-style" id="ref-for-propdef-row-rule-style①"><'row-rule-style'></a> <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①"><'row-rule-color'></a> 1626 <tr> 1627 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1628 <td>see individual properties 1629 <tr> 1630 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1631 <td>see individual properties 1632 <tr> 1633 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1634 <td>see individual properties 1635 <tr> 1636 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1637 <td>see individual properties 1638 <tr> 1639 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1640 <td>see individual properties 1641 <tr> 1642 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1643 <td>see individual properties 1644 <tr> 1645 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1646 <td>per grammar 1647 </table> 1648 <p class="issue" id="issue-53073ff7"><a class="self-link" href="#issue-53073ff7"></a> lots of new possible shorthands... we now have many 1649 properties (and shorthands) with a <span class="css">column-rule</span> and <span class="css">row-rule</span> prefix. 1650 Should we add shorthands for some of those with a <a class="property" data-link-type="propdesc">rule</a> prefix to specify 1651 both axes, like so: 'rule-foo: <span class="production"><row-rule-foo></span> <span class="production"><column-rule-foo></span>?'. 1652 As usual, we have to be careful with the separator though, to make it 1653 forward-compatible with any changes we might want to make...</p> 1654 <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> 1655 <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> 1656 <table class="def propdef" data-link-for-hint="column-rule-align"> 1657 <tbody> 1658 <tr> 1659 <th>Name: 1660 <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> 1661 <tr class="value"> 1662 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1663 <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> 1664 <tr> 1665 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1666 <td>gap 1667 <tr> 1668 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1669 <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 1670 <tr> 1671 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1672 <td>no 1673 <tr> 1674 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1675 <td>N/A 1676 <tr> 1677 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1678 <td>the specified value 1679 <tr> 1680 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1681 <td>per grammar 1682 <tr> 1683 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1684 <td>discrete 1685 </table> 1686 <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. 1687 If only one value is specified it is used for both start and end. 1688 These properties are only used for interior edges. The <a class="property" data-link-type="propdesc">*-rule-edge-align</a> properties 1689 described below specify the alignment on the outer edges. The initial value, <span class="css">gap</span>, 1690 means that, by default, a rule will stretch its longitudinal size to fill the space 1691 from the end of the gap "above" to the start of the gap "below" ("above" meaning the gap 1692 in the orthogonal axis on the rule’s start side).</p> 1693 <aside class="example" id="example-d52ec54e"> 1694 <a class="self-link" href="#example-d52ec54e"></a> This <a href="examples/grid-align-001.html">example</a> illustrates a few alignment options. 1695 Note that the row rules all have a 1px longitudinal inset 1696 to separate the individual rule segments. (<span class="css">rule-center</span>, 1697 for example, would otherwise look like one long rule) 1698 <p>Note also that the column rule is intentionally not centered in 1699 the gap (to separate the <span class="css">rule-center</span> position 1700 from the <span class="css">gap-center</span> position)</p> 1701 <figure> 1702 <img height="596" src="media/grid-align-001.png" width="692"> 1703 <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> 1704 </figure> 1705 <p>You might be wondering if there’s a bug in the bottom-right example. 1706 Why is the <span class="css">gap-over</span> not honored there? 1707 That’s a non-interior rule edge and it’s controlled separately with <span class="css">row-rule-edge-align</span>, see below.</p> 1708 </aside> 1709 <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> 1710 <table class="def propdef" data-link-for-hint="column-rule-edge-align"> 1711 <tbody> 1712 <tr> 1713 <th>Name: 1714 <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> 1715 <tr class="value"> 1716 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1717 <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> 1718 <tr> 1719 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1720 <td>gap 1721 <tr> 1722 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1723 <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 1724 <tr> 1725 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1726 <td>no 1727 <tr> 1728 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1729 <td>N/A 1730 <tr> 1731 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1732 <td>the specified value 1733 <tr> 1734 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1735 <td>per grammar 1736 <tr> 1737 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1738 <td>discrete 1739 </table> 1740 <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 1741 and the end edge of the last rule (which may be the same rule). 1742 The start value is specified first, the end value second. If only one value is specified it 1743 is used for both start and end. (Attachment points for the interior rule edges are 1744 specified with the <a href="#column-rule-align"><a class="property" data-link-type="propdesc">*-rule-align</a></a> properties above.)</p> 1745 <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> 1746 <p>The figure below illustrates the alignment values. 1747 The red values are used for the top column rule’s start edge and the yellow 1748 values are used for its end edge. The yellow values are also used for the bottom 1749 column rule’s start edge. However, in this 1750 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 1751 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 1752 aligned because the row rule (purple) is using a lateral start inset. The cyan colored 1753 values are used for the bottom column border’s end edge. (If the top border were to 1754 stretch over the entire grid, then they would be used for its end edge.)</p> 1755 <p><span class="css">column-rule-edge-align</span> controls which of the red and cyan colored 1756 attachment points should be used. <span class="css">column-rule-edge-align</span> the yellow colored 1757 ones (and all other interior edges if there were more rows).</p> 1758 <figure> 1759 <img height="585" src="media/rule-alignment-values.png" width="621"> 1760 <figcaption> Illustration of rule alignment values. </figcaption> 1761 </figure> 1762 <p>Here’s the rule styling used for the above example:</p> 1763 <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-> 1764 <c- k>column-rule-align</c-><c- p>:</c-> rule-center rule<c- p>;</c-> 1765 <c- k>column-rule-edge-align</c-><c- p>:</c-> gap-center gap-over<c- p>;</c-> 1766 1767 <c- k>row-rule</c-><c- p>:</c-> <c- m>16</c-><c- k>px</c-> solid #7000ff<c- p>;</c-> 1768 <c- k>row-rule-lateral-inset-start</c-><c- p>:</c-> <c- m>30</c-><c- k>px</c-><c- p>;</c-> 1769 </pre> 1770 <p>The alignment points follow the same pattern in the other axis for the row rules. 1771 In this case the row rule is using the initial values (<span class="css">gap</span>) 1772 so they align with the inline axis gap edges.</p> 1773 <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? 1774 e.g. 'padding | padding-center | padding-over | border...'</p> 1775 <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> 1776 <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> 1777 <table class="def propdef" data-link-for-hint="column-rule-extent"> 1778 <tbody> 1779 <tr> 1780 <th>Name: 1781 <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> 1782 <tr class="value"> 1783 <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> 1784 <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> 1785 <tr> 1786 <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> 1787 <td>long 1788 <tr> 1789 <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> 1790 <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 1791 <tr> 1792 <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> 1793 <td>no 1794 <tr> 1795 <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> 1796 <td>N/A 1797 <tr> 1798 <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> 1799 <td>the specified value 1800 <tr> 1801 <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> 1802 <td>per grammar 1803 <tr> 1804 <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> 1805 <td>discrete 1806 </table> 1807 <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> 1808 <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. 1809 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 1810 the start position of the first of those segments and the end position of the last segment. 1811 We’ll define <span class="css">segment</span> in more detail in the container-specific sub-sections that follow.</p> 1812 <p>The <span class="css">allow-overlap</span> only affects rules in grid and table layout with spanning items/cells. 1813 It controls whether a rule should continue through such a span.</p> 1814 <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> 1815 <p>The <span class="css">all-*</span> values makes a rule extend over all segments in an axis, 1816 subject to not being interrupted by a span. In grid and table layout, where the tracks/table groups/rows 1817 all have the same length in a rule’s longitudinal axis, all the <span class="css">all-*</span> have 1818 the same behavior. They are intended for flexbox and masonry layout, where the gaps may fall at different 1819 positions in adjacent flex lines and masonry tracks.</p> 1820 <p>The lateral position of a rule is determined by its first segment.</p> 1821 <p>The following sub-sections will describe the rule extent for each type of layout container in more detail.</p> 1822 <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> 1823 <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> 1824 <p>This <a href="examples/grid-segment-001.html">example</a> illustrates <span class="css">segment</span> rules. 1825 Note that rules are generated in all gaps, whether there are items in a grid cell or not.</p> 1826 <aside class="example" id="example-9ccc5773"> 1827 <a class="self-link" href="#example-9ccc5773"></a> 1828 <figure> 1829 <img height="228" src="media/grid-segment-001.png" width="312"> 1830 <figcaption> Example of column and row rules with <span class="css">segment</span> extent in a grid container. </figcaption> 1831 </figure> 1832 </aside> 1833 <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. 1834 They generally behave as if they don’t exist as far as rules are concerned. 1835 The <a href="examples/grid-segment-002.html">example</a> below also 1836 illustrates that the position and size of the items don’t affect the rules; it’s only the position and size 1837 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> 1838 <aside class="example" id="example-9818bbbb"> 1839 <a class="self-link" href="#example-9818bbbb"></a> 1840 <figure> 1841 <img height="228" src="media/grid-segment-002.png" width="608"> 1842 <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> 1843 </figure> 1844 </aside> 1845 <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 1846 differently; we’ll cover that case in a separate <a href="#rule-extent-masonry">section</a> later.</p> 1847 <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> 1848 <dl> 1849 <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> 1850 <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 1851 <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> 1852 <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 1853 <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> 1854 <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 1855 <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> 1856 <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 1857 <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> 1858 <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 1859 <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> 1860 <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 1861 (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) 1862 <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> 1863 <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 1864 over the gap (see the <a href="#rule-extent-grid-algorithm">algorithm</a> below) 1865 </dl> 1866 <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>. 1867 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 1868 each track. Then select one of those per the property values above.</p> 1869 <p>For each pair of adjacent tracks, start by setting each track’s <var>current cell</var> to 1870 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> 1871 <ol id="rule-extent-grid-algorithm"> 1872 <li>if <span class="css">allow-overlap</span> was not specified, and the <var>current cell</var> in 1873 the start-most of the pair of tracks contains an item that spans into the end-most of the tracks, 1874 then skip this cell and let the <var>current cell</var> of each track be the cell after it, 1875 then go to step 1 or exit if there are no more cells 1876 <li>if the <span class="css">*-rule-extent</span> is one of the <span class="css">all-*</span> values, 1877 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 1878 last cell in the track (inclusive); if <span class="css">allow-overlap</span> was not specified, 1879 then stop before the first (opposite axis) track that contains an item spanning between this 1880 pair of tracks 1881 <li>otherwise, if the <var>current cell</var> is empty, or <span class="css">*-rule-extent</span> is <span class="css">segment</span>, 1882 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> 1883 <li>otherwise, if the <var>current cell</var> contains items that are spanning in the same axis, 1884 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; 1885 if <span class="css">allow-overlap</span> was not specified, then stop before 1886 the first (opposite axis) track that contains an item spanning between this pair of tracks 1887 <li> 1888 create a rule segment with the following <a data-link-type="dfn" href="#extent-size" id="ref-for-extent-size⑧">extent size</a>: 1889 <ol type="lower-alpha"> 1890 <li>for <span class="css">short</span>(<span class="css">long</span>), 1891 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 1892 the two <a data-link-type="dfn" href="#next-grid-cell-span" id="ref-for-next-grid-cell-span⑧">next grid cell spans</a> 1893 <li>for <span class="css">start</span>(<span class="css">end</span>), 1894 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 1895 <li>for <span class="css">all-*</span>, 1896 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) 1897 </ol> 1898 <li>set the <var>current cell</var> to the next cell, in each track, that is after the last cell 1899 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; 1900 otherwise, go to step 1. 1901 </ol> 1902 <aside class="example" id="example-a07793b6"> 1903 <a class="self-link" href="#example-a07793b6"></a> This <a href="examples/grid-extent-001.html">example</a> demonstrates the difference between 1904 the <span class="css">row-rule-extent</span> values in a grid with spanning items. The grid has seven columns. 1905 The grid items are semi-transparent to show any rules or overlapping items under them. 1906 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>. 1907 They are both forced to span into the cell in row 2, column 4 to illustrate what happens 1908 when items span like this. 1909 <figure> 1910 <img height="811" src="media/grid-extent-001.png" width="805"> 1911 <figcaption> Examples of <span class="css">row-rule-extent</span> in a grid container. </figcaption> 1912 </figure> 1913 </aside> 1914 <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> 1915 <p>A subgrid creates its own set of gap rules. It uses its own gaps, which are centered with, but 1916 may have a different size than the ancestor grid(s), as described in <a href="https://drafts.csswg.org/css-grid/#subgrids">subgrids</a>. 1917 Other than that, rules are created inside a subgrid in the same way as in a regular grid.</p> 1918 <p>A grid item that is a subgrid affects its parent grid’s rule formation exactly as 1919 a regular non-subgrid item would (whether the parent is also a subgrid or not), 1920 i.e. its span (if any) affects the <a href="#rule-extent-grid-algorithm">algorithm</a> above in the same way.</p> 1921 <p><span class="css">allow-overlap</span> can be used in the parent to extend its rules under 1922 the subgrid. The subgrid’s rules, if any, are rendered by the subgrid and thus render 1923 on top of the parent, as usual.</p> 1924 <p>When the subgrid determines its rule extents, it does not consider any items that 1925 aren’t its own grid items, i.e. any items in an ancestor grid that have been placed into 1926 the same grid cell that the subgrid occupies are not considered. Furthermore, it only uses 1927 its own local gap and rule metrics for positioning and sizing its rules. It doesn’t 1928 consider any gaps or rules that originate outside of the subgrid.</p> 1929 <aside class="example" id="example-c3d8a4e8"> 1930 <a class="self-link" href="#example-c3d8a4e8"></a> This <a href="examples/grid-subgrid-001.html">example</a> illustrates that 1931 a subgrid uses its own local gap and rule metrics for positioning and sizing 1932 its rules. It also shows what happens when a parent rule crosses a subgrid item. 1933 <p>Note that the parent’s column rule passing through the subgrid is not used for 1934 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 1935 unaware of any parent rules.</p> 1936 <figure> 1937 <img height="256" src="media/grid-subgrid-001.png" width="826"> 1938 <figcaption> Example of gap rules in a subgrid. </figcaption> 1939 </figure> 1940 </aside> 1941 <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> 1942 <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>. 1943 The grid axis works the same as has been described above. The masonry axis is special 1944 since an item is placed into a grid track based on the layout size of the items before 1945 it, so they are typically not aligned over the tracks. Furthermore, 1946 the grid tracks may have a different start position 1947 (due to <span id="ref-for-masonry-axis②">masonry axis</span> <a href="https://drafts.csswg.org/css-grid-3/#tracks-alignment">alignment</a>) 1948 and size.</p> 1949 <aside class="example" id="example-7a037cfa"> 1950 <a class="self-link" href="#example-7a037cfa"></a> This <a href="examples/grid-masonry-001.html">example</a> illustrates a few 1951 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 1952 the content-box edge. 1953 <figure> 1954 <img height="785" src="media/grid-masonry-001.png" width="691"> 1955 <figcaption> Example of gap rules in a masonry grid. </figcaption> 1956 </figure> 1957 </aside> 1958 <aside class="example" id="example-a0ffc13c"> 1959 <a class="self-link" href="#example-a0ffc13c"></a> This <a href="examples/grid-masonry-002.html">example</a> illustrates 1960 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. 1961 <figure> 1962 <img height="772" src="media/grid-masonry-002.png" width="730"> 1963 <figcaption> Example of gap rules in a masonry grid. </figcaption> 1964 </figure> 1965 </aside> 1966 <p class="issue" id="issue-b6f1d65c"><a class="self-link" href="#issue-b6f1d65c"></a> TODO: add definition list and algorithm here...</p> 1967 <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> 1968 <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> 1969 <p>In a <a href="https://drafts.csswg.org/css-flexbox/#valdef-flex-direction-row">row-oriented flex container</a>, 1970 the <span class="css">row-rule-*</span> properties creates rules between flex lines, 1971 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> 1972 <p>In <a href="https://drafts.csswg.org/css-flexbox/#valdef-flex-direction-row">column-oriented flex container</a>, 1973 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 1974 will describe the row-oriented case (just swap column/row in the text below to get the column-oriented case).</p> 1975 <p>Flex items can’t span multiple lines so there are no collisions possible for the main axis rules, 1976 hence the <span class="css">allow-overlap</span> keyword is ignored in flex layout in the main axis. 1977 A subsequent flex line is considered as a collision for the cross axis rules, i.e. a cross axis rule 1978 has the extent of one flex line, unless <span class="css">allow-overlap</span> is used (together with 1979 one the <span class="css">all-*</span> values). The reason is that items in different lines 1980 typically don’t line up in a way that the gaps between items are aligned across the lines 1981 (unless an author is very careful to arrange that), so this is to have a safe default behavior.</p> 1982 <p><span class="css">all-long allow-overlap</span> can be used to override that and 1983 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 1984 to the cross axis end edge of the last flex line (all the <span class="css">all-*</span> behave the same). 1985 Only the first flex line creates column rules in this case, 1986 and the rule’s lateral position is taken from the gap in the first line.</p> 1987 <p><strong class="advisement"> Authors are advised to <strong>not</strong> use the <span class="css">allow-overlap</span> value in 1988 the main axis of a multi-line flex container since it’s likely to make items 1989 on subsequent lines overlap the rules. It may be used when all flex items are 1990 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 1991 the gaps are aligned between all the lines.</strong></p> 1992 <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 1993 the <span class="css">row-rule-extent</span> values defined as follows:</p> 1994 <dl> 1995 <dt>segment 1996 <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> 1997 <dt>start 1998 <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 1999 <dt>end 2000 <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 2001 <dt>short 2002 <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) 2003 <dt>long 2004 <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) 2005 <dt>all-start 2006 <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 2007 <dt>all-end 2008 <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 2009 <dt>all-short 2010 <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 2011 <dt>all-long 2012 <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 2013 <dt>allow-overlap 2014 <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) 2015 </dl> 2016 <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. 2017 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 2018 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> 2019 <ol id="rule-extent-flexbox-algorithm" start="0"> 2020 <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> 2021 <li> 2022 <ol type="lower-alpha"> 2023 <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 2024 <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 2025 beyond the other item’s end position, then pick the start-most item and go to 2. 2026 <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>) 2027 </ol> 2028 <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 2029 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 2030 <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 2031 that has an inline start position that is greater than the end position of the picked item 2032 </ol> 2033 <p>(start/end position and sizes above are referring to the item’s margin-box in 2034 the rule’s longitudinal axis; the phrase "next item" refers to the next item 2035 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> 2036 <aside class="example" id="example-374fda56"> 2037 <a class="self-link" href="#example-374fda56"></a> Here are a few examples to illustrate the <span class="css">row-rule-extent</span> values. 2038 <figure> 2039 <img height="194" src="media/flexbox-extent-start-001.png" width="314"> 2040 <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> 2041 </figure> 2042 <figure> 2043 <img height="194" src="media/flexbox-extent-end-001.png" width="314"> 2044 <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> 2045 </figure> 2046 <figure> 2047 <img height="194" src="media/flexbox-extent-long-001.png" width="314"> 2048 <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> 2049 </figure> 2050 <figure> 2051 <img height="194" src="media/flexbox-extent-all-short-001.png" width="314"> 2052 <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> 2053 </figure> 2054 <figure> 2055 <img height="194" src="media/flexbox-extent-all-long-001.png" width="314"> 2056 <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> 2057 </figure> 2058 </aside> 2059 <aside class="example" id="example-b631e64a"> 2060 <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 2061 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 2062 used and the gaps aren’t aligned. (The flex items are semi-transparent 2063 to show the column rules underneath). 2064 <figure> 2065 <img height="194" src="media/flexbox-extent-all-long-allow-overlap-001.png" width="314"> 2066 <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> 2067 </figure> 2068 </aside> 2069 <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> 2070 <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. 2071 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>. 2072 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>. 2073 The <span class="css">allow-overlap</span> can be used to create rules that extend over 2074 the entire column/row length. Given that all <span id="ref-for-table-column-group③">table-column-groups</span> have the same block 2075 axis size and all <span id="ref-for-table-row-group①⑨">table-row-groups</span> have same the inline axis size, 2076 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> 2077 <aside class="example" id="example-5015561d"> 2078 <a class="self-link" href="#example-5015561d"></a> Note, column 2 is collapsed in this example. 2079 <figure> 2080 <img height="346" src="media/table-rules-001.png" width="818"> 2081 <figcaption> An <a href="examples/table-rules-001.html">example</a> of table rules. </figcaption> 2082 </figure> 2083 </aside> 2084 <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> 2085 <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> 2086 <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. 2087 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> 2088 <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 2089 a row <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#span" id="ref-for-span">span</a> crossing it. 2090 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 2091 a column <span id="ref-for-span①">span</span> crossing it. <span class="css">allow-overlap</span> can be used to create rules that 2092 extend over such spanning cells.</p> 2093 <aside class="example" id="example-2d35e879"> 2094 <a class="self-link" href="#example-2d35e879"></a> This <a href="examples/table-row-group-rules-001.html">example</a> illustrates rules between 2095 table rows and cells. And also what happens when the table rules from 2096 the last example is also applied. 2097 <figure> 2098 <img height="784" src="media/table-row-group-rules-001.png" width="879"> 2099 <figcaption> Example of table row and cell rules. </figcaption> 2100 </figure> 2101 </aside> 2102 <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> 2103 <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> 2104 <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. 2105 That’s now extended with all the new features described above. The changes described 2106 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 2107 previously would not parse, will now start doing something.</p> 2108 <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 2109 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>, 2110 separating them in the block axis.</p> 2111 <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> 2112 <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 2113 (<a href="https://github.com/w3c/csswg-drafts/issues/6746">issue #6746</a>).</p> 2114 <aside class="example" id="example-b0c3427d"> 2115 <a class="self-link" href="#example-b0c3427d"></a> This <a href="examples/multicol-row-rule-001.html">example</a> illustrates rules in 2116 a multi-column container. 2117 <figure> 2118 <img height="854" src="media/multicol-row-rule-001.png" width="827"> 2119 <figcaption> Example of column and row rules in a multi-column. </figcaption> 2120 </figure> 2121 </aside> 2122 <aside class="example" id="example-1f836c9e"> 2123 <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 2124 'column-span: <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#integer-value" id="ref-for-integer-value"><integer></a>' some time in the future, 2125 this is how row rules will work: 2126 <figure> 2127 <img height="195" src="media/multicol-colspan-2.png" width="808"> 2128 <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> 2129 </figure> 2130 </aside> 2131 <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> 2132 <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>. 2133 (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> 2134 <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 2135 the <a href="#column-rule-lateral-inset">inset properties</a> <i>in the same axis</i> as that would lead to a circular 2136 dependency when resolving inset percentage values. (The <span id="ref-for-rule-containing-rectangle①①⑤">rule containing rectangle</span> is the percentage basis 2137 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> 2138 <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. 2139 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. 2140 It has the following non-default rule properties:</p> 2141 <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-> 2142 <c- k>column-rule-align</c-><c- p>:</c-> rule<c- p>;</c-> 2143 <c- k>column-rule-edge-align</c-><c- p>:</c-> gap-center<c- p>;</c-> 2144 <c- k>column-rule-longitudinal-inset-end</c-><c- p>:</c-> <c- m>8</c-><c- k>px</c-><c- p>;</c-> 2145 2146 <c- k>row-rule</c-><c- p>:</c-> <c- m>6</c-><c- k>px</c-> solid black<c- p>;</c-> 2147 <c- k>row-rule-lateral-inset-start</c-><c- p>:</c-> <c- m>20</c-><c- k>px</c-><c- p>;</c-> 2148 </pre> 2149 <figure> 2150 <img height="584" src="media/rule-containing-rectangle.png" width="620"> 2151 <figcaption> The Rule Containing Rectangle </figcaption> 2152 </figure> 2153 <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, 2154 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>. 2155 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 2156 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> 2157 <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> 2158 <p>Column and row rules are painted in the same layer as the element’s border. 2159 They are painted after (on top of) the element’s border. 2160 All column rules for an element are painted first, then all of its row rules. 2161 The rules for an axis are painted in the order they were generated by 2162 the <a href="#rule-extent">rule extent</a> algorithms described above. 2163 Typically from the logical start to the end of the axis.</p> 2164 <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) 2165 are painted before the rules for the row-groups. The painting order between 2166 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 2167 start to end order in both axes.</p> 2168 <p>Again, note that for a specific fragment, <strong>all the column rules are painted before all the row rules</strong>, 2169 the above merely tries to clarify the painting order of the rules for 2170 a specific axis.</p> 2171 <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> 2172 <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>. 2173 Note that they can overflow an fragment’s border-box due to negative inset 2174 values etc.</p> 2175 <aside class="example" id="example-13dcb258"> 2176 <a class="self-link" href="#example-13dcb258"></a> Here’s an <a href="examples/grid-longitudinal-003.html">example</a> showing 2177 rules that overflow their container and how they are clipped. 2178 Both grids have large negative insets to extend the rules outside of the container. 2179 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. 2180 <figure> 2181 <img height="680" src="media/grid-longitudinal-003.png" width="771"> 2182 <figcaption> Examples of rule overflow and clipping. </figcaption> 2183 </figure> 2184 </aside> 2185 <p>For clarity, none of the properties in this spec affects layout in any way. 2186 Column and row rules are purely a painting effect.</p> 2187 </main> 2188 <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> 2189 <h3 class="no-ref heading settled" id="w3c-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#w3c-conventions"></a></h3> 2190 <p>Conformance requirements are expressed with a combination of 2191 descriptive assertions and RFC 2119 terminology. The key words “MUST”, 2192 “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, 2193 “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this 2194 document are to be interpreted as described in RFC 2119. 2195 However, for readability, these words do not appear in all uppercase 2196 letters in this specification. </p> 2197 <p>All of the text of this specification is normative except sections 2198 explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p> 2199 <p>Examples in this specification are introduced with the words “for example” 2200 or are set apart from the normative text with <code>class="example"</code>, 2201 like this: </p> 2202 <div class="example" id="w3c-example"> 2203 <a class="self-link" href="#w3c-example"></a> 2204 <p>This is an example of an informative example.</p> 2205 </div> 2206 <p>Informative notes begin with the word “Note” and are set apart from the 2207 normative text with <code>class="note"</code>, like this: </p> 2208 <p class="note" role="note">Note, this is an informative note.</p> 2209 <p> 2210 Advisements are normative sections styled to evoke special attention and are 2211 set apart from other normative text with <code><strong class="advisement"></code>, like 2212 this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> 2213 <details class="wpt-tests-block" dir="ltr" lang="en" open> 2214 <summary>Tests</summary> 2215 <p>Tests relating to the content of this specification 2216 may be documented in “Tests” blocks like this one. 2217 Any such block is non-normative.</p> 2218 <ul class="wpt-tests-list"></ul> 2219 <hr> 2220 </details> 2221 </p> 2222 <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> 2223 <p>Conformance to this specification 2224 is defined for three conformance classes: </p> 2225 <dl> 2226 <dt>style sheet 2227 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS 2228 style sheet</a>. 2229 <dt>renderer 2230 <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 2231 documents that use them. 2232 <dt>authoring tool 2233 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. 2234 </dl> 2235 <p>A style sheet is conformant to this specification 2236 if all of its statements that use syntax defined in this module are valid 2237 according to the generic CSS grammar and the individual grammars of each 2238 feature defined in this module. </p> 2239 <p>A renderer is conformant to this specification 2240 if, in addition to interpreting the style sheet as defined by the 2241 appropriate specifications, it supports all the features defined 2242 by this specification by parsing them correctly 2243 and rendering the document accordingly. However, the inability of a 2244 UA to correctly render a document due to limitations of the device 2245 does not make the UA non-conformant. (For example, a UA is not 2246 required to render color on a monochrome monitor.) </p> 2247 <p>An authoring tool is conformant to this specification 2248 if it writes style sheets that are syntactically correct according to the 2249 generic CSS grammar and the individual grammars of each feature in 2250 this module, and meet all other conformance requirements of style sheets 2251 as described in this module. </p> 2252 <h3 class="no-ref heading settled" id="w3c-partial"><span class="content"> Partial implementations</span><a class="self-link" href="#w3c-partial"></a></h3> 2253 <p>So that authors can exploit the forward-compatible parsing rules to 2254 assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore 2255 as appropriate</a>) any at-rules, properties, property values, keywords, 2256 and other syntactic constructs for which they have no usable level of 2257 support. In particular, user agents <strong>must not</strong> selectively 2258 ignore unsupported component values and honor supported values in a single 2259 multi-value property declaration: if any value is considered invalid 2260 (as unsupported values must be), CSS requires that the entire declaration 2261 be ignored.</p> 2262 <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> 2263 <p>To avoid clashes with future stable CSS features, 2264 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> 2265 <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> 2266 <p>Once a specification reaches the Candidate Recommendation stage, 2267 non-experimental implementations are possible, and implementors should 2268 release an unprefixed implementation of any CR-level feature they 2269 can demonstrate to be correctly implemented according to spec. </p> 2270 <p>To establish and maintain the interoperability of CSS across 2271 implementations, the CSS Working Group requests that non-experimental 2272 CSS renderers submit an implementation report (and, if necessary, the 2273 testcases used for that implementation report) to the W3C before 2274 releasing an unprefixed implementation of any CSS features. Testcases 2275 submitted to W3C are subject to review and correction by the CSS 2276 Working Group. </p> 2277 <p>Further information on submitting testcases and implementation reports 2278 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>. 2279 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> 2280 <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> 2281 <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2> 2282 <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> 2283 <ul class="index"> 2284 <li><a href="#valdef-row-rule-extent-all-end">all-end</a><span>, in § 6.1.1</span> 2285 <li><a href="#valdef-row-rule-extent-all-long">all-long</a><span>, in § 6.1.1</span> 2286 <li><a href="#valdef-row-rule-extent-allow-overlap">allow-overlap</a><span>, in § 6.1.1</span> 2287 <li><a href="#valdef-row-rule-extent-all-short">all-short</a><span>, in § 6.1.1</span> 2288 <li><a href="#valdef-row-rule-extent-all-start">all-start</a><span>, in § 6.1.1</span> 2289 <li><a href="#propdef-column-rule-align">column-rule-align</a><span>, in § 5.1</span> 2290 <li><a href="#propdef-column-rule-edge-align">column-rule-edge-align</a><span>, in § 5.2</span> 2291 <li><a href="#propdef-column-rule-extent">column-rule-extent</a><span>, in § 6.1</span> 2292 <li><a href="#propdef-column-rule-image">column-rule-image</a><span>, in § 2.4</span> 2293 <li><a href="#propdef-column-rule-image-repeat">column-rule-image-repeat</a><span>, in § 2.3</span> 2294 <li><a href="#propdef-column-rule-image-slice">column-rule-image-slice</a><span>, in § 2.2</span> 2295 <li><a href="#propdef-column-rule-image-source">column-rule-image-source</a><span>, in § 2.1</span> 2296 <li><a href="#propdef-column-rule-lateral-inset">column-rule-lateral-inset</a><span>, in § 3.5</span> 2297 <li><a href="#propdef-column-rule-lateral-inset-end">column-rule-lateral-inset-end</a><span>, in § 3.3</span> 2298 <li><a href="#propdef-column-rule-lateral-inset-start">column-rule-lateral-inset-start</a><span>, in § 3.3</span> 2299 <li><a href="#propdef-column-rule-length">column-rule-length</a><span>, in § 3.2</span> 2300 <li><a href="#propdef-column-rule-longitudinal-edge-inset">column-rule-longitudinal-edge-inset</a><span>, in § 3.9</span> 2301 <li><a href="#propdef-column-rule-longitudinal-edge-inset-end">column-rule-longitudinal-edge-inset-end</a><span>, in § 3.8</span> 2302 <li><a href="#propdef-column-rule-longitudinal-edge-inset-start">column-rule-longitudinal-edge-inset-start</a><span>, in § 3.8</span> 2303 <li><a href="#propdef-column-rule-longitudinal-inset">column-rule-longitudinal-inset</a><span>, in § 3.7</span> 2304 <li><a href="#propdef-column-rule-longitudinal-inset-end">column-rule-longitudinal-inset-end</a><span>, in § 3.6</span> 2305 <li><a href="#propdef-column-rule-longitudinal-inset-start">column-rule-longitudinal-inset-start</a><span>, in § 3.6</span> 2306 <li><a href="#valdef-row-rule-extent-end">end</a><span>, in § 6.1.1</span> 2307 <li><a href="#extent-size">extent size</a><span>, in § 6.1</span> 2308 <li><a href="#lateral-axis">lateral axis</a><span>, in § 1.3</span> 2309 <li><a href="#valdef-row-rule-extent-long">long</a><span>, in § 6.1.1</span> 2310 <li><a href="#longitudinal-axis">longitudinal axis</a><span>, in § 1.3</span> 2311 <li><a href="#next-flex-line-item">next flex line item</a><span>, in § 6.1.2</span> 2312 <li><a href="#next-grid-cell-span">next grid cell span</a><span>, in § 6.1.1</span> 2313 <li><a href="#valdef-column-rule-image-slice-number-0"><number [0,∞]></a><span>, in § 2.2</span> 2314 <li><a href="#valdef-column-rule-image-slice-percentage-0"><percentage [0,∞]></a><span>, in § 2.2</span> 2315 <li><a href="#valdef-column-rule-image-repeat-repeat">repeat</a><span>, in § 2.3</span> 2316 <li><a href="#valdef-column-rule-image-repeat-round">round</a><span>, in § 2.3</span> 2317 <li><a href="#propdef-row-rule">row-rule</a><span>, in § 4.2</span> 2318 <li><a href="#propdef-row-rule-align">row-rule-align</a><span>, in § 5.1</span> 2319 <li><a href="#propdef-row-rule-color">row-rule-color</a><span>, in § 4.1</span> 2320 <li><a href="#propdef-row-rule-edge-align">row-rule-edge-align</a><span>, in § 5.2</span> 2321 <li><a href="#propdef-row-rule-extent">row-rule-extent</a><span>, in § 6.1</span> 2322 <li><a href="#propdef-row-rule-image">row-rule-image</a><span>, in § 2.4</span> 2323 <li><a href="#propdef-row-rule-image-repeat">row-rule-image-repeat</a><span>, in § 2.3</span> 2324 <li><a href="#propdef-row-rule-image-slice">row-rule-image-slice</a><span>, in § 2.2</span> 2325 <li><a href="#propdef-row-rule-image-source">row-rule-image-source</a><span>, in § 2.1</span> 2326 <li><a href="#propdef-row-rule-lateral-inset">row-rule-lateral-inset</a><span>, in § 3.5</span> 2327 <li><a href="#propdef-row-rule-lateral-inset-end">row-rule-lateral-inset-end</a><span>, in § 3.3</span> 2328 <li><a href="#propdef-row-rule-lateral-inset-start">row-rule-lateral-inset-start</a><span>, in § 3.3</span> 2329 <li><a href="#propdef-row-rule-length">row-rule-length</a><span>, in § 3.2</span> 2330 <li><a href="#propdef-row-rule-longitudinal-edge-inset">row-rule-longitudinal-edge-inset</a><span>, in § 3.9</span> 2331 <li><a href="#propdef-row-rule-longitudinal-edge-inset-end">row-rule-longitudinal-edge-inset-end</a><span>, in § 3.8</span> 2332 <li><a href="#propdef-row-rule-longitudinal-edge-inset-start">row-rule-longitudinal-edge-inset-start</a><span>, in § 3.8</span> 2333 <li><a href="#propdef-row-rule-longitudinal-inset">row-rule-longitudinal-inset</a><span>, in § 3.7</span> 2334 <li><a href="#propdef-row-rule-longitudinal-inset-end">row-rule-longitudinal-inset-end</a><span>, in § 3.6</span> 2335 <li><a href="#propdef-row-rule-longitudinal-inset-start">row-rule-longitudinal-inset-start</a><span>, in § 3.6</span> 2336 <li><a href="#propdef-row-rule-style">row-rule-style</a><span>, in § 4.1</span> 2337 <li><a href="#propdef-row-rule-width">row-rule-width</a><span>, in § 3.1</span> 2338 <li><a href="#rule-containing-rectangle①">rule containing rectangle</a><span>, in § 7</span> 2339 <li><a href="#rule-length">rule length</a><span>, in § 1.3</span> 2340 <li> 2341 segment 2342 <ul> 2343 <li><a href="#segment">definition of</a><span>, in § 6.1</span> 2344 <li><a href="#valdef-row-rule-extent-segment">value for row-rule-extent</a><span>, in § 6.1.1</span> 2345 </ul> 2346 <li><a href="#valdef-row-rule-extent-short">short</a><span>, in § 6.1.1</span> 2347 <li><a href="#valdef-column-rule-image-repeat-space">space</a><span>, in § 2.3</span> 2348 <li><a href="#valdef-row-rule-extent-start">start</a><span>, in § 6.1.1</span> 2349 <li><a href="#valdef-column-rule-image-repeat-stretch">stretch</a><span>, in § 2.3</span> 2350 </ul> 2351 <aside class="dfn-panel" data-for="term-for-typedef-line-style"> 2352 <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> 2353 <ul> 2354 <li><a href="#ref-for-typedef-line-style">4.1. The row-rule-style and row-rule-color Properties</a> 2355 </ul> 2356 </aside> 2357 <aside class="dfn-panel" data-for="term-for-typedef-line-width"> 2358 <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> 2359 <ul> 2360 <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> 2361 </ul> 2362 </aside> 2363 <aside class="dfn-panel" data-for="term-for-propdef-border-style"> 2364 <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> 2365 <ul> 2366 <li><a href="#ref-for-propdef-border-style">2. Rule Images and Gradients</a> 2367 </ul> 2368 </aside> 2369 <aside class="dfn-panel" data-for="term-for-valdef-margin-trim-all"> 2370 <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> 2371 <ul> 2372 <li><a href="#ref-for-valdef-margin-trim-all">6.1. The column-rule-extent and row-rule-extent Properties</a> 2373 </ul> 2374 </aside> 2375 <aside class="dfn-panel" data-for="term-for-valdef-box-margin-box"> 2376 <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> 2377 <ul> 2378 <li><a href="#ref-for-valdef-box-margin-box">6.1.5. Multi-Column Containers</a> 2379 </ul> 2380 </aside> 2381 <aside class="dfn-panel" data-for="term-for-used-value"> 2382 <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> 2383 <ul> 2384 <li><a href="#ref-for-used-value">3.1. The column-rule-width and row-rule-width Properties</a> 2385 <li><a href="#ref-for-used-value①">3.2. The column-rule-length and row-rule-length Properties</a> 2386 <li><a href="#ref-for-used-value②">3.3. The Rule Lateral Inset Properties</a> 2387 <li><a href="#ref-for-used-value③">3.6. The Rule Longitudinal Inset Properties</a> 2388 </ul> 2389 </aside> 2390 <aside class="dfn-panel" data-for="term-for-typedef-color"> 2391 <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> 2392 <ul> 2393 <li><a href="#ref-for-typedef-color">4.1. The row-rule-style and row-rule-color Properties</a> 2394 </ul> 2395 </aside> 2396 <aside class="dfn-panel" data-for="term-for-propdef-opacity"> 2397 <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> 2398 <ul> 2399 <li><a href="#ref-for-propdef-opacity">3.6. The Rule Longitudinal Inset Properties</a> 2400 </ul> 2401 </aside> 2402 <aside class="dfn-panel" data-for="term-for-order-modified-document-order"> 2403 <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> 2404 <ul> 2405 <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> 2406 </ul> 2407 </aside> 2408 <aside class="dfn-panel" data-for="term-for-flex-container"> 2409 <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> 2410 <ul> 2411 <li><a href="#ref-for-flex-container">1.1. Overview</a> 2412 <li><a href="#ref-for-flex-container①">2.1. The column-rule-image-source and row-rule-image-source Properties</a> 2413 <li><a href="#ref-for-flex-container②">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> 2414 <li><a href="#ref-for-flex-container③">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a> 2415 <li><a href="#ref-for-flex-container④">2.4. The column-rule-image and row-rule-image Shorthands</a> 2416 <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> 2417 <li><a href="#ref-for-flex-container⑦">3.2. The column-rule-length and row-rule-length Properties</a> 2418 <li><a href="#ref-for-flex-container⑧">3.3. The Rule Lateral Inset Properties</a> 2419 <li><a href="#ref-for-flex-container⑨">3.6. The Rule Longitudinal Inset Properties</a> 2420 <li><a href="#ref-for-flex-container①⓪">3.8. The Rule Longitudinal Edge Inset Properties</a> 2421 <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> 2422 <li><a href="#ref-for-flex-container①③">5.1. The column-rule-align and row-rule-align Properties</a> 2423 <li><a href="#ref-for-flex-container①④">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> 2424 <li><a href="#ref-for-flex-container①⑤">6.1. The column-rule-extent and row-rule-extent Properties</a> 2425 </ul> 2426 </aside> 2427 <aside class="dfn-panel" data-for="term-for-collapsed-track"> 2428 <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> 2429 <ul> 2430 <li><a href="#ref-for-collapsed-track">6.1.1. Grid Containers</a> <a href="#ref-for-collapsed-track①">(2)</a> 2431 </ul> 2432 </aside> 2433 <aside class="dfn-panel" data-for="term-for-grid"> 2434 <a href="https://drafts.csswg.org/css-grid-2/#grid">https://drafts.csswg.org/css-grid-2/#grid</a><b>Referenced in:</b> 2435 <ul> 2436 <li><a href="#ref-for-grid">6.1.1. Grid Containers</a> 2437 </ul> 2438 </aside> 2439 <aside class="dfn-panel" data-for="term-for-grid-cell"> 2440 <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> 2441 <ul> 2442 <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> 2443 </ul> 2444 </aside> 2445 <aside class="dfn-panel" data-for="term-for-grid-container"> 2446 <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> 2447 <ul> 2448 <li><a href="#ref-for-grid-container">1.1. Overview</a> 2449 <li><a href="#ref-for-grid-container①">2.1. The column-rule-image-source and row-rule-image-source Properties</a> 2450 <li><a href="#ref-for-grid-container②">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> 2451 <li><a href="#ref-for-grid-container③">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a> 2452 <li><a href="#ref-for-grid-container④">2.4. The column-rule-image and row-rule-image Shorthands</a> 2453 <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> 2454 <li><a href="#ref-for-grid-container⑦">3.2. The column-rule-length and row-rule-length Properties</a> 2455 <li><a href="#ref-for-grid-container⑧">3.3. The Rule Lateral Inset Properties</a> 2456 <li><a href="#ref-for-grid-container⑨">3.6. The Rule Longitudinal Inset Properties</a> 2457 <li><a href="#ref-for-grid-container①⓪">3.8. The Rule Longitudinal Edge Inset Properties</a> 2458 <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> 2459 <li><a href="#ref-for-grid-container①③">5.1. The column-rule-align and row-rule-align Properties</a> 2460 <li><a href="#ref-for-grid-container①④">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> 2461 <li><a href="#ref-for-grid-container①⑤">6.1. The column-rule-extent and row-rule-extent Properties</a> 2462 <li><a href="#ref-for-grid-container①⑥">6.1.1. Grid Containers</a> 2463 </ul> 2464 </aside> 2465 <aside class="dfn-panel" data-for="term-for-propdef-grid-column"> 2466 <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> 2467 <ul> 2468 <li><a href="#ref-for-propdef-grid-column">6.1.1. Grid Containers</a> 2469 </ul> 2470 </aside> 2471 <aside class="dfn-panel" data-for="term-for-propdef-grid-row"> 2472 <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> 2473 <ul> 2474 <li><a href="#ref-for-propdef-grid-row">6.1.1. Grid Containers</a> 2475 </ul> 2476 </aside> 2477 <aside class="dfn-panel" data-for="term-for-implicit-grid"> 2478 <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> 2479 <ul> 2480 <li><a href="#ref-for-implicit-grid">6.1.1. Grid Containers</a> 2481 </ul> 2482 </aside> 2483 <aside class="dfn-panel" data-for="term-for-subgrid"> 2484 <a href="https://drafts.csswg.org/css-grid-2/#subgrid">https://drafts.csswg.org/css-grid-2/#subgrid</a><b>Referenced in:</b> 2485 <ul> 2486 <li><a href="#ref-for-subgrid">6.1.1.2. Masonry</a> 2487 </ul> 2488 </aside> 2489 <aside class="dfn-panel" data-for="term-for-masonry-axis"> 2490 <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> 2491 <ul> 2492 <li><a href="#ref-for-masonry-axis">6.1.1. Grid Containers</a> 2493 <li><a href="#ref-for-masonry-axis①">6.1.1.2. Masonry</a> <a href="#ref-for-masonry-axis②">(2)</a> 2494 </ul> 2495 </aside> 2496 <aside class="dfn-panel" data-for="term-for-typedef-image"> 2497 <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> 2498 <ul> 2499 <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> 2500 </ul> 2501 </aside> 2502 <aside class="dfn-panel" data-for="term-for-default-object-size"> 2503 <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> 2504 <ul> 2505 <li><a href="#ref-for-default-object-size">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> 2506 </ul> 2507 </aside> 2508 <aside class="dfn-panel" data-for="term-for-specified-size"> 2509 <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> 2510 <ul> 2511 <li><a href="#ref-for-specified-size">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> 2512 </ul> 2513 </aside> 2514 <aside class="dfn-panel" data-for="term-for-propdef-column-rule-width"> 2515 <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> 2516 <ul> 2517 <li><a href="#ref-for-propdef-column-rule-width">1.1. Overview</a> 2518 <li><a href="#ref-for-propdef-column-rule-width①">1.2. Module Interactions</a> 2519 <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> 2520 <li><a href="#ref-for-propdef-column-rule-width④">6.1.5. Multi-Column Containers</a> 2521 </ul> 2522 </aside> 2523 <aside class="dfn-panel" data-for="term-for-multi-column-container"> 2524 <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> 2525 <ul> 2526 <li><a href="#ref-for-multi-column-container">1.1. Overview</a> 2527 <li><a href="#ref-for-multi-column-container①">2.1. The column-rule-image-source and row-rule-image-source Properties</a> 2528 <li><a href="#ref-for-multi-column-container②">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> 2529 <li><a href="#ref-for-multi-column-container③">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a> 2530 <li><a href="#ref-for-multi-column-container④">2.4. The column-rule-image and row-rule-image Shorthands</a> 2531 <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> 2532 <li><a href="#ref-for-multi-column-container⑦">3.2. The column-rule-length and row-rule-length Properties</a> 2533 <li><a href="#ref-for-multi-column-container⑧">3.3. The Rule Lateral Inset Properties</a> 2534 <li><a href="#ref-for-multi-column-container⑨">3.6. The Rule Longitudinal Inset Properties</a> 2535 <li><a href="#ref-for-multi-column-container①⓪">3.8. The Rule Longitudinal Edge Inset Properties</a> 2536 <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> 2537 <li><a href="#ref-for-multi-column-container①③">5.1. The column-rule-align and row-rule-align Properties</a> 2538 <li><a href="#ref-for-multi-column-container①④">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> 2539 <li><a href="#ref-for-multi-column-container①⑤">6.1. The column-rule-extent and row-rule-extent Properties</a> 2540 <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> 2541 </ul> 2542 </aside> 2543 <aside class="dfn-panel" data-for="term-for-multi-column-layout"> 2544 <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> 2545 <ul> 2546 <li><a href="#ref-for-multi-column-layout">3.6. The Rule Longitudinal Inset Properties</a> 2547 </ul> 2548 </aside> 2549 <aside class="dfn-panel" data-for="term-for-spanner"> 2550 <a href="https://drafts.csswg.org/css-multicol-1/#spanner">https://drafts.csswg.org/css-multicol-1/#spanner</a><b>Referenced in:</b> 2551 <ul> 2552 <li><a href="#ref-for-spanner">6.1.5. Multi-Column Containers</a> <a href="#ref-for-spanner①">(2)</a> 2553 </ul> 2554 </aside> 2555 <aside class="dfn-panel" data-for="term-for-propdef-column-span"> 2556 <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> 2557 <ul> 2558 <li><a href="#ref-for-propdef-column-span">6.1.5. Multi-Column Containers</a> 2559 </ul> 2560 </aside> 2561 <aside class="dfn-panel" data-for="term-for-ink-overflow"> 2562 <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> 2563 <ul> 2564 <li><a href="#ref-for-ink-overflow">9. Rule Overflow</a> 2565 </ul> 2566 </aside> 2567 <aside class="dfn-panel" data-for="term-for-propdef-overflow"> 2568 <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> 2569 <ul> 2570 <li><a href="#ref-for-propdef-overflow">9. Rule Overflow</a> 2571 </ul> 2572 </aside> 2573 <aside class="dfn-panel" data-for="term-for-propdef-left"> 2574 <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> 2575 <ul> 2576 <li><a href="#ref-for-propdef-left">3.3. The Rule Lateral Inset Properties</a> 2577 </ul> 2578 </aside> 2579 <aside class="dfn-panel" data-for="term-for-propdef-right"> 2580 <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> 2581 <ul> 2582 <li><a href="#ref-for-propdef-right">3.3. The Rule Lateral Inset Properties</a> 2583 </ul> 2584 </aside> 2585 <aside class="dfn-panel" data-for="term-for-outer-size"> 2586 <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> 2587 <ul> 2588 <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> 2589 </ul> 2590 </aside> 2591 <aside class="dfn-panel" data-for="term-for-propdef-width"> 2592 <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> 2593 <ul> 2594 <li><a href="#ref-for-propdef-width">3.3. The Rule Lateral Inset Properties</a> 2595 </ul> 2596 </aside> 2597 <aside class="dfn-panel" data-for="term-for-span"> 2598 <a href="https://drafts.csswg.org/css-tables-3/#span">https://drafts.csswg.org/css-tables-3/#span</a><b>Referenced in:</b> 2599 <ul> 2600 <li><a href="#ref-for-span">6.1.4. Table Row Group Containers</a> <a href="#ref-for-span①">(2)</a> 2601 </ul> 2602 </aside> 2603 <aside class="dfn-panel" data-for="term-for-table"> 2604 <a href="https://drafts.csswg.org/css-tables-3/#table">https://drafts.csswg.org/css-tables-3/#table</a><b>Referenced in:</b> 2605 <ul> 2606 <li><a href="#ref-for-table">1.1. Overview</a> 2607 <li><a href="#ref-for-table①">2.1. The column-rule-image-source and row-rule-image-source Properties</a> 2608 <li><a href="#ref-for-table②">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> 2609 <li><a href="#ref-for-table③">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a> 2610 <li><a href="#ref-for-table④">2.4. The column-rule-image and row-rule-image Shorthands</a> 2611 <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> 2612 <li><a href="#ref-for-table⑦">3.2. The column-rule-length and row-rule-length Properties</a> 2613 <li><a href="#ref-for-table⑧">3.3. The Rule Lateral Inset Properties</a> 2614 <li><a href="#ref-for-table⑨">3.6. The Rule Longitudinal Inset Properties</a> 2615 <li><a href="#ref-for-table①⓪">3.8. The Rule Longitudinal Edge Inset Properties</a> 2616 <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> 2617 <li><a href="#ref-for-table①③">5.1. The column-rule-align and row-rule-align Properties</a> 2618 <li><a href="#ref-for-table①④">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> 2619 <li><a href="#ref-for-table①⑤">6.1. The column-rule-extent and row-rule-extent Properties</a> 2620 <li><a href="#ref-for-table①⑥">6.1.3. Table Containers</a> 2621 <li><a href="#ref-for-table①⑦">8. Rule Painting Order</a> 2622 </ul> 2623 </aside> 2624 <aside class="dfn-panel" data-for="term-for-table-cell"> 2625 <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> 2626 <ul> 2627 <li><a href="#ref-for-table-cell">6.1.4. Table Row Group Containers</a> <a href="#ref-for-table-cell①">(2)</a> 2628 </ul> 2629 </aside> 2630 <aside class="dfn-panel" data-for="term-for-table-column"> 2631 <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> 2632 <ul> 2633 <li><a href="#ref-for-table-column">6.1.4. Table Row Group Containers</a> 2634 </ul> 2635 </aside> 2636 <aside class="dfn-panel" data-for="term-for-table-column-group"> 2637 <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> 2638 <ul> 2639 <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> 2640 </ul> 2641 </aside> 2642 <aside class="dfn-panel" data-for="term-for-table-row"> 2643 <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> 2644 <ul> 2645 <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> 2646 </ul> 2647 </aside> 2648 <aside class="dfn-panel" data-for="term-for-table-row-group"> 2649 <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> 2650 <ul> 2651 <li><a href="#ref-for-table-row-group">1.1. Overview</a> 2652 <li><a href="#ref-for-table-row-group①">2.1. The column-rule-image-source and row-rule-image-source Properties</a> 2653 <li><a href="#ref-for-table-row-group②">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> 2654 <li><a href="#ref-for-table-row-group③">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a> 2655 <li><a href="#ref-for-table-row-group④">2.4. The column-rule-image and row-rule-image Shorthands</a> 2656 <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> 2657 <li><a href="#ref-for-table-row-group⑦">3.2. The column-rule-length and row-rule-length Properties</a> 2658 <li><a href="#ref-for-table-row-group⑧">3.3. The Rule Lateral Inset Properties</a> 2659 <li><a href="#ref-for-table-row-group⑨">3.6. The Rule Longitudinal Inset Properties</a> 2660 <li><a href="#ref-for-table-row-group①⓪">3.8. The Rule Longitudinal Edge Inset Properties</a> 2661 <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> 2662 <li><a href="#ref-for-table-row-group①③">5.1. The column-rule-align and row-rule-align Properties</a> 2663 <li><a href="#ref-for-table-row-group①④">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> 2664 <li><a href="#ref-for-table-row-group①⑤">6.1. The column-rule-extent and row-rule-extent Properties</a> 2665 <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> 2666 <li><a href="#ref-for-table-row-group②⓪">6.1.4. Table Row Group Containers</a> 2667 </ul> 2668 </aside> 2669 <aside class="dfn-panel" data-for="term-for-integer-value"> 2670 <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> 2671 <ul> 2672 <li><a href="#ref-for-integer-value">6.1.5. Multi-Column Containers</a> 2673 </ul> 2674 </aside> 2675 <aside class="dfn-panel" data-for="term-for-typedef-length-percentage"> 2676 <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> 2677 <ul> 2678 <li><a href="#ref-for-typedef-length-percentage">3.2. The column-rule-length and row-rule-length Properties</a> 2679 <li><a href="#ref-for-typedef-length-percentage①">3.3. The Rule Lateral Inset Properties</a> 2680 <li><a href="#ref-for-typedef-length-percentage②">3.6. The Rule Longitudinal Inset Properties</a> 2681 <li><a href="#ref-for-typedef-length-percentage③">3.8. The Rule Longitudinal Edge Inset Properties</a> 2682 </ul> 2683 </aside> 2684 <aside class="dfn-panel" data-for="term-for-number-value"> 2685 <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> 2686 <ul> 2687 <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> 2688 </ul> 2689 </aside> 2690 <aside class="dfn-panel" data-for="term-for-percentage-value"> 2691 <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> 2692 <ul> 2693 <li><a href="#ref-for-percentage-value">1.2. Module Interactions</a> 2694 <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> 2695 <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> 2696 </ul> 2697 </aside> 2698 <aside class="dfn-panel" data-for="term-for-mult-opt"> 2699 <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> 2700 <ul> 2701 <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> 2702 <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> 2703 <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> 2704 <li><a href="#ref-for-mult-opt⑥">6.1. The column-rule-extent and row-rule-extent Properties</a> 2705 </ul> 2706 </aside> 2707 <aside class="dfn-panel" data-for="term-for-mult-num-range"> 2708 <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> 2709 <ul> 2710 <li><a href="#ref-for-mult-num-range">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> 2711 <li><a href="#ref-for-mult-num-range①">5.1. The column-rule-align and row-rule-align Properties</a> 2712 <li><a href="#ref-for-mult-num-range②">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> 2713 </ul> 2714 </aside> 2715 <aside class="dfn-panel" data-for="term-for-comb-one"> 2716 <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> 2717 <ul> 2718 <li><a href="#ref-for-comb-one">2.1. The column-rule-image-source and row-rule-image-source Properties</a> 2719 <li><a href="#ref-for-comb-one①">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> 2720 <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> 2721 <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> 2722 <li><a href="#ref-for-comb-one⑧">3.2. The column-rule-length and row-rule-length Properties</a> 2723 <li><a href="#ref-for-comb-one⑨">3.3. The Rule Lateral Inset Properties</a> 2724 <li><a href="#ref-for-comb-one①⓪">3.6. The Rule Longitudinal Inset Properties</a> 2725 <li><a href="#ref-for-comb-one①①">3.8. The Rule Longitudinal Edge Inset Properties</a> 2726 <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> 2727 <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> 2728 <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> 2729 </ul> 2730 </aside> 2731 <aside class="dfn-panel" data-for="term-for-comb-any"> 2732 <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> 2733 <ul> 2734 <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> 2735 <li><a href="#ref-for-comb-any②">4.2. The row-rule Shorthand</a> <a href="#ref-for-comb-any③">(2)</a> 2736 </ul> 2737 </aside> 2738 <aside class="dfn-panel" data-for="term-for-propdef-writing-mode"> 2739 <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> 2740 <ul> 2741 <li><a href="#ref-for-propdef-writing-mode">1.3. Definitions</a> 2742 </ul> 2743 </aside> 2744 <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> 2745 <ul class="index"> 2746 <li> 2747 <a data-link-type="biblio">[css-backgrounds-3]</a> defines the following terms: 2748 <ul> 2749 <li><span class="dfn-paneled" id="term-for-typedef-line-style"><line-style></span> 2750 <li><span class="dfn-paneled" id="term-for-typedef-line-width"><line-width></span> 2751 <li><span class="dfn-paneled" id="term-for-propdef-border-style">border-style</span> 2752 </ul> 2753 <li> 2754 <a data-link-type="biblio">[css-box-4]</a> defines the following terms: 2755 <ul> 2756 <li><span class="dfn-paneled" id="term-for-valdef-margin-trim-all">all</span> 2757 <li><span class="dfn-paneled" id="term-for-valdef-box-margin-box">margin-box</span> 2758 </ul> 2759 <li> 2760 <a data-link-type="biblio">[css-cascade-5]</a> defines the following terms: 2761 <ul> 2762 <li><span class="dfn-paneled" id="term-for-used-value">used value</span> 2763 </ul> 2764 <li> 2765 <a data-link-type="biblio">[css-color-4]</a> defines the following terms: 2766 <ul> 2767 <li><span class="dfn-paneled" id="term-for-typedef-color"><color></span> 2768 <li><span class="dfn-paneled" id="term-for-propdef-opacity">opacity</span> 2769 </ul> 2770 <li> 2771 <a data-link-type="biblio">[css-display-3]</a> defines the following terms: 2772 <ul> 2773 <li><span class="dfn-paneled" id="term-for-order-modified-document-order">order-modified document order</span> 2774 </ul> 2775 <li> 2776 <a data-link-type="biblio">[css-flexbox-1]</a> defines the following terms: 2777 <ul> 2778 <li><span class="dfn-paneled" id="term-for-flex-container">flex container</span> 2779 </ul> 2780 <li> 2781 <a data-link-type="biblio">[css-grid-2]</a> defines the following terms: 2782 <ul> 2783 <li><span class="dfn-paneled" id="term-for-collapsed-track">collapsed track</span> 2784 <li><span class="dfn-paneled" id="term-for-grid">grid</span> 2785 <li><span class="dfn-paneled" id="term-for-grid-cell">grid cell</span> 2786 <li><span class="dfn-paneled" id="term-for-grid-container">grid container</span> 2787 <li><span class="dfn-paneled" id="term-for-propdef-grid-column">grid-column</span> 2788 <li><span class="dfn-paneled" id="term-for-propdef-grid-row">grid-row</span> 2789 <li><span class="dfn-paneled" id="term-for-implicit-grid">implicit grid</span> 2790 <li><span class="dfn-paneled" id="term-for-subgrid">subgrid</span> 2791 </ul> 2792 <li> 2793 <a data-link-type="biblio">[css-grid-3]</a> defines the following terms: 2794 <ul> 2795 <li><span class="dfn-paneled" id="term-for-masonry-axis">masonry axis</span> 2796 </ul> 2797 <li> 2798 <a data-link-type="biblio">[css-images-3]</a> defines the following terms: 2799 <ul> 2800 <li><span class="dfn-paneled" id="term-for-typedef-image"><image></span> 2801 <li><span class="dfn-paneled" id="term-for-default-object-size">default object size</span> 2802 <li><span class="dfn-paneled" id="term-for-specified-size">specified size</span> 2803 </ul> 2804 <li> 2805 <a data-link-type="biblio">[css-multicol-1]</a> defines the following terms: 2806 <ul> 2807 <li><span class="dfn-paneled" id="term-for-propdef-column-rule-width">column-rule-width</span> 2808 <li><span class="dfn-paneled" id="term-for-multi-column-container">multi-column container</span> 2809 <li><span class="dfn-paneled" id="term-for-multi-column-layout">multi-column layout</span> 2810 <li><span class="dfn-paneled" id="term-for-spanner">spanner</span> 2811 </ul> 2812 <li> 2813 <a data-link-type="biblio">[css-multicol-2]</a> defines the following terms: 2814 <ul> 2815 <li><span class="dfn-paneled" id="term-for-propdef-column-span">column-span</span> 2816 </ul> 2817 <li> 2818 <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms: 2819 <ul> 2820 <li><span class="dfn-paneled" id="term-for-ink-overflow">ink overflow</span> 2821 <li><span class="dfn-paneled" id="term-for-propdef-overflow">overflow</span> 2822 </ul> 2823 <li> 2824 <a data-link-type="biblio">[css-position-3]</a> defines the following terms: 2825 <ul> 2826 <li><span class="dfn-paneled" id="term-for-propdef-left">left</span> 2827 <li><span class="dfn-paneled" id="term-for-propdef-right">right</span> 2828 </ul> 2829 <li> 2830 <a data-link-type="biblio">[css-sizing-3]</a> defines the following terms: 2831 <ul> 2832 <li><span class="dfn-paneled" id="term-for-outer-size">outer size</span> 2833 <li><span class="dfn-paneled" id="term-for-propdef-width">width</span> 2834 </ul> 2835 <li> 2836 <a data-link-type="biblio">[css-tables-3]</a> defines the following terms: 2837 <ul> 2838 <li><span class="dfn-paneled" id="term-for-span">span</span> 2839 <li><span class="dfn-paneled" id="term-for-table">table</span> 2840 <li><span class="dfn-paneled" id="term-for-table-cell">table-cell</span> 2841 <li><span class="dfn-paneled" id="term-for-table-column">table-column</span> 2842 <li><span class="dfn-paneled" id="term-for-table-column-group">table-column-group</span> 2843 <li><span class="dfn-paneled" id="term-for-table-row">table-row</span> 2844 <li><span class="dfn-paneled" id="term-for-table-row-group">table-row-group</span> 2845 </ul> 2846 <li> 2847 <a data-link-type="biblio">[css-values-4]</a> defines the following terms: 2848 <ul> 2849 <li><span class="dfn-paneled" id="term-for-integer-value"><integer></span> 2850 <li><span class="dfn-paneled" id="term-for-typedef-length-percentage"><length-percentage></span> 2851 <li><span class="dfn-paneled" id="term-for-number-value"><number></span> 2852 <li><span class="dfn-paneled" id="term-for-percentage-value"><percentage></span> 2853 <li><span class="dfn-paneled" id="term-for-mult-opt">?</span> 2854 <li><span class="dfn-paneled" id="term-for-mult-num-range">{a,b}</span> 2855 <li><span class="dfn-paneled" id="term-for-comb-one">|</span> 2856 <li><span class="dfn-paneled" id="term-for-comb-any">||</span> 2857 </ul> 2858 <li> 2859 <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms: 2860 <ul> 2861 <li><span class="dfn-paneled" id="term-for-propdef-writing-mode">writing-mode</span> 2862 </ul> 2863 </ul> 2864 <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2> 2865 <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3> 2866 <dl> 2867 <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3] 2868 <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> 2869 <dt id="biblio-css-box-4">[CSS-BOX-4] 2870 <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> 2871 <dt id="biblio-css-cascade-5">[CSS-CASCADE-5] 2872 <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> 2873 <dt id="biblio-css-color-4">[CSS-COLOR-4] 2874 <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> 2875 <dt id="biblio-css-display-3">[CSS-DISPLAY-3] 2876 <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> 2877 <dt id="biblio-css-flexbox-1">[CSS-FLEXBOX-1] 2878 <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> 2879 <dt id="biblio-css-grid-2">[CSS-GRID-2] 2880 <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> 2881 <dt id="biblio-css-grid-3">[CSS-GRID-3] 2882 <dd>CSS Grid Layout Level 3 URL: <a href="https://drafts.csswg.org/css-grid-3/">https://drafts.csswg.org/css-grid-3/</a> 2883 <dt id="biblio-css-images-3">[CSS-IMAGES-3] 2884 <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> 2885 <dt id="biblio-css-multicol-1">[CSS-MULTICOL-1] 2886 <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> 2887 <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3] 2888 <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> 2889 <dt id="biblio-css-sizing-3">[CSS-SIZING-3] 2890 <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> 2891 <dt id="biblio-css-tables-3">[CSS-TABLES-3] 2892 <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> 2893 <dt id="biblio-css-values-4">[CSS-VALUES-4] 2894 <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> 2895 <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] 2896 <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> 2897 <dt id="biblio-rfc2119">[RFC2119] 2898 <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> 2899 </dl> 2900 <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3> 2901 <dl> 2902 <dt id="biblio-css-multicol-2">[CSS-MULTICOL-2] 2903 <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> 2904 <dt id="biblio-css-position-3">[CSS-POSITION-3] 2905 <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> 2906 </dl> 2907 <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> 2908 <div class="big-element-wrapper"> 2909 <table class="index"> 2910 <thead> 2911 <tr> 2912 <th scope="col">Name 2913 <th scope="col">Value 2914 <th scope="col">Initial 2915 <th scope="col">Applies to 2916 <th scope="col">Inh. 2917 <th scope="col">%ages 2918 <th scope="col">Animation type 2919 <th scope="col">Canonical order 2920 <th scope="col">Computed value 2921 <tbody> 2922 <tr> 2923 <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> 2924 <td>[gap | gap-center | gap-over | rule | rule-center | rule-over]{1,2} 2925 <td>gap 2926 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 2927 <td>no 2928 <td>N/A 2929 <td>discrete 2930 <td>per grammar 2931 <td>the specified value 2932 <tr> 2933 <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> 2934 <td>[gap | gap-center | gap-over]{1,2} 2935 <td>gap 2936 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 2937 <td>no 2938 <td>N/A 2939 <td>discrete 2940 <td>per grammar 2941 <td>the specified value 2942 <tr> 2943 <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> 2944 <td>[segment | start | end | short | long | all-start | all-end | all-short | all-long ] allow-overlap? 2945 <td>long 2946 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 2947 <td>no 2948 <td>N/A 2949 <td>discrete 2950 <td>per grammar 2951 <td>the specified value 2952 <tr> 2953 <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> 2954 <td><'column-rule-image-source'> || <'column-rule-image-slice'> || <'column-rule-image-repeat'> 2955 <td>see individual properties 2956 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 2957 <td>see individual properties 2958 <td>see individual properties 2959 <td>see individual properties 2960 <td>per grammar 2961 <td>see individual properties 2962 <tr> 2963 <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> 2964 <td>stretch | repeat | round | space 2965 <td>stretch 2966 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 2967 <td>no 2968 <td>N/A 2969 <td>discrete 2970 <td>per grammar 2971 <td>the specified keyword 2972 <tr> 2973 <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> 2974 <td>[<number [0,∞]> | <percentage [0,∞]>]{1,2} 2975 <td>0 2976 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 2977 <td>no 2978 <td>refer to image size in the rule’s longitudinal axis 2979 <td>discrete 2980 <td>per grammar 2981 <td>one or two values, each either a number or percentage 2982 <tr> 2983 <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> 2984 <td>none | <image> 2985 <td>none 2986 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 2987 <td>no 2988 <td>N/A 2989 <td>discrete 2990 <td>per grammar 2991 <td>the keyword none or the computed <image> 2992 <tr> 2993 <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> 2994 <td><'column-rule-lateral-inset-start'> <'column-rule-lateral-inset-end'>? 2995 <td>see individual properties 2996 <td>see individual properties 2997 <td>see individual properties 2998 <td>see individual properties 2999 <td>see individual properties 3000 <td>per grammar 3001 <td>see individual properties 3002 <tr> 3003 <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> 3004 <td><length-percentage> | auto 3005 <td>auto 3006 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3007 <td>no 3008 <td>refer to the rule containing rectangle’s size in the rule’s lateral axis 3009 <td>by computed value type 3010 <td>per grammar 3011 <td>the specified value 3012 <tr> 3013 <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> 3014 <td><length-percentage> | auto 3015 <td>auto 3016 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3017 <td>no 3018 <td>refer to the rule containing rectangle’s size in the rule’s lateral axis 3019 <td>by computed value type 3020 <td>per grammar 3021 <td>the specified value 3022 <tr> 3023 <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> 3024 <td><length-percentage> | auto 3025 <td>auto 3026 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3027 <td>no 3028 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis 3029 <td>by computed value type 3030 <td>per grammar 3031 <td>the specified value 3032 <tr> 3033 <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> 3034 <td><'column-rule-longitudinal-edge-inset-start'> <'column-rule-longitudinal-edge-inset-end'>? 3035 <td>see individual properties 3036 <td>see individual properties 3037 <td>see individual properties 3038 <td>see individual properties 3039 <td>see individual properties 3040 <td>per grammar 3041 <td>see individual properties 3042 <tr> 3043 <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> 3044 <td><length-percentage> | auto 3045 <td>0 3046 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3047 <td>no 3048 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis 3049 <td>by computed value type 3050 <td>per grammar 3051 <td>the specified value 3052 <tr> 3053 <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> 3054 <td><length-percentage> | auto 3055 <td>0 3056 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3057 <td>no 3058 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis 3059 <td>by computed value type 3060 <td>per grammar 3061 <td>the specified value 3062 <tr> 3063 <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> 3064 <td><'column-rule-longitudinal-inset-start'> <'column-rule-longitudinal-inset-end'>? 3065 <td>see individual properties 3066 <td>see individual properties 3067 <td>see individual properties 3068 <td>see individual properties 3069 <td>see individual properties 3070 <td>per grammar 3071 <td>see individual properties 3072 <tr> 3073 <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> 3074 <td><length-percentage> | auto 3075 <td>0 3076 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3077 <td>no 3078 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis 3079 <td>by computed value type 3080 <td>per grammar 3081 <td>the specified value 3082 <tr> 3083 <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> 3084 <td><length-percentage> | auto 3085 <td>0 3086 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3087 <td>no 3088 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis 3089 <td>by computed value type 3090 <td>per grammar 3091 <td>the specified value 3092 <tr> 3093 <th scope="row"><a class="css" data-link-type="property" href="#propdef-row-rule" id="ref-for-propdef-row-rule①">row-rule</a> 3094 <td><'row-rule-width'> || <'row-rule-style'> || <'row-rule-color'> 3095 <td>see individual properties 3096 <td>see individual properties 3097 <td>see individual properties 3098 <td>see individual properties 3099 <td>see individual properties 3100 <td>per grammar 3101 <td>see individual properties 3102 <tr> 3103 <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> 3104 <td>[gap | gap-center | gap-over | rule | rule-center | rule-over]{1,2} 3105 <td>gap 3106 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3107 <td>no 3108 <td>N/A 3109 <td>discrete 3110 <td>per grammar 3111 <td>the specified value 3112 <tr> 3113 <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> 3114 <td><color> 3115 <td>currentcolor 3116 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3117 <td>no 3118 <td>N/A 3119 <td>by computed value type 3120 <td>per grammar 3121 <td>computed color 3122 <tr> 3123 <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> 3124 <td>[gap | gap-center | gap-over]{1,2} 3125 <td>gap 3126 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3127 <td>no 3128 <td>N/A 3129 <td>discrete 3130 <td>per grammar 3131 <td>the specified value 3132 <tr> 3133 <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> 3134 <td>[segment | start | end | short | long | all-start | all-end | all-short | all-long ] allow-overlap? 3135 <td>long 3136 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3137 <td>no 3138 <td>N/A 3139 <td>discrete 3140 <td>per grammar 3141 <td>the specified value 3142 <tr> 3143 <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> 3144 <td><'column-rule-image-source'> || <'column-rule-image-slice'> || <'column-rule-image-repeat'> 3145 <td>see individual properties 3146 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3147 <td>see individual properties 3148 <td>see individual properties 3149 <td>see individual properties 3150 <td>per grammar 3151 <td>see individual properties 3152 <tr> 3153 <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> 3154 <td>stretch | repeat | round | space 3155 <td>stretch 3156 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3157 <td>no 3158 <td>N/A 3159 <td>discrete 3160 <td>per grammar 3161 <td>the specified keyword 3162 <tr> 3163 <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> 3164 <td>[<number [0,∞]> | <percentage [0,∞]>]{1,2} 3165 <td>0 3166 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3167 <td>no 3168 <td>refer to image size in the rule’s longitudinal axis 3169 <td>discrete 3170 <td>per grammar 3171 <td>one or two values, each either a number or percentage 3172 <tr> 3173 <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> 3174 <td>none | <image> 3175 <td>none 3176 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3177 <td>no 3178 <td>N/A 3179 <td>discrete 3180 <td>per grammar 3181 <td>the keyword none or the computed <image> 3182 <tr> 3183 <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> 3184 <td><'row-rule-lateral-inset-start'> <'row-rule-lateral-inset-end'>? 3185 <td>see individual properties 3186 <td>see individual properties 3187 <td>see individual properties 3188 <td>see individual properties 3189 <td>see individual properties 3190 <td>per grammar 3191 <td>see individual properties 3192 <tr> 3193 <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> 3194 <td><length-percentage> | auto 3195 <td>auto 3196 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3197 <td>no 3198 <td>refer to the rule containing rectangle’s size in the rule’s lateral axis 3199 <td>by computed value type 3200 <td>per grammar 3201 <td>the specified value 3202 <tr> 3203 <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> 3204 <td><length-percentage> | auto 3205 <td>auto 3206 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3207 <td>no 3208 <td>refer to the rule containing rectangle’s size in the rule’s lateral axis 3209 <td>by computed value type 3210 <td>per grammar 3211 <td>the specified value 3212 <tr> 3213 <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> 3214 <td><length-percentage> | auto 3215 <td>auto 3216 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3217 <td>no 3218 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis 3219 <td>by computed value type 3220 <td>per grammar 3221 <td>the specified value 3222 <tr> 3223 <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> 3224 <td><'row-rule-longitudinal-edge-inset-start'> <'row-rule-longitudinal-edge-inset-end'>? 3225 <td>see individual properties 3226 <td>see individual properties 3227 <td>see individual properties 3228 <td>see individual properties 3229 <td>see individual properties 3230 <td>per grammar 3231 <td>see individual properties 3232 <tr> 3233 <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> 3234 <td><length-percentage> | auto 3235 <td>0 3236 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3237 <td>no 3238 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis 3239 <td>by computed value type 3240 <td>per grammar 3241 <td>the specified value 3242 <tr> 3243 <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> 3244 <td><length-percentage> | auto 3245 <td>0 3246 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3247 <td>no 3248 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis 3249 <td>by computed value type 3250 <td>per grammar 3251 <td>the specified value 3252 <tr> 3253 <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> 3254 <td><'row-rule-longitudinal-inset-start'> <'row-rule-longitudinal-inset-end'>? 3255 <td>see individual properties 3256 <td>see individual properties 3257 <td>see individual properties 3258 <td>see individual properties 3259 <td>see individual properties 3260 <td>per grammar 3261 <td>see individual properties 3262 <tr> 3263 <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> 3264 <td><length-percentage> | auto 3265 <td>0 3266 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3267 <td>no 3268 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis 3269 <td>by computed value type 3270 <td>per grammar 3271 <td>the specified value 3272 <tr> 3273 <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> 3274 <td><length-percentage> | auto 3275 <td>0 3276 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3277 <td>no 3278 <td>refer to the rule containing rectangle’s size in the rule’s longitudinal axis 3279 <td>by computed value type 3280 <td>per grammar 3281 <td>the specified value 3282 <tr> 3283 <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> 3284 <td><line-style> 3285 <td>none 3286 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3287 <td>no 3288 <td>N/A 3289 <td>discrete 3290 <td>per grammar 3291 <td>specified keyword 3292 <tr> 3293 <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> 3294 <td><line-width> | <percentage> | auto 3295 <td>medium 3296 <td>multi-column containers, flex containers, grid containers, table and table-row-group containers 3297 <td>no 3298 <td>refer to the rule containing rectangle’s size in the rule’s lateral axis 3299 <td>by computed value type 3300 <td>per grammar 3301 <td>absolute length if the specified value is <line-width>; 0px if the column rule style is none or hidden. Otherwise, the specified value. 3302 </table> 3303 </div> 3304 <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> 3305 <div style="counter-reset:issue"> 3306 <div class="issue"> lots of new possible shorthands... we now have many 3307 properties (and shorthands) with a <span class="css">column-rule</span> and <span class="css">row-rule</span> prefix. 3308 Should we add shorthands for some of those with a <a class="property" data-link-type="propdesc">rule</a> prefix to specify 3309 both axes, like so: 'rule-foo: <span class="production"><row-rule-foo></span> <span class="production"><column-rule-foo></span>?'. 3310 As usual, we have to be careful with the separator though, to make it 3311 forward-compatible with any changes we might want to make... <a class="issue-return" href="#issue-53073ff7" title="Jump to section">↵</a></div> 3312 <div class="issue"> Are there use cases for other box-related edge attachment points? 3313 e.g. 'padding | padding-center | padding-over | border...' <a class="issue-return" href="#issue-13842b6f" title="Jump to section">↵</a></div> 3314 <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> 3315 <div class="issue"> TODO: add definition list and algorithm here... <a class="issue-return" href="#issue-b6f1d65c" title="Jump to section">↵</a></div> 3316 <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> 3317 <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> 3318 <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 3319 (<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> 3320 </div> 3321 <aside class="dfn-panel" data-for="lateral-axis"> 3322 <b><a href="#lateral-axis">#lateral-axis</a></b><b>Referenced in:</b> 3323 <ul> 3324 <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> 3325 <li><a href="#ref-for-lateral-axis②">3.2. The column-rule-length and row-rule-length Properties</a> 3326 <li><a href="#ref-for-lateral-axis③">3.3. The Rule Lateral Inset Properties</a> 3327 <li><a href="#ref-for-lateral-axis④">7. The Rule Containing Rectangle</a> 3328 </ul> 3329 </aside> 3330 <aside class="dfn-panel" data-for="longitudinal-axis"> 3331 <b><a href="#longitudinal-axis">#longitudinal-axis</a></b><b>Referenced in:</b> 3332 <ul> 3333 <li><a href="#ref-for-longitudinal-axis">3.2. The column-rule-length and row-rule-length Properties</a> 3334 <li><a href="#ref-for-longitudinal-axis①">3.6. The Rule Longitudinal Inset Properties</a> 3335 <li><a href="#ref-for-longitudinal-axis②">3.8. The Rule Longitudinal Edge Inset Properties</a> <a href="#ref-for-longitudinal-axis③">(2)</a> 3336 <li><a href="#ref-for-longitudinal-axis④">5.1. The column-rule-align and row-rule-align Properties</a> 3337 <li><a href="#ref-for-longitudinal-axis⑤">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> 3338 <li><a href="#ref-for-longitudinal-axis⑥">6.1. The column-rule-extent and row-rule-extent Properties</a> 3339 <li><a href="#ref-for-longitudinal-axis⑦">7. The Rule Containing Rectangle</a> 3340 </ul> 3341 </aside> 3342 <aside class="dfn-panel" data-for="rule-length"> 3343 <b><a href="#rule-length">#rule-length</a></b><b>Referenced in:</b> 3344 <ul> 3345 <li><a href="#ref-for-rule-length">3.2. The column-rule-length and row-rule-length Properties</a> 3346 </ul> 3347 </aside> 3348 <aside class="dfn-panel" data-for="propdef-column-rule-image-source"> 3349 <b><a href="#propdef-column-rule-image-source">#propdef-column-rule-image-source</a></b><b>Referenced in:</b> 3350 <ul> 3351 <li><a href="#ref-for-propdef-column-rule-image-source">2.1. The column-rule-image-source and row-rule-image-source Properties</a> 3352 <li><a href="#ref-for-propdef-column-rule-image-source①">2.4. The column-rule-image and row-rule-image Shorthands</a> 3353 </ul> 3354 </aside> 3355 <aside class="dfn-panel" data-for="propdef-row-rule-image-source"> 3356 <b><a href="#propdef-row-rule-image-source">#propdef-row-rule-image-source</a></b><b>Referenced in:</b> 3357 <ul> 3358 <li><a href="#ref-for-propdef-row-rule-image-source">2.1. The column-rule-image-source and row-rule-image-source Properties</a> 3359 </ul> 3360 </aside> 3361 <aside class="dfn-panel" data-for="propdef-column-rule-image-slice"> 3362 <b><a href="#propdef-column-rule-image-slice">#propdef-column-rule-image-slice</a></b><b>Referenced in:</b> 3363 <ul> 3364 <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> 3365 <li><a href="#ref-for-propdef-column-rule-image-slice③">2.4. The column-rule-image and row-rule-image Shorthands</a> 3366 </ul> 3367 </aside> 3368 <aside class="dfn-panel" data-for="propdef-row-rule-image-slice"> 3369 <b><a href="#propdef-row-rule-image-slice">#propdef-row-rule-image-slice</a></b><b>Referenced in:</b> 3370 <ul> 3371 <li><a href="#ref-for-propdef-row-rule-image-slice">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> 3372 </ul> 3373 </aside> 3374 <aside class="dfn-panel" data-for="propdef-column-rule-image-repeat"> 3375 <b><a href="#propdef-column-rule-image-repeat">#propdef-column-rule-image-repeat</a></b><b>Referenced in:</b> 3376 <ul> 3377 <li><a href="#ref-for-propdef-column-rule-image-repeat">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a> 3378 <li><a href="#ref-for-propdef-column-rule-image-repeat①">2.4. The column-rule-image and row-rule-image Shorthands</a> 3379 </ul> 3380 </aside> 3381 <aside class="dfn-panel" data-for="propdef-row-rule-image-repeat"> 3382 <b><a href="#propdef-row-rule-image-repeat">#propdef-row-rule-image-repeat</a></b><b>Referenced in:</b> 3383 <ul> 3384 <li><a href="#ref-for-propdef-row-rule-image-repeat">2.3. The column-rule-image-repeat and row-rule-image-repeat Properties</a> 3385 </ul> 3386 </aside> 3387 <aside class="dfn-panel" data-for="propdef-column-rule-image"> 3388 <b><a href="#propdef-column-rule-image">#propdef-column-rule-image</a></b><b>Referenced in:</b> 3389 <ul> 3390 <li><a href="#ref-for-propdef-column-rule-image">2.4. The column-rule-image and row-rule-image Shorthands</a> 3391 </ul> 3392 </aside> 3393 <aside class="dfn-panel" data-for="propdef-row-rule-image"> 3394 <b><a href="#propdef-row-rule-image">#propdef-row-rule-image</a></b><b>Referenced in:</b> 3395 <ul> 3396 <li><a href="#ref-for-propdef-row-rule-image">2.4. The column-rule-image and row-rule-image Shorthands</a> 3397 </ul> 3398 </aside> 3399 <aside class="dfn-panel" data-for="propdef-row-rule-width"> 3400 <b><a href="#propdef-row-rule-width">#propdef-row-rule-width</a></b><b>Referenced in:</b> 3401 <ul> 3402 <li><a href="#ref-for-propdef-row-rule-width">3.1. The column-rule-width and row-rule-width Properties</a> 3403 <li><a href="#ref-for-propdef-row-rule-width①">4.2. The row-rule Shorthand</a> 3404 </ul> 3405 </aside> 3406 <aside class="dfn-panel" data-for="propdef-column-rule-length"> 3407 <b><a href="#propdef-column-rule-length">#propdef-column-rule-length</a></b><b>Referenced in:</b> 3408 <ul> 3409 <li><a href="#ref-for-propdef-column-rule-length">3.2. The column-rule-length and row-rule-length Properties</a> 3410 <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> 3411 </ul> 3412 </aside> 3413 <aside class="dfn-panel" data-for="propdef-row-rule-length"> 3414 <b><a href="#propdef-row-rule-length">#propdef-row-rule-length</a></b><b>Referenced in:</b> 3415 <ul> 3416 <li><a href="#ref-for-propdef-row-rule-length">3.2. The column-rule-length and row-rule-length Properties</a> 3417 </ul> 3418 </aside> 3419 <aside class="dfn-panel" data-for="propdef-column-rule-lateral-inset-start"> 3420 <b><a href="#propdef-column-rule-lateral-inset-start">#propdef-column-rule-lateral-inset-start</a></b><b>Referenced in:</b> 3421 <ul> 3422 <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> 3423 </ul> 3424 </aside> 3425 <aside class="dfn-panel" data-for="propdef-column-rule-lateral-inset-end"> 3426 <b><a href="#propdef-column-rule-lateral-inset-end">#propdef-column-rule-lateral-inset-end</a></b><b>Referenced in:</b> 3427 <ul> 3428 <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> 3429 </ul> 3430 </aside> 3431 <aside class="dfn-panel" data-for="propdef-row-rule-lateral-inset-start"> 3432 <b><a href="#propdef-row-rule-lateral-inset-start">#propdef-row-rule-lateral-inset-start</a></b><b>Referenced in:</b> 3433 <ul> 3434 <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> 3435 </ul> 3436 </aside> 3437 <aside class="dfn-panel" data-for="propdef-row-rule-lateral-inset-end"> 3438 <b><a href="#propdef-row-rule-lateral-inset-end">#propdef-row-rule-lateral-inset-end</a></b><b>Referenced in:</b> 3439 <ul> 3440 <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> 3441 </ul> 3442 </aside> 3443 <aside class="dfn-panel" data-for="propdef-column-rule-lateral-inset"> 3444 <b><a href="#propdef-column-rule-lateral-inset">#propdef-column-rule-lateral-inset</a></b><b>Referenced in:</b> 3445 <ul> 3446 <li><a href="#ref-for-propdef-column-rule-lateral-inset">3.5. The column-rule-lateral-inset and row-rule-lateral-inset Shorthands</a> 3447 </ul> 3448 </aside> 3449 <aside class="dfn-panel" data-for="propdef-row-rule-lateral-inset"> 3450 <b><a href="#propdef-row-rule-lateral-inset">#propdef-row-rule-lateral-inset</a></b><b>Referenced in:</b> 3451 <ul> 3452 <li><a href="#ref-for-propdef-row-rule-lateral-inset">3.5. The column-rule-lateral-inset and row-rule-lateral-inset Shorthands</a> 3453 </ul> 3454 </aside> 3455 <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-inset-start"> 3456 <b><a href="#propdef-column-rule-longitudinal-inset-start">#propdef-column-rule-longitudinal-inset-start</a></b><b>Referenced in:</b> 3457 <ul> 3458 <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> 3459 </ul> 3460 </aside> 3461 <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-inset-end"> 3462 <b><a href="#propdef-column-rule-longitudinal-inset-end">#propdef-column-rule-longitudinal-inset-end</a></b><b>Referenced in:</b> 3463 <ul> 3464 <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> 3465 <li><a href="#ref-for-propdef-column-rule-longitudinal-inset-end①">7. The Rule Containing Rectangle</a> 3466 </ul> 3467 </aside> 3468 <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-inset-start"> 3469 <b><a href="#propdef-row-rule-longitudinal-inset-start">#propdef-row-rule-longitudinal-inset-start</a></b><b>Referenced in:</b> 3470 <ul> 3471 <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> 3472 </ul> 3473 </aside> 3474 <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-inset-end"> 3475 <b><a href="#propdef-row-rule-longitudinal-inset-end">#propdef-row-rule-longitudinal-inset-end</a></b><b>Referenced in:</b> 3476 <ul> 3477 <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> 3478 </ul> 3479 </aside> 3480 <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-inset"> 3481 <b><a href="#propdef-column-rule-longitudinal-inset">#propdef-column-rule-longitudinal-inset</a></b><b>Referenced in:</b> 3482 <ul> 3483 <li><a href="#ref-for-propdef-column-rule-longitudinal-inset">3.7. The column-rule-longitudinal-inset and row-rule-longitudinal-inset Shorthands</a> 3484 </ul> 3485 </aside> 3486 <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-inset"> 3487 <b><a href="#propdef-row-rule-longitudinal-inset">#propdef-row-rule-longitudinal-inset</a></b><b>Referenced in:</b> 3488 <ul> 3489 <li><a href="#ref-for-propdef-row-rule-longitudinal-inset">3.7. The column-rule-longitudinal-inset and row-rule-longitudinal-inset Shorthands</a> 3490 </ul> 3491 </aside> 3492 <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-edge-inset-start"> 3493 <b><a href="#propdef-column-rule-longitudinal-edge-inset-start">#propdef-column-rule-longitudinal-edge-inset-start</a></b><b>Referenced in:</b> 3494 <ul> 3495 <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> 3496 </ul> 3497 </aside> 3498 <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-edge-inset-end"> 3499 <b><a href="#propdef-column-rule-longitudinal-edge-inset-end">#propdef-column-rule-longitudinal-edge-inset-end</a></b><b>Referenced in:</b> 3500 <ul> 3501 <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> 3502 </ul> 3503 </aside> 3504 <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-edge-inset-start"> 3505 <b><a href="#propdef-row-rule-longitudinal-edge-inset-start">#propdef-row-rule-longitudinal-edge-inset-start</a></b><b>Referenced in:</b> 3506 <ul> 3507 <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> 3508 </ul> 3509 </aside> 3510 <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-edge-inset-end"> 3511 <b><a href="#propdef-row-rule-longitudinal-edge-inset-end">#propdef-row-rule-longitudinal-edge-inset-end</a></b><b>Referenced in:</b> 3512 <ul> 3513 <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> 3514 </ul> 3515 </aside> 3516 <aside class="dfn-panel" data-for="propdef-column-rule-longitudinal-edge-inset"> 3517 <b><a href="#propdef-column-rule-longitudinal-edge-inset">#propdef-column-rule-longitudinal-edge-inset</a></b><b>Referenced in:</b> 3518 <ul> 3519 <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> 3520 </ul> 3521 </aside> 3522 <aside class="dfn-panel" data-for="propdef-row-rule-longitudinal-edge-inset"> 3523 <b><a href="#propdef-row-rule-longitudinal-edge-inset">#propdef-row-rule-longitudinal-edge-inset</a></b><b>Referenced in:</b> 3524 <ul> 3525 <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> 3526 </ul> 3527 </aside> 3528 <aside class="dfn-panel" data-for="propdef-row-rule-style"> 3529 <b><a href="#propdef-row-rule-style">#propdef-row-rule-style</a></b><b>Referenced in:</b> 3530 <ul> 3531 <li><a href="#ref-for-propdef-row-rule-style">4.1. The row-rule-style and row-rule-color Properties</a> 3532 <li><a href="#ref-for-propdef-row-rule-style①">4.2. The row-rule Shorthand</a> 3533 </ul> 3534 </aside> 3535 <aside class="dfn-panel" data-for="propdef-row-rule-color"> 3536 <b><a href="#propdef-row-rule-color">#propdef-row-rule-color</a></b><b>Referenced in:</b> 3537 <ul> 3538 <li><a href="#ref-for-propdef-row-rule-color">4.1. The row-rule-style and row-rule-color Properties</a> 3539 <li><a href="#ref-for-propdef-row-rule-color①">4.2. The row-rule Shorthand</a> 3540 </ul> 3541 </aside> 3542 <aside class="dfn-panel" data-for="propdef-row-rule"> 3543 <b><a href="#propdef-row-rule">#propdef-row-rule</a></b><b>Referenced in:</b> 3544 <ul> 3545 <li><a href="#ref-for-propdef-row-rule">4.2. The row-rule Shorthand</a> 3546 </ul> 3547 </aside> 3548 <aside class="dfn-panel" data-for="propdef-column-rule-align"> 3549 <b><a href="#propdef-column-rule-align">#propdef-column-rule-align</a></b><b>Referenced in:</b> 3550 <ul> 3551 <li><a href="#ref-for-propdef-column-rule-align">5.1. The column-rule-align and row-rule-align Properties</a> 3552 <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> 3553 </ul> 3554 </aside> 3555 <aside class="dfn-panel" data-for="propdef-row-rule-align"> 3556 <b><a href="#propdef-row-rule-align">#propdef-row-rule-align</a></b><b>Referenced in:</b> 3557 <ul> 3558 <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> 3559 <li><a href="#ref-for-propdef-row-rule-align②">6.1.1.1. Subgrid</a> 3560 </ul> 3561 </aside> 3562 <aside class="dfn-panel" data-for="propdef-column-rule-edge-align"> 3563 <b><a href="#propdef-column-rule-edge-align">#propdef-column-rule-edge-align</a></b><b>Referenced in:</b> 3564 <ul> 3565 <li><a href="#ref-for-propdef-column-rule-edge-align">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> 3566 <li><a href="#ref-for-propdef-column-rule-edge-align①">6.1.1.2. Masonry</a> 3567 </ul> 3568 </aside> 3569 <aside class="dfn-panel" data-for="propdef-row-rule-edge-align"> 3570 <b><a href="#propdef-row-rule-edge-align">#propdef-row-rule-edge-align</a></b><b>Referenced in:</b> 3571 <ul> 3572 <li><a href="#ref-for-propdef-row-rule-edge-align">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> 3573 </ul> 3574 </aside> 3575 <aside class="dfn-panel" data-for="propdef-column-rule-extent"> 3576 <b><a href="#propdef-column-rule-extent">#propdef-column-rule-extent</a></b><b>Referenced in:</b> 3577 <ul> 3578 <li><a href="#ref-for-propdef-column-rule-extent">6.1. The column-rule-extent and row-rule-extent Properties</a> 3579 <li><a href="#ref-for-propdef-column-rule-extent①">6.1.1.2. Masonry</a> 3580 <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> 3581 </ul> 3582 </aside> 3583 <aside class="dfn-panel" data-for="propdef-row-rule-extent"> 3584 <b><a href="#propdef-row-rule-extent">#propdef-row-rule-extent</a></b><b>Referenced in:</b> 3585 <ul> 3586 <li><a href="#ref-for-propdef-row-rule-extent">6.1. The column-rule-extent and row-rule-extent Properties</a> 3587 <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> 3588 </ul> 3589 </aside> 3590 <aside class="dfn-panel" data-for="segment"> 3591 <b><a href="#segment">#segment</a></b><b>Referenced in:</b> 3592 <ul> 3593 <li><a href="#ref-for-segment">6.1.5. Multi-Column Containers</a> 3594 </ul> 3595 </aside> 3596 <aside class="dfn-panel" data-for="extent-size"> 3597 <b><a href="#extent-size">#extent-size</a></b><b>Referenced in:</b> 3598 <ul> 3599 <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> 3600 <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> 3601 <li><a href="#ref-for-extent-size①⑤">7. The Rule Containing Rectangle</a> 3602 </ul> 3603 </aside> 3604 <aside class="dfn-panel" data-for="valdef-row-rule-extent-short"> 3605 <b><a href="#valdef-row-rule-extent-short">#valdef-row-rule-extent-short</a></b><b>Referenced in:</b> 3606 <ul> 3607 <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> 3608 </ul> 3609 </aside> 3610 <aside class="dfn-panel" data-for="valdef-row-rule-extent-long"> 3611 <b><a href="#valdef-row-rule-extent-long">#valdef-row-rule-extent-long</a></b><b>Referenced in:</b> 3612 <ul> 3613 <li><a href="#ref-for-valdef-row-rule-extent-long">6.1.2. Flex Containers</a> 3614 </ul> 3615 </aside> 3616 <aside class="dfn-panel" data-for="next-grid-cell-span"> 3617 <b><a href="#next-grid-cell-span">#next-grid-cell-span</a></b><b>Referenced in:</b> 3618 <ul> 3619 <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> 3620 </ul> 3621 </aside> 3622 <aside class="dfn-panel" data-for="next-flex-line-item"> 3623 <b><a href="#next-flex-line-item">#next-flex-line-item</a></b><b>Referenced in:</b> 3624 <ul> 3625 <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> 3626 </ul> 3627 </aside> 3628 <aside class="dfn-panel" data-for="rule-containing-rectangle①"> 3629 <b><a href="#rule-containing-rectangle①">#rule-containing-rectangle①</a></b><b>Referenced in:</b> 3630 <ul> 3631 <li><a href="#ref-for-rule-containing-rectangle①">2.2. The column-rule-image-slice and row-rule-image-slice Properties</a> 3632 <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> 3633 <li><a href="#ref-for-rule-containing-rectangle①③">3.2. The column-rule-length and row-rule-length Properties</a> 3634 <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> 3635 <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> 3636 <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> 3637 <li><a href="#ref-for-rule-containing-rectangle①①①">3.8. The Rule Longitudinal Edge Inset Properties</a> 3638 <li><a href="#ref-for-rule-containing-rectangle①①②">5.1. The column-rule-align and row-rule-align Properties</a> 3639 <li><a href="#ref-for-rule-containing-rectangle①①③">5.2. The column-rule-edge-align and row-rule-edge-align Properties</a> 3640 <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> 3641 </ul> 3642 </aside> 3643 <script>/* script-dfn-panel */ 3644 3645 document.body.addEventListener("click", function(e) { 3646 var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); } 3647 // Find the dfn element or panel, if any, that was clicked on. 3648 var el = e.target; 3649 var target; 3650 var hitALink = false; 3651 while(el.parentElement) { 3652 if(el.tagName == "A") { 3653 // Clicking on a link in a <dfn> shouldn't summon the panel 3654 hitALink = true; 3655 } 3656 if(el.classList.contains("dfn-paneled")) { 3657 target = "dfn"; 3658 break; 3659 } 3660 if(el.classList.contains("dfn-panel")) { 3661 target = "dfn-panel"; 3662 break; 3663 } 3664 el = el.parentElement; 3665 } 3666 if(target != "dfn-panel") { 3667 // Turn off any currently "on" or "activated" panels. 3668 queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){ 3669 el.classList.remove("on"); 3670 el.classList.remove("activated"); 3671 }); 3672 } 3673 if(target == "dfn" && !hitALink) { 3674 // open the panel 3675 var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']"); 3676 if(dfnPanel) { 3677 dfnPanel.classList.add("on"); 3678 var rect = el.getBoundingClientRect(); 3679 dfnPanel.style.left = window.scrollX + rect.right + 5 + "px"; 3680 dfnPanel.style.top = window.scrollY + rect.top + "px"; 3681 var panelRect = dfnPanel.getBoundingClientRect(); 3682 var panelWidth = panelRect.right - panelRect.left; 3683 if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) { 3684 // Reposition, because the panel is overflowing 3685 dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px"; 3686 } 3687 } else { 3688 console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']"); 3689 } 3690 } else if(target == "dfn-panel") { 3691 // Switch it to "activated" state, which pins it. 3692 el.classList.add("activated"); 3693 el.style.left = null; 3694 el.style.top = null; 3695 } 3696 3697 }); 3698 </script> 3699 <script>/* script-wpt */ 3700 let wptPath = "/"; 3701 "use strict"; 3702 3703 document.addEventListener("DOMContentLoaded", async ()=>{ 3704 if(wptPath == "/") return; 3705 3706 const runsUrl = "https://wpt.fyi/api/runs?label=master&label=stable&max-count=1&product=chrome&product=firefox&product=safari&product=edge"; 3707 const runs = await (await fetch(runsUrl)).json(); 3708 3709 const testResults = await( await fetch("https://wpt.fyi/api/search", { 3710 method:"POST", 3711 headers:{ 3712 "Content-Type":"application/json", 3713 }, 3714 body: JSON.stringify({ 3715 "run_ids": runs.map(x=>x.id), 3716 "query": {"path": wptPath}, 3717 }) 3718 })).json(); 3719 3720 const browsers = runs.map(x=>({name:x.browser_name, version:x.browser_version, passes:0, total: 0})); 3721 const resultsFromPath = new Map(testResults.results.map(result=>{ 3722 const testPath = result.test; 3723 const passes = result.legacy_status.map(x=>[x.passes, x.total]); 3724 return [testPath, passes]; 3725 })); 3726 document.querySelectorAll(".wpt-name").forEach(nameEl=>{ 3727 const passData = resultsFromPath.get("/" + nameEl.getAttribute("title")); 3728 const numTests = passData[0][1]; 3729 if(numTests > 1) { 3730 nameEl.insertAdjacentElement("beforeend", 3731 el("small", {}, ` (${numTests} tests)`)); 3732 } 3733 if(passData == undefined) return; 3734 passData.forEach((p,i) => { 3735 browsers[i].passes += p[0]; 3736 browsers[i].total += p[1]; 3737 }) 3738 const resultsEl = el("span",{"class":"wpt-results"}, 3739 ...passData.map((p,i) => el("span", 3740 { 3741 "title": `${browsers[i].name} ${p[0]}/${p[1]}`, 3742 "class": "wpt-result", 3743 "style": `background: conic-gradient(forestgreen ${p[0]/p[1]*360}deg, darkred 0deg);`, 3744 })), 3745 ); 3746 nameEl.insertAdjacentElement("afterend", resultsEl); 3747 }); 3748 const overview = document.querySelector(".wpt-overview"); 3749 if(overview) { 3750 overview.appendChild(el('ul',{}, ...browsers.map(formatWptResult))); 3751 document.head.appendChild(el('style', {}, 3752 `.wpt-overview ul { display: flex; flex-flow: row wrap; gap: .2em; justify-content: start; list-style: none; padding: 0; margin: 0;} 3753 .wpt-overview li { padding: .25em 1em; color: black; text-align: center; } 3754 .wpt-overview img { height: 1.5em; height: max(1.5em, 32px); background: transparent; } 3755 .wpt-overview .browser { font-weight: bold; } 3756 .wpt-overview .passes-none { background: #e57373; } 3757 .wpt-overview .passes-hardly { background: #ffb74d; } 3758 .wpt-overview .passes-a-few { background: #ffd54f; } 3759 .wpt-overview .passes-half { background: #fff176; } 3760 .wpt-overview .passes-lots { background: #dce775; } 3761 .wpt-overview .passes-most { background: #aed581; } 3762 .wpt-overview .passes-all { background: #81c784; }`)); 3763 } 3764 }); 3765 function el(name, attrs, ...content) { 3766 const x = document.createElement(name); 3767 for(const [k,v] of Object.entries(attrs)) { 3768 x.setAttribute(k, v); 3769 } 3770 for(let child of content) { 3771 if(typeof child == "string") child = document.createTextNode(child); 3772 try { 3773 x.appendChild(child); 3774 } catch(e) { console.log({x, child}); } 3775 } 3776 return x; 3777 } 3778 function formatWptResult({name, version, passes, total}) { 3779 const passRate = passes/total; 3780 let passClass = ""; 3781 if(passRate == 0) passClass = "passes-none"; 3782 else if(passRate < .2) passClass = "passes-hardly"; 3783 else if(passRate < .4) passClass = "passes-a-few"; 3784 else if(passRate < .6) passClass = "passes-half"; 3785 else if(passRate < .8) passClass = "passes-lots"; 3786 else if(passRate < 1) passClass = "passes-most"; 3787 else passClass = "passes-all"; 3788 3789 name = name[0].toUpperCase() + name.slice(1); 3790 const shortVersion = /^\d+/.exec(version); 3791 const icon = [] 3792 3793 if(name == "Chrome") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/chrome-dev_64x64.png"})); 3794 if(name == "Edge") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/edge-dev_64x64.png"})); 3795 if(name == "Safari") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/safari-preview_64x64.png"})); 3796 if(name == "Firefox") icon.push(el('img', {alt:"", src:"https://wpt.fyi/static/firefox-nightly_64x64.png"})); 3797 3798 return el('li', {"class":passClass}, 3799 el('nobr', {'class':'browser'}, ...icon, ` ${name} ${shortVersion}`), 3800 el('br', {}), 3801 el('nobr', {'class':'pass-rate'}, `${passes}/${total}`) 3802 ); 3803 }</script>