summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-cascade/all-prop-revert-layer.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-cascade/all-prop-revert-layer.html
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
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.html472
1 files changed, 472 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..868267b285
--- /dev/null
+++ b/testing/web-platform/tests/css/css-cascade/all-prop-revert-layer.html
@@ -0,0 +1,472 @@
+<!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;
+ 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-range: 10% 20%;
+ 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;
+ baseline-source: first;
+ 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";
+ content-visibility: auto;
+ 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-emoji: emoji;
+ font-variant-ligatures: none;
+ font-variant-numeric: tabular-nums;
+ font-variant-position: super;
+ font-variation-settings: "smcp" 1;
+ font-weight: 123;
+ forced-color-adjust: none;
+ 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";
+ hyphenate-limit-chars: 5;
+ 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;
+ 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;
+ margin-trim: block;
+ 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;
+ page: page;
+ 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;
+ scroll-timeline: --foo inline;
+ 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;
+ text-wrap-style: balance;
+ timeline-scope: --foo;
+ top: 123px;
+ touch-action: none;
+ transform: scale(-1);
+ transform-box: fill-box;
+ transform-origin: 123px 123px 123px;
+ transform-style: preserve-3d;
+ transition-behavior: allow-discrete;
+ 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;
+ view-timeline: --foo inline 10px;
+ view-transition-name: --foo;
+ visibility: collapse;
+ white-space: pre;
+ white-space-trim: discard-inner;
+ 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>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-03 21:36:58 +0000