mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-10-27 18:40:00 +00:00
6f5d0de5e7
This change adds green and red pass/fail emoji indicators to an in-tree test — to make it easier to manually scan through the test results and quickly see which cases are passing, and which are failing.
433 lines
20 KiB
HTML
433 lines
20 KiB
HTML
<!DOCTYPE html><meta charset=utf-8>
|
|
<script src="include.js"></script>
|
|
<script>
|
|
function run_test(callback, description) {
|
|
println(`Testing: ${description}`);
|
|
callback();
|
|
}
|
|
function assert_false(expression) {
|
|
if (expression) {
|
|
println(" ❌ FAIL: Expected false but got true.");
|
|
}
|
|
}
|
|
function assert_equals(a, b) {
|
|
if (a == b) {
|
|
println(` ✅ PASS: ${a} is equal to ${b} as expected.`);
|
|
} else {
|
|
println(` ❌ FAIL: ${a} is not equal to ${b}.`);
|
|
}
|
|
}
|
|
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>
|
|
<div id="atomic" aria-atomic="true"></div>
|
|
<div id="autocomplete" aria-autocomplete="list"></div>
|
|
<div id="braillelabel" aria-braillelabel="x"></div>
|
|
<div id="brailleroledescription" aria-brailleroledescription="x"></div>
|
|
<div id="busy" aria-busy="true"></div>
|
|
<div id="checked" aria-checked="mixed"></div>
|
|
<div id="colcount" aria-colcount="5"></div>
|
|
<div id="colindex" aria-colindex="1"></div>
|
|
<div id="colindextext" aria-colindextext="x"></div>
|
|
<div id="colspan" aria-colspan="2"></div>
|
|
<div id="current" aria-current="page"></div>
|
|
<div id="description" aria-description="cold as ice"></div>
|
|
<div id="disabled" aria-disabled="true"></div>
|
|
<div id="expanded" aria-expanded="true"></div>
|
|
<div id="haspopup" aria-haspopup="menu"></div>
|
|
<div id="hidden" aria-hidden="true" tabindex="-1"></div>
|
|
<div id="invalid" aria-invalid="true"></div>
|
|
<div id="keyshortcuts" aria-keyshortcuts="x"></div>
|
|
<div id="label" aria-label="x"></div>
|
|
<div id="level" aria-level="1"></div>
|
|
<div id="live" aria-live="polite"></div>
|
|
<div id="modal" aria-modal="true"></div>
|
|
<div id="multiline" aria-multiline="true"></div>
|
|
<div id="multiselectable" aria-multiselectable="true"></div>
|
|
<div id="orientation" aria-orientation="vertical"></div>
|
|
<div id="placeholder" aria-placeholder="x"></div>
|
|
<div id="posinset" aria-posinset="10"></div>
|
|
<button id="pressed" aria-pressed="true" style="display: none"></button>
|
|
<div id="readonly" aria-readonly="true"></div>
|
|
<div id="relevant" aria-relevant="text"></div>
|
|
<div id="required" aria-required="true"></div>
|
|
<div id="roledescription" aria-roledescription="x"></div>
|
|
<div id="rowcount" aria-rowcount="10"></div>
|
|
<div id="rowindex" aria-rowindex="1"></div>
|
|
<div id="rowindextext" aria-rowindextext="x"></div>
|
|
<div id="rowspan" aria-rowspan="2"></div>
|
|
<div id="selected" aria-selected="true"></div>
|
|
<div id="setsize" aria-setsize="10"></div>
|
|
<div id="sort" aria-sort="descending"></div>
|
|
<div id="valuemax" aria-valuemax="99"></div>
|
|
<div id="valuemin" aria-valuemin="3"></div>
|
|
<div id="valuenow" aria-valuenow="50"></div>
|
|
<div id="valuetext" aria-valuetext="50%"></div>
|
|
<script>
|
|
test(() => {
|
|
println("Element Reflection for ARIA properties");
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_test(function(t) {
|
|
var element = document.getElementById("colindextext");
|
|
assert_equals(element.ariaColIndexText, "x");
|
|
element.ariaColIndexText = "y";
|
|
assert_equals(element.getAttribute("aria-colindextext"), "y");
|
|
testNullable(element, "ariaColIndexText", "aria-colindextext");
|
|
}, "aria-colindextext attribute reflects.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_test(function(t) {
|
|
var element = document.getElementById("rowindextext");
|
|
assert_equals(element.ariaRowIndexText, "x");
|
|
element.ariaRowIndexText = "y";
|
|
assert_equals(element.getAttribute("aria-rowindextext"), "y");
|
|
testNullable(element, "ariaRowIndexText", "aria-rowindextext");
|
|
}, "aria-rowindextext attribute reflects.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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.");
|
|
|
|
run_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>
|