Files
vim-css3-syntax/test/test.css

1270 lines
22 KiB
CSS

.align-3 {
place-self: auto;
place-content: auto;
place-items: auto;
row-gap: auto;
gap: auto;
display: safe;
display: unsafe;
display: self-start;
display: self-end;
display: space-evenly;
display: legacy;
}
.animations-1 {
display: auto;
}
.backgrounds-3 {
display: auto;
}
.backgrounds-4 {
background-position-x: auto;
background-position-y: auto;
background-position-inline: auto;
background-position-block: auto;
corner-shape: auto;
corners: auto;
border-limit: auto;
border-clip: auto;
border-clip-top: auto;
border-clip-right: auto;
border-clip-bottom: auto;
border-clip-left: auto;
display: x-start;
display: x-end;
display: y-start;
display: y-end;
display: bevel;
display: scoop;
display: notch;
}
.box-3 {
display: auto;
}
.box-4 {
margin-trim: auto;
display: in-flow;
}
.break-3 {
display: recto;
display: verso;
}
.break-4 {
margin-break: auto;
display: keep;
}
.cascade-3 {
display: auto;
}
@import "cascade-4.css" supports(display: auto);
.cascade-4 {
display: revert;
}
@import "cascade-5.css" layer(framework component);
.cascade-5 {
display: revert-layer;
}
.color-3 {
display: auto;
}
.color-4 {
display: hwb(120deg, 44%, 50%);
display: lab(1 2 3);
display: lch(4 5 6);
display: color(swopc, 0 206 190 77);
display: device-cmyk(0, 81%, 81%, 30%);
display: relative-colorimetric;
display: absolute-colorimetric;
display: perceptual;
}
@color-profile swopc {
src: url("http://example.org/swop-coated.icc");
}
.color-5 {
display: color-mix(red yellow 65%);
display: color-contrast(wheat tan, sienna, var(--myAccent), #d2691e);
}
.color-adjust-1 {
color-scheme: auto;
forced-color-adjust: auto;
print-color-adjust: auto;
color-adjust: auto;
display: light;
display: economy;
display: exact;
}
.compositing-1 {
mix-blend-mode: auto;
isolation: auto;
background-blend-mode: auto;
display: multiply;
display: screen;
display: 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-3 {
display: auto;
}
}
@supports (selector(.conditional-4)) {
display: auto;
}
.contain-1 {
contain: auto;
display: layout;
display: paint;
display: size;
}
.contain-2 {
content-visibility: auto;
}
.content-3 {
string-set: auto;
bookmark-level: auto;
bookmark-label: auto;
bookmark-state: auto;
display: open;
display: closed;
display: leader('.');
display: 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: auto;
negative: auto;
prefix: auto;
suffix: auto;
range: auto;
pad: auto;
fallback: auto;
symbols: auto;
additive-symbols: auto;
speak-as: auto;
display: cyclic;
display: symbolic;
display: additive;
display: extends;
display: bullets;
display: numbers;
display: words;
display: symbols("*" "\2020" "\2021" "\A7");
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;
}
.device-adapt-1 {
display: auto;
}
@viewport {
min-zoom: auto;
max-zoom: auto;
user-zoom: auto;
}
.display-3 {
display: contents;
display: run-in;
display: ruby;
display: ruby-base;
display: ruby-text;
}
.easing-1 {
display: auto;
}
.exclusions-3 {
wrap-flow: auto;
wrap-through: auto;
display: minimum;
display: maximum;
}
.fill-stroke-3 {
fill-rule: auto;
fill-break: auto;
fill-color: auto;
fill-image: auto;
fill-origin: auto;
fill-position: auto;
fill-size: auto;
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;
display: butt;
display: arcs;
display: stupid;
display: compress;
display: dashes;
display: gaps;
display: bounding-box;
}
.filter-effects-1 {
flood-color: auto;
flood-opacity: auto;
color-interpolation-filters: auto;
lighting-color: auto;
display: sRGB;
display: linearRGB;
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 {
display: auto;
}
.font-loading-3 {
display: auto;
}
.fonts-3 {
display: common-ligatures;
display: no-common-ligatures;
display: discretionary-ligatures;
display: no-discretionary-ligatures;
display: historical-ligatures;
display: no-historical-ligatures;
display: contextual;
display: no-contextual;
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: jis78;
display: jis83;
display: jis90;
display: jis04;
display: simplified;
display: traditional;
display: proportional-width;
display: ordinal;
display: slashed-zero;
}
.fonts-4 {
font-synthesis-weight: auto;
font-synthesis-style: auto;
font-synthesis-small-caps: auto;
font-variation-settings: auto;
font-named-instance: auto;
font-display: auto;
ascent-override: auto;
descent-override: auto;
line-gap-override: auto;
font-optical-sizing: auto;
font-variation-settings: auto;
font-palette: auto;
font-variant-emoji: auto;
font-presentation: auto;
display: system-ui;
display: emoji;
display: math;
display: fangsong;
display: ui-serif;
display: ui-sans-serif;
display: ui-monospace;
display: ui-rounded;
display: xxx-large;
display: swap;
display: fallback;
display: historical-forms;
display: stylistic(feature-value-name);
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: light;
display: dark;
}
@font-feature-values Test {
@swash {
swishy: 1;
flowing: 2;
}
}
@font-palette-values Test {
base-palette: 1;
override-color: 1 rgb(43, 12, 9);
}
.gcpm-3::footnote-call,
.gcpm-3::footnote-marker {
running: auto;
footnote-display: auto;
footnote-policy: auto;
display: footnote;
display: line;
display: element(header);
display: running(heading);
}
.geometry-1 {
display: auto;
}
.grid-1 {
display: minmax(0, 1);
display: repeat(4);
display: dense;
display: auto-flow;
display: span;
}
.grid-2 {
display: auto;
}
.highlight-api-1::highlight(test) {
display: auto;
}
.html5,
picture,
rb,
rtc,
slot,
template {
display: auto;
}
.images-3 {
object-fit: auto;
object-position: auto;
image-orientation: auto;
display: snap;
display: flip;
display: scale-down;
display: from-image;
display: pixelated;
display: repeating-linear-gradient(to bottom, yellow, blue);
display: repeating-radial-gradient(farthest-corner at 50% 50%, yellow, green);
}
.images-4 {
image-resolution: auto;
display: image("sprite.svg#xywh=40,0,20,20");
display: element(#test);
display: conic-gradient(at 25% 30%, white, black 60%);
}
.inline-3 {
dominant-baseline: auto;
alignment-baseline: auto;
baseline-source: auto;
baseline-shift: auto;
text-edge: auto;
leading-trim: auto;
inline-sizing: auto;
initial-letter: auto;
initial-letter-align: auto;
initial-letter-wrap: auto;
display: mathematical;
display: central;
display: ideographic;
display: leading;
display: cap;
display: ex;
display: ideographic-ink;
display: drop;
display: raise;
}
.layout-api-1 {
display: auto;
}
.line-grid-1 {
line-grid: auto;
line-snap: auto;
box-snap: auto;
display: create;
display: block-start;
display: block-end;
display: first-baseline;
display: last-baseline;
}
.lists-3::marker {
marker-side: auto;
counter-set: auto;
display: match-self;
display: list-container;
display: counters(lack-of-example);
}
.logical-1 {
block-size: auto;
inline-size: auto;
min-block-size: auto;
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;
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;
border-start-start-radius: auto;
border-start-end-radius: auto;
border-end-start-radius: auto;
border-end-end-radius: auto;
display: logical;
display: physical;
display: rotate;
}
.masking-1,
mask {
clip-path: auto;
clip-rule: auto;
mask-image: auto;
mask-mode: auto;
mask-repeat: auto;
mask-position: auto;
mask-clip: auto;
mask-origin: auto;
mask-size: auto;
mask-composite: auto;
mask: auto;
mask-border-source: auto;
display: fill-box;
display: stroke-box;
display: view-box;
display: nonzero;
display: evenodd;
display: alpha;
display: luminance;
display: no-clip;
display: add;
display: subtract;
display: intersect;
display: 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: auto;
offset-distance: auto;
offset-position: auto;
offset-anchor: auto;
offset-rotate: auto;
offset: auto;
display: ray(45deg closest-side);
display: path(M 100 100 L 300 100 L 200 300 z);
}
.multicol-1 {
display: balance-all;
}
.namespace-3 {
display: auto;
}
.nav-1 {
spatial-navigation-contain: auto;
spatial-navigation-action: auto;
spatial-navigation-function: auto;
display: focus;
}
.overflow-3 {
overflow-clip-margin: auto;
overflow-block: auto;
overflow-inline: auto;
scrollbar-gutter: auto;
block-ellipsis: auto;
line-clamp: auto;
max-lines: auto;
continue: auto;
}
.overflow-4::nth-fragment(1) {
display: stable;
display: force;
display: overflow;
display: paginate;
display: fragments;
}
.overscroll-1 {
overscroll-behavior: auto;
overscroll-behavior-block: auto;
overscroll-behavior-inline: auto;
overscroll-behavior-x: auto;
overscroll-behavior-y: auto;
}
.page-3 {
marks: auto;
bleed: auto;
}
.page-floats-3 {
float-reference: auto;
float-defer: auto;
float-offset: auto;
display: inline-start;
display: inline-end;
display: 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: auto;
display: pan-x;
display: pan-y;
display: manipulation;
}
.position-3 {
inset-block-start: auto;
inset-block-end: auto;
inset-inline-start: auto;
inset-inline-end: auto;
inset-block: auto;
inset-inline: auto;
inset: auto;
display: sticky;
}
.properties-values-api-1 {
syntax: auto;
inherits: auto;
initial-value: auto;
}
.pseudo-4::target-text,
.pseudo-4::spelling-error,
.pseudo-4::grammer-error,
.pseudi-4::file-selectors-button {
display: auto;
}
.regions-1:region {
flow-into: auto;
flow-from: auto;
region-fragment: auto;
display: element;
display: content;
display: break;
display: region;
display: avoid-region;
}
.resize-observer-1 {
display: auto;
}
.rhythm-1 {
line-height-step: auto;
block-step-size: auto;
block-step-insert: auto;
block-step-align: auto;
display: margin;
display: up;
display: down;
display: nearest;
block-step-round: auto;
block-step: auto;
}
@media (device-radius: 50%) {
.round-display-1 {
shape-inside: auto;
border-boundary: auto;
polar-angle: auto;
polar-distance: auto;
display: outside-shape;
display: shape-box;
display: parent;
display: polar;
}
}
.ruby-1 {
ruby-position: auto;
ruby-merge: auto;
ruby-align: auto;
ruby-overhang: auto;
display: ruby-base-container;
display: ruby-text-container;
display: merge;
display: inter-character;
}
.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;
}
@scope .scoping-1 {
div {
display: auto;
}
}
.scroll-anchoring-1 {
overflow-anchor: auto;
}
.scroll-snap-1 {
scroll-snap-type: auto;
scroll-padding: auto;
scroll-margin: auto;
scroll-snap-align: auto;
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;
display: x;
display: y;
display: mandatory;
display: proximity;
}
.scrollbars-1 {
scrollbar-color: auto;
scrollbar-width: auto;
}
.selectors-3:enabled,
.selectors-3:indeterminate,
.selectors-3:nth-child(2n+1),
.selectors-3:nth-last-child(-n+2),
.selectors-3:nth-of-type(2n+1),
.selectors-3:nth-last-of-type(n+2),
.selectors-3:not([DISABLED]) {
display: auto;
}
.selectors-4 | h1,
.selectors-4:scope,
.selectors-4:current,
.selectors-4:past,
.selectors-4:future,
.selectors-4:default,
.selectors-4:valid,
.selectors-4:required,
.selectors-4:optional,
.selectors-4:blank,
.selectors-4:any-link,
.selectors-4:local-link,
.selectors-4:read-only,
.selectors-4:read-write,
.selectors-4:placeholder-shown,
.selectors-4:in-range,
.selectors-4:out-of-range,
.selectors-4:user-invalid,
.selectors-4:is(:hover, :focus),
.selectors-4:dir(ltr),
.selectors-4:local-link(0),
.selectors-4:current(p, li, dt, dd),
.selectors-4:nth-col(2n+1),
.selectors-4:nth-last-col(-n+2),
.selectors-4:target-within,
.selectors-4:focus-within,
.selectors-4:focus-visible,
.selectors-4:playing,
.selectors-4:paused,
.selectors-4:has(> img),
.selectors-4:where(:not(:hover)) {
display: auto;
}
.shadow-parts::part(textspan) {
display: auto;
}
.shapes-1 {
shape-outside: auto;
shape-image-threshold: auto;
shape-margin: auto;
display: margin-box;
display: inset(50% 50% 50% 50%);
display: 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(10%);
}
.sizing-4 {
contain-intrinsic-size: auto;
min-intrinsic-sizing: auto;
display: fit-content;
display: zero-if-scroll;
display: zero-if-extrinsic;
}
.speech-1 {
voice-volume: auto;
voice-balance: auto;
rest-before: auto;
rest-after: auto;
rest: auto;
voice-rate: auto;
voice-pitch: auto;
voice-range: auto;
voice-stress: auto;
voice-duration: auto;
display: 10dB;
display: literal-punctuation;
display: no-punctuation;
display: x-weak;
display: weak;
display: strong;
display: x-strong;
display: young;
display: old;
display: neutral;
display: preserve;
display: 10st;
display: moderate;
display: reduced;
}
.style-attr {
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: auto;
color-rendering: auto;
cx: auto;
cy: auto;
d: auto;
marker-end: auto;
marker-mid: auto;
marker-start: auto;
r: auto;
rx: auto;
ry: auto;
shape-rendering: auto;
solid-color: auto;
solid-opacity: auto;
stop-color: auto;
stop-opacity: auto;
text-anchor: auto;
vector-effect: auto;
x: auto;
y: auto;
display: crispEdges;
display: geometricPrecision;
display: optimizeQuality;
display: viewport;
display: context-fill;
display: context-stroke;
display: fixed-position;
display: miter;
display: miter-clip;
display: non-scaling-stroke;
display: non-scaling-size;
display: non-rotation;
display: child(1);
display: icc-color(foo);
}
.syntax-3 {
display: auto;
}
.tables-3 {
display: auto;
}
.text-3 {
tab-size: auto;
text-align-all: auto;
display: loose;
display: strict;
display: match-parent;
display: hanging;
display: each-line;
display: full-width;
display: anywhere;
display: justify-all;
display: break-spaces;
}
.text-4 {
text-space-collapse: auto;
text-space-trim: auto;
text-wrap: auto;
wrap-before: auto;
wrap-after: auto;
wrap-inside: auto;
hyphenate-character: auto;
hyphenate-limit-zone: auto;
hyphenate-limit-chars: auto;
hyphenate-limit-lines: auto;
hyphenate-limit-last: auto;
text-group-align: auto;
line-padding: auto;
text-spacing: auto;
display: preserve-breaks;
display: preserve-spaces;
display: trim-inner;
display: discard-before;
display: discard-after;
display: avoid-line;
display: avoid-flex;
display: pre-wrap-auto;
display: no-limit;
display: spread;
display: trim-start;
display: space-start;
display: space-first;
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: auto;
text-decoration-line: auto;
text-decoration-style: auto;
text-emphasis: auto;
text-emphasis-color: auto;
text-emphasis-position: auto;
text-emphasis-style: auto;
display: filled;
display: dot;
display: sesame;
display: alphabetic;
display: ink;
display: under;
display: wavy;
display: under;
display: over;
display: triangle;
}
.text-decor-4 {
text-decoration-thickness: auto;
text-underline-offset: auto;
text-decoration-skip: auto;
text-decoration-skip-ink: auto;
text-emphasis-skip: auto;
display: spelling-error;
display: grammer-error;
display: objects;
display: from-font;
display: spaces;
display: leading-spaces;
display: trailing-spaces;
display: edges;
display: box-decoration;
display: symbols;
display: narrow;
}
.timing-1 {
display: frames(2);
}
.transforms-1 {
transform-box: auto;
}
.tranforms-2 {
rotate: auto;
scale: auto;
translate: auto;
display: flat;
}
.transitions-1 {
display: auto;
}
.typed-om-1 {
display: auto;
}
.ui-3 {
caret-color: auto;
display: grab;
display: grabbing;
}
.ui-4 {
caret: auto;
caret-shape: auto;
display: fade;
display: fade(1em);
display: underscore;
}
.unofficials {
backdrop-filter: auto;
display: env(safe-area-inset-top, 20px);
}
.values-3 {
display: 1ch;
display: 1q;
display: 1turn;
}
.values-4 {
display: 1vi;
display: 1vb;
display: 1rex;
display: 1cap;
display: 1rcap;
display: 1rch;
display: 1ic;
display: 1ric;
display: 1lh;
display: 1rlh;
display: 1svh;
display: 1svw;
display: 1svi;
display: 1svb;
display: 1svmin;
display: 1svmax;
display: 1lvh;
display: 1lvw;
display: 1lvi;
display: 1lvb;
display: 1lvmin;
display: 1lvmax;
display: 1dvh;
display: 1dvw;
display: 1dvi;
display: 1dvb;
display: 1dvmin;
display: 1dvmax;
display: min(0, 1);
display: max(0, 1);
display: clamp(0, 100, 2);
display: toggle(italic, normal);
display: round(var(--width), 50px);
display: mod(-18px, 5px);
display: rem(-18px, 5px);
display: sin(45deg);
display: cos(1);
display: tan(1);
display: asin(45deg);
display: acos(1);
display: atan(1);
display: atan2(1, -1);
display: pow(1.5, -1);
display: sqrt(4);
display: hypot(30px, 40px);
display: log(10);
display: exp(1);
display: abs(-1);
display: sign(-4);
display: mix(33%; 1px; 2px);
}
.variables-1 {
display: 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: auto;
display: scroll-position;
}
.worklets-1 {
display: auto;
}
.writing-modes-3 {
writing-mode: auto;
text-orientation: auto;
text-combine-upright: auto;
glyph-orientation-vertical: auto;
display: before;
display: after;
display: mixed;
display: 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;
}