diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/html/dom/aria-attribute-reflection.html | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/html/dom/aria-attribute-reflection.html')
-rw-r--r-- | testing/web-platform/tests/html/dom/aria-attribute-reflection.html | 487 |
1 files changed, 487 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/dom/aria-attribute-reflection.html b/testing/web-platform/tests/html/dom/aria-attribute-reflection.html new file mode 100644 index 0000000000..fa5e9ad5c7 --- /dev/null +++ b/testing/web-platform/tests/html/dom/aria-attribute-reflection.html @@ -0,0 +1,487 @@ +<!DOCTYPE HTML> +<meta charset="utf-8" /> +<title>Element Reflection for ARIA properties</title> +<link rel=help href="https://wicg.github.io/aom/spec/aria-reflection.html"> +<link rel="author" title="Meredith Lane" href="meredithl@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<script> +function testNullable(element, jsAttr, contentAttr) { + var originalValue = element[jsAttr]; + assert_false(originalValue === null); + element[jsAttr] = null; + assert_equals(element[jsAttr], null); + assert_false(element.hasAttribute(contentAttr)); + // Setting to undefined results in same state as setting to null. + element[jsAttr] = originalValue; + element[jsAttr] = undefined; + assert_equals(element[jsAttr], null); + assert_false(element.hasAttribute(contentAttr)); +} +</script> + +<div id="role" role="button"></div> +<script> +test(function(t) { + var element = document.getElementById("role"); + assert_equals(element.role, "button"); + element.role = "checkbox"; + assert_equals(element.getAttribute("role"), "checkbox"); + testNullable(element, "role", "role"); +}, "role attribute reflects."); +</script> + +<div id="atomic" aria-atomic="true"></div> +<script> +test(function(t) { + var element = document.getElementById("atomic"); + assert_equals(element.ariaAtomic, "true"); + element.ariaAtomic = "false"; + assert_equals(element.getAttribute("aria-atomic"), "false"); + testNullable(element, "ariaAtomic", "aria-atomic"); +}, "aria-atomic attribute reflects."); +</script> + +<div id="autocomplete" aria-autocomplete="list"></div> +<script> +test(function(t) { + var element = document.getElementById("autocomplete"); + assert_equals(element.ariaAutoComplete, "list"); + element.ariaAutoComplete = "inline"; + assert_equals(element.getAttribute("aria-autocomplete"), "inline"); + testNullable(element, "ariaAutoComplete", "aria-autocomplete"); +}, "aria-autocomplete attribute reflects."); +</script> + +<div id="busy" aria-busy="true"></div> +<script> +test(function(t) { + var element = document.getElementById("busy"); + assert_equals(element.ariaBusy, "true"); + element.ariaBusy = "false"; + assert_equals(element.getAttribute("aria-busy"), "false"); + testNullable(element, "ariaBusy", "aria-busy"); +}, "aria-busy attribute reflects."); +</script> + +<div id="checked" aria-checked="mixed"></div> +<script> +test(function(t) { + var element = document.getElementById("checked"); + assert_equals(element.ariaChecked, "mixed"); + element.ariaChecked = "true"; + assert_equals(element.getAttribute("aria-checked"), "true"); + testNullable(element, "ariaChecked", "aria-checked"); +}, "aria-checked attribute reflects."); +</script> + +<div id="colcount" aria-colcount="5"></div> +<script> +test(function(t) { + var element = document.getElementById("colcount"); + assert_equals(element.ariaColCount, "5"); + element.ariaColCount = "6"; + assert_equals(element.getAttribute("aria-colcount"), "6"); + testNullable(element, "ariaColCount", "aria-colcount"); +}, "aria-colcount attribute reflects."); +</script> + +<div id="colindex" aria-colindex="1"></div> +<script> +test(function(t) { + var element = document.getElementById("colindex"); + assert_equals(element.ariaColIndex, "1"); + element.ariaColIndex = "2"; + assert_equals(element.getAttribute("aria-colindex"), "2"); + testNullable(element, "ariaColIndex", "aria-colindex"); +}, "aria-colindex attribute reflects."); +</script> + +<div id="colspan" aria-colspan="2"></div> +<script> +test(function(t) { + var element = document.getElementById("colspan"); + assert_equals(element.ariaColSpan, "2"); + element.ariaColSpan = "3"; + assert_equals(element.getAttribute("aria-colspan"), "3"); + testNullable(element, "ariaColSpan", "aria-colspan"); +}, "aria-colspan attribute reflects."); +</script> + +<div id="current" aria-current="page"></div> +<script> +test(function(t) { + var element = document.getElementById("current"); + assert_equals(element.ariaCurrent, "page"); + element.ariaCurrent = "step"; + assert_equals(element.getAttribute("aria-current"), "step"); + testNullable(element, "ariaCurrent", "aria-current"); +}, "aria-current attribute reflects."); +</script> + +<div id="disabled" aria-disabled="true"></div> + +<div id="description" aria-description="cold as ice"></div> +<script> +test(function(t) { + var element = document.getElementById("description"); + assert_equals(element.ariaDescription, "cold as ice"); + element.ariaDescription = "hot as fire"; + assert_equals(element.getAttribute("aria-description"), "hot as fire"); + testNullable(element, "ariaDescription", "aria-description"); +}, "aria-description attribute reflects."); +</script> + +<script> +test(function(t) { + var element = document.getElementById("disabled"); + assert_equals(element.ariaDisabled, "true"); + element.ariaDisabled = "false"; + assert_equals(element.getAttribute("aria-disabled"), "false"); + testNullable(element, "ariaDisabled", "aria-disabled"); +}, "aria-disabled attribute reflects."); +</script> + +<div id="expanded" aria-expanded="true"></div> +<script> +test(function(t) { + var element = document.getElementById("expanded"); + assert_equals(element.ariaExpanded, "true"); + element.ariaExpanded = "false"; + assert_equals(element.getAttribute("aria-expanded"), "false"); + testNullable(element, "ariaExpanded", "aria-expanded"); +}, "aria-expanded attribute reflects."); +</script> + +<div id="haspopup" aria-haspopup="menu"></div> +<script> +test(function(t) { + var element = document.getElementById("haspopup"); + assert_equals(element.ariaHasPopup, "menu"); + element.ariaHasPopup = "listbox"; + assert_equals(element.getAttribute("aria-haspopup"), "listbox"); + testNullable(element, "ariaHasPopup", "aria-haspopup"); +}, "aria-haspopup attribute reflects."); +</script> + +<div id="hidden" aria-hidden="true" tabindex="-1"></div> +<script> +test(function(t) { + var element = document.getElementById("hidden"); + assert_equals(element.ariaHidden, "true"); + element.ariaHidden = "false"; + assert_equals(element.getAttribute("aria-hidden"), "false"); + testNullable(element, "ariaHidden", "aria-hidden"); +}, "aria-hidden attribute reflects."); +</script> + +<div id="invalid" aria-invalid="true"></div> +<script> +test(function(t) { + var element = document.getElementById("invalid"); + assert_equals(element.ariaInvalid, "true"); + element.ariaInvalid = "grammar"; + assert_equals(element.getAttribute("aria-invalid"), "grammar"); + testNullable(element, "ariaInvalid", "aria-invalid"); +}, "aria-invalid attribute reflects."); +</script> + +<div id="keyshortcuts" aria-keyshortcuts="x"></div> +<script> +test(function(t) { + var element = document.getElementById("keyshortcuts"); + assert_equals(element.ariaKeyShortcuts, "x"); + element.ariaKeyShortcuts = "y"; + assert_equals(element.getAttribute("aria-keyshortcuts"), "y"); + testNullable(element, "ariaKeyShortcuts", "aria-keyshortcuts"); +}, "aria-keyshortcuts attribute reflects."); +</script> + +<div id="label" aria-label="x"></div> +<script> +test(function(t) { + var element = document.getElementById("label"); + assert_equals(element.ariaLabel, "x"); + element.ariaLabel = "y"; + assert_equals(element.getAttribute("aria-label"), "y"); + testNullable(element, "ariaLabel", "aria-label"); +}, "aria-label attribute reflects."); +</script> + +<div id="level" aria-level="1"></div> +<script> +test(function(t) { + var element = document.getElementById("level"); + assert_equals(element.ariaLevel, "1"); + element.ariaLevel = "2"; + assert_equals(element.getAttribute("aria-level"), "2"); + testNullable(element, "ariaLevel", "aria-level"); +}, "aria-level attribute reflects."); +</script> + +<div id="live" aria-live="polite"></div> +<script> +test(function(t) { + var element = document.getElementById("live"); + assert_equals(element.ariaLive, "polite"); + element.ariaLive = "assertive"; + assert_equals(element.getAttribute("aria-live"), "assertive"); + testNullable(element, "ariaLive", "aria-live"); +}, "aria-live attribute reflects."); +</script> + +<div id="modal" aria-modal="true"></div> +<script> +test(function(t) { + var element = document.getElementById("modal"); + assert_equals(element.ariaModal, "true"); + element.ariaModal = "false"; + assert_equals(element.getAttribute("aria-modal"), "false"); + testNullable(element, "ariaModal", "aria-modal"); +}, "aria-modal attribute reflects."); +</script> + +<div id="multiline" aria-multiline="true"></div> +<script> +test(function(t) { + var element = document.getElementById("multiline"); + assert_equals(element.ariaMultiLine, "true"); + element.ariaMultiLine = "false"; + assert_equals(element.getAttribute("aria-multiline"), "false"); + testNullable(element, "ariaMultiLine", "aria-multiline"); +}, "aria-multiline attribute reflects."); +</script> + +<div id="multiselectable" aria-multiselectable="true"></div> +<script> +test(function(t) { + var element = document.getElementById("multiselectable"); + assert_equals(element.ariaMultiSelectable, "true"); + element.ariaMultiSelectable = "false"; + assert_equals(element.getAttribute("aria-multiselectable"), "false"); + testNullable(element, "ariaMultiSelectable", "aria-multiselectable"); +}, "aria-multiselectable attribute reflects."); +</script> + +<div id="orientation" aria-orientation="vertical"></div> +<script> +test(function(t) { + var element = document.getElementById("orientation"); + assert_equals(element.ariaOrientation, "vertical"); + element.ariaOrientation = "horizontal"; + assert_equals(element.getAttribute("aria-orientation"), "horizontal"); + testNullable(element, "ariaOrientation", "aria-orientation"); +}, "aria-orientation attribute reflects."); +</script> + +<div id="placeholder" aria-placeholder="x"></div> +<script> +test(function(t) { + var element = document.getElementById("placeholder"); + assert_equals(element.ariaPlaceholder, "x"); + element.ariaPlaceholder = "y"; + assert_equals(element.getAttribute("aria-placeholder"), "y"); + testNullable(element, "ariaPlaceholder", "aria-placeholder"); +}, "aria-placeholder attribute reflects."); +</script> + +<div id="posinset" aria-posinset="10"></div> +<script> +test(function(t) { + var element = document.getElementById("posinset"); + assert_equals(element.ariaPosInSet, "10"); + element.ariaPosInSet = "11"; + assert_equals(element.getAttribute("aria-posinset"), "11"); + testNullable(element, "ariaPosInSet", "aria-posinset"); +}, "aria-posinset attribute reflects."); +</script> + +<button id="pressed" aria-pressed="true"></button> + +<script> +test(function(t) { + var element = document.getElementById("pressed"); + assert_equals(element.ariaPressed, "true"); + element.ariaPressed = "false"; + assert_equals(element.getAttribute("aria-pressed"), "false"); + testNullable(element, "ariaPressed", "aria-pressed"); +}, "aria-pressed attribute reflects."); +</script> + +<div id="readonly" aria-readonly="true"></div> +<script> +test(function(t) { + var element = document.getElementById("readonly"); + assert_equals(element.ariaReadOnly, "true"); + element.ariaReadOnly = "false"; + assert_equals(element.getAttribute("aria-readonly"), "false"); + testNullable(element, "ariaReadOnly", "aria-readonly"); +}, "aria-readonly attribute reflects."); +</script> + +<div id="relevant" aria-relevant="text"></div> +<script> +test(function(t) { + var element = document.getElementById("relevant"); + assert_equals(element.ariaRelevant, "text"); + element.ariaRelevant = "removals"; + assert_equals(element.getAttribute("aria-relevant"), "removals"); + testNullable(element, "ariaRelevant", "aria-relevant"); +}, "aria-relevant attribute reflects."); +</script> + +<div id="required" aria-required="true"></div> +<script> +test(function(t) { + var element = document.getElementById("required"); + assert_equals(element.ariaRequired, "true"); + element.ariaRequired = "false"; + assert_equals(element.getAttribute("aria-required"), "false"); + testNullable(element, "ariaRequired", "aria-required"); +}, "aria-required attribute reflects."); +</script> + +<div id="roledescription" aria-roledescription="x"></div> +<script> +test(function(t) { + var element = document.getElementById("roledescription"); + assert_equals(element.ariaRoleDescription, "x"); + element.ariaRoleDescription = "y"; + assert_equals(element.getAttribute("aria-roledescription"), "y"); + testNullable(element, "ariaRoleDescription", "aria-roledescription"); +}, "aria-roledescription attribute reflects."); +</script> + +<div id="rowcount" aria-rowcount="10"></div> +<script> +test(function(t) { + var element = document.getElementById("rowcount"); + assert_equals(element.ariaRowCount, "10"); + element.ariaRowCount = "11"; + assert_equals(element.getAttribute("aria-rowcount"), "11"); + testNullable(element, "ariaRowCount", "aria-rowcount"); +}, "aria-rowcount attribute reflects."); +</script> + +<div id="rowindex" aria-rowindex="1"></div> +<script> +test(function(t) { + var element = document.getElementById("rowindex"); + assert_equals(element.ariaRowIndex, "1"); + element.ariaRowIndex = "2"; + assert_equals(element.getAttribute("aria-rowindex"), "2"); + testNullable(element, "ariaRowIndex", "aria-rowindex"); +}, "aria-rowindex attribute reflects."); +</script> + +<div id="rowspan" aria-rowspan="2"></div> +<script> +test(function(t) { + var element = document.getElementById("rowspan"); + assert_equals(element.ariaRowSpan, "2"); + element.ariaRowSpan = "3"; + assert_equals(element.getAttribute("aria-rowspan"), "3"); + testNullable(element, "ariaRowSpan", "aria-rowspan"); +}, "aria-rowspan attribute reflects."); +</script> + +<div id="selected" aria-selected="true"></div> +<script> +test(function(t) { + var element = document.getElementById("selected"); + assert_equals(element.ariaSelected, "true"); + element.ariaSelected = "false"; + assert_equals(element.getAttribute("aria-selected"), "false"); + testNullable(element, "ariaSelected", "aria-selected"); +}, "aria-selected attribute reflects."); +</script> + +<div id="setsize" aria-setsize="10"></div> +<script> +test(function(t) { + var element = document.getElementById("setsize"); + assert_equals(element.ariaSetSize, "10"); + element.ariaSetSize = "11"; + assert_equals(element.getAttribute("aria-setsize"), "11"); + testNullable(element, "ariaSetSize", "aria-setsize"); +}, "aria-setsize attribute reflects."); +</script> + +<div id="sort" aria-sort="descending"></div> +<script> +test(function(t) { + var element = document.getElementById("sort"); + assert_equals(element.ariaSort, "descending"); + element.ariaSort = "ascending"; + assert_equals(element.getAttribute("aria-sort"), "ascending"); + testNullable(element, "ariaSort", "aria-sort"); +}, "aria-sort attribute reflects."); +</script> + +<div id="valuemax" aria-valuemax="99"></div> +<script> +test(function(t) { + var element = document.getElementById("valuemax"); + assert_equals(element.ariaValueMax, "99"); + element.ariaValueMax = "100"; + assert_equals(element.getAttribute("aria-valuemax"), "100"); + testNullable(element, "ariaValueMax", "aria-valuemax"); +}, "aria-valuemax attribute reflects."); +</script> + +<div id="valuemin" aria-valuemin="3"></div> +<script> +test(function(t) { + var element = document.getElementById("valuemin"); + assert_equals(element.ariaValueMin, "3"); + element.ariaValueMin = "2"; + assert_equals(element.getAttribute("aria-valuemin"), "2"); + testNullable(element, "ariaValueMin", "aria-valuemin"); +}, "aria-valuemin attribute reflects."); +</script> + +<div id="valuenow" aria-valuenow="50"></div> +<script> +test(function(t) { + var element = document.getElementById("valuenow"); + assert_equals(element.ariaValueNow, "50"); + element.ariaValueNow = "51"; + assert_equals(element.getAttribute("aria-valuenow"), "51"); + testNullable(element, "ariaValueNow", "aria-valuenow"); +}, "aria-valuenow attribute reflects."); +</script> + +<div id="valuetext" aria-valuetext="50%"></div> +<script> +test(function(t) { + var element = document.getElementById("valuetext"); + assert_equals(element.ariaValueText, "50%"); + element.ariaValueText = "51%"; + assert_equals(element.getAttribute("aria-valuetext"), "51%"); + testNullable(element, "ariaValueText", "aria-valuetext"); +}, "aria-valuetext attribute reflects."); +</script> + +<div id="braillelabel" aria-braillelabel="x"></div> +<script> +test(function(t) { + var element = document.getElementById("braillelabel"); + assert_equals(element.ariaBrailleLabel, "x"); + element.ariaBrailleLabel = "y"; + assert_equals(element.getAttribute("aria-braillelabel"), "y"); + testNullable(element, "ariaBrailleLabel", "aria-braillelabel"); +}, "aria-braillelabel attribute reflects."); +</script> + +<div id="brailleroledescription" aria-brailleroledescription="x"></div> +<script> +test(function(t) { + var element = document.getElementById("brailleroledescription"); + assert_equals(element.ariaBrailleRoleDescription, "x"); + element.ariaBrailleRoleDescription = "y"; + assert_equals(element.getAttribute("aria-brailleroledescription"), "y"); + testNullable(element, "ariaBrailleRoleDescription", "aria-brailleroledescription"); +}, "aria-brailleroledescription attribute reflects."); +</script> +</html> |