FAIL Audio loading attribute default should be eager when not set assert_equals: Audio loading property should be 'eager' when attribute is not set expected (string) "eager" but got (undefined) undefined

<link rel="author" title="Squarespace" href="https://www.squarespace.com/">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<audio id="target"></audio>

const audio = document.getElementById("target");

test(() => {

assert_equals(

audio.loading,

"eager",

"Audio loading property should be 'eager' when attribute is not set"

);

}, "Audio loading attribute default should be eager when not set");

FAIL Audio loading attribute should reflect the loading content attribute assert_equals: Audio loading attribute should be 'lazy' when set to 'lazy' expected (string) "lazy" but got (undefined) undefined

<link rel="author" title="Squarespace" href="https://www.squarespace.com/">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<audio id="target" loading="lazy" controls></audio>

const audio = document.getElementById("target");

test(() => {

assert_equals(

audio.loading,

"lazy",

"Audio loading attribute should be 'lazy' when set to 'lazy'"

);

}, "Audio loading attribute should reflect the loading content attribute");

FAIL Audio loading attribute default value is 'eager' assert_equals: Default value should be 'eager' expected (string) "eager" but got (undefined) undefined

FAIL Audio loading attribute reflects 'lazy' assert_equals: loading='lazy' should reflect as 'lazy' expected (string) "lazy" but got (undefined) undefined

FAIL Audio loading attribute reflects 'eager' assert_equals: loading='eager' should reflect as 'eager' expected (string) "eager" but got (undefined) undefined

FAIL Audio loading attribute with invalid value reflects as 'eager' assert_equals: Invalid value should reflect as 'eager' expected (string) "eager" but got (undefined) undefined

FAIL Audio loading attribute with empty string reflects as 'eager' assert_equals: Empty string should reflect as 'eager' expected (string) "eager" but got (undefined) undefined

FAIL Audio loading attribute is case-insensitive for 'lazy' assert_equals: Uppercase 'LAZY' should reflect as 'lazy' expected (string) "lazy" but got (undefined) undefined

FAIL Audio loading attribute is case-insensitive for 'eager' assert_equals: Uppercase 'EAGER' should reflect as 'eager' expected (string) "eager" but got (undefined) undefined

FAIL Setting audio.loading IDL attribute to 'lazy' assert_equals: Setting IDL to 'lazy' should set content attribute expected "lazy" but got "EAGER"

FAIL Setting audio.loading IDL attribute to 'eager' assert_equals: Setting IDL to 'eager' should set content attribute expected "eager" but got "EAGER"

FAIL Setting audio.loading IDL attribute to invalid value assert_equals: Setting IDL to 'invalid' should set content attribute expected "invalid" but got "EAGER"

<link rel="author" title="Squarespace" href="https://www.squarespace.com/">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<audio id="target"></audio>

const audio = document.getElementById("target");

test(() => {

audio.removeAttribute("loading");

assert_equals(audio.loading, "eager", "Default value should be 'eager'");

}, "Audio loading attribute default value is 'eager'");

test(() => {

audio.setAttribute("loading", "lazy");

assert_equals(audio.loading, "lazy", "loading='lazy' should reflect as 'lazy'");

}, "Audio loading attribute reflects 'lazy'");

test(() => {

audio.setAttribute("loading", "eager");

assert_equals(audio.loading, "eager", "loading='eager' should reflect as 'eager'");

}, "Audio loading attribute reflects 'eager'");

test(() => {

audio.setAttribute("loading", "invalid");

assert_equals(audio.loading, "eager", "Invalid value should reflect as 'eager'");

}, "Audio loading attribute with invalid value reflects as 'eager'");

test(() => {

audio.setAttribute("loading", "");

assert_equals(audio.loading, "eager", "Empty string should reflect as 'eager'");

}, "Audio loading attribute with empty string reflects as 'eager'");

test(() => {

audio.setAttribute("loading", "LAZY");

assert_equals(audio.loading, "lazy", "Uppercase 'LAZY' should reflect as 'lazy'");

}, "Audio loading attribute is case-insensitive for 'lazy'");

test(() => {

audio.setAttribute("loading", "EAGER");

assert_equals(audio.loading, "eager", "Uppercase 'EAGER' should reflect as 'eager'");

}, "Audio loading attribute is case-insensitive for 'eager'");

test(() => {

audio.loading = "lazy";

assert_equals(audio.getAttribute("loading"), "lazy", "Setting IDL to 'lazy' should set content attribute");

assert_equals(audio.loading, "lazy", "IDL should reflect 'lazy'");

}, "Setting audio.loading IDL attribute to 'lazy'");

test(() => {

audio.loading = "eager";

assert_equals(audio.getAttribute("loading"), "eager", "Setting IDL to 'eager' should set content attribute");

assert_equals(audio.loading, "eager", "IDL should reflect 'eager'");

}, "Setting audio.loading IDL attribute to 'eager'");

test(() => {

audio.loading = "invalid";

assert_equals(audio.getAttribute("loading"), "invalid", "Setting IDL to 'invalid' should set content attribute");

assert_equals(audio.loading, "eager", "IDL should reflect 'eager' for invalid content attribute");

}, "Setting audio.loading IDL attribute to invalid value");

Harness Error (FAIL), message = Error: assert_unreached: Audio should not fire loadstart event when not visible in viewport Reached unreachable code

FAIL Audio with loading=lazy and autoplay that is not visible in viewport does not load audio data or autoplay assert_equals: expected 0 but got 4

<link rel="author" title="Squarespace" href="https://www.squarespace.com/">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

.below-viewport {

margin-top: 1000vh;

}

const t = async_test(

"Audio with loading=lazy and autoplay that is not visible in viewport does not load audio data or autoplay"

);

const audio = document.createElement("audio");

audio.loading = "lazy";

audio.src = "/media/sine440.mp3";

audio.className = "below-viewport";

audio.autoplay = true;

audio.controls = true;

audio.addEventListener("loadstart", () => {

assert_unreached("Audio should not fire loadstart event when not visible in viewport");

});

document.body.appendChild(audio);

t.step_timeout(() => {

assert_equals(audio.readyState, HTMLMediaElement.HAVE_NOTHING);

assert_true(audio.paused, "Audio should not autoplay when not visible in viewport");

t.done();

}, 2000);

PASS Audio with loading='eager' loads immediately regardless of viewport position