Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

<!DOCTYPE html>
<title>@navigation with url()</title>
<style>
@navigation (at: url("/target/foo/")) {
#elm {
--at-foo: matched;
}
}
@navigation (from: url("/target/foo/")) {
#elm {
--from-foo: matched;
}
}
@navigation (to: url("/target/foo/")) {
#elm {
--to-foo: matched;
}
}
@navigation (at: url("/target/bar/")) {
#elm {
--at-bar: matched;
}
}
@navigation (from: url("/target/bar/")) {
#elm {
--from-bar: matched;
}
}
@navigation (to: url("/target/bar/")) {
#elm {
--to-bar: matched;
}
}
@navigation (between: url("/target/bar/") and url("/target/foo/")) {
#elm {
--between: matched;
}
}
</style>
<span id="elm"></span>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/test-navigation.js"></script>
<script>
promise_test(async (t) => {
await new Promise(r => window.onload = () => t.step_timeout(r, 0));
const match_params = [
[elm, "--at-foo"],
[elm, "--from-foo"],
[elm, "--to-foo"],
[elm, "--at-bar"],
[elm, "--from-bar"],
[elm, "--to-bar"],
[elm, "--between"],
];
// onnavigate committed
// foo bar foo bar
// A F T A F T B A F T A F T B
await test_navigation(t, "nav1", ()=> { navigation.navigate("/target/foo/"); }, [0,0,1, 0,0,0, 0], [1,0,1, 0,0,0, 0], match_params);
await test_navigation(t, "nav2", ()=> { navigation.navigate("/target/bar/"); }, [1,1,0, 0,0,1, 1], [0,1,0, 1,0,1, 1], match_params);
await test_navigation(t, "nav3", ()=> { navigation.back(); }, [0,0,1, 1,1,0, 1], [1,0,1, 0,1,0, 1], match_params);
}, "Navigate between URLs");
</script>