Files
sousa-gecko/testing/web-platform/tests/css/css-mixins/functions/function-in-media.html
T
Kevin Babbitt 5b6106a6ae Bug 2053663 [wpt PR 61166] - [css-mixins] Split tests into subdirectories for functions and mixins, a=testonly
Automatic update from web-platform-tests
[css-mixins] Split tests into subdirectories for functions and mixins

No changes to the test files other than updating relative paths.
WEB_FEATURES.yml files were updated to match all files in respective
subdirectories.

Bug: 406935599
Change-Id: I864e1ad0bb36a5945fd9945365933b3697d3f764
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/8061706
Reviewed-by: Alison Maher <almaher@microsoft.com>
Commit-Queue: Kevin Babbitt <kbabbitt@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1659001}

--

wpt-commits: 5f6046734ece0649fa6f3ad2915ea23ba4d3674a
wpt-pr: 61166
2026-07-12 11:57:58 +00:00

45 lines
1.3 KiB
HTML

<!DOCTYPE html>
<title>Custom Functions: @function inside @media</title>
<link rel="help" href="https://drafts.csswg.org/css-mixins-1">
<link rel="help" href="https://drafts.csswg.org/css-conditional-3/#at-media">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
iframe {
width: 50px;
height: 50px;
}
</style>
<iframe id="iframe" srcdoc="
<div id=target></div>
<style>
@media (width >= 50px) {
@function --f() { result: 50; }
}
@media (width >= 100px) {
@function --f() { result: 100; }
}
#target {
--actual: --f();
}
</style>
"></iframe>
<script>
function waitForLoad(w) {
return new Promise(resolve => w.addEventListener('load', resolve));
}
promise_test(async () => {
await waitForLoad(window);
const target = iframe.contentDocument.querySelector('#target');
let actualValue = () => getComputedStyle(target).getPropertyValue('--actual');
assert_equals(actualValue(), '50', '--actual before resize');
iframe.style.width = '100px';
assert_equals(actualValue(), '100', '--actual after resize');
iframe.style.width = '';
assert_equals(actualValue(), '50', '--actual after resizing back to original');
});
</script>