Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-navigation/tentative/if-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>if(navigation)</title>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<style>
@location --r1 {
pattern: url-pattern("/matchme/");
}
@location --r2 {
pattern: url-pattern("should-not-match");
}
@location --r3 {
protocol: "http*";
}
</style>
<div class="tests">
<div id="elm1" style="--match:if(navigation(at:--r1):true; else:false);"></div>
<div id="elm2" style="--match:if(navigation(at:--r2):true; else:false);" nevermatch></div>
<div id="elm3" style="--match:if(not navigation(at:--r3):true; else:false);" inactivematch></div>
<div id="elm4" style="--match:if(navigation(not (at:--r2)):true; else:false);" alwaysmatch></div>
<div id="elm5" style="--match:if(navigation((at:--r2) or (at:--r3)):true; else:false);"></div>
<div id="elm6" style="--match:if(navigation(at:url-pattern('/matchme/')):true; else:false);"></div>
<div id="elm7" style="--match:if(navigation(at:url-pattern('should-not-match')):true; else:false);" nevermatch></div>
<div id="elm8" style="--match:if(navigation((at:url-pattern('should-not-match')) or (at:--r3)):true; else:false);"></div>
<div id="elm9" style="--match:if(navigation((at:url-pattern('should-not-match')) or (at:url-pattern('/matchme/'))):true; else:false);"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
promise_test(async (t) => {
await new Promise(r => window.onload = () => t.step_timeout(r, 0));
let committed = Promise.withResolvers();
navigation.onnavigate = (event) => {
event.intercept({
async handler() {
committed.resolve();
await new Promise(resolve => requestAnimationFrame(resolve));
}
})
};
// No active navigation yet.
for (const elm of document.querySelectorAll(".tests > div")) {
// By default nothing should match, unless the element has an attribute
// saying otherwise.
if (elm.hasAttribute("alwaysmatch")) {
assert_equals(getComputedStyle(elm).getPropertyValue("--match"), "true", `Should always match: ${elm.id}`);
} else if (elm.hasAttribute("inactivematch")) {
assert_equals(getComputedStyle(elm).getPropertyValue("--match"), "true", `Should match when inactive: ${elm.id}`);
} else {
assert_equals(getComputedStyle(elm).getPropertyValue("--match"), "false", `Should not match when inactive: ${elm.id}`);
}
}
// Trigger an active navigation, so that any valid "at" rule will match.
navigation.navigate("/matchme/");
await committed.promise;
for (const elm of document.querySelectorAll(".tests > div")) {
// By default everything should match, unless the element has an attribute
// saying otherwise.
if (elm.hasAttribute("nevermatch")) {
assert_equals(getComputedStyle(elm).getPropertyValue("--match"), "false", `Should never match: ${elm.id}`);
} else if (elm.hasAttribute("inactivematch")) {
assert_equals(getComputedStyle(elm).getPropertyValue("--match"), "false", `Should only match when inactive: ${elm.id}`);
} else {
assert_equals(getComputedStyle(elm).getPropertyValue("--match"), "true", `Should match when active: ${elm.id}`);
}
}
}, "if()");
</script>