test/pages/style.focus-within.test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Style focus-within</title>
<style>
body .ally-focus-within {
outline: 1px solid blue;
}
body :focus {
outline: 1px solid red;
}
</style>
</head>
<body>
<h1>Style focus-within</h1>
<input id="before">
<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg" focusable="false">
<a xlink:href="#void" id="svg-link">
<text x="10" y="20" id="svg-link-text">text</text>
</a>
</svg>
<input id="after">
</div>
<script src="../../node_modules/requirejs/require.js"></script>
<script>
require.config({
paths: {
ally: '../../dist/amd',
// shims required by ally.js
'css.escape': '../../node_modules/css.escape/css.escape',
'platform': '../../node_modules/platform/platform'
}
});
require([
'ally/util/platform',
'ally/style/focus-within',
], function(platform, styleFocusWithin) {
window._platform = platform;
styleFocusWithin();
});
</script>
</body>
</html>