diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-cascade/all-prop-revert-layer.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-cascade/all-prop-revert-layer.html | 459 |
1 files changed, 459 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-cascade/all-prop-revert-layer.html b/testing/web-platform/tests/css/css-cascade/all-prop-revert-layer.html new file mode 100644 index 0000000000..c0a3ba74ac --- /dev/null +++ b/testing/web-platform/tests/css/css-cascade/all-prop-revert-layer.html @@ -0,0 +1,459 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Cascade: "all: revert-layer"</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-cascade-5/#revert-layer"> +<meta name="assert" content="Checks that adding 'all: revert-layer' on the last layer has no effect."> +<style> +/* Set properties to a value different than the initial one. */ +#nothing { + accent-color: #123; + align-content: baseline; + align-items: baseline; + align-self: baseline; + align-tracks: baseline; + alignment-baseline: central; + alt: "a"; + animation-composition: add; + animation-delay: 123s; + animation-delay-start: 123s; + animation-delay-end: 456s; + animation-direction: reverse; + animation-duration: 123s; + animation-fill-mode: both; + animation-iteration-count: 123; + animation-name: \.; + animation-play-state: paused; + animation-timeline: none; + animation-timing-function: linear; + app-region: drag; + appearance: auto; + aspect-ratio: 3 / 4; + backdrop-filter: invert(1); + backface-visibility: hidden; + background-attachment: fixed; + background-blend-mode: overlay; + background-clip: content-box; + background-color: #123; + background-image: url("#ref"); + background-origin: border-box; + background-position: 123px; + background-repeat: round; + background-size: 123px; + baseline-shift: 123px; + block-size: 123px; + border-block-end: 123px dashed #123; + border-block-start: 123px dashed #123; + border-bottom: 123px dashed #123; + border-collapse: collapse; + border-end-end-radius: 123px; + border-end-start-radius: 123px; + border-image-outset: 123; + border-image-repeat: round; + border-image-slice: 123; + border-image-source: url("#ref"); + border-image-width: 123px; + border-inline-end: 123px dashed #123; + border-inline-start: 123px dashed #123; + border-left: 123px dashed #123; + border-radius: 123px; + border-right: 123px dashed #123; + border-start-end-radius: 123px; + border-start-start-radius: 123px; + border-spacing: 123px; + border-top: 123px dashed #123; + bottom: 123px; + box-decoration-break: clone; + box-shadow: #123 123px 123px 123px 123px; + box-sizing: border-box; + break-after: avoid; + break-before: avoid; + break-inside: avoid; + buffered-rendering: static; + caption-side: bottom; + caret-color: #123; + clear: both; + clip: rect(123px, 123px, 123px, 123px); + clip-path: url("#ref"); + clip-rule: evenodd; + color: #123; + color-interpolation: auto; + color-interpolation-filters: auto; + color-rendering: optimizespeed; + color-scheme: dark; + column-count: 123; + column-fill: auto; + column-gap: 123px; + column-rule-color: #123; + column-rule-style: dashed; + column-rule-width: 123px; + column-span: all; + column-width: 123px; + contain: size; + contain-intrinsic-block-size: 123px; + contain-intrinsic-inline-size: 123px; + contain-intrinsic-size: 123px 123px; + container-name: foo; + container-type: size; + content: "b"; + counter-increment: add 123; + counter-reset: add 123; + counter-set: add 123; + cursor: none; + cx: 123px; + cy: 123px; + d: path("M 1 1"); + direction: rtl; + display: flow-root; + dominant-baseline: middle; + empty-cells: hide; + fill: #123; + fill-opacity: 0.123; + fill-rule: evenodd; + filter: url("#ref"); + flex-basis: 123px; + flex-direction: column; + flex-grow: 123; + flex-shrink: 123; + flex-wrap: wrap; + float: right; + flood-color: #123; + flood-opacity: 0.123; + font-family: "c"; + font-feature-settings: "smcp"; + font-kerning: none; + font-language-override: "d"; + font-optical-sizing: none; + font-palette: dark; + font-size: 123px; + font-size-adjust: 123; + font-stretch: 123%; + font-style: italic; + font-synthesis: none; + font-variant-alternates: historical-forms; + font-variant-caps: small-caps; + font-variant-east-asian: full-width; + font-variant-ligatures: none; + font-variant-numeric: tabular-nums; + font-variant-position: super; + font-variation-settings: "smcp" 1; + font-weight: 123; + glyph-orientation-horizontal: 123deg; + glyph-orientation-vertical: 123deg; + grid-auto-columns: 123px; + grid-auto-flow: column; + grid-auto-rows: 123px; + grid-column-end: 123; + grid-column-start: 123; + grid-row-end: 123; + grid-row-start: 123; + grid-template-areas: "."; + grid-template-columns: 123fr; + grid-template-rows: 123fr; + hanging-punctuation: first; + height: 123px; + hyphenate-character: "e"; + hyphens: auto; + image-orientation: none; + image-rendering: pixelated; + ime-mode: normal; + initial-letter: 123; + inline-size: 123px; + input-security: none; + inset-block-end: 123px; + inset-block-start: 123px; + inset-inline-end: 123px; + inset-inline-start: 123px; + isolation: isolate; + justify-content: center; + justify-items: baseline; + justify-self: baseline; + justify-tracks: center; + kerning: 123px; + left: 123px; + letter-spacing: 123px; + lighting-color: #123; + line-break: anywhere; + line-height: 123px; + line-height-step: 123px; + list-style-image: url("#ref"); + list-style-position: inside; + list-style-type: square; + margin-block-end: 123px; + margin-block-start: 123px; + margin-bottom: 123px; + margin-inline-end: 123px; + margin-inline-start: 123px; + margin-left: 123px; + margin-right: 123px; + margin-top: 123px; + marker-end: url("#ref"); + marker-mid: url("#ref"); + marker-start: url("#ref"); + mask-clip: content-box; + mask-composite: exclude; + mask-image: url("#ref"); + mask-mode: alpha; + mask-origin: content-box; + mask-position-x: 123px; + mask-position-y: 123px; + mask-repeat: round; + mask-size: 123px; + mask-type: alpha; + masonry-auto-flow: ordered; + math-depth: 123; + math-shift: compact; + math-style: compact; + max-block-size: 123px; + max-height: 123px; + max-inline-size: 123px; + max-width: 123px; + min-block-size: 123px; + min-height: 123px; + min-inline-size: 123px; + min-width: 123px; + mix-blend-mode: overlay; + object-fit: contain; + object-overflow: visible; + object-position: 123px 123%; + object-view-box: inset(123px); + offset-anchor: 123px 123%; + offset-distance: 123px; + offset-path: path("M 1 1"); + offset-position: 123px; + offset-rotate: 123deg; + opacity: 0.123; + order: 123; + orphans: 123; + outline-color: #123; + outline-offset: 123px; + outline-style: auto; + outline-width: 123px; + overflow-anchor: none; + overflow-block: auto; + overflow-clip-margin: 123px; + overflow-inline: hidden; + overflow-wrap: anywhere; + overflow-x: auto; + overflow-y: hidden; + overscroll-behavior-block: contain; + overscroll-behavior-inline: contain; + overscroll-behavior-x: contain; + overscroll-behavior-y: contain; + padding-block-end: 123px; + padding-block-start: 123px; + padding-bottom: 123px; + padding-inline-end: 123px; + padding-inline-start: 123px; + padding-left: 123px; + padding-right: 123px; + padding-top: 123px; + paint-order: fill; + perspective: 123px; + perspective-origin: 123px 123%; + pointer-events: all; + position: relative; + print-color-adjust: exact; + quotes: none; + r: 123px; + resize: both; + right: 123px; + rotate: 123deg; + row-gap: 123px; + ruby-align: center; + ruby-position: under; + rx: 123px; + ry: 123px; + scale: 123; + scroll-behavior: smooth; + scroll-margin-block-end: 123px; + scroll-margin-block-start: 123px; + scroll-margin-bottom: 123px; + scroll-margin-inline-end: 123px; + scroll-margin-inline-start: 123px; + scroll-margin-left: 123px; + scroll-margin-right: 123px; + scroll-margin-top: 123px; + scroll-padding-block-end: 123px; + scroll-padding-block-start: 123px; + scroll-padding-bottom: 123px; + scroll-padding-inline-end: 123px; + scroll-padding-inline-start: 123px; + scroll-padding-left: 123px; + scroll-padding-right: 123px; + scroll-padding-top: 123px; + scroll-snap-align: center; + scroll-snap-stop: always; + scroll-snap-type: both; + scrollbar-color: #123 #123; + scrollbar-gutter: stable; + scrollbar-width: none; + shape-image-threshold: 123; + shape-margin: 123px; + shape-outside: border-box; + shape-rendering: optimizespeed; + speak: spell-out; + speak-as: spell-out; + stop-color: #123; + stop-opacity: 0.123; + stroke: #123; + stroke-color: #123; + stroke-dasharray: 123px; + stroke-dashoffset: 123px; + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 123; + stroke-opacity: 0.123; + stroke-width: 123px; + tab-size: 123; + table-layout: fixed; + text-align: center; + text-align-last: center; + text-anchor: middle; + text-combine-upright: all; + text-decoration-color: #123; + text-decoration-line: underline; + text-decoration-skip-ink: none; + text-decoration-style: dashed; + text-decoration-thickness: 123px; + text-emphasis-color: #123; + text-emphasis-position: under right; + text-emphasis-style: dot; + text-indent: 123px; + text-justify: none; + text-orientation: sideways; + text-overflow: ellipsis; + text-rendering: optimizespeed; + text-shadow: #123 123px 123px 123px; + text-size-adjust: none; + text-transform: lowercase; + text-underline-offset: 123px; + text-underline-position: under; + top: 123px; + touch-action: none; + transform: scale(-1); + transform-box: fill-box; + transform-origin: 123px 123px 123px; + transform-style: preserve-3d; + transition-delay: 123s; + transition-duration: 123s; + transition-property: add; + transition-timing-function: linear; + translate: 123px; + unicode-bidi: plaintext; + user-select: all; + vector-effect: non-scaling-stroke; + vertical-align: 123px; + visibility: collapse; + white-space: nowrap; + widows: 123; + width: 123px; + will-change: height; + word-break: break-word; + word-spacing: 123px; + word-wrap: break-word; + writing-mode: vertical-lr; + x: 123px; + y: 123px; + z-index: 123; + zoom: 123; +} + +@layer layer1 { + /* Reset properties to their initial value */ + #target { + all: initial; + } +} + +@layer layer2 { + /* This will be populated with properties set to a non-initial value */ + #target {} +} + +@layer layer3 { + /* This should roll back to the values from the previous layer */ + #target.rollback { + all: revert-layer; + } +} +</style> + +<div id="log"></div> + +<!-- This custom element is unlikely to get important UA styles --> +<foo-bar id="target"></foo-bar> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +const { sheet } = document.querySelector("style"); +const nonInitialStyle = sheet.cssRules[0].style; +const layer2Style = sheet.cssRules[2].cssRules[0].style; + +const target = document.getElementById("target"); +const cs = getComputedStyle(target); + +// Some properties can be forced to compute to their initial value +// unless another property is set to a certain value. +function prerequisites(property) { + switch (property) { + case "border-block-end-width": + case "border-block-start-width": + case "border-bottom-width": + case "border-inline-end-width": + case "border-inline-start-width": + case "border-left-width": + case "border-right-width": + case "border-top-width": + return "border-style: solid"; + case "column-rule-width": + return "column-rule-style: solid"; + case "outline-width": + return "outline-style: solid"; + case "rotate": + case "scale": + case "transform": + case "transform-style": + case "translate": + return "display: block"; + default: + return ""; + } +} + +const initialValues = Object.create(null); +for (let property of cs) { + if (!property.startsWith("-")) { + initialValues[property] = cs.getPropertyValue(property); + } +} + +for (let property in initialValues) { + // Skip property if the stylesheet above doesn't provide a non-initial value. + // This is to avoid having to update the test every time a new CSS property is added. + const nonInitialValue = nonInitialStyle.getPropertyValue(property); + if (nonInitialValue === "") { + continue; + } + + test(function() { + const initialValue = initialValues[property]; + assert_not_equals(initialValue, "", "Should have the initial value."); + + this.add_cleanup(() => { + layer2Style.cssText = ""; + target.classList.remove("rollback"); + }); + + layer2Style.cssText = prerequisites(property); + layer2Style.setProperty(property, nonInitialValue); + const changedValue = cs.getPropertyValue(property); + assert_not_equals(changedValue, initialValue, "Should get a different computed value."); + + target.classList.add("rollback"); + const revertedValue = cs.getPropertyValue(property); + assert_equals(revertedValue, changedValue, "Layer 3 should rollback to layer 2."); + }, property); +} +</script> |