<!DOCTYPE HTML>
<script src="../resources/gc.js"></script>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<!--
Accessibility Object Model
Explainer: https://github.com/WICG/aom/blob/gh-pages/explainer.md
Spec: https://wicg.github.io/aom/spec/
-->
<div id="aria-atomic" aria-live="polite" aria-atomic="true">POD</div>
<div id="alert-atomic" role="alert">Achtung!</div>
<script>
test(function(t) {
assert_true(internals.runtimeFlags.accessibilityObjectModelEnabled);
}, "Make sure that Accessibility Object Model is enabled");
promise_test(async function(t) {
// atomic attribute is implicitly set for role=alert.
var divElement = document.getElementById("aria-atomic");
var alertElement = document.getElementById("alert-atomic");
var divCaxNode = await window.getComputedAccessibleNode(divElement);
var alertCaxNode = await window.getComputedAccessibleNode(alertElement);
assert_equals(divCaxNode.atomic, true);
assert_equals(alertCaxNode.atomic, true);
}, "ComputedAccessibleNode.atomic.");
</script>
<button id="disabled-native" disabled>Can't click me.</button>
<div id="aria-disabled" aria-disabled="true">Nor me.</div>
<script>
promise_test(async function(t) {
var buttonElement = document.getElementById("disabled-native");
var divElement = document.getElementById("aria-disabled");
var buttonCaxNode = await window.getComputedAccessibleNode(buttonElement);
var divCaxNode = await window.getComputedAccessibleNode(divElement);
assert_equals(buttonCaxNode.disabled, true);
assert_equals(divCaxNode.disabled, true);
}, "ComputedAccessibleNode.disabled");
</script>
<form action="/action_page.php">
<input id="native-readonly" type="text" name="country" value="Norway" readonly><br>
<div id="aria-readonly" role="checkbox" aria-checked="true" aria-readonly="true"></div>
<input id="submit" type="submit" value="Submit">
</form>
<script>
promise_test(async function(t) {
var readOnlyElement = document.getElementById("native-readonly");
var ariaReadOnlyElement = document.getElementById("aria-readonly");
var submitElement = document.getElementById("submit");
var readOnlyCaxNode = await window.getComputedAccessibleNode(readOnlyElement);
var ariaReadOnlyCaxNode = await window.getComputedAccessibleNode(ariaReadOnlyElement);
var submitCaxNode = await window.getComputedAccessibleNode(submitElement);
assert_equals(readOnlyCaxNode.readOnly, true);
assert_equals(ariaReadOnlyCaxNode.readOnly, true);
assert_equals(submitCaxNode.readOnly, false);
}, "ComputedAccessibleNode.readOnly");
</script>
<form>
<input id="native-required" type="text" required><br>
<div id="aria-required" type="text" aria-required="true"></div>
<div id="optional" type="text" aria-required="false"></div>
</form>
<script>
promise_test(async function(t) {
var nativeRequired = document.getElementById("native-required");
var ariaRequired = document.getElementById("aria-required");
var optional = document.getElementById("optional");
var nativeCaxNode = await window.getComputedAccessibleNode(nativeRequired);
var ariaCaxNode = await window.getComputedAccessibleNode(ariaRequired);
var optionalCaxNode = await window.getComputedAccessibleNode(optional);
assert_equals(nativeCaxNode.required, true);
assert_equals(ariaCaxNode.required, true);
assert_equals(optionalCaxNode.required, false);
}, "ComputedAccessibleNode.required");
</script>