diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-cascade/presentational-hints-rollback.html | |
| parent | Initial commit. (diff) | |
| download | firefox-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/presentational-hints-rollback.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-cascade/presentational-hints-rollback.html | 125 |
1 files changed, 125 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-cascade/presentational-hints-rollback.html b/testing/web-platform/tests/css/css-cascade/presentational-hints-rollback.html new file mode 100644 index 0000000000..8178daf60c --- /dev/null +++ b/testing/web-platform/tests/css/css-cascade/presentational-hints-rollback.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Cascade: rolling back the cascade with presentation hints</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-cascade-5/#preshint"> +<link rel="help" href="https://www.w3.org/TR/css-cascade-5/#default"> +<link rel="help" href="https://www.w3.org/TR/css-cascade-5/#revert-layer"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/embedded-content-other.html#dimension-attributes"> +<meta name="assert" content="Checks that 'revert' considers presentational hints as part of the author origin, + and 'revert-layer' considers them an independent origin between the user origin and the author origin."> + +<style> +@layer { + .revert-1 { + width: revert; + height: revert; + } + .revert-layer-1 { + width: revert-layer; + height: revert-layer; + } +} + +.revert-2 { + width: revert; + height: revert; +} +.revert-layer-2 { + width: revert-layer; + height: revert-layer; +} + +.revert-3 { + animation: revert-3 paused 2s -1s; +} +.revert-layer-3 { + animation: revert-layer-3 paused 2s -1s; +} +@keyframes revert-3 { + from, to { + width: revert; + height: revert; + } +} +@keyframes revert-layer-3 { + from, to { + width: revert-layer; + height: revert-layer; + } +} +</style> + +<div id="log"></div> + +<div id="tests"> + <!-- 'revert' considers presentational hints as part of the author origin, so it rolls back to user origin. + The images should then get an 'auto' size, which will use the natural size of the resource. --> + <img class="revert-1" src="/css/support/60x60-green.png" + width="44" data-expected-client-width="60" + height="33" data-expected-client-height="60"> + <img class="revert-2" src="/css/support/60x60-green.png" + width="44" data-expected-client-width="60" + height="33" data-expected-client-height="60"> + <img class="revert-3" src="/css/support/60x60-green.png" + width="44" data-expected-client-width="60" + height="33" data-expected-client-height="60"> + <img style="width: revert; height: revert" src="/css/support/60x60-green.png" + width="44" data-expected-client-width="60" + height="33" data-expected-client-height="60"> + + <!-- 'revert-layer' considers presentational hints as an independent origin, so it rolls back to them. + The images should then get size specified in the attributes. --> + <img class="revert-layer-1" src="/css/support/60x60-green.png" + width="44" data-expected-client-width="44" + height="33" data-expected-client-height="33"> + <img class="revert-layer-2" src="/css/support/60x60-green.png" + width="44" data-expected-client-width="44" + height="33" data-expected-client-height="33"> + <img class="revert-layer-3" src="/css/support/60x60-green.png" + width="44" data-expected-client-width="44" + height="33" data-expected-client-height="33"> + <img style="width: revert-layer; height: revert-layer" src="/css/support/60x60-green.png" + width="44" data-expected-client-width="44" + height="33" data-expected-client-height="33"> + + <!-- 'revert' considers presentational hints as part of the author origin, so it rolls back to user origin. + The iframes should then get an 'auto' size, which will default to 300x150. --> + <iframe class="revert-1" src="/css/support/60x60-green.png" + width="44" data-expected-client-width="300" + height="33" data-expected-client-height="150"></iframe> + <iframe class="revert-2" src="/css/support/60x60-green.png" + width="44" data-expected-client-width="300" + height="33" data-expected-client-height="150"></iframe> + <iframe class="revert-3" src="/css/support/60x60-green.png" + width="44" data-expected-client-width="300" + height="33" data-expected-client-height="150"></iframe> + <iframe style="width: revert; height: revert" src="/css/support/60x60-green.png" + width="44" data-expected-client-width="300" + height="33" data-expected-client-height="150"></iframe> + + <!-- 'revert-layer' considers presentational hints as an independent origin, so it rolls back to them. + The iframes should then get size specified in the attributes. --> + <iframe class="revert-layer-1" src="/css/support/60x60-green.png" + width="44" data-expected-client-width="44" + height="33" data-expected-client-height="33"></iframe> + <iframe class="revert-layer-2" src="/css/support/60x60-green.png" + width="44" data-expected-client-width="44" + height="33" data-expected-client-height="33"></iframe> + <iframe class="revert-layer-3" src="/css/support/60x60-green.png" + width="44" data-expected-client-width="44" + height="33" data-expected-client-height="33"></iframe> + <iframe style="width: revert-layer; height: revert-layer" src="/css/support/60x60-green.png" + width="44" data-expected-client-width="44" + height="33" data-expected-client-height="33"></iframe> +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +addEventListener("load", function() { + checkLayout("#tests > *", false); + done(); +}, {once: true}); +</script> |