all-prop-revert-layer.html (12806B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Cascade: "all: revert-layer"</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://www.w3.org/TR/css-cascade-5/#revert-layer"> 6 <meta name="assert" content="Checks that adding 'all: revert-layer' on the last layer has no effect."> 7 <style> 8 /* Set properties to a value different than the initial one. */ 9 #nothing { 10 accent-color: #123; 11 align-content: baseline; 12 align-items: baseline; 13 align-self: baseline; 14 alignment-baseline: central; 15 alt: "a"; 16 animation-composition: add; 17 animation-delay: 123s; 18 animation-direction: reverse; 19 animation-duration: 123s; 20 animation-fill-mode: both; 21 animation-iteration-count: 123; 22 animation-name: \.; 23 animation-play-state: paused; 24 animation-range: 10% 20%; 25 animation-timeline: none; 26 animation-timing-function: linear; 27 app-region: drag; 28 appearance: auto; 29 aspect-ratio: 3 / 4; 30 backdrop-filter: invert(1); 31 backface-visibility: hidden; 32 background-attachment: fixed; 33 background-blend-mode: overlay; 34 background-clip: content-box; 35 background-color: #123; 36 background-image: url("#ref"); 37 background-origin: border-box; 38 background-position: 123px; 39 background-repeat: round; 40 background-size: 123px; 41 baseline-shift: 123px; 42 baseline-source: first; 43 block-size: 123px; 44 border-block-end: 123px dashed #123; 45 border-block-start: 123px dashed #123; 46 border-bottom: 123px dashed #123; 47 border-collapse: collapse; 48 border-end-end-radius: 123px; 49 border-end-start-radius: 123px; 50 border-image-outset: 123; 51 border-image-repeat: round; 52 border-image-slice: 123; 53 border-image-source: url("#ref"); 54 border-image-width: 123px; 55 border-inline-end: 123px dashed #123; 56 border-inline-start: 123px dashed #123; 57 border-left: 123px dashed #123; 58 border-radius: 123px; 59 border-right: 123px dashed #123; 60 border-start-end-radius: 123px; 61 border-start-start-radius: 123px; 62 border-spacing: 123px; 63 border-top: 123px dashed #123; 64 bottom: 123px; 65 box-decoration-break: clone; 66 box-shadow: #123 123px 123px 123px 123px; 67 box-sizing: border-box; 68 break-after: avoid; 69 break-before: avoid; 70 break-inside: avoid; 71 buffered-rendering: static; 72 caption-side: bottom; 73 caret-color: #123; 74 clear: both; 75 clip: rect(123px, 123px, 123px, 123px); 76 clip-path: url("#ref"); 77 clip-rule: evenodd; 78 color: #123; 79 color-interpolation: auto; 80 color-interpolation-filters: auto; 81 color-rendering: optimizespeed; 82 color-scheme: dark; 83 column-count: 123; 84 column-fill: auto; 85 column-gap: 123px; 86 column-rule-color: #123; 87 column-rule-style: dashed; 88 column-rule-width: 123px; 89 column-span: all; 90 column-width: 123px; 91 contain: size; 92 contain-intrinsic-block-size: 123px; 93 contain-intrinsic-inline-size: 123px; 94 contain-intrinsic-size: 123px 123px; 95 container-name: foo; 96 container-type: size; 97 content: "b"; 98 content-visibility: auto; 99 counter-increment: add 123; 100 counter-reset: add 123; 101 counter-set: add 123; 102 cursor: none; 103 cx: 123px; 104 cy: 123px; 105 d: path("M 1 1"); 106 direction: rtl; 107 display: flow-root; 108 dominant-baseline: middle; 109 empty-cells: hide; 110 fill: #123; 111 fill-opacity: 0.123; 112 fill-rule: evenodd; 113 filter: url("#ref"); 114 flex-basis: 123px; 115 flex-direction: column; 116 flex-grow: 123; 117 flex-shrink: 123; 118 flex-wrap: wrap; 119 float: right; 120 flood-color: #123; 121 flood-opacity: 0.123; 122 font-family: "c"; 123 font-feature-settings: "smcp"; 124 font-kerning: none; 125 font-language-override: "d"; 126 font-optical-sizing: none; 127 font-palette: dark; 128 font-size: 123px; 129 font-size-adjust: 123; 130 font-stretch: 123%; 131 font-style: italic; 132 font-synthesis: none; 133 font-variant-alternates: historical-forms; 134 font-variant-caps: small-caps; 135 font-variant-east-asian: full-width; 136 font-variant-emoji: emoji; 137 font-variant-ligatures: none; 138 font-variant-numeric: tabular-nums; 139 font-variant-position: super; 140 font-variation-settings: "smcp" 1; 141 font-weight: 123; 142 forced-color-adjust: none; 143 glyph-orientation-horizontal: 123deg; 144 glyph-orientation-vertical: 123deg; 145 grid-auto-columns: 123px; 146 grid-auto-flow: column; 147 grid-auto-rows: 123px; 148 grid-column-end: 123; 149 grid-column-start: 123; 150 grid-row-end: 123; 151 grid-row-start: 123; 152 grid-template-areas: "."; 153 grid-template-columns: 123fr; 154 grid-template-rows: 123fr; 155 hanging-punctuation: first; 156 height: 123px; 157 hyphenate-character: "e"; 158 hyphenate-limit-chars: 5; 159 hyphens: auto; 160 image-orientation: none; 161 image-rendering: pixelated; 162 ime-mode: normal; 163 initial-letter: 123; 164 inline-size: 123px; 165 input-security: none; 166 inset-block-end: 123px; 167 inset-block-start: 123px; 168 inset-inline-end: 123px; 169 inset-inline-start: 123px; 170 isolation: isolate; 171 justify-content: center; 172 justify-items: baseline; 173 justify-self: baseline; 174 kerning: 123px; 175 left: 123px; 176 letter-spacing: 123px; 177 lighting-color: #123; 178 line-break: anywhere; 179 line-height: 123px; 180 line-height-step: 123px; 181 list-style-image: url("#ref"); 182 list-style-position: inside; 183 list-style-type: square; 184 margin-block-end: 123px; 185 margin-block-start: 123px; 186 margin-bottom: 123px; 187 margin-inline-end: 123px; 188 margin-inline-start: 123px; 189 margin-left: 123px; 190 margin-right: 123px; 191 margin-top: 123px; 192 margin-trim: block; 193 marker-end: url("#ref"); 194 marker-mid: url("#ref"); 195 marker-start: url("#ref"); 196 mask-clip: content-box; 197 mask-composite: exclude; 198 mask-image: url("#ref"); 199 mask-mode: alpha; 200 mask-origin: content-box; 201 mask-position-x: 123px; 202 mask-position-y: 123px; 203 mask-repeat: round; 204 mask-size: 123px; 205 mask-type: alpha; 206 masonry-auto-flow: ordered; 207 math-depth: 123; 208 math-shift: compact; 209 math-style: compact; 210 max-block-size: 123px; 211 max-height: 123px; 212 max-inline-size: 123px; 213 max-width: 123px; 214 min-block-size: 123px; 215 min-height: 123px; 216 min-inline-size: 123px; 217 min-width: 123px; 218 mix-blend-mode: overlay; 219 object-fit: contain; 220 object-overflow: visible; 221 object-position: 123px 123%; 222 object-view-box: inset(123px); 223 offset-anchor: 123px 123%; 224 offset-distance: 123px; 225 offset-path: path("M 1 1"); 226 offset-position: 123px; 227 offset-rotate: 123deg; 228 opacity: 0.123; 229 order: 123; 230 orphans: 123; 231 outline-color: #123; 232 outline-offset: 123px; 233 outline-style: auto; 234 outline-width: 123px; 235 overflow-anchor: none; 236 overflow-block: auto; 237 overflow-clip-margin: 123px; 238 overflow-inline: hidden; 239 overflow-wrap: anywhere; 240 overflow-x: auto; 241 overflow-y: hidden; 242 overscroll-behavior-block: contain; 243 overscroll-behavior-inline: contain; 244 overscroll-behavior-x: contain; 245 overscroll-behavior-y: contain; 246 padding-block-end: 123px; 247 padding-block-start: 123px; 248 padding-bottom: 123px; 249 padding-inline-end: 123px; 250 padding-inline-start: 123px; 251 padding-left: 123px; 252 padding-right: 123px; 253 padding-top: 123px; 254 page: page; 255 paint-order: fill; 256 perspective: 123px; 257 perspective-origin: 123px 123%; 258 pointer-events: all; 259 position: relative; 260 print-color-adjust: exact; 261 quotes: none; 262 r: 123px; 263 resize: both; 264 right: 123px; 265 rotate: 123deg; 266 row-gap: 123px; 267 ruby-align: center; 268 ruby-position: under; 269 rx: 123px; 270 ry: 123px; 271 scale: 123; 272 scroll-behavior: smooth; 273 scroll-margin-block-end: 123px; 274 scroll-margin-block-start: 123px; 275 scroll-margin-bottom: 123px; 276 scroll-margin-inline-end: 123px; 277 scroll-margin-inline-start: 123px; 278 scroll-margin-left: 123px; 279 scroll-margin-right: 123px; 280 scroll-margin-top: 123px; 281 scroll-padding-block-end: 123px; 282 scroll-padding-block-start: 123px; 283 scroll-padding-bottom: 123px; 284 scroll-padding-inline-end: 123px; 285 scroll-padding-inline-start: 123px; 286 scroll-padding-left: 123px; 287 scroll-padding-right: 123px; 288 scroll-padding-top: 123px; 289 scroll-snap-align: center; 290 scroll-snap-stop: always; 291 scroll-snap-type: both; 292 scroll-timeline: --foo inline; 293 scrollbar-color: #123 #123; 294 scrollbar-gutter: stable; 295 scrollbar-width: none; 296 shape-image-threshold: 123; 297 shape-margin: 123px; 298 shape-outside: border-box; 299 shape-rendering: optimizespeed; 300 speak: spell-out; 301 speak-as: spell-out; 302 stop-color: #123; 303 stop-opacity: 0.123; 304 stroke: #123; 305 stroke-color: #123; 306 stroke-dasharray: 123px; 307 stroke-dashoffset: 123px; 308 stroke-linecap: round; 309 stroke-linejoin: round; 310 stroke-miterlimit: 123; 311 stroke-opacity: 0.123; 312 stroke-width: 123px; 313 tab-size: 123; 314 table-layout: fixed; 315 text-align: center; 316 text-align-last: center; 317 text-anchor: middle; 318 text-combine-upright: all; 319 text-decoration-color: #123; 320 text-decoration-line: underline; 321 text-decoration-skip-ink: none; 322 text-decoration-style: dashed; 323 text-decoration-thickness: 123px; 324 text-emphasis-color: #123; 325 text-emphasis-position: under right; 326 text-emphasis-style: dot; 327 text-indent: 123px; 328 text-justify: none; 329 text-orientation: sideways; 330 text-overflow: ellipsis; 331 text-rendering: optimizespeed; 332 text-shadow: #123 123px 123px 123px; 333 text-size-adjust: none; 334 text-transform: lowercase; 335 text-underline-offset: 123px; 336 text-underline-position: under; 337 text-wrap-style: balance; 338 timeline-scope: --foo; 339 top: 123px; 340 touch-action: none; 341 transform: scale(-1); 342 transform-box: fill-box; 343 transform-origin: 123px 123px 123px; 344 transform-style: preserve-3d; 345 transition-behavior: allow-discrete; 346 transition-delay: 123s; 347 transition-duration: 123s; 348 transition-property: add; 349 transition-timing-function: linear; 350 translate: 123px; 351 unicode-bidi: plaintext; 352 user-select: all; 353 vector-effect: non-scaling-stroke; 354 vertical-align: 123px; 355 view-timeline: --foo inline 10px; 356 view-transition-name: --foo; 357 visibility: collapse; 358 white-space: pre; 359 white-space-trim: discard-inner; 360 widows: 123; 361 width: 123px; 362 will-change: height; 363 word-break: break-word; 364 word-spacing: 123px; 365 word-wrap: break-word; 366 writing-mode: vertical-lr; 367 x: 123px; 368 y: 123px; 369 z-index: 123; 370 zoom: 123; 371 } 372 373 @layer layer1 { 374 /* Reset properties to their initial value */ 375 #target { 376 all: initial; 377 } 378 } 379 380 @layer layer2 { 381 /* This will be populated with properties set to a non-initial value */ 382 #target {} 383 } 384 385 @layer layer3 { 386 /* This should roll back to the values from the previous layer */ 387 #target.rollback { 388 all: revert-layer; 389 } 390 } 391 </style> 392 393 <div id="log"></div> 394 395 <!-- This custom element is unlikely to get important UA styles --> 396 <foo-bar id="target"></foo-bar> 397 398 <script src="/resources/testharness.js"></script> 399 <script src="/resources/testharnessreport.js"></script> 400 <script> 401 const { sheet } = document.querySelector("style"); 402 const nonInitialStyle = sheet.cssRules[0].style; 403 const layer2Style = sheet.cssRules[2].cssRules[0].style; 404 405 const target = document.getElementById("target"); 406 const cs = getComputedStyle(target); 407 408 // Some properties can be forced to compute to their initial value 409 // unless another property is set to a certain value. 410 function prerequisites(property) { 411 switch (property) { 412 case "border-block-end-width": 413 case "border-block-start-width": 414 case "border-bottom-width": 415 case "border-inline-end-width": 416 case "border-inline-start-width": 417 case "border-left-width": 418 case "border-right-width": 419 case "border-top-width": 420 return "border-style: solid"; 421 case "column-rule-width": 422 return "column-rule-style: solid"; 423 case "outline-width": 424 return "outline-style: solid"; 425 case "rotate": 426 case "scale": 427 case "transform": 428 case "transform-style": 429 case "translate": 430 return "display: block"; 431 default: 432 return ""; 433 } 434 } 435 436 const initialValues = Object.create(null); 437 for (let property of cs) { 438 if (!property.startsWith("-")) { 439 initialValues[property] = cs.getPropertyValue(property); 440 } 441 } 442 443 for (let property in initialValues) { 444 // Skip property if the stylesheet above doesn't provide a non-initial value. 445 // This is to avoid having to update the test every time a new CSS property is added. 446 const nonInitialValue = nonInitialStyle.getPropertyValue(property); 447 if (nonInitialValue === "") { 448 continue; 449 } 450 451 test(function() { 452 const initialValue = initialValues[property]; 453 assert_not_equals(initialValue, "", "Should have the initial value."); 454 455 this.add_cleanup(() => { 456 layer2Style.cssText = ""; 457 target.classList.remove("rollback"); 458 }); 459 460 layer2Style.cssText = prerequisites(property); 461 layer2Style.setProperty(property, nonInitialValue); 462 const changedValue = cs.getPropertyValue(property); 463 assert_not_equals(changedValue, initialValue, "Should get a different computed value."); 464 465 target.classList.add("rollback"); 466 const revertedValue = cs.getPropertyValue(property); 467 assert_equals(revertedValue, changedValue, "Layer 3 should rollback to layer 2."); 468 }, property); 469 } 470 </script>