.align-3 { justify-self: safe; justify-content: unsafe; justify-items: self-start; align-self: self-end; align-content: flex-start; align-items: flex-end; place-self: space-around; place-content: space-between; place-items: space-evenly; row-gap: legacy; column-gap: auto; gap: auto; } .animations { animation: forwards; animation-delay: backwards; animation-direction: running; animation-duration: paused; animation-fill-mode: alternate-reverse; animation-iteration-count: auto; animation-name: auto; animation-play-state: auto; animation-timing-function: auto; } .backgrounds-3 { background-clip: space; background-origin: round; background-size: local; border-image: fill; border-image-source: stretch; border-image-slice: clone; border-image-width: slice; border-image-outset: padding-box; border-image-repeat: border-box; border-radius: content-box; border-top-right-radius: auto; border-bottom-right-radius: auto; border-bottom-left-radius: auto; border-top-left-radius: auto; box-shadow: auto; } .backgrounds-4 { background-position-x: x-start; background-position-y: x-end; background-position-inline: y-start; background-position-block: y-end; corner-shape: bevel; corners: scoop; border-limit: notch; border-clip: auto; border-clip-top: auto; border-clip-right: auto; border-clip-bottom: auto; border-clip-left: auto; } .box { overflow-style: scrollbar; overflow-x: panner; overflow-y: move; rotation-point: marquee; display: ruby; display: ruby-base; display: ruby-text; display: ruby-base-group; display: ruby-text-group; display: no-display; display: no-content; } .break-3 { break-after: avoid-column; break-before: auto; break-inside: auto; box-decoration-break: auto; } .cascade-3 { all: initial; display: unset; } @import "test.css" supports(display: auto); .cascade-4 { display: revert; } .color { opacity: rgba(0, 0, 0, 1); display: hsla(0, 0, 0, 1); display: currentcolor; } @color-profile swopc { src: url('http://example.org/swop-coated.icc'); } .color-4 { color-adjust: #FFEEDDFF; display: rebeccapurple; display: hwb(120deg, 44%, 50%); display: lab(1 2 3); display: lch(4 5 6); display: gray(50%); display: color(swopc, 0 206 190 77); display: device-cmyk(0, 81%, 81%, 30%); display: color-mod(#112233 tint(50%)); } .compositing-1 { mix-blend-mode: multiply; isolation: screen; background-blend-mode: overlay; display: darken; display: lighten; display: color-dodge; display: color-burn; display: hard-light; display: soft-light; display: difference; display: exclusion; display: hue; display: saturation; display: color; display: luminosity; } @supports (display: auto) or (display: auto) not (display: auto) { .conditional { display: auto; } } .contain-1 { contain: layout; display: paint; display: size; } .content-3 { string-set: open; bookmark-level: closed; bookmark-label: leader('.'); bookmark-state: string(heading, first); display: target-counter(attr(href url), page); display: target-counters(lack-of-example); display: target-text(attr(href url)); } @counter-style counter-styles-3 { system: cyclic; negative: symbolic; prefix: additive; suffix: extends; range: bullets; pad: numbers; fallback: words; symbols: symbols("*" "\2020" "\2021" "\A7"); additive-symbols: auto; speak-as: auto; } .counter-styles-3 { display: arabic-indic; display: upper-armenian; display: lower-armenian; display: bengali; display: cambodian; display: khmer; display: cjk-decimal; display: devanagari; display: gujarati; display: gurmukhi; display: kannada; display: lao; display: malayalam; display: mongolian; display: myanmar; display: oriya; display: persian; display: tamil; display: telugu; display: thai; display: tibetan; display: cjk-earthly-branch; display: cjk-heavenly-stem; display: disclosure-closed; display: disclosure-open; display: japanese-informal; display: japanese-formal; display: korean-hangul-formal; display: korean-hanja-informal; display: korean-hanja-formal; display: simp-chinese-informal; display: simp-chinese-formal; display: trad-chinese-informal; display: trad-chinese-formal; display: ethiopic-numeric; } .cssom-1 { display: auto; } .cssom-view-1 { scroll-behavior: smooth; } .display-3 { display: flow; display: flow-root; display: contents; display: discard; } .exclusions { wrap-flow: minimum; wrap-through: maximum; } .fill-stroke-3 { fill-rule: butt; fill-break: arcs; fill-color: stupid; fill-image: compress; fill-origin: dashes; fill-position: gaps; fill-size: bounding-box; fill-repeat: auto; fill: auto; fill-opacity: auto; stroke-width: auto; stroke-align: auto; stroke-linecap: auto; stroke-linejoin: auto; stroke-miterlimit: auto; stroke-break: auto; stroke-dasharray: auto; stroke-dashoffset: auto; stroke-dash-corner: auto; stroke-dash-justify: auto; stroke-color: auto; stroke-image: auto; stroke-origin: auto; stroke-position: auto; stroke-size: auto; stroke-repeat: auto; stroke: auto; stroke-opacity: auto; } .filter-effects-1 { flood-color: sRGB; flood-opacity: linearRGB; color-interpolation-filters: auto; lighting-color: auto; display: blur(5px); display: brightness(0.4); display: contrast(200%); display: drop-shadow(16px 16px 20px blue); display: grayscale(50%); display: hue-rotate(90deg); display: invert(75%); display: opacity(25%); display: saturate(30%); display: sepia(60%); } .flexbox-1 { flex-direction: flex; flex-wrap: inline-flex; flex-flow: row; order: row-reverse; flex: column-reverse; flex-grow: wrap; flex-shrink: wrap-reverse; } .font-loading-3 { display: auto; } .fonts-4 { } .fonts-3 { font-feature-settings: common-ligatures; font-kerning: no-common-ligatures; font-language-override: discretionary-ligatures; font-synthesis: no-discretionary-ligatures; font-variant-alternates: historical-ligatures; font-variant-caps: no-historical-ligatures; font-variant-east-asian: contextual; font-variant-ligatures: no-contextual; font-variant-numeric: stylistic(feature-value-name); font-variant-position: historical-forms; display: styleset(feature-value-name #); display: character-variant(feature-vlue-name #); display: swash(feature-value-name); display: ornaments(feature-value-name); display: annotation(feature-value-name); display: all-small-caps; display: petite-caps; display: all-petite-caps; display: unicase; display: titling-caps; display: lining-nums; display: oldstyle-nums; display: proportional-nums; display: tabular-nums; display: diagonal-fractions; display: stacked-fractions; display: ordinal; display: slashed-zero; display: jis78; display: jis83; display: jis90; display: jis04; display: simplified; display: traditional; display: proportional-width; } .fonts-4 { font-min-size: emoji; font-max-size: math; font-display: fangsong; font-optical-sizing: system-ui; font-variation-settings: infinity; font-palette: swap; font-presentation: fallback; display: optional; display: light; display: dark; } @font-palette-values Test { base-palette: 1; } .gcpm-3::footnote-call, .gcpm-3::footnote-marker { running: footnote; footnote-display: line; footnote-policy: element(header); display: running(heading); } .geometry-1 { display: auto; } .grid-1 { grid-template-columns: grid; grid-template-rows: inline-grid; grid-template-areas: minmax(0, 1); grid-template: fit-content(10%); grid-auto-rows: repeat(4); grid-auto-columns: 0.2fr; grid-auto-flow: dense; grid: auto-flow; grid-row-start: span; grid-column-start: auto; grid-row-end: auto; grid-column-end: auto; grid-column: auto; grid-row: auto; grid-area: auto; } .images-3 { object-fit: contain; object-position: cover; image-orientation: snap; display: scale-down; display: from-image; display: linear-gradient(to bottom, yellow, blue); display: radial-gradient(farthest-corner at 50% 50%, yellow, green); display: repeating-linear-gradient(to bottom, yellow, blue); display: repeating-radial-gradient(farthest-corner at 50% 50%, yellow, green); } .images-4 { image-resolution: image("sprite.svg#xywh=40,0,20,20"); display: element(#test); display: conic-gradient(at 25% 30%, white, black 60%); } .inline-3 { dominant-baseline: mathematical; alignment-baseline: ideographic; baseline-shift: auto; initial-letter: auto; initial-letter-align: auto; initial-letter-wrap: auto; } .line-grid-1 { line-grid: create; line-snap: block-start; box-snap: block-end; display: first-baseline; display: last-baseline; } .lists-3::marker { display: auto; } .logical-1 { block-size: logical; inline-size: physical; min-block-size: rotate; min-inline-size: auto; max-block-size: auto; max-inline-size: auto; margin-block-start: auto; margin-block-end: auto; margin-inline-start: auto; margin-inline-end: auto; margin-block: auto; margin-inline: auto; inset-block-start: auto; inset-block-end: auto; inset-inline-start: auto; inset-inline-end: auto; inset-block: auto; inset-inline: auto; inset: auto; padding-block-start: auto; padding-block-end: auto; padding-inline-start: auto; padding-inline-end: auto; padding-block: auto; padding-inline: auto; border-block-start-width: auto; border-block-end-width: auto; border-inline-start-width: auto; border-inline-end-width: auto; border-block-width: auto; border-inline-width: auto; border-block-start-style: auto; border-block-end-style: auto; border-inline-start-style: auto; border-inline-end-style: auto; border-block-style: auto; border-inline-style: auto; border-block-start-color: auto; border-block-end-color: auto; border-inline-start-color: auto; border-inline-end-color: auto; border-block-color: auto; border-inline-color: auto; border-block-start: auto; border-block-end: auto; border-inline-start: auto; border-inline-end: auto; border-block: auto; border-inline: auto; background-image-transform: auto; border-image-transform: auto; } .masking-1 { clip-path: fill-box; clip-rule: stroke-box; mask-image: view-box; mask-mode: nonzero; mask-repeat: evenodd; mask-position: alpha; mask-clip: luminance; mask-origin: no-clip; mask-size: add; mask-composite: subtract; mask: intersect; mask-border-source: exclude; mask-border-mode: auto; mask-border-slice: auto; mask-border-width: auto; mask-border-outset: auto; mask-border-repeat: auto; mask-border: auto; mask-type: auto; } .motion-1 { offset-path: ray(45deg closest-side); offset-distance: path(M 100 100 L 300 100 L 200 300 z); offset-anchor: auto; offset-rotate: auto; offset: auto; } .multicol-1 { columns: column; column-count: balance; column-fill: balance-all; column-rule: auto; column-rule-color: auto; column-rule-style: auto; column-rule-width: auto; column-span: auto; column-width: auto; } @namespace "http://example.com/css3-namespace/"; .overflow-3 { max-lines: auto; } .overflow-4::nth-fragment(1) { scrollbar-gutter: stable; continue: force; display: overflow; display: paginate; display: fragments; } .page { display: avoid-page; display: page; display: recto; display: verso; } .page-floats-3 { float-reference: inline-start; float-defer: inline-end; float-offset: snap-block; display: snap-inline; display: snap-block(2em, near); display: snap-inline(2em, near); } .paint-api-1 { display: paint(my_logo); } .pointerevents { touch-action: pan-x; display: pan-y; display: manipulation; } .position-3 { offset-before: sticky; offset-end: auto; offset-after: auto; offset-start: auto; } .pseudo-4::inactive-selection, .pseudo-4::spelling-error, .pseudo-4::grammer-error { display: auto; } .regions-1:region { flow-into: element; flow-from: content; region-fragment: break; display: region; display: avoid-region; } .rhythm-1 { line-height-step: margin; block-step-size: up; block-step-insert: down; block-step-align: nearest; block-step-round: auto; block-step: auto; } @media (device-radius: 50%) { .round-display-1 { shape-inside: outside-shape; border-boundary: shape-box; polar-angle: parent; polar-distance: polar; } } .ruby-1 { ruby-position: ruby-base-container; ruby-merge: ruby-text-container; ruby-align: inter-character; } @scope .scoping-1 { div { display: auto; } } .scoping-1:scope-context div, .scoping-1:host, .scoping-1:host(.foo), .scoping-1:host-context, .scoping-1::shadow, .scoping-1::content, .scoping-1 /deep/ span { display: auto; } .scroll-snap-1 { scroll-snap-type: x; scroll-padding: y; scroll-margin: mandatory; scroll-snap-align: proximity; scroll-snap-stop: auto; scroll-padding-top: auto; scroll-padding-right: auto; scroll-padding-bottom: auto; scroll-padding-left: auto; scroll-padding-inline-start: auto; scroll-padding-block-start: auto; scroll-padding-inline-end: auto; scroll-padding-block-end: auto; scroll-padding-block: auto; scroll-padding-inline: auto; scroll-margin-top: auto; scroll-margin-right: auto; scroll-margin-bottom: auto; scroll-margin-left: auto; scroll-margin-inline-start: auto; scroll-margin-block-start: auto; scroll-margin-inline-end: auto; scroll-margin-block-end: auto; scroll-margin-block: auto; scroll-margin-inline: auto; } .selectors:target, .selectors:enabled, .selectors:disabled, .selectors:checked, .selectors:indeterminate, .selectors:root, .selectors:empty, .selectors:last-child, .selectors:last-of-type, .selectors:first-of-type, .selectors:only-child, .selectors:only-of-type, .selectors:nth-child(2n+1), .selectors:nth-last-child(-n+2), .selectors:nth-of-type(2n+1), .selectors:nth-last-of-type(n+2), .selectors:not([DISABLED]) { display: auto; } .selectors4 | h1, .selectors4:scope, .selectors4:current, .selectors4:past, .selectors4:future, .selectors4:default, .selectors4:valid, .selectors4:invalid, .selectors4:required, .selectors4:optional, .selectors4:blank, .selectors4:any-link, .selectors4:local-link, .selectors4:read-only, .selectors4:read-write, .selectors4:placeholder-shown, .selectors4:in-range, .selectors4:out-of-range, .selectors4:user-error, .selectors4:active-drop-target, .selectors4:valid-drop-target, .selectors4:invalid-drop-target, .selectors4:matches(:hover, :focus), .selectors4:dir(ltr), .selectors4:local-link(0), .selectors4:current(p, li, dt, dd), .selectors4:nth-match(2n+1), .selectors4:nth-last-match(-n+2), .selectors4:nth-column(2n+1), .selectors4:nth-last-column(-n+2), .selectors4:column(p, li, dt, dd) { display: auto; } .selectors-nonelement-1::attr(title) { display: auto; } .shapes-1 { shape-outside: margin-box; shape-image-threshold: inset(50% 50% 50% 50%); shape-margin: circle(100px 50px 100px); display: ellipse(0 0 250px 100px); display: polygon(0 0, 100% 100%, 0 100%); } .sizing-3 { display: max-content; display: min-content; display: fit-content; } .speech { voice-volume: 10dB; voice-balance: literal-punctuation; rest-before: no-punctuation; rest-after: x-weak; rest: weak; voice-rate: strong; voice-pitch: x-strong; voice-range: young; voice-stress: old; voice-duration: neutral; display: preserve; display: 10st; display: moderate; display: reduced; } .style-attr { display: auto; } .syntax-3 { display: auto; } .tables-3 { display: auto; } .text-3 { hyphens: manual; line-break: loose; overflow-wrap: strict; tab-size: match-parent; text-align-all: hanging; display: each-line; display: full-width; display: anywhere; } .text-4 { text-space-collapse: preserve-auto; text-space-trim: preserve-trim; text-wrap: preserve-breaks; wrap-before: preserve-spaces; wrap-after: trim-inner; wrap-inside: discard-before; hyphenate-character: discard-after; hyphenate-limit-zone: avoid-line; hyphenate-limit-chars: avoid-flex; hyphenate-limit-lines: pre-wrap-auto; hyphenate-limit-last: no-limit; text-spacing: spread; display: trim-start; display: space-start; display: trim-end; display: space-end; display: trim-adjacent; display: space-adjacent; display: no-compress; display: ideograph-alpha; display: ideograph-numeric; display: punctuation; } .text-decor-3 { text-decoration-color: filled; text-decoration-line: dot; text-decoration-skip: triangle; text-decoration-style: sesame; text-emphasis: objects; text-emphasis-color: ink; text-emphasis-position: edges; text-emphasis-style: wavy; display: alphabetic; display: spaces; display: box-decoration; display: under; display: over; } .timing-1 { display: frames(2); } .transforms-1 { backface-visibility: flat; perspective: preserve-3d; perspective-origin: matrix(1); transform: matrix3d(1); transform-origin: translate(1); transform-style: translate3d(1); display: translateX(1); display: translateY(1); display: translateZ(1); display: scale(1); display: scale3d(1); display: scaleX(1); display: scaleY(1); display: scaleZ(1); display: rotate(1); display: rotate3d(1); display: rotateX(1); display: rotateY(1); display: rotateZ(1); display: skew(1); display: skewX(1); display: skewY(1); display: perspective(1); } .transitions { transition: linear; transition-property: ease; transition-duration: ease-in; transition-timing-function: ease-out; transition-delay: ease-in-out; display: step-start; display: step-end; display: steps(1, start); display: cubic-bezier(0.25, 0.1, 0.25, 1.0); } .ui-3 { caret-color: grab; display: grabbing; } .ui-4 { caret: fade; caret-shape: fade(1em); display: underscore; } .values-3 { display: 1ch; display: 1vw; display: 1vh; display: 1vmin; display: 1q; display: 1turn; display: calc(100%/3 - 2*1em - 2*1px); } .variables-1 { var-foo: var(foo); } @viewport { min-zoom: auto; max-zoom: auto; user-zoom: auto; } .web-animations-1 { display: auto; } .webvtt1::cue, .webvtt1::cue-region, .webvtt1::cue(#cue1), .webvtt1::cue-region(#scroll), { display: auto; } .will-change-1 { will-change: scroll-position; } .writing-modes-3 { writing-mode: before; text-orientation: after; text-combine-upright: mixed; glyph-orientation-vertical: upright; display: plaintext; display: sideways; display: isolate; display: isolate-override; display: horizontal-tb; display: vertical-rl; display: vertical-lr; } .writing-modes-4 { display: sideways-rl; display: sideways-lr; } .html5, picture, rb, rtc, slot, template { display: auto; } .svg2, animate, animateMotion, animateTransform, circle, clipPath, cursor, defs, desc, discard, ellipse, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, filter, foreignObject, g, hatch, hatchpath, image, line, linearGradient, marker, mesh, meshgradient, meshpatch, meshrow, metadata, mpath, path, pattern, polygon, polyline, radialGradient, rect, set, solidcolor, stop, switch, symbol, text, textPath, tspan, unknown, use, view { color-interpolation: crispEdges; color-rendering: geometricPrecision; cx: optimizeQuality; cy: painted; d: visiblePainted; image-rendering: visibleFill; marker-end: stroke; marker-mid: viewport; marker-start: visibleStroke; pointer-events: context-fill; r: context-stroke; rx: fixed-position; ry: miter; shape-rendering: miter-clip; solid-color: non-scaling-stroke; solid-opacity: non-scaling-size; stop-color: non-rotation; stop-opacity: child(1); text-anchor: icc-color(foo); vector-effect: auto; x: auto; y: auto; }