diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 389c9a0e18d8756..f9a1414e8aed51f 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -37,6 +37,9 @@ # MathML /files/en-us/web/mathml/ @mdn/content-mathml +# MDN Firefox Release Notes +/files/en-us/mozilla/firefox @mdn/core-yari-content + # ============================= CONTROL FILES ============================= # # The CODEOWNERS file must end with these matches: Any pull request changing # one or more of these files should be escalated to the owners specified here. diff --git a/.github/workflows/pr-check-lint_content.yml b/.github/workflows/pr-check-lint_content.yml index 20f05218aa8a439..f11f450a8b97a82 100644 --- a/.github/workflows/pr-check-lint_content.yml +++ b/.github/workflows/pr-check-lint_content.yml @@ -130,6 +130,7 @@ jobs: -name="mdn-linter" \ -f=diff \ -f.diff.strip=1 \ + -filter-mode=diff_context \ -reporter=github-pr-review < "${TMPFILE}" - name: Add reviews for markdownlint errors diff --git a/.vscode/project-words.txt b/.vscode/project-words.txt index 9d083c5af289fd8..e297fc75815e594 100644 --- a/.vscode/project-words.txt +++ b/.vscode/project-words.txt @@ -60,6 +60,7 @@ oklch Paciello Pinia prophoto +reprioritize rgba ripgrep rustc diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index ac26bee10f8b19f..a6d009ddd16ab02 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -7753,7 +7753,7 @@ /en-US/docs/Web/API/CanvasRenderingContext2D.rotate /en-US/docs/Web/API/CanvasRenderingContext2D/rotate /en-US/docs/Web/API/CanvasRenderingContext2D.save /en-US/docs/Web/API/CanvasRenderingContext2D/save /en-US/docs/Web/API/CanvasRenderingContext2D.scale /en-US/docs/Web/API/CanvasRenderingContext2D/scale -/en-US/docs/Web/API/CanvasRenderingContext2D.scrollPathIntoView /en-US/docs/Web/API/CanvasRenderingContext2D/scrollPathIntoView +/en-US/docs/Web/API/CanvasRenderingContext2D.scrollPathIntoView /en-US/docs/Web/API/CanvasRenderingContext2D /en-US/docs/Web/API/CanvasRenderingContext2D.setLineDash /en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash /en-US/docs/Web/API/CanvasRenderingContext2D.setTransform /en-US/docs/Web/API/CanvasRenderingContext2D/setTransform /en-US/docs/Web/API/CanvasRenderingContext2D.shadowBlur /en-US/docs/Web/API/CanvasRenderingContext2D/shadowBlur @@ -7777,6 +7777,7 @@ /en-US/docs/Web/API/CanvasRenderingContext2D/mozDashOffset /en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset /en-US/docs/Web/API/CanvasRenderingContext2D/mozImageSmoothingEnabled /en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled /en-US/docs/Web/API/CanvasRenderingContext2D/mozTextStyle /en-US/docs/Web/API/CanvasRenderingContext2D/font +/en-US/docs/Web/API/CanvasRenderingContext2D/scrollPathIntoView /en-US/docs/Web/API/CanvasRenderingContext2D /en-US/docs/Web/API/Canvas_API/Drawing_graphics_with_canvas /en-US/docs/Web/API/Canvas_API/Tutorial /en-US/docs/Web/API/Canvas_API/Tutorial/Compositing/Example /en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation /en-US/docs/Web/API/CharacterData.previousElementSibling /en-US/docs/Web/API/CharacterData/previousElementSibling @@ -8383,8 +8384,8 @@ /en-US/docs/Web/API/GlobalEventHandlers/ontransitioncancel /en-US/docs/Web/API/Element/transitioncancel_event /en-US/docs/Web/API/GlobalEventHandlers/ontransitionend /en-US/docs/Web/API/Element/transitionend_event /en-US/docs/Web/API/GlobalEventHandlers/onwheel /en-US/docs/Web/API/Element/wheel_event -/en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch() /en-US/docs/Web/API/fetch -/en-US/docs/Web/API/GlobalFetch/fetch /en-US/docs/Web/API/fetch +/en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch() /en-US/docs/Web/API/Window/fetch +/en-US/docs/Web/API/GlobalFetch/fetch /en-US/docs/Web/API/Window/fetch /en-US/docs/Web/API/Guide/Events/Creating_and_triggering_events /en-US/docs/Web/Events/Creating_and_triggering_events /en-US/docs/Web/API/HID/onconnect /en-US/docs/Web/API/HID/connect_event /en-US/docs/Web/API/HID/ondisconnect /en-US/docs/Web/API/HID/disconnect_event @@ -9578,6 +9579,7 @@ /en-US/docs/Web/API/RTCStats/timestamp /en-US/docs/Web/API/RTCStatsReport /en-US/docs/Web/API/RTCStats/type /en-US/docs/Web/API/RTCStatsReport /en-US/docs/Web/API/RTCStatsIceCandidatePairState /en-US/docs/Web/API/RTCIceCandidatePairStats/state +/en-US/docs/Web/API/RTCStatsReport/@@iterator /en-US/docs/Web/API/RTCStatsReport/Symbol.iterator /en-US/docs/Web/API/RTCStatsType /en-US/docs/Web/API/RTCStatsReport /en-US/docs/Web/API/RTCTrackEventInit /en-US/docs/Web/API/RTCTrackEvent/RTCTrackEvent /en-US/docs/Web/API/RTCTrackEventInit/receiver /en-US/docs/Web/API/RTCTrackEvent/RTCTrackEvent @@ -9728,7 +9730,7 @@ /en-US/docs/Web/API/ServiceWorkerGlobalScope/activate /en-US/docs/Web/API/ServiceWorkerGlobalScope/activate_event /en-US/docs/Web/API/ServiceWorkerGlobalScope/caches /en-US/docs/Web/API/WorkerGlobalScope/caches /en-US/docs/Web/API/ServiceWorkerGlobalScope/claim /en-US/docs/Web/API/Clients/claim -/en-US/docs/Web/API/ServiceWorkerGlobalScope/fetch /en-US/docs/Web/API/fetch +/en-US/docs/Web/API/ServiceWorkerGlobalScope/fetch /en-US/docs/Web/API/WorkerGlobalScope/fetch /en-US/docs/Web/API/ServiceWorkerGlobalScope/install /en-US/docs/Web/API/ServiceWorkerGlobalScope/install_event /en-US/docs/Web/API/ServiceWorkerGlobalScope/onmessage /en-US/docs/Web/API/ServiceWorkerGlobalScope/message_event /en-US/docs/Web/API/ServiceWorkerGlobalScope/periodicsync /en-US/docs/Web/API/ServiceWorkerGlobalScope/periodicsync_event @@ -10152,7 +10154,6 @@ /en-US/docs/Web/API/Window/content /en-US/docs/Web/API/Window /en-US/docs/Web/API/Window/convertPointFromNodeToPage /en-US/docs/Web/API/Window/webkitConvertPointFromNodeToPage /en-US/docs/Web/API/Window/convertPointFromPageToNode /en-US/docs/Web/API/Window/webkitConvertPointFromPageToNode -/en-US/docs/Web/API/Window/fetch /en-US/docs/Web/API/fetch /en-US/docs/Web/API/Window/minimize /en-US/docs/Web/API/Window /en-US/docs/Web/API/Window/mozAnimationStartTime /en-US/docs/Web/API/Animation/startTime /en-US/docs/Web/API/Window/mozPaintCount /en-US/docs/Web/API/Window @@ -10257,7 +10258,7 @@ /en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap /en-US/docs/Web/API/createImageBitmap /en-US/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated /en-US/docs/Web/API/Window/crossOriginIsolated -/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch /en-US/docs/Web/API/fetch +/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch /en-US/docs/Web/API/Window/fetch /en-US/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB /en-US/docs/Web/API/Window/indexedDB /en-US/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext /en-US/docs/Web/API/Window/isSecureContext /en-US/docs/Web/API/WindowOrWorkerGlobalScope/origin /en-US/docs/Web/API/Window/origin @@ -10308,7 +10309,6 @@ /en-US/docs/Web/API/WorkerGlobalScope/clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/Web/API/WorkerGlobalScope/close /en-US/docs/Web/API/DedicatedWorkerGlobalScope/close /en-US/docs/Web/API/WorkerGlobalScope/console /en-US/docs/Web/API/console -/en-US/docs/Web/API/WorkerGlobalScope/fetch /en-US/docs/Web/API/fetch /en-US/docs/Web/API/WorkerGlobalScope/onclose /en-US/docs/Web/API/DedicatedWorkerGlobalScope/close /en-US/docs/Web/API/WorkerGlobalScope/onerror /en-US/docs/Web/API/WorkerGlobalScope/error_event /en-US/docs/Web/API/WorkerGlobalScope/onlanguagechange /en-US/docs/Web/API/WorkerGlobalScope/languagechange_event @@ -10648,6 +10648,7 @@ /en-US/docs/Web/API/event.type /en-US/docs/Web/API/Event/type /en-US/docs/Web/API/event.view /en-US/docs/Web/API/UIEvent/view /en-US/docs/Web/API/event.which /en-US/docs/Web/API/UIEvent/which +/en-US/docs/Web/API/fetch /en-US/docs/Web/API/Window/fetch /en-US/docs/Web/API/form.acceptCharset /en-US/docs/Web/API/HTMLFormElement/acceptCharset /en-US/docs/Web/API/form.action /en-US/docs/Web/API/HTMLFormElement/action /en-US/docs/Web/API/form.elements /en-US/docs/Web/API/HTMLFormElement/elements @@ -11358,6 +11359,7 @@ /en-US/docs/Web/CSS/::-webkit-scrollbar-thumb /en-US/docs/Web/CSS/::-webkit-scrollbar /en-US/docs/Web/CSS/::-webkit-scrollbar-track /en-US/docs/Web/CSS/::-webkit-scrollbar /en-US/docs/Web/CSS/::-webkit-scrollbar-track-piece /en-US/docs/Web/CSS/::-webkit-scrollbar +/en-US/docs/Web/CSS/::cue-region /en-US/docs/Web/API/WebVTT_API /en-US/docs/Web/CSS/:@-moz-document /en-US/docs/Web/CSS/@document /en-US/docs/Web/CSS/:any /en-US/docs/Web/CSS/:is /en-US/docs/Web/CSS/:closed /en-US/docs/Web/CSS/:popover-open @@ -12306,6 +12308,7 @@ /en-US/docs/Web/HTTP/HTTP_response_codes /en-US/docs/Web/HTTP/Status /en-US/docs/Web/HTTP/Headers/Cache-Disposition /en-US/docs/Web/HTTP/Headers/Content-Disposition /en-US/docs/Web/HTTP/Headers/Content-Security-Policy/navigate-to /en-US/docs/Web/HTTP/Headers/Content-Security-Policy +/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/referrer /en-US/docs/Web/HTTP/Headers/Referrer-Policy /en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-sri-for /en-US/docs/Web/HTTP/Headers/Content-Security-Policy /en-US/docs/Web/HTTP/Headers/Cookie2 /en-US/docs/Web/HTTP/Headers/Cookie /en-US/docs/Web/HTTP/Headers/Feature-Policy /en-US/docs/Web/HTTP/Headers/Permissions-Policy @@ -12499,15 +12502,19 @@ /en-US/docs/Web/JavaScript/Reference/Code_comments /en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Comments /en-US/docs/Web/JavaScript/Reference/Data_types /en-US/docs/Web/JavaScript/Data_structures /en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol /en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features -/en-US/docs/Web/JavaScript/Reference/Errors/Bad_octal /en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_octal +/en-US/docs/Web/JavaScript/Reference/Errors/Bad_octal /en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_literal /en-US/docs/Web/JavaScript/Reference/Errors/Bad_return_or_yield /en-US/docs/Web/JavaScript/Reference/Errors/Bad_return /en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_property /en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type /en-US/docs/Web/JavaScript/Reference/Errors/Dead_object https://blog.mozilla.org/addons/2012/09/12/what-does-cant-access-dead-object-mean/ /en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_String_generics /en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features /en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_expression_closures /en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features +/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_octal /en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_literal /en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat /en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features /en-US/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter /en-US/docs/Web/JavaScript/Reference/Errors/Missing_formal_parameter +/en-US/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement /en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token /en-US/docs/Web/JavaScript/Reference/Errors/Not_a_codepoint /en-US/docs/Web/JavaScript/Reference/Errors/Not_a_valid_code_point +/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal /en-US/docs/Web/JavaScript/Reference/Errors/String_literal_EOL +/en-US/docs/Web/JavaScript/Reference/Functions/arguments/@@iterator /en-US/docs/Web/JavaScript/Reference/Functions/arguments/Symbol.iterator /en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope /en-US/docs/Web/JavaScript/Reference/Functions /en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode /en-US/docs/Web/JavaScript/Reference/Strict_mode /en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode/Transitioning_to_strict_mode /en-US/docs/Web/JavaScript/Reference/Strict_mode @@ -12515,6 +12522,9 @@ /en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments/callee /en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee /en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments/length /en-US/docs/Web/JavaScript/Reference/Functions/arguments/length /en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters /en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters +/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator /en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator +/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/@@species /en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.species +/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/@@unscopables /en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.unscopables /en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Array.prototype.values() /en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/values /en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/constructor /en-US/docs/Web/JavaScript/Reference/Global_Objects/Array /en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/contains /en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes @@ -12522,7 +12532,9 @@ /en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/group /en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy /en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/groupToMap /en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/groupBy /en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSource /en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toString +/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species /en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/Symbol.species /en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer +/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncIterator/@@asyncIterator /en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncIterator/Symbol.asyncIterator /en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/futexWait /en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/wait /en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/futexWake /en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/notify /en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics/futexWakeOrRequeue /en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics @@ -12538,6 +12550,7 @@ /en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator/resolvedOptions /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions /en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator/supportedLocalesOf /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf /en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView +/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive /en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Symbol.toPrimitive /en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date() /en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date /en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/constructor /en-US/docs/Web/JavaScript/Reference/Global_Objects/Date /en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/Date @@ -12556,6 +12569,7 @@ /en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/Error /en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/toSource /en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/toString /en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError +/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/@@hasInstance /en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/Symbol.hasInstance /en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/Function.displayName /en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/displayName /en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/constructor /en-US/docs/Web/JavaScript/Reference/Global_Objects/Function /en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toSource /en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString @@ -12579,9 +12593,11 @@ /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/Intl.RelativeTimeFormat.supportedLocalesOf() /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/supportedLocalesOf /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat +/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment/Segments/@@iterator /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment/Segments/Symbol.iterator /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segments /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment/Segments -/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segments/@@iterator /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment/Segments/@@iterator +/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segments/@@iterator /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment/Segments/Symbol.iterator /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segments/containing /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment/Segments/containing +/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator/@@iterator /en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator/Symbol.iterator /en-US/docs/Web/JavaScript/Reference/Global_Objects/ListFormat /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat /en-US/docs/Web/JavaScript/Reference/Global_Objects/ListFormat/ListFormat /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat /en-US/docs/Web/JavaScript/Reference/Global_Objects/ListFormat/format /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/format @@ -12607,6 +12623,8 @@ /en-US/docs/Web/JavaScript/Reference/Global_Objects/Locale/region /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/region /en-US/docs/Web/JavaScript/Reference/Global_Objects/Locale/script /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/script /en-US/docs/Web/JavaScript/Reference/Global_Objects/Locale/toString /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString +/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/@@iterator /en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/Symbol.iterator +/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/@@species /en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/Symbol.species /en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag /en-US/docs/Web/JavaScript/Reference/Global_Objects/Map /en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/Map /en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/constructor /en-US/docs/Web/JavaScript/Reference/Global_Objects/Number @@ -12633,6 +12651,7 @@ /en-US/docs/Web/JavaScript/Reference/Global_Objects/PluralRules/resolvedOptions /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/resolvedOptions /en-US/docs/Web/JavaScript/Reference/Global_Objects/PluralRules/select /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/select /en-US/docs/Web/JavaScript/Reference/Global_Objects/PluralRules/supportedLocalesOf /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf +/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/@@species /en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Symbol.species /en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise /en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler /en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy /en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply /en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply @@ -12651,6 +12670,12 @@ /en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError /en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError /en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods /en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect +/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@match /en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.match +/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll /en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.matchAll +/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@replace /en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.replace +/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@search /en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.search +/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@species /en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.species +/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/@@split /en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.split /en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/constructor /en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp /en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp /en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toSource /en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/toString @@ -12664,20 +12689,27 @@ /en-US/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat /en-US/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat/resolvedOptions /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/resolvedOptions /en-US/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat/supportedLocalesOf /en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/supportedLocalesOf +/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/@@iterator /en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Symbol.iterator +/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/@@species /en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Symbol.species /en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/Set +/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/@@species /en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/Symbol.species /en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/Planned_changes /en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer /en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer +/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Symbol.iterator /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/TrimLeft /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/TrimRight /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/constructor /en-US/docs/Web/JavaScript/Reference/Global_Objects/String /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/contains /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/String /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toSource /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toString +/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive /en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/Symbol.toPrimitive /en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol /en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toSource /en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toString /en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/valueOf() /en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/valueOf /en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError /en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError +/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator /en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/Symbol.iterator +/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@species /en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/Symbol.species /en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/TypedArray.prototype.reduce() /en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/reduce /en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/name /en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name /en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/prototype /en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 95704c34124a5f1..1344c175a017b6e 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -24237,10 +24237,6 @@ "modified": "2020-10-15T21:31:12.560Z", "contributors": ["mfluehr", "servinlp", "fscholz", "nmve", "erikadoyle"] }, - "Web/API/CanvasRenderingContext2D/scrollPathIntoView": { - "modified": "2020-10-15T21:31:58.837Z", - "contributors": ["mfluehr", "fscholz", "nmve"] - }, "Web/API/CanvasRenderingContext2D/setLineDash": { "modified": "2020-10-15T21:30:32.898Z", "contributors": [ @@ -66867,6 +66863,49 @@ "modified": "2020-10-15T22:11:52.818Z", "contributors": ["wbamberg", "JeffersonScher", "chrisdavidmills"] }, + "Web/API/Window/fetch": { + "modified": "2020-10-15T21:33:25.494Z", + "contributors": [ + "mfuji09", + "Wind1808", + "Sheppy", + "Zearin_Galaurum", + "chrisdavidmills", + "TestPolygon", + "bigjilm", + "tkrotoff", + "old_morfey13", + "skellix", + "FranklinYu", + "sideshowbarker", + "tjcrowder", + "DamienCassou", + "fscholz", + "mfulton26", + "SiliconSoldier", + "satyabhimisetty", + "jakubboucek", + "AngeloKai", + "Yaffle", + "cpplearner", + "Konrud", + "BuonOmo", + "kenrick95", + "kmiyashiro", + "xfq", + "arronei", + "valtlai", + "erikadoyle", + "jpmedley", + "runn1ng", + "ysmood", + "jsx", + "Sebastianz", + "George8211", + "matiishyn", + "kscarfone" + ] + }, "Web/API/Window/find": { "modified": "2020-10-16T15:18:21.626Z", "contributors": [ @@ -71556,49 +71595,6 @@ "adria" ] }, - "Web/API/fetch": { - "modified": "2020-10-15T21:33:25.494Z", - "contributors": [ - "mfuji09", - "Wind1808", - "Sheppy", - "Zearin_Galaurum", - "chrisdavidmills", - "TestPolygon", - "bigjilm", - "tkrotoff", - "old_morfey13", - "skellix", - "FranklinYu", - "sideshowbarker", - "tjcrowder", - "DamienCassou", - "fscholz", - "mfulton26", - "SiliconSoldier", - "satyabhimisetty", - "jakubboucek", - "AngeloKai", - "Yaffle", - "cpplearner", - "Konrud", - "BuonOmo", - "kenrick95", - "kmiyashiro", - "xfq", - "arronei", - "valtlai", - "erikadoyle", - "jpmedley", - "runn1ng", - "ysmood", - "jsx", - "Sebastianz", - "George8211", - "matiishyn", - "kscarfone" - ] - }, "Web/API/queueMicrotask": { "modified": "2020-10-15T22:21:06.789Z", "contributors": [ @@ -73699,10 +73695,6 @@ "fscholz" ] }, - "Web/CSS/::cue-region": { - "modified": "2020-10-15T22:23:36.923Z", - "contributors": ["wbamberg", "ExE-Boss"] - }, "Web/CSS/::file-selector-button": { "modified": "2020-10-28T10:50:12.079Z", "contributors": [ @@ -99739,18 +99731,10 @@ "modified": "2020-10-15T21:50:32.476Z", "contributors": ["mfuji09", "Sheppy", "vrana", "Malvoz", "fscholz"] }, - "Web/HTTP/Headers/Content-Security-Policy/plugin-types": { - "modified": "2020-10-15T21:50:26.194Z", - "contributors": ["mfuji09", "Sheppy", "fscholz", "teoli"] - }, "Web/HTTP/Headers/Content-Security-Policy/prefetch-src": { "modified": "2020-10-15T22:21:20.756Z", "contributors": ["mfuji09", "bershanskiy"] }, - "Web/HTTP/Headers/Content-Security-Policy/referrer": { - "modified": "2020-10-15T21:50:39.723Z", - "contributors": ["bershanskiy", "Sheppy", "infuerno", "fscholz", "teoli"] - }, "Web/HTTP/Headers/Content-Security-Policy/report-to": { "modified": "2020-10-15T22:03:06.085Z", "contributors": [ @@ -100069,10 +100053,6 @@ "teoli" ] }, - "Web/HTTP/Headers/Large-Allocation": { - "modified": "2020-10-15T21:51:49.609Z", - "contributors": ["fscholz"] - }, "Web/HTTP/Headers/Last-Modified": { "modified": "2020-10-15T21:48:43.337Z", "contributors": [ @@ -103941,7 +103921,7 @@ "modified": "2020-04-15T10:56:43.340Z", "contributors": ["fscholz", "PatrickKettner", "nmve"] }, - "Web/JavaScript/Reference/Errors/Deprecated_octal": { + "Web/JavaScript/Reference/Errors/Deprecated_octal_literal": { "modified": "2020-04-15T11:05:34.536Z", "contributors": ["fscholz", "PatrickKettner", "non-descriptive"] }, @@ -103949,10 +103929,6 @@ "modified": "2020-11-30T05:50:18.195Z", "contributors": ["mfuji09", "fscholz"] }, - "Web/JavaScript/Reference/Errors/Equal_as_assign": { - "modified": "2020-04-16T08:23:11.906Z", - "contributors": ["fscholz", "arai"] - }, "Web/JavaScript/Reference/Errors/Getter_only": { "modified": "2020-05-06T10:16:12.614Z", "contributors": ["fscholz", "PatrickKettner"] @@ -104055,21 +104031,6 @@ "modified": "2020-05-06T09:40:23.426Z", "contributors": ["fscholz", "PatrickKettner"] }, - "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { - "modified": "2020-04-16T07:49:53.557Z", - "contributors": [ - "fscholz", - "sideshowbarker", - "kevinbmagill", - "SphinxKnight", - "ogigpermana", - "luisvallejomohl", - "PatrickKettner", - "nmve", - "jwhitlock", - "loveabushu1" - ] - }, "Web/JavaScript/Reference/Errors/More_arguments_needed": { "modified": "2020-05-06T09:46:25.163Z", "contributors": ["fscholz", "Bzbarsky", "PatrickKettner"] @@ -104204,6 +104165,10 @@ "modified": "2020-04-15T11:09:10.798Z", "contributors": ["fscholz", "PatrickKettner", "nmve", "nbp", "arai"] }, + "Web/JavaScript/Reference/Errors/String_literal_EOL": { + "modified": "2020-04-16T08:26:04.965Z", + "contributors": ["fscholz", "PatrickKettner", "neroshan12", "nmve"] + }, "Web/JavaScript/Reference/Errors/Too_much_recursion": { "modified": "2020-04-14T12:37:45.784Z", "contributors": [ @@ -104220,10 +104185,6 @@ "modified": "2020-06-04T08:11:57.239Z", "contributors": ["Sheppy", "fscholz", "ZavodPodushek", "nmve"] }, - "Web/JavaScript/Reference/Errors/Undefined_prop": { - "modified": "2020-10-24T03:39:49.210Z", - "contributors": ["angleKH", "fscholz", "arai", "fiejen", "nmve", "Sheppy"] - }, "Web/JavaScript/Reference/Errors/Unexpected_token": { "modified": "2020-04-15T11:24:29.836Z", "contributors": [ @@ -104256,10 +104217,6 @@ "modified": "2020-04-16T07:01:37.303Z", "contributors": ["fscholz", "wbamberg", "PatrickKettner"] }, - "Web/JavaScript/Reference/Errors/Unterminated_string_literal": { - "modified": "2020-04-16T08:26:04.965Z", - "contributors": ["fscholz", "PatrickKettner", "neroshan12", "nmve"] - }, "Web/JavaScript/Reference/Errors/in_operator_no_object": { "modified": "2020-12-06T05:37:14.314Z", "contributors": [ @@ -104667,7 +104624,7 @@ "Dria" ] }, - "Web/JavaScript/Reference/Functions/arguments/@@iterator": { + "Web/JavaScript/Reference/Functions/arguments/Symbol.iterator": { "modified": "2020-11-28T02:55:48.887Z", "contributors": ["mfuji09", "fscholz", "claudepache", "alexlur", "arai"] }, @@ -105083,7 +105040,11 @@ "Anonymous" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": { + "Web/JavaScript/Reference/Global_Objects/Array/Array": { + "modified": "2020-10-15T22:24:17.414Z", + "contributors": ["alattalatta", "fscholz"] + }, + "Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator": { "modified": "2020-12-11T06:07:06.762Z", "contributors": [ "bershanskiy", @@ -105107,7 +105068,7 @@ "arai" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/@@species": { + "Web/JavaScript/Reference/Global_Objects/Array/Symbol.species": { "modified": "2020-10-20T12:35:23.741Z", "contributors": [ "mfuji09", @@ -105117,7 +105078,7 @@ "arai" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": { + "Web/JavaScript/Reference/Global_Objects/Array/Symbol.unscopables": { "modified": "2020-10-15T21:44:45.668Z", "contributors": [ "mfuji09", @@ -105130,10 +105091,6 @@ "evilpie" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/Array": { - "modified": "2020-10-15T22:24:17.414Z", - "contributors": ["alattalatta", "fscholz"] - }, "Web/JavaScript/Reference/Global_Objects/Array/concat": { "modified": "2020-10-15T21:06:07.150Z", "contributors": [ @@ -107170,14 +107127,14 @@ "Kennyluck" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species": { - "modified": "2020-10-20T12:11:40.687Z", - "contributors": ["mfuji09", "wbamberg", "fscholz", "arai"] - }, "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer": { "modified": "2020-10-20T11:08:01.722Z", "contributors": ["mfuji09", "wbamberg", "fscholz", "alattalatta"] }, + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/Symbol.species": { + "modified": "2020-10-20T12:11:40.687Z", + "contributors": ["mfuji09", "wbamberg", "fscholz", "arai"] + }, "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength": { "modified": "2020-10-20T12:25:40.058Z", "contributors": ["mfuji09", "wbamberg", "fscholz", "jameshkramer", "kdex"] @@ -107898,19 +107855,6 @@ "Dria" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive": { - "modified": "2020-10-24T23:52:13.775Z", - "contributors": [ - "mfuji09", - "chrisdavidmills", - "fscholz", - "SphinxKnight", - "wuqiu", - "Delapouite", - "eduardoboucas", - "arai" - ] - }, "Web/JavaScript/Reference/Global_Objects/Date/Date": { "modified": "2020-11-18T23:28:25.551Z", "contributors": [ @@ -107923,6 +107867,19 @@ "Zearin_Galaurum" ] }, + "Web/JavaScript/Reference/Global_Objects/Date/Symbol.toPrimitive": { + "modified": "2020-10-24T23:52:13.775Z", + "contributors": [ + "mfuji09", + "chrisdavidmills", + "fscholz", + "SphinxKnight", + "wuqiu", + "Delapouite", + "eduardoboucas", + "arai" + ] + }, "Web/JavaScript/Reference/Global_Objects/Date/UTC": { "modified": "2020-11-25T07:15:33.808Z", "contributors": [ @@ -110958,7 +110915,11 @@ "dbruant" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/@@iterator": { + "Web/JavaScript/Reference/Global_Objects/Map/Map": { + "modified": "2020-10-15T22:26:23.997Z", + "contributors": ["fscholz", "mfuji09"] + }, + "Web/JavaScript/Reference/Global_Objects/Map/Symbol.iterator": { "modified": "2020-11-06T02:35:08.765Z", "contributors": [ "mfuji09", @@ -110975,7 +110936,7 @@ "arai" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/@@species": { + "Web/JavaScript/Reference/Global_Objects/Map/Symbol.species": { "modified": "2020-11-06T05:22:03.978Z", "contributors": [ "mfuji09", @@ -110986,10 +110947,6 @@ "arai" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/Map": { - "modified": "2020-10-15T22:26:23.997Z", - "contributors": ["fscholz", "mfuji09"] - }, "Web/JavaScript/Reference/Global_Objects/Map/clear": { "modified": "2020-11-06T05:11:13.709Z", "contributors": [ @@ -115266,7 +115223,11 @@ "Jesse" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/@@match": { + "Web/JavaScript/Reference/Global_Objects/RegExp/RegExp": { + "modified": "2020-11-14T04:54:00.564Z", + "contributors": ["mfuji09", "fscholz", "NidalR"] + }, + "Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.match": { "modified": "2020-10-15T21:44:51.537Z", "contributors": [ "fscholz", @@ -115278,7 +115239,7 @@ "arai" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll": { + "Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.matchAll": { "modified": "2020-10-15T22:14:41.855Z", "contributors": [ "mfuji09", @@ -115290,7 +115251,7 @@ "ExE-Boss" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/@@replace": { + "Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.replace": { "modified": "2020-11-13T12:23:20.203Z", "contributors": [ "mfuji09", @@ -115301,7 +115262,7 @@ "arai" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/@@search": { + "Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.search": { "modified": "2020-11-13T11:35:56.254Z", "contributors": [ "mfuji09", @@ -115313,7 +115274,7 @@ "arai" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/@@species": { + "Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.species": { "modified": "2020-11-14T03:17:15.528Z", "contributors": [ "mfuji09", @@ -115324,7 +115285,7 @@ "h4writer" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/@@split": { + "Web/JavaScript/Reference/Global_Objects/RegExp/Symbol.split": { "modified": "2020-10-15T21:44:51.419Z", "contributors": [ "mfuji09", @@ -115337,10 +115298,6 @@ "arai" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/RegExp": { - "modified": "2020-11-14T04:54:00.564Z", - "contributors": ["mfuji09", "fscholz", "NidalR"] - }, "Web/JavaScript/Reference/Global_Objects/RegExp/compile": { "modified": "2020-10-15T21:32:42.681Z", "contributors": ["fscholz", "jameshkramer", "nmve"] @@ -115763,7 +115720,11 @@ "Marcoos" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/@@iterator": { + "Web/JavaScript/Reference/Global_Objects/Set/Set": { + "modified": "2020-10-15T22:26:29.688Z", + "contributors": ["fscholz", "wbamberg"] + }, + "Web/JavaScript/Reference/Global_Objects/Set/Symbol.iterator": { "modified": "2020-11-14T05:08:12.971Z", "contributors": [ "mfuji09", @@ -115776,7 +115737,7 @@ "arai" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/@@species": { + "Web/JavaScript/Reference/Global_Objects/Set/Symbol.species": { "modified": "2020-11-14T06:33:16.648Z", "contributors": [ "mfuji09", @@ -115787,10 +115748,6 @@ "arai" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/Set": { - "modified": "2020-10-15T22:26:29.688Z", - "contributors": ["fscholz", "wbamberg"] - }, "Web/JavaScript/Reference/Global_Objects/Set/add": { "modified": "2020-11-20T19:40:29.784Z", "contributors": [ @@ -116065,7 +116022,11 @@ "Dria" ] }, - "Web/JavaScript/Reference/Global_Objects/String/@@iterator": { + "Web/JavaScript/Reference/Global_Objects/String/String": { + "modified": "2020-11-27T11:31:24.196Z", + "contributors": ["mfuji09", "gregprice", "wbamberg", "fscholz"] + }, + "Web/JavaScript/Reference/Global_Objects/String/Symbol.iterator": { "modified": "2020-11-23T12:37:09.114Z", "contributors": [ "mfuji09", @@ -116078,10 +116039,6 @@ "arai" ] }, - "Web/JavaScript/Reference/Global_Objects/String/String": { - "modified": "2020-11-27T11:31:24.196Z", - "contributors": ["mfuji09", "gregprice", "wbamberg", "fscholz"] - }, "Web/JavaScript/Reference/Global_Objects/String/anchor": { "modified": "2020-11-27T10:17:06.805Z", "contributors": [ @@ -117663,7 +117620,11 @@ "phistuck" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive": { + "Web/JavaScript/Reference/Global_Objects/Symbol/Symbol": { + "modified": "2020-11-22T11:20:17.264Z", + "contributors": ["mfuji09", "hinell", "wbamberg", "fscholz"] + }, + "Web/JavaScript/Reference/Global_Objects/Symbol/Symbol.toPrimitive": { "modified": "2020-11-22T09:53:22.125Z", "contributors": [ "mfuji09", @@ -117675,10 +117636,6 @@ "arai" ] }, - "Web/JavaScript/Reference/Global_Objects/Symbol/Symbol": { - "modified": "2020-11-22T11:20:17.264Z", - "contributors": ["mfuji09", "hinell", "wbamberg", "fscholz"] - }, "Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator": { "modified": "2020-10-15T22:14:59.721Z", "contributors": ["dd-pardal", "fscholz", "jahzielv", "wmsbill"] @@ -117994,18 +117951,18 @@ "virkkila" ] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator": { + "Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT": { + "modified": "2020-10-15T21:29:48.949Z", + "contributors": ["wbamberg", "mfuji09", "fscholz", "jameshkramer"] + }, + "Web/JavaScript/Reference/Global_Objects/TypedArray/Symbol.iterator": { "modified": "2020-11-15T01:01:49.006Z", "contributors": ["mfuji09", "fscholz", "eduardoboucas", "arai"] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/@@species": { + "Web/JavaScript/Reference/Global_Objects/TypedArray/Symbol.species": { "modified": "2020-10-15T21:44:51.304Z", "contributors": ["wbamberg", "fscholz", "arai"] }, - "Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT": { - "modified": "2020-10-15T21:29:48.949Z", - "contributors": ["wbamberg", "mfuji09", "fscholz", "jameshkramer"] - }, "Web/JavaScript/Reference/Global_Objects/TypedArray/buffer": { "modified": "2020-11-19T22:38:31.902Z", "contributors": ["mfuji09", "wbamberg", "fscholz", "jameshkramer"] diff --git a/files/en-us/games/techniques/3d_collision_detection/index.md b/files/en-us/games/techniques/3d_collision_detection/index.md index 2b6110f979251e1..a570192ec6107e8 100644 --- a/files/en-us/games/techniques/3d_collision_detection/index.md +++ b/files/en-us/games/techniques/3d_collision_detection/index.md @@ -24,8 +24,9 @@ The **axis-aligned constraint** is there because of performance reasons. The ove Checking if a point is inside an AABB is pretty simple — we just need to check whether the point's coordinates fall inside the AABB; considering each axis separately. If we assume that _Px_, _Py_ and _Pz_ are the point's coordinates, and _BminX_–_BmaxX_, _BminY_–_BmaxY_, and _BminZ_–_BmaxZ_ are the ranges of each axis of the AABB, we can calculate whether a collision has occurred between the two using the following formula: - -f(P,B)=(PxBminXPxBmaxX)(PyBminYPyBmaxY)(PzBminZPzBmaxZ)f(P, B)= (P_x \ge B_{minX} \wedge P_x \le B_{maxX}) \wedge (P_y \ge B_{minY} \wedge P_y \le B_{maxY}) \wedge (P_z \ge B_{minZ} \wedge P_z \le B_{maxZ}) + +f(P,B)=(PxBminXPxBmaxX)(PyBminYPyBmaxY)(PzBminZPzBmaxZ)f(P, B)= (P_x \ge B_{minX} \wedge P_x \le B_{maxX}) \wedge (P_y \ge B_{minY} \wedge P_y \le B_{maxY}) \wedge (P_z \ge B_{minZ} \wedge P_z \le B_{maxZ}) + Or in JavaScript: @@ -50,8 +51,9 @@ Checking whether an AABB intersects another AABB is similar to the point test. W Mathematically this would look like so: - -f(A,B)=(AminXBmaxXAmaxXBminX)(AminYBmaxYAmaxYBminY)(AminZBmaxZAmaxZBminZ)f(A, B) = (A_{minX} \le B_{maxX} \wedge A_{maxX} \ge B_{minX}) \wedge ( A_{minY} \le B_{maxY} \wedge A_{maxY} \ge B_{minY}) \wedge (A_{minZ} \le B_{maxZ} \wedge A_{maxZ} \ge B_{minZ}) + +f(A,B)=(AminXBmaxXAmaxXBminX)(AminYBmaxYAmaxYBminY)(AminZBmaxZAmaxZBminZ)f(A, B) = (A_{minX} \le B_{maxX} \wedge A_{maxX} \ge B_{minX}) \wedge ( A_{minY} \le B_{maxY} \wedge A_{maxY} \ge B_{minY}) \wedge (A_{minZ} \le B_{maxZ} \wedge A_{maxZ} \ge B_{minZ}) + And in JavaScript, we'd use this: @@ -80,8 +82,9 @@ To check whether a sphere contains a point we need to calculate the distance bet Taking into account that the Euclidean distance between two points _A_ and _B_ is (AxBx)2+(AyBy)2+(AzBz)2\sqrt{(A_x - B_x)^2 + (A_y - B_y)^2 + (A_z - B_z)^2}, our formula for point vs. sphere collision detection would work out like so: - -f(P,S)=Sradius(PxSx)2+(PySy)2+(PzSz)2f(P,S) = S_{radius} \ge \sqrt{(P_x - S_x)^2 + (P_y - S_y)^2 + (P_z - S_z)^2} + +f(P,S)=Sradius(PxSx)2+(PySy)2+(PzSz)2f(P,S) = S_{radius} \ge \sqrt{(P_x - S_x)^2 + (P_y - S_y)^2 + (P_z - S_z)^2} + Or in JavaScript: @@ -107,8 +110,9 @@ The sphere vs. sphere test is similar to the point vs. sphere test. What we need Mathematically, this looks like: - -f(A,B)=(AxBx)2+(AyBy)2+(AzBz)2Aradius+Bradiusf(A,B) = \sqrt{(A_x - B_x)^2 + (A_y - B_y)^2 + (A_z - B_z)^2} \le A_{radius} + B_{radius} + +f(A,B)=(AxBx)2+(AyBy)2+(AzBz)2Aradius+Bradiusf(A,B) = \sqrt{(A_x - B_x)^2 + (A_y - B_y)^2 + (A_z - B_z)^2} \le A_{radius} + B_{radius} + Or in JavaScript: diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md index 23f48dcafe7c44b..6770f6610ffc430 100644 --- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md +++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md @@ -10,7 +10,7 @@ The [WebXR](/en-US/docs/Games/Techniques/3D_on_the_web/WebXR) and [WebGL](/en-US ## High level overview -The current version of A-Frame is 0.3.2, which means it's highly experimental, but it already works and you can test it right away in the browser. It runs on desktop, mobile (iOS and Android), and Oculus Rift, Gear VR and HTC Vive. +A-Frame runs on most environments, such as desktop, mobile (iOS and Android), and devices such as Oculus Rift, Gear VR and HTC Vive. A-Frame is built on top of [WebGL](/en-US/docs/Web/API/WebGL_API), and provides pre-built components to use in applications — models, video players, skyboxes, geometries, controls, animations, cursors, etc. It is based on the [entity component system](https://en.wikipedia.org/wiki/Entity_component_system), which is known in the game development world, but it targets web developers with a familiar markup structure, manipulable with JavaScript. The end result is 3D web experiences, which are VR-enabled by default. @@ -184,31 +184,26 @@ It is impressive to be able to create such a scene with just a few lines of HTML ## Animation -We've already used `rotation` and `position` to move the shapes on the scene, and we can also scale them. These attributes can be manipulated to create the illusion of [animation](https://aframe.io/docs/core/animation.html). +We've already used `rotation` and `position` to move the shapes on the scene, and we can also scale them. These attributes can be manipulated to create the illusion of [animation](https://aframe.io/docs/1.6.0/components/animation.html). ### Rotation -There's a special [``](https://aframe.io/docs/core/animation.html) entity that can help us animate elements. Add the `` element seen below to the `` element as a child, as shown: +There's a special [`animation`](https://aframe.io/docs/1.6.0/components/animation.html) component that can help us animate elements. Add the `animation` component seen below to the `` element as a property, as shown: ```html - - - + ``` -As with any other entities, you can define key properties for the animation. We'll be animating the `rotation` attribute from `20 0 0` to `20 360 0`, so it will do a full spin. The animation direction is set to alternate so the animation will be played forward, and then back. The duration is set to 4 seconds, and it will be repeated indefinitely. The animation uses `ease` for easing, with [tween.js](https://github.com/tweenjs/tween.js/) being implemented internally. +As with any other entities, you can define key properties for the animation. We'll be animating the `rotation` attribute from `20 0 0` to `20 360 0`, so it will do a full spin. The animation direction is set to alternate so the animation will be played forward, and then back. The duration is set to 4 seconds, and it will be repeated indefinitely. The animation uses `easing` for easing, with [tween.js](https://github.com/tweenjs/tween.js/) being implemented internally. ### Scaling -We can also add animation to entities with custom geometry like the torus, in much the same way. Add the following `` element to your torus: +We can also add animation to entities with custom geometry like the torus, in much the same way. Add the following `animation` component to your torus: ```html - - + position="-3 1 0" + animation="property: scale; to: 1 0.5 1; dir: alternate; dur: 2000; loop: true; easing: linear;"> ``` @@ -238,7 +226,7 @@ The attribute we want to animate for the torus is `scale`. The initial, default ### Moving -We could use the `` to change the position of the third shape, or we could use JavaScript instead. Add this code at the end of the ` - +
FooBar-FooBar-FooBar-FooBar
+ +

+
FooBar-FooBar-FooBar-FooBar
+ +

+```
+
+#### CSS
+
+```css
+div {
+  padding: 0.15em;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+button {
+  margin: 0.15em 0 0.5em 0;
+}
+
+pre {
+  margin: 0.5em 0;
+}
+
+#div1 {
+  width: 100px;
+}
+
+#log1 {
+  margin-bottom: 2em;
+}
 ```
 
-### Result
+#### JavaScript
+
+```js
+const button1 = document.getElementById("button1");
+const button2 = document.getElementById("button2");
+
+const div1 = document.getElementById("div1");
+const div2 = document.getElementById("div2");
+
+const log1 = document.getElementById("log1");
+const log2 = document.getElementById("log2");
+
+// Check if the scrollWidth is bigger than the offsetWidth or not
+function isOverflowing(element) {
+  return element.scrollWidth > element.offsetWidth;
+}
+
+function checkOverflow(element, log) {
+  if (isOverflowing(element)) {
+    log.innerText = `Content is overflowing, scrollWidth is ${element.scrollWidth}px`;
+  } else {
+    log.innerText = `No overflows, scrollWidth is ${element.scrollWidth}px`;
+  }
+}
+
+button1.addEventListener("click", () => {
+  checkOverflow(div1, log1);
+});
+
+button2.addEventListener("click", () => {
+  checkOverflow(div2, log2);
+});
+```
+
+#### Result
+
+Click the buttons to check if the content is overflowing the containers.
 
-{{EmbedLiveSample('Examples')}}
+{{EmbedLiveSample("detecting_overflowing_content", "100%", "190")}}
 
 ## Specifications
 
diff --git a/files/en-us/web/api/fedcm_api/rp_sign-in/index.md b/files/en-us/web/api/fedcm_api/rp_sign-in/index.md
index cc8319db1ee0c7a..b9737c7b8ce62bf 100644
--- a/files/en-us/web/api/fedcm_api/rp_sign-in/index.md
+++ b/files/en-us/web/api/fedcm_api/rp_sign-in/index.md
@@ -18,7 +18,7 @@ The RP sends the token to its server to validate the certificate, and on success
 
 If the user has never signed into the IdP or is logged out, the `get()` method rejects with an error and the RP can direct the user to the IdP login page to sign in or create an account.
 
-> **Note:** The exact structure and content of the validation token token is opaque to the FedCM API, and to the browser. The IdP decides on the syntax and usage of it, and the RP needs to follow the instructions provided by the IdP (see [Verify the Google ID token on your server side](https://developers.google.com/identity/gsi/web/guides/verify-google-id-token), for example) to make sure they are using it correctly.
+> **Note:** The exact structure and content of the validation token is opaque to the FedCM API, and to the browser. The IdP decides on the syntax and usage of it, and the RP needs to follow the instructions provided by the IdP (see [Verify the Google ID token on your server side](https://developers.google.com/identity/gsi/web/guides/verify-google-id-token), for example) to make sure they are using it correctly.
 
 A typical request might look like this:
 
diff --git a/files/en-us/web/api/fetch_api/using_fetch/index.md b/files/en-us/web/api/fetch_api/using_fetch/index.md
index 10e3df3cbdc7d8e..e7b6f0be13d078d 100644
--- a/files/en-us/web/api/fetch_api/using_fetch/index.md
+++ b/files/en-us/web/api/fetch_api/using_fetch/index.md
@@ -51,7 +51,7 @@ To make a request, call `fetch()`, passing in:
    - a {{domxref("Request")}} instance
 2. optionally, an object containing options to configure the request.
 
-In this section we'll look at some of the most commonly-used options. To read about all the options that can be given, see the [`fetch()`](/en-US/docs/Web/API/fetch) reference page.
+In this section we'll look at some of the most commonly-used options. To read about all the options that can be given, see the [`fetch()`](/en-US/docs/Web/API/Window/fetch) reference page.
 
 ### Setting the method
 
@@ -188,7 +188,7 @@ Whether a request can be made cross-origin or not is determined by the value of
 
 Credentials are cookies, {{glossary("TLS")}} client certificates, or authentication headers containing a username and password.
 
-To control whether or not the browser sends credentials, set the `credentials` option, which can take one of the following three values:
+To control whether or not the browser sends credentials, as well as whether the browser respects any **`Set-Cookie`** response headers, set the `credentials` option, which can take one of the following three values:
 
 - `omit`: never send credentials in the request or include credentials in the response.
 - `same-origin` (the default): only send and include credentials for same-origin requests.
diff --git a/files/en-us/web/api/filesystemdirectoryhandle/index.md b/files/en-us/web/api/filesystemdirectoryhandle/index.md
index 9c4b46202135ef5..2f7972d97b52070 100644
--- a/files/en-us/web/api/filesystemdirectoryhandle/index.md
+++ b/files/en-us/web/api/filesystemdirectoryhandle/index.md
@@ -40,7 +40,7 @@ Regular methods:
   - : Returns a new _async iterator_ containing the keys for each item in `FileSystemDirectoryHandle`.
 - {{domxref('FileSystemDirectoryHandle.values()')}}
   - : Returns a new _async iterator_ containing the values for each index in the `FileSystemDirectoryHandle` object.
-- `FileSystemDirectoryHandle[@@asyncIterator]()`
+- `FileSystemDirectoryHandle[Symbol.asyncIterator]()`
   - : Returns a new _async iterator_ of a given object's own enumerable property `[key, value]` pairs.
 
 ## Examples
diff --git a/files/en-us/web/api/filesystementry/index.md b/files/en-us/web/api/filesystementry/index.md
index 88ceba796505036..a5dcf36d54606e7 100644
--- a/files/en-us/web/api/filesystementry/index.md
+++ b/files/en-us/web/api/filesystementry/index.md
@@ -55,7 +55,7 @@ _This interface provides the following properties._
 - {{domxref("FileSystemEntry.filesystem", "filesystem")}} {{ReadOnlyInline}}
   - : A {{domxref("FileSystem")}} object representing the file system in which the entry is located.
 - {{domxref("FileSystemEntry.fullPath", "fullPath")}} {{ReadOnlyInline}}
-  - : A string object which provides the full, absolute path from the file system's root to the entry; it can also be thought of as a path which is relative to the root directory, prepended with a "/" character.
+  - : A string which provides the full, absolute path from the file system's root to the entry; it can also be thought of as a path which is relative to the root directory, prepended with a "/" character.
 - {{domxref("FileSystemEntry.isDirectory", "isDirectory")}} {{ReadOnlyInline}}
   - : A boolean value which is `true` if the entry represents a directory; otherwise, it's `false`.
 - {{domxref("FileSystemEntry.isFile", "isFile")}} {{ReadOnlyInline}}
diff --git a/files/en-us/web/api/filesystemhandle/index.md b/files/en-us/web/api/filesystemhandle/index.md
index 8809214d606464c..73cc11787303b33 100644
--- a/files/en-us/web/api/filesystemhandle/index.md
+++ b/files/en-us/web/api/filesystemhandle/index.md
@@ -13,9 +13,9 @@ The **`FileSystemHandle`** interface of the {{domxref('File System API', '', '',
 
 Below is a list of interfaces based on the `FileSystemHandle` interface.
 
-- {{domxref("FileSystemFileHandle")}} {{SecureContext_Inline}}
+- {{domxref("FileSystemFileHandle")}}
   - : Represents a handle to a file entry.
-- {{domxref("FileSystemDirectoryHandle")}} {{SecureContext_Inline}}
+- {{domxref("FileSystemDirectoryHandle")}}
   - : Provides a handle to a directory entry.
 
 ## Instance properties
diff --git a/files/en-us/web/api/formdata/entries/index.md b/files/en-us/web/api/formdata/entries/index.md
index 372265f7b720fcb..71cd4ed75f41d93 100644
--- a/files/en-us/web/api/formdata/entries/index.md
+++ b/files/en-us/web/api/formdata/entries/index.md
@@ -8,7 +8,7 @@ browser-compat: api.FormData.entries
 
 {{APIRef("XMLHttpRequest API")}} {{AvailableInWorkers}}
 
-The **`FormData.entries()`** method returns an [iterator](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) which iterates through all key/value pairs contained in the {{domxref("FormData")}}. The key of each pair is a string object, and the value is either a string or a {{domxref("Blob")}}.
+The **`FormData.entries()`** method returns an [iterator](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) which iterates through all key/value pairs contained in the {{domxref("FormData")}}. The key of each pair is a string, and the value is either a string or a {{domxref("Blob")}}.
 
 ## Syntax
 
diff --git a/files/en-us/web/api/gamepad/vibrationactuator/index.md b/files/en-us/web/api/gamepad/vibrationactuator/index.md
index 44997c90c592c25..75229a8a6c5f25f 100644
--- a/files/en-us/web/api/gamepad/vibrationactuator/index.md
+++ b/files/en-us/web/api/gamepad/vibrationactuator/index.md
@@ -12,6 +12,9 @@ browser-compat: api.Gamepad.vibrationActuator
 
 The **`vibrationActuator`** read-only property of the {{domxref("Gamepad")}} interface returns a {{domxref("GamepadHapticActuator")}} object, which represents haptic feedback hardware available on the controller.
 
+> [!NOTE]
+> Support for this property may vary across different combinations of platforms and controllers. Even if the controller supports haptic feedback, the platform may not support it.
+
 ## Value
 
 A {{domxref("GamepadHapticActuator")}} object.
diff --git a/files/en-us/web/api/gamepadhapticactuator/index.md b/files/en-us/web/api/gamepadhapticactuator/index.md
index a3b40c8b616ee17..9a031d93e4a2698 100644
--- a/files/en-us/web/api/gamepadhapticactuator/index.md
+++ b/files/en-us/web/api/gamepadhapticactuator/index.md
@@ -13,7 +13,7 @@ This interface is accessible through the {{domxref("Gamepad.hapticActuators")}}
 
 ## Instance properties
 
-- {{domxref("GamepadHapticActuator.type")}} {{ReadOnlyInline}}
+- {{domxref("GamepadHapticActuator.type")}} {{ReadOnlyInline}} {{deprecated_inline}}
   - : Returns an enum representing the type of the haptic hardware.
 
 ## Instance methods
diff --git a/files/en-us/web/api/gamepadhapticactuator/type/index.md b/files/en-us/web/api/gamepadhapticactuator/type/index.md
index 2ee3e8226daefda..236706190acbf9d 100644
--- a/files/en-us/web/api/gamepadhapticactuator/type/index.md
+++ b/files/en-us/web/api/gamepadhapticactuator/type/index.md
@@ -3,10 +3,12 @@ title: "GamepadHapticActuator: type property"
 short-title: type
 slug: Web/API/GamepadHapticActuator/type
 page-type: web-api-instance-property
+status:
+  - deprecated
 browser-compat: api.GamepadHapticActuator.type
 ---
 
-{{APIRef("Gamepad")}}
+{{APIRef("Gamepad")}}{{deprecated_header}}
 
 The **`type`** read-only property of the {{domxref("GamepadHapticActuator")}} interface returns an enum representing the type of the haptic hardware.
 
diff --git a/files/en-us/web/api/gpuinternalerror/index.md b/files/en-us/web/api/gpuinternalerror/index.md
index 4e4e428dff75708..6adb0a8a85cd3d6 100644
--- a/files/en-us/web/api/gpuinternalerror/index.md
+++ b/files/en-us/web/api/gpuinternalerror/index.md
@@ -26,7 +26,7 @@ Internal errors occur when something happens in the WebGPU implementation that w
 
 The `message` property is inherited from its parent, {{domxref("GPUError")}}:
 
-- {{domxref("GPUError.message", "message")}} {{Experimental_Inline}} {{ReadOnlyInline}} {{SecureContext_Inline}}
+- {{domxref("GPUError.message", "message")}} {{Experimental_Inline}} {{ReadOnlyInline}}
   - : A string providing a human-readable message that explains why the error occurred.
 
 ## Examples
diff --git a/files/en-us/web/api/gpuoutofmemoryerror/index.md b/files/en-us/web/api/gpuoutofmemoryerror/index.md
index b1b5a7d02672eba..20a1723c6002e3d 100644
--- a/files/en-us/web/api/gpuoutofmemoryerror/index.md
+++ b/files/en-us/web/api/gpuoutofmemoryerror/index.md
@@ -26,7 +26,7 @@ Out-of-memory errors should be relatively rare in a well-behaved app but are les
 
 The `message` property is inherited from its parent, {{domxref("GPUError")}}:
 
-- {{domxref("GPUError.message", "message")}} {{Experimental_Inline}} {{ReadOnlyInline}} {{SecureContext_Inline}}
+- {{domxref("GPUError.message", "message")}} {{Experimental_Inline}} {{ReadOnlyInline}}
   - : A string providing a human-readable message that explains why the error occurred.
 
 ## Examples
diff --git a/files/en-us/web/api/gpurenderbundle/index.md b/files/en-us/web/api/gpurenderbundle/index.md
index 335ced5612fa3f9..697457e59223ee4 100644
--- a/files/en-us/web/api/gpurenderbundle/index.md
+++ b/files/en-us/web/api/gpurenderbundle/index.md
@@ -21,7 +21,7 @@ A good example is VR rendering. Recording the rendering as a render bundle and t
 
 ## Instance properties
 
-- {{domxref("GPUComputePassEncoder.label", "label")}} {{Experimental_Inline}} {{SecureContext_Inline}}
+- {{domxref("GPUComputePassEncoder.label", "label")}} {{Experimental_Inline}}
   - : A string providing a label that can be used to identify the object, for example in {{domxref("GPUError")}} messages or console warnings.
 
 ## Examples
diff --git a/files/en-us/web/api/gpuvalidationerror/index.md b/files/en-us/web/api/gpuvalidationerror/index.md
index 509bf5a47766a78..e40135f433727db 100644
--- a/files/en-us/web/api/gpuvalidationerror/index.md
+++ b/files/en-us/web/api/gpuvalidationerror/index.md
@@ -28,7 +28,7 @@ Validation errors occur whenever invalid inputs are given to a WebGPU call. Thes
 
 The `message` property is inherited from its parent, {{domxref("GPUError")}}:
 
-- {{domxref("GPUError.message", "message")}} {{Experimental_Inline}} {{ReadOnlyInline}} {{SecureContext_Inline}}
+- {{domxref("GPUError.message", "message")}} {{Experimental_Inline}} {{ReadOnlyInline}}
   - : A string providing a human-readable message that explains why the error occurred.
 
 ## Examples
diff --git a/files/en-us/web/api/htmlanchorelement/text/index.md b/files/en-us/web/api/htmlanchorelement/text/index.md
index eeb791128821e54..66ae135e7a49f95 100644
--- a/files/en-us/web/api/htmlanchorelement/text/index.md
+++ b/files/en-us/web/api/htmlanchorelement/text/index.md
@@ -8,7 +8,7 @@ browser-compat: api.HTMLAnchorElement.text
 
 {{ApiRef("HTML DOM")}}
 
-The **`text`** property of the {{domxref("HTMLAnchorElement")}} represents the text inside the the element.
+The **`text`** property of the {{domxref("HTMLAnchorElement")}} represents the text inside the element.
 This property represents the same information as {{domxref("Node.textContent")}}.
 
 ## Value
diff --git a/files/en-us/web/api/htmlareaelement/hash/index.md b/files/en-us/web/api/htmlareaelement/hash/index.md
index b2676c684ac61b7..9b0ad37f54e7867 100644
--- a/files/en-us/web/api/htmlareaelement/hash/index.md
+++ b/files/en-us/web/api/htmlareaelement/hash/index.md
@@ -8,13 +8,9 @@ browser-compat: api.HTMLAreaElement.hash
 
 {{ APIRef("HTML DOM") }}
 
-The
-**`HTMLAreaElement.hash`** property returns a
-string containing a `'#'` followed by the fragment
-identifier of the URL.
+The **`HTMLAreaElement.hash`** property returns a string containing a `'#'` followed by the fragment identifier of the URL.
 
-The fragment is not [URL decoded](https://en.wikipedia.org/wiki/URL_encoding). If the URL does not
-have a fragment identifier, this property contains an empty string, `""`.
+The fragment is not [percent-encoded](https://en.wikipedia.org/wiki/Percent-encoding). If the URL does not have a fragment identifier, this property contains an empty string, `""`.
 
 ## Value
 
@@ -46,7 +42,7 @@ you can get the hash of the area link like this:
 
 ```js
 const area = document.getElementById("mdn-circle");
-area.hash; // returns '#ExampleSection'
+area.hash; // '#ExampleSection'
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/htmlbaseelement/href/index.md b/files/en-us/web/api/htmlbaseelement/href/index.md
new file mode 100644
index 000000000000000..036cb04a1189c99
--- /dev/null
+++ b/files/en-us/web/api/htmlbaseelement/href/index.md
@@ -0,0 +1,65 @@
+---
+title: "HTMLBaseElement: href property"
+short-title: href
+slug: Web/API/HTMLBaseElement/href
+page-type: web-api-instance-property
+browser-compat: api.HTMLBaseElement.href
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`href`** property of the {{domxref("HTMLBaseElement")}} interface contains a string that is the URL to use as the base for [relative URLs](/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#absolute_urls_vs._relative_urls).
+
+It reflects the `href` attribute of the {{HTMLElement("base")}} element.
+
+## Value
+
+A string that contains a URL, or the empty string (`""`) if the corresponding `` element does not include the `href` attribute.
+
+## Examples
+
+### HTML with base URL
+
+This example demonstrates that the `href` attribute in `` is reflected in the `href` property of `HTMLBaseElement`.
+
+```html hidden
+

+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = text;
+}
+```
+
+```css hidden
+#log {
+  height: 20px;
+}
+```
+
+#### HTML
+
+```html
+
+```
+
+#### JavaScript
+
+```js
+const base = document.getElementsByTagName("base")[0];
+log(`base.href="${base.href}"`);
+```
+
+#### Result
+
+{{EmbedLiveSample('HTML with base URL', '100','50px')}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
diff --git a/files/en-us/web/api/htmlcanvaselement/todataurl/index.md b/files/en-us/web/api/htmlcanvaselement/todataurl/index.md
index 313cd70f2693724..09387c99393053f 100644
--- a/files/en-us/web/api/htmlcanvaselement/todataurl/index.md
+++ b/files/en-us/web/api/htmlcanvaselement/todataurl/index.md
@@ -18,6 +18,8 @@ Browsers are required to support `image/png`; many will support additional forma
 
 The created image data will have a resolution of 96dpi for file formats that support encoding resolution metadata.
 
+> **Warning:** `toDataURL()` encodes the whole image in an in-memory string. For larger images, this can have performance implications, and may even overflow browsers' URL length limit when assigned to {{domxref("HTMLImageElement.src")}}. You should generally prefer [`toBlob()`](/en-US/docs/Web/API/HTMLCanvasElement/toBlob) instead, in combination with {{domxref("URL/createObjectURL_static", "URL.createObjectURL()")}}.
+
 ## Syntax
 
 ```js-nolint
diff --git a/files/en-us/web/api/htmlelement/focus/index.md b/files/en-us/web/api/htmlelement/focus/index.md
index a1a15cd88728910..eab5c19079701c1 100644
--- a/files/en-us/web/api/htmlelement/focus/index.md
+++ b/files/en-us/web/api/htmlelement/focus/index.md
@@ -33,8 +33,8 @@ focus(options)
         A value of `false` for `preventScroll` (the default) means that the browser will scroll the element into view after focusing it.
         If `preventScroll` is set to `true`, no scrolling will occur.
     - `focusVisible` {{optional_inline}} {{experimental_inline}}
-      - : A boolean value that should be set to `true` to force visible indication that the element is focused.
-        By default, or if the property is not `true`, a browser may still provide visible indication if it determines that this would improve accessibility for users.
+      - : A boolean value that should be set to `true` to force, or `false` to prevent visible indication that the element is focused.
+        If the property is not specified, a browser will provide visible indication if it determines that this would improve accessibility for users.
 
 ### Return value
 
diff --git a/files/en-us/web/api/htmlelement/offsetparent/index.md b/files/en-us/web/api/htmlelement/offsetparent/index.md
index 049ad68310b5fc3..76582a80a045a9f 100644
--- a/files/en-us/web/api/htmlelement/offsetparent/index.md
+++ b/files/en-us/web/api/htmlelement/offsetparent/index.md
@@ -12,9 +12,10 @@ The **`HTMLElement.offsetParent`** read-only property returns a
 reference to the element which is the closest (nearest in the containment hierarchy)
 positioned ancestor element.
 
-A positioned ancestor is either:
+A positioned ancestor might be:
 
-- an element with a non-static position, or
+- a [containing block](/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block) for absolutely-positioned elements
+- an element with a different effective [zoom](/en-US/docs/Web/CSS/zoom) value (that is, the product of all zoom scales of its parents) from this element
 - `td`, `th`, `table` in case the element itself is static positioned.
 
 If there is no positioned ancestor element, the `body` is returned.
diff --git a/files/en-us/web/api/htmlelement/virtualkeyboardpolicy/index.md b/files/en-us/web/api/htmlelement/virtualkeyboardpolicy/index.md
index a978bfd2491e71a..a5b936a3d452497 100644
--- a/files/en-us/web/api/htmlelement/virtualkeyboardpolicy/index.md
+++ b/files/en-us/web/api/htmlelement/virtualkeyboardpolicy/index.md
@@ -19,9 +19,9 @@ It reflects the value of the [`virtualkeyboardpolicy`](/en-US/docs/Web/HTML/Glob
 An enumerated value; possible values are:
 
 - `"auto"` or an empty string (`""`)
-  - The browser automatically shows the virtual keyboard when the user taps or focuses the element.
+  - : The browser automatically shows the virtual keyboard when the user taps or focuses the element.
 - `"manual"`
-  - The browser does not automatically show the virtual keyboard: showing/hiding the virtual keyboard is handled manually by the script.
+  - : The browser does not automatically show the virtual keyboard: showing/hiding the virtual keyboard is handled manually by the script.
 
 ## Examples
 
diff --git a/files/en-us/web/api/htmlfontelement/color/index.md b/files/en-us/web/api/htmlfontelement/color/index.md
index 609e0f228d64953..89d723ae68e4177 100644
--- a/files/en-us/web/api/htmlfontelement/color/index.md
+++ b/files/en-us/web/api/htmlfontelement/color/index.md
@@ -27,6 +27,8 @@ The format of the string must follow one of the following HTML microsyntaxes (se
 
 A string.
 
+When set to the `null` value, that `null` value is converted to the empty string (`""`), so `elt.color = null` is equivalent to `elt.color = ""`.
+
 ## Examples
 
 ```js
diff --git a/files/en-us/web/api/htmliframeelement/index.md b/files/en-us/web/api/htmliframeelement/index.md
index ea8e9a2781dfe36..bf222bb4895941d 100644
--- a/files/en-us/web/api/htmliframeelement/index.md
+++ b/files/en-us/web/api/htmliframeelement/index.md
@@ -24,7 +24,7 @@ _Inherits properties from its parent, {{domxref("HTMLElement")}}_.
 - {{domxref("HTMLIFrameElement.allowPaymentRequest")}} {{Deprecated_Inline}} {{Non-standard_Inline}}
   - : A boolean value indicating whether the [Payment Request API](/en-US/docs/Web/API/Payment_Request_API) may be invoked inside a cross-origin iframe.
 - {{domxref("HTMLIFrameElement.browsingTopics")}} {{Experimental_Inline}} {{non-standard_inline}}
-  - : A boolean property specifying that that the selected topics for the current user should be sent with the request for the associated {{htmlelement("iframe")}}'s source. This reflects the `browsingtopics` content attribute value.
+  - : A boolean property specifying that the selected topics for the current user should be sent with the request for the associated {{htmlelement("iframe")}}'s source. This reflects the `browsingtopics` content attribute value.
 - {{domxref("HTMLIFrameElement.contentDocument")}} {{ReadOnlyInline}}
   - : Returns a {{domxref("Document")}}, the active document in the inline frame's nested browsing context.
 - {{domxref("HTMLIFrameElement.contentWindow")}} {{ReadOnlyInline}}
diff --git a/files/en-us/web/api/htmlimageelement/border/index.md b/files/en-us/web/api/htmlimageelement/border/index.md
index 05c1f010e8907eb..6cee899d2355aee 100644
--- a/files/en-us/web/api/htmlimageelement/border/index.md
+++ b/files/en-us/web/api/htmlimageelement/border/index.md
@@ -34,7 +34,9 @@ For compatibility (or perhaps other) reasons, you can use the older properties i
 A string containing an integer value specifying the thickness of the
 border that should surround the image, in CSS pixels. A value of `0`, or an
 empty string, indicates that there should be no border drawn. The default value of
-`border` is `0`
+`border` is `0`.
+
+When set to the `null` value, that `null` value is converted to the empty string (`""`), so `elt.border = null` is equivalent to `elt.border = ""`.
 
 ## Usage notes
 
diff --git a/files/en-us/web/api/htmlimageelement/sizes/index.md b/files/en-us/web/api/htmlimageelement/sizes/index.md
index 07698157977e0dd..b3be4e48491da0e 100644
--- a/files/en-us/web/api/htmlimageelement/sizes/index.md
+++ b/files/en-us/web/api/htmlimageelement/sizes/index.md
@@ -127,7 +127,7 @@ article img {
 
 The JavaScript code handles the two buttons that let you toggle the third width option
 between 40em and 50em; this is done by handling the {{domxref("Element.click_event", "click")}}
-event, using the JavaScript string object {{jsxref("String.replace", "replace()")}} method to replace the relevant portion of the `sizes` string.
+event, using the JavaScript string {{jsxref("String.replace", "replace()")}} method to replace the relevant portion of the `sizes` string.
 
 ```js
 const image = document.querySelector("article img");
diff --git a/files/en-us/web/api/htmllinkelement/index.md b/files/en-us/web/api/htmllinkelement/index.md
index 053cfe0ac6ff4ea..d1f82ffcfc3567c 100644
--- a/files/en-us/web/api/htmllinkelement/index.md
+++ b/files/en-us/web/api/htmllinkelement/index.md
@@ -32,7 +32,7 @@ _Inherits properties from its parent, {{domxref("HTMLElement")}}._
 - {{domxref("HTMLLinkElement.integrity")}}
   - : A string that contains inline metadata that a browser can use to verify that a fetched resource has been delivered without unexpected manipulation. It reflects the `integrity` attribute of the {{HTMLElement("link")}} element.
 - {{domxref("HTMLLinkElement.media")}}
-  - : A string representing a list of one or more media formats to which the resource applies.
+  - : A string representing a list of one or more media formats to which the resource applies. It reflects the `media` attribute of the {{HTMLElement("link")}} element.
 - {{domxref("HTMLLinkElement.referrerPolicy")}}
   - : A string that reflects the [`referrerpolicy`](/en-US/docs/Web/HTML/Element/link#referrerpolicy) HTML attribute indicating which referrer to use.
 - {{domxref("HTMLLinkElement.rel")}}
diff --git a/files/en-us/web/api/htmllinkelement/media/index.md b/files/en-us/web/api/htmllinkelement/media/index.md
new file mode 100644
index 000000000000000..393a0cef3c84551
--- /dev/null
+++ b/files/en-us/web/api/htmllinkelement/media/index.md
@@ -0,0 +1,41 @@
+---
+title: "HTMLLinkElement: media property"
+short-title: media
+slug: Web/API/HTMLLinkElement/media
+page-type: web-api-instance-property
+browser-compat: api.HTMLLinkElement.media
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`media`** property of the {{domxref("HTMLLinkElement")}} interface is a string representing a list of one or more media formats to which the resource applies.
+
+It reflects the `media` attribute of the {{HTMLElement("link")}} element.
+
+## Value
+
+A string.
+
+## Examples
+
+```html
+
+```
+
+```js
+const el = document.getElementById("el");
+console.log(el.media); // Output: "screen and (min-width: 600px)"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
diff --git a/files/en-us/web/api/htmlmapelement/areas/index.md b/files/en-us/web/api/htmlmapelement/areas/index.md
new file mode 100644
index 000000000000000..325975137911833
--- /dev/null
+++ b/files/en-us/web/api/htmlmapelement/areas/index.md
@@ -0,0 +1,63 @@
+---
+title: "HTMLMapElement: areas property"
+short-title: areas
+slug: Web/API/HTMLMapElement/areas
+page-type: web-api-instance-property
+browser-compat: api.HTMLMapElement.areas
+---
+
+{{ApiRef("HTML DOM")}}
+
+The **`areas`** read-only property of the {{domxref("HTMLMapElement")}} interface returns a collection of {{HTMLElement("area")}} elements associated with the {{HTMLElement("map")}} element.
+
+## Value
+
+A {{domxref("HTMLCollection")}} object of {{domxref("HTMLAreaElement")}} elements.
+
+## Example
+
+```html
+
+  left arrow
+  right arrow
+
+left right arrow image
+
+```
+
+```css hidden
+output {
+  display: block;
+}
+```
+
+```js
+const mapElement = document.getElementById("image-map");
+const outputElement = document.querySelector("output");
+
+for (const area of mapElement.areas) {
+  area.addEventListener("click", (event) => {
+    outputElement.textContent = `You clicked on the ${area.alt} area.\n\n`;
+  });
+}
+```
+
+### Results
+
+{{EmbedLiveSample("Example",100,150)}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLAreaElement")}}
+- {{domxref("HTMLImageElement.useMap")}}
diff --git a/files/en-us/web/api/htmlmapelement/areas/left-right-arrow.png b/files/en-us/web/api/htmlmapelement/areas/left-right-arrow.png
new file mode 100644
index 000000000000000..ddd7971e530bbec
Binary files /dev/null and b/files/en-us/web/api/htmlmapelement/areas/left-right-arrow.png differ
diff --git a/files/en-us/web/api/htmlmediaelement/currentsrc/index.md b/files/en-us/web/api/htmlmediaelement/currentsrc/index.md
index d51f32b066f606f..5631c8ecefd5fda 100644
--- a/files/en-us/web/api/htmlmediaelement/currentsrc/index.md
+++ b/files/en-us/web/api/htmlmediaelement/currentsrc/index.md
@@ -15,7 +15,7 @@ is an empty string if the `networkState` property is `EMPTY`.
 
 ## Value
 
-A string object containing the absolute URL of the chosen media
+A string containing the absolute URL of the chosen media
 source; this may be an empty string if `networkState` is `EMPTY`;
 otherwise, it will be one of the resources listed by the
 {{domxref("HTMLSourceElement")}} contained within the media element, or the value or src
diff --git a/files/en-us/web/api/htmlmediaelement/ended_event/index.md b/files/en-us/web/api/htmlmediaelement/ended_event/index.md
index 5e6281816ffce19..a9f56c711307264 100644
--- a/files/en-us/web/api/htmlmediaelement/ended_event/index.md
+++ b/files/en-us/web/api/htmlmediaelement/ended_event/index.md
@@ -14,6 +14,8 @@ This event occurs based upon {{domxref("HTMLMediaElement")}} ({{HTMLElement("aud
 
 This event is not cancelable and does not bubble.
 
+> **Note:** The `ended` event doesn't fire if the [`loop`](/en-US/docs/Web/API/HTMLMediaElement/loop) property is `true` and [`playbackRate`](/en-US/docs/Web/API/HTMLMediaElement/playbackRate) is non-negative.
+
 ## Syntax
 
 Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
diff --git a/files/en-us/web/api/htmlmediaelement/src/index.md b/files/en-us/web/api/htmlmediaelement/src/index.md
index 69b23680d9ef590..4e6340ba06e2fb5 100644
--- a/files/en-us/web/api/htmlmediaelement/src/index.md
+++ b/files/en-us/web/api/htmlmediaelement/src/index.md
@@ -21,7 +21,7 @@ resource to use in the element.
 
 ## Value
 
-A string object containing the URL of a media resource to use in the
+A string containing the URL of a media resource to use in the
 element; this property reflects the value of the HTML element's `src`
 attribute.
 
diff --git a/files/en-us/web/api/htmlmetaelement/content/index.md b/files/en-us/web/api/htmlmetaelement/content/index.md
index 729093360038201..c3df848e94678d4 100644
--- a/files/en-us/web/api/htmlmetaelement/content/index.md
+++ b/files/en-us/web/api/htmlmetaelement/content/index.md
@@ -24,7 +24,7 @@ The `content` value is logged to the console to display the [keywords](/en-US/do
 
 ```js
 // given 
-let meta = document.querySelector("meta[name='keywords']");
+const meta = document.querySelector("meta[name='keywords']");
 console.log(meta.content);
 // "documentation, HTML, web"
 ```
@@ -35,7 +35,7 @@ The following example creates a new `` element with a `name` attribute set
 The `content` attribute sets a description of the document and is appended to the document ``:
 
 ```js
-let meta = document.createElement("meta");
+const meta = document.createElement("meta");
 meta.name = "description";
 meta.content =
   "The  element can be used to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value.";
diff --git a/files/en-us/web/api/htmlmetaelement/httpequiv/index.md b/files/en-us/web/api/htmlmetaelement/httpequiv/index.md
index 96c47ec1d7bc6ee..92480739b3470cf 100644
--- a/files/en-us/web/api/htmlmetaelement/httpequiv/index.md
+++ b/files/en-us/web/api/htmlmetaelement/httpequiv/index.md
@@ -24,7 +24,7 @@ The `http-equiv` attribute is logged to the console showing a `refresh` [pragma
 
 ```js
 // given 
-let meta = document.querySelector("meta[http-equiv]");
+const meta = document.querySelector("meta[http-equiv]");
 console.log(meta.httpEquiv);
 // refresh
 console.log(meta.content);
diff --git a/files/en-us/web/api/htmlmetaelement/index.md b/files/en-us/web/api/htmlmetaelement/index.md
index 29eaefb65698ce8..17993ce43db7f75 100644
--- a/files/en-us/web/api/htmlmetaelement/index.md
+++ b/files/en-us/web/api/htmlmetaelement/index.md
@@ -45,7 +45,7 @@ The following example creates a new `` element with a `name` attribute set
 The `content` attribute sets a description of the document and is appended to the document ``:
 
 ```js
-let meta = document.createElement("meta");
+const meta = document.createElement("meta");
 meta.name = "description";
 meta.content =
   "The  element can be used to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value.";
@@ -58,7 +58,7 @@ The following example shows how to create a new `` element with a `name` a
 The `content` attribute sets the viewport size and is appended to the document ``:
 
 ```js
-var meta = document.createElement("meta");
+const meta = document.createElement("meta");
 meta.name = "viewport";
 meta.content = "width=device-width, initial-scale=1";
 document.head.appendChild(meta);
diff --git a/files/en-us/web/api/htmlmetaelement/media/index.md b/files/en-us/web/api/htmlmetaelement/media/index.md
index 8509140cd9095d1..ca6394df973dd74 100644
--- a/files/en-us/web/api/htmlmetaelement/media/index.md
+++ b/files/en-us/web/api/htmlmetaelement/media/index.md
@@ -26,7 +26,7 @@ The `content` attribute is set to `#3c790a`, the `media` attribute is set to `pr
 When a user has specified a dark mode in their operating system, the `media` property can be used to set a different `theme-color`:
 
 ```js
-var meta = document.createElement("meta");
+const meta = document.createElement("meta");
 meta.name = "theme-color";
 meta.content = "#3c790a";
 meta.media = "(prefers-color-scheme: dark)";
@@ -42,17 +42,17 @@ The order of matching the `media` query matters, so the more specific query shou
 
 ```js
 // Add a theme-color for all devices
-meta = document.createElement("meta");
-meta.name = "theme-color";
-meta.content = "#ffffff";
-document.head.appendChild(meta);
+const meta1 = document.createElement("meta");
+meta1.name = "theme-color";
+meta1.content = "#ffffff";
+document.head.appendChild(meta1);
 
 // Add a theme-color for small devices
-var meta = document.createElement("meta");
-meta.name = "theme-color";
-meta.media = "(max-width: 600px)";
-meta.content = "#000000";
-document.head.appendChild(meta);
+const meta2 = document.createElement("meta");
+meta2.name = "theme-color";
+meta2.media = "(max-width: 600px)";
+meta2.content = "#000000";
+document.head.appendChild(meta2);
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/htmlmetaelement/name/index.md b/files/en-us/web/api/htmlmetaelement/name/index.md
index c0b548fe1c92973..5bda402da3f2918 100644
--- a/files/en-us/web/api/htmlmetaelement/name/index.md
+++ b/files/en-us/web/api/htmlmetaelement/name/index.md
@@ -24,7 +24,7 @@ The `name` value is logged to the console, showing that [keywords](/en-US/docs/W
 
 ```js
 // given 
-let meta = document.querySelector("meta");
+const meta = document.querySelector("meta");
 console.log(meta.name);
 // "keywords"
 ```
diff --git a/files/en-us/web/api/htmlmetaelement/scheme/index.md b/files/en-us/web/api/htmlmetaelement/scheme/index.md
index 4c137b65c1eba77..f59bb8a5fd64bfd 100644
--- a/files/en-us/web/api/htmlmetaelement/scheme/index.md
+++ b/files/en-us/web/api/htmlmetaelement/scheme/index.md
@@ -27,7 +27,7 @@ The `scheme` value is logged to the console to display the scheme of the metadat
 
 ```js
 // given 
-let meta = document.querySelector("meta[name='identifier']");
+const meta = document.querySelector("meta[name='identifier']");
 console.log(meta.scheme);
 // "ISBN"
 ```
diff --git a/files/en-us/web/api/htmltableelement/bgcolor/index.md b/files/en-us/web/api/htmltableelement/bgcolor/index.md
index dcd258ab5fc292c..be9829c40417e0b 100644
--- a/files/en-us/web/api/htmltableelement/bgcolor/index.md
+++ b/files/en-us/web/api/htmltableelement/bgcolor/index.md
@@ -19,6 +19,8 @@ background color of the table.
 
 A string representing a color value.
 
+When set to the `null` value, that `null` value is converted to the empty string (`""`), so `elt.bgColor = null` is equivalent to `elt.bgColor = ""`.
+
 ## Examples
 
 ```js
diff --git a/files/en-us/web/api/htmltableelement/cellpadding/index.md b/files/en-us/web/api/htmltableelement/cellpadding/index.md
index 6f583f3f58ca83c..f247ea394e1c755 100644
--- a/files/en-us/web/api/htmltableelement/cellpadding/index.md
+++ b/files/en-us/web/api/htmltableelement/cellpadding/index.md
@@ -15,7 +15,9 @@ padding around the individual cells of the table.
 
 ## Value
 
-A string representing pixels (e.g. "10") or a percentage value (e.g. "10%").
+A string representing pixels (e.g., `"10"`) or a percentage value (e.g., `"10%"`).
+
+When set to the `null` value, that `null` value is converted to the empty string (`""`), so `elt.cellPadding = null` is equivalent to `elt.cellPadding = ""`.
 
 ## Examples
 
diff --git a/files/en-us/web/api/htmltableelement/cellspacing/index.md b/files/en-us/web/api/htmltableelement/cellspacing/index.md
index f14e027ec77c581..d6c72b76bd13227 100644
--- a/files/en-us/web/api/htmltableelement/cellspacing/index.md
+++ b/files/en-us/web/api/htmltableelement/cellspacing/index.md
@@ -19,8 +19,9 @@ representing a table's cells. Any two cells are separated by the sum of the
 
 ## Value
 
-A string which is either a number of pixels (such as
-`"10"`) or a percentage value (like `"10%"`).
+A string which is either a number of pixels (such as `"10"`) or a percentage value (like `"10%"`).
+
+When set to the `null` value, that `null` value is converted to the empty string (`""`), so `elt.cellSpacing = null` is equivalent to `elt.cellSpacing = ""`.
 
 ## Examples
 
diff --git a/files/en-us/web/api/htmltablesectionelement/insertrow/index.md b/files/en-us/web/api/htmltablesectionelement/insertrow/index.md
index 5d5db6b37dcc4d4..09308afb40b0041 100644
--- a/files/en-us/web/api/htmltablesectionelement/insertrow/index.md
+++ b/files/en-us/web/api/htmltablesectionelement/insertrow/index.md
@@ -9,8 +9,8 @@ browser-compat: api.HTMLTableSectionElement.insertRow
 {{APIRef("HTML DOM")}}
 
 The **`insertRow()`** method of the {{domxref("HTMLTableSectionElement")}} interface inserts a new row
-({{HtmlElement("tr")}}) in the given {{HtmlElement("section")}}, and returns a reference to
-this new row.
+({{HtmlElement("tr")}}) in the given table sectioning element ({{HTMLElement("thead")}}, {{HTMLElement("tfoot")}}, or
+{{HTMLElement("tbody")}}), then returns a reference to this new row.
 
 > **Note:** `insertRow()` inserts the row directly into the
 > section. The row does not need to be appended separately as would be the case if
diff --git a/files/en-us/web/api/htmltrackelement/src/index.md b/files/en-us/web/api/htmltrackelement/src/index.md
index 8479d312bbd3ace..dd7672f8064ff67 100644
--- a/files/en-us/web/api/htmltrackelement/src/index.md
+++ b/files/en-us/web/api/htmltrackelement/src/index.md
@@ -14,7 +14,7 @@ indicates the URL of the text track's data.
 
 ## Value
 
-A string object containing the URL of the text track data.
+A string containing the URL of the text track data.
 
 ## Example
 
diff --git a/files/en-us/web/api/htmlvideoelement/index.md b/files/en-us/web/api/htmlvideoelement/index.md
index b6857dfd2eba9e0..97462ea3edfadb0 100644
--- a/files/en-us/web/api/htmlvideoelement/index.md
+++ b/files/en-us/web/api/htmlvideoelement/index.md
@@ -30,7 +30,7 @@ _Inherits properties from its parent interface, {{domxref("HTMLMediaElement")}},
 - {{domxref("HTMLVideoElement.width")}}
   - : A string that reflects the [`width`](/en-US/docs/Web/HTML/Element/video#width) HTML attribute, which specifies the width of the display area, in CSS pixels.
 
-### Gecko-specific properties
+### Firefox-specific properties
 
 - {{domxref("HTMLVideoElement.mozParsedFrames")}} {{Non-standard_Inline}} {{ReadOnlyInline}} {{deprecated_inline}}
   - : Returns an `unsigned long` with the count of video frames that have been parsed from the media resource.
diff --git a/files/en-us/web/api/identitycredential/token/index.md b/files/en-us/web/api/identitycredential/token/index.md
index c66b8488b748bac..f658f401027939d 100644
--- a/files/en-us/web/api/identitycredential/token/index.md
+++ b/files/en-us/web/api/identitycredential/token/index.md
@@ -18,7 +18,7 @@ The relying party (RP) sends the token to its server to validate the certificate
 
 If the user has never signed into the IdP or is logged out, the associated {{domxref("CredentialsContainer.get", "get()")}} call rejects with an error and the RP can direct the user to the IdP login page to sign in or create an account.
 
-> **Note:** The exact structure and content of the validation token token is opaque to the FedCM API, and to the browser. The IdP decides on the syntax and usage of it, and the RP needs to follow the instructions provided by the IdP (see [Verify the Google ID token on your server side](https://developers.google.com/identity/gsi/web/guides/verify-google-id-token), for example) to make sure they are using it correctly.
+> **Note:** The exact structure and content of the validation token is opaque to the FedCM API, and to the browser. The IdP decides on the syntax and usage of it, and the RP needs to follow the instructions provided by the IdP (see [Verify the Google ID token on your server side](https://developers.google.com/identity/gsi/web/guides/verify-google-id-token), for example) to make sure they are using it correctly.
 
 ## Value
 
diff --git a/files/en-us/web/api/installevent/index.md b/files/en-us/web/api/installevent/index.md
index ecb04183cb14e12..5f919267d4f45a7 100644
--- a/files/en-us/web/api/installevent/index.md
+++ b/files/en-us/web/api/installevent/index.md
@@ -2,12 +2,10 @@
 title: InstallEvent
 slug: Web/API/InstallEvent
 page-type: web-api-interface
-status:
-  - deprecated
 browser-compat: api.InstallEvent
 ---
 
-{{APIRef("Service Workers API")}}{{Deprecated_Header}}
+{{APIRef("Service Workers API")}}
 
 > **Note:** Instead of using the deprecated `ServiceWorkerGlobalScope.oninstall` handler to catch events of this type, handle the (non-deprecated) {{domxref("ServiceWorkerGlobalScope/install_event", "install")}} event using a listener added with {{domxref("EventTarget/addEventListener", "addEventListener")}}.
 
diff --git a/files/en-us/web/api/keyboardlayoutmap/index.md b/files/en-us/web/api/keyboardlayoutmap/index.md
index 0a837b6adf3412f..38851c66f44fe26 100644
--- a/files/en-us/web/api/keyboardlayoutmap/index.md
+++ b/files/en-us/web/api/keyboardlayoutmap/index.md
@@ -22,7 +22,7 @@ A list of valid keys is found in the [UI Events KeyboardEvent code Values](https
 
 ## Instance methods
 
-- `KeyboardLayoutMap.[@@iterator]()` {{experimental_inline}}
+- `KeyboardLayoutMap[Symbol.iterator]()` {{experimental_inline}}
   - : Returns a new [Iterator](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator) object that contains the key/value pairs.
 - {{domxref('KeyboardLayoutMap.entries()')}} {{experimental_inline}}
   - : Returns a new [Iterator](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator) object that contains the key/value pairs.
diff --git a/files/en-us/web/api/keyframeeffect/getkeyframes/index.md b/files/en-us/web/api/keyframeeffect/getkeyframes/index.md
index b7b672028fbf211..d9a019372962e2b 100644
--- a/files/en-us/web/api/keyframeeffect/getkeyframes/index.md
+++ b/files/en-us/web/api/keyframeeffect/getkeyframes/index.md
@@ -27,9 +27,9 @@ Returns a sequence of objects with the following format:
 - `property value pairs`
   - : As many property value pairs as are contained in each keyframe of the animation.
 - `offset`
-  - : The offset of the keyframe specified as a number between `0.0` and `1.0` inclusive or `null`. This is equivalent to specifying start and end states in percentages in CSS stylesheets using `@keyframes`. This will be `null` if the keyframe is automatically spaced using {{domxref("KeyframeEffect.spacing")}}.
+  - : The offset of the keyframe specified as a number between `0.0` and `1.0` inclusive or `null`. This is equivalent to specifying start and end states in percentages in CSS stylesheets using `@keyframes`. This will be `null` if the keyframe is automatically spaced.
 - `computedOffset`
-  - : The computed offset for this keyframe, calculated when the list of computed keyframes was produced according to {{domxref("KeyframeEffect.spacing")}}. Unlike **`offset`,** above, the **`computedOffset`** is never `null`.
+  - : The computed offset for this keyframe, calculated when the list of computed keyframes was produced. Unlike **`offset`,** above, the **`computedOffset`** is never `null`.
 - `easing`
   - : The [easing function](/en-US/docs/Web/CSS/easing-function) used from this keyframe until the next keyframe in the series.
 - `composite`
@@ -37,14 +37,53 @@ Returns a sequence of objects with the following format:
 
 ## Examples
 
-In the [Red Queen Race](https://codepen.io/rachelnabors/pen/PNGGaV) example, we can inspect Alice and the RedQueen's animation to see its individual keyframes like so:
+In the following example, we can inspect the rolling animation to see its keyframes using the `getKeyframes()` method:
 
 ```js
-// Return the array of keyframes
+const emoji = document.querySelector("div"); // element to animate
+
+const rollingKeyframes = new KeyframeEffect(
+  emoji,
+  [
+    { transform: "translateX(0) rotate(0)" }, // keyframe
+    { transform: "translateX(200px) rotate(1.3turn)" }, // keyframe
+  ],
+  {
+    // keyframe options
+    duration: 2000,
+    direction: "alternate",
+    easing: "ease-in-out",
+    iterations: "Infinity",
+  },
+);
+
+const rollingAnimation = new Animation(rollingKeyframes, document.timeline);
+rollingAnimation.play();
+
+// Array [ {…}, {…} ]
+console.log(rollingAnimation.effect.getKeyframes());
+```
+
+```html
+
🤣
+``` -redQueen_alice.effect.getKeyframes(); +```css hidden +body { + box-shadow: 0 5px 5px pink; +} + +div { + width: fit-content; + margin-left: calc(50% - 132px); + font-size: 64px; + user-select: none; + margin-top: 1rem; +} ``` +{{ EmbedLiveSample("Examples", "100%", "120") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/keyframeeffect/index.md b/files/en-us/web/api/keyframeeffect/index.md index 18e4959ac2cf4b6..aa09411d34243ca 100644 --- a/files/en-us/web/api/keyframeeffect/index.md +++ b/files/en-us/web/api/keyframeeffect/index.md @@ -44,29 +44,52 @@ _This interface inherits some of its methods from its parent, {{domxref("Animati ## Examples -In the [Follow the White Rabbit example](https://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010), the KeyframeEffect constructor is used to create a set of keyframes that dictate how the White Rabbit should animate down the hole: +In the following example, the KeyframeEffect constructor is used to create a set of keyframes that dictate how the rofl emoji should roll on the floor: ```js -const whiteRabbit = document.getElementById("rabbit"); +const emoji = document.querySelector("div"); // element to animate -const rabbitDownKeyframes = new KeyframeEffect( - whiteRabbit, // element to animate +const rollingKeyframes = new KeyframeEffect( + emoji, [ - { transform: "translateY(0%)" }, // keyframe - { transform: "translateY(100%)" }, // keyframe + { transform: "translateX(0) rotate(0)" }, // keyframe + { transform: "translateX(200px) rotate(1.3turn)" }, // keyframe ], - { duration: 3000, fill: "forwards" }, // keyframe options + { + // keyframe options + duration: 2000, + direction: "alternate", + easing: "ease-in-out", + iterations: "Infinity", + }, ); -const rabbitDownAnimation = new Animation( - rabbitDownKeyframes, - document.timeline, -); +const rollingAnimation = new Animation(rollingKeyframes, document.timeline); + +// play rofl animation +rollingAnimation.play(); +``` -// Play rabbit animation -rabbitDownAnimation.play(); +```html +
🤣
``` +```css hidden +body { + box-shadow: 0 5px 5px pink; +} + +div { + width: fit-content; + margin-left: calc(50% - 132px); + font-size: 64px; + user-select: none; + margin-top: 1rem; +} +``` + +{{ EmbedLiveSample("Examples", "100%", "120") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/keyframeeffect/keyframeeffect/index.md b/files/en-us/web/api/keyframeeffect/keyframeeffect/index.md index 6725071b9f309f5..92b9ec448c75e37 100644 --- a/files/en-us/web/api/keyframeeffect/keyframeeffect/index.md +++ b/files/en-us/web/api/keyframeeffect/keyframeeffect/index.md @@ -76,29 +76,50 @@ The single argument constructor (see above) creates a clone of an existing {{dom ## Examples -In the [Follow the White Rabbit example](https://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010), the `KeyframeEffect` constructor is used to create a set of keyframes that dictate how the White Rabbit should animate down the hole: +In the following example, the KeyframeEffect constructor is used to create a set of keyframes that dictate how the emoji should roll on the floor: ```js -const whiteRabbit = document.getElementById("rabbit"); +const emoji = document.querySelector("div"); // element to animate -const rabbitDownKeyframes = new KeyframeEffect( - whiteRabbit, // element to animate +const rollingKeyframes = new KeyframeEffect( + emoji, [ - { transform: "translateY(0%)" }, // keyframe - { transform: "translateY(100%)" }, // keyframe + { transform: "translateX(0) rotate(0)" }, // keyframe + { transform: "translateX(200px) rotate(1.3turn)" }, // keyframe ], - { duration: 3000, fill: "forwards" }, // keyframe options + { + // keyframe options + duration: 2000, + direction: "alternate", + easing: "ease-in-out", + iterations: "Infinity", + }, ); -const rabbitDownAnimation = new Animation( - rabbitDownKeyframes, - document.timeline, -); +const rollingAnimation = new Animation(rollingKeyframes, document.timeline); +rollingAnimation.play(); +``` -// Play rabbit animation -rabbitDownAnimation.play(); +```html +
🤣
``` +```css hidden +body { + box-shadow: 0 5px 5px pink; +} + +div { + width: fit-content; + margin-left: calc(50% - 132px); + font-size: 64px; + user-select: none; + margin-top: 1rem; +} +``` + +{{ EmbedLiveSample("Examples", "100%", "120") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/keyframeeffect/pseudoelement/index.md b/files/en-us/web/api/keyframeeffect/pseudoelement/index.md index 2d74707122de4d5..f186f8223cf979d 100644 --- a/files/en-us/web/api/keyframeeffect/pseudoelement/index.md +++ b/files/en-us/web/api/keyframeeffect/pseudoelement/index.md @@ -30,12 +30,14 @@ A string or `null`. ```css #text::after { - content: "⭐"; + content: "👹"; display: inline-block; /* Needed as the `transform` property does not apply to inline elements */ + font-size: 2rem; } #text::before { - content: "😊"; + content: "🤠"; display: inline-block; + font-size: 2rem; } ``` @@ -44,14 +46,11 @@ const log = document.getElementById("log"); const text = document.getElementById("text"); // Create the keyframe and launch the animation -const animation = text.animate( - [ - { transform: "rotate(0)" }, - { transform: "rotate(180deg)" }, - { transform: "rotate(360deg)" }, - ], - { duration: 3000, iterations: Infinity, pseudoElement: "::after" }, -); +const animation = text.animate([{ transform: "rotate(360deg)" }], { + duration: 3000, + iterations: Infinity, + pseudoElement: "::after", +}); // Get the value of KeyframeEffect.pseudoElement function logPseudoElement() { @@ -72,7 +71,7 @@ switchPseudoElement(); logPseudoElement(); ``` -{{EmbedLiveSample("Examples", "100", "70")}} +{{EmbedLiveSample("Examples", "100", "90")}} ## Specifications diff --git a/files/en-us/web/api/keyframeeffect/target/index.md b/files/en-us/web/api/keyframeeffect/target/index.md index 9ecf9408886f5be..5b606b56b90d41d 100644 --- a/files/en-us/web/api/keyframeeffect/target/index.md +++ b/files/en-us/web/api/keyframeeffect/target/index.md @@ -16,21 +16,53 @@ An {{domxref("Element")}} or `null`. ## Examples -In the [Follow the White Rabbit example](https://codepen.io/rachelnabors/pen/eJyWzm/?editors=0010), `whiteRabbit` sets the `target` element to be animated: +In the following example, `emoji` has been set as the `target` element to be animated: ```js -const whiteRabbit = document.getElementById("rabbit"); +const emoji = document.querySelector("div"); // element to animate -const rabbitDownKeyframes = new KeyframeEffect( - whiteRabbit, - [{ transform: "translateY(0%)" }, { transform: "translateY(100%)" }], - { duration: 3000, fill: "forwards" }, +const rollingKeyframes = new KeyframeEffect( + emoji, + [ + { transform: "translateX(0) rotate(0)" }, // keyframe + { transform: "translateX(200px) rotate(1.3turn)" }, // keyframe + ], + { + // keyframe options + duration: 2000, + direction: "alternate", + easing: "ease-in-out", + iterations: "Infinity", + }, ); -// returns
Click the rabbit's ears!
-rabbitDownKeyframes.target; +const rollingAnimation = new Animation(rollingKeyframes, document.timeline); +rollingAnimation.play(); + +// logs "
🤣
" +console.log(rollingKeyframes.target); +``` + +```html +
🤣
``` +```css hidden +body { + box-shadow: 0 5px 5px pink; +} + +div { + width: fit-content; + margin-left: calc(50% - 132px); + font-size: 64px; + user-select: none; + margin-top: 1rem; +} +``` + +{{ EmbedLiveSample("Examples", "100%", "120") }} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/location/hash/index.md b/files/en-us/web/api/location/hash/index.md index 52c3ba3430b3e5d..f5f667f98e87245 100644 --- a/files/en-us/web/api/location/hash/index.md +++ b/files/en-us/web/api/location/hash/index.md @@ -8,13 +8,9 @@ browser-compat: api.Location.hash {{ APIRef("Location") }} -The **`hash`** property of the -{{domxref("Location")}} interface returns a string containing a -`'#'` followed by the fragment identifier of the URL — the ID on the page -that the URL is trying to target. +The **`hash`** property of the {{domxref("Location")}} interface returns a string containing a `'#'` followed by the fragment identifier of the URL — the ID on the page that the URL is trying to target. -The fragment is not [URL decoded](https://en.wikipedia.org/wiki/URL_encoding). If the URL does not -have a fragment identifier, this property contains an empty string, `""`. +The fragment is not [percent-encoded](https://en.wikipedia.org/wiki/Percent-encoding). If the URL does not have a fragment identifier, this property contains an empty string, `""`. ## Value @@ -23,10 +19,10 @@ A string. ## Examples ```html -Examples +Examples ``` diff --git a/files/en-us/web/api/mathmlelement/attributestylemap/index.md b/files/en-us/web/api/mathmlelement/attributestylemap/index.md index f5d81127adf3f17..8cbc5dcab429003 100644 --- a/files/en-us/web/api/mathmlelement/attributestylemap/index.md +++ b/files/en-us/web/api/mathmlelement/attributestylemap/index.md @@ -26,7 +26,7 @@ The following code snippet shows the relationship between the `style` attribute ```html
- + f ( diff --git a/files/en-us/web/api/mathmlelement/index.md b/files/en-us/web/api/mathmlelement/index.md index dbc83c8b5b93af3..845e1d4501fead8 100644 --- a/files/en-us/web/api/mathmlelement/index.md +++ b/files/en-us/web/api/mathmlelement/index.md @@ -29,7 +29,7 @@ _This interface has no methods, but inherits methods from its parent, {{DOMxRef( ### MathML ```html - + x diff --git a/files/en-us/web/api/mathmlelement/style/index.md b/files/en-us/web/api/mathmlelement/style/index.md index 00db7b99ede0ff5..1026af2b3e5c0dc 100644 --- a/files/en-us/web/api/mathmlelement/style/index.md +++ b/files/en-us/web/api/mathmlelement/style/index.md @@ -37,7 +37,7 @@ A live {{domxref("CSSStyleDeclaration")}} object. The following code snippet demonstrates how the `style` attribute is translated into a list of entries in {{domxref("CSSStyleDeclaration")}} : ```html - + f ( diff --git a/files/en-us/web/api/mediakeys/getstatusforpolicy/index.md b/files/en-us/web/api/mediakeys/getstatusforpolicy/index.md new file mode 100644 index 000000000000000..dc116cb06aa49b4 --- /dev/null +++ b/files/en-us/web/api/mediakeys/getstatusforpolicy/index.md @@ -0,0 +1,171 @@ +--- +title: "MediaKeys: getStatusForPolicy() method" +short-title: getStatusForPolicy() +slug: Web/API/MediaKeys/getStatusForPolicy +page-type: web-api-instance-method +browser-compat: api.MediaKeys.getStatusForPolicy +--- + +{{APIRef("Encrypted Media Extensions")}}{{SecureContext_Header}} + +The `getStatusForPolicy()` method of the {{domxref("MediaKeys")}} interface is used to check whether the Content Decryption Module (CDM) would allow the presentation of encrypted media data using the keys, based on the specified policy requirements. + +The method returns a {{jsxref("Promise")}} that resolves with a string that indicates the status of the key with respect to all the specified policy requirements. +If the value resolves to `"usable"` then the content can be decrypted and presented at the ideal quality. +Other values indicate reasons why the keys cannot be used for presenting the content; in some cases they hint at fallback options, such as playing the content at a lower quality. + +The policy restrictions currently only include a restriction on the minimum supported HDCP version. + +Note that the method checks a "hypothetical key" against the restrictions. +The application does not need to first create a real key and fetch a real license using {{domxref("MediaKeySession")}}, and the {{domxref("MediaKeys")}} doesn't even have to be attached to audio or video elements. + +## Syntax + +```js-nolint +getStatusForPolicy(policy) +``` + +### Parameters + +- `policy` {{optional_inline}} + + - : An object with the following optional properties: + + - `minHdcpVersion` {{optional_inline}} + + - : A string indicating the semantic version of the minimum HDCP version to check for usability, such as `1.0`, `1.4`, `2.2`, `2.3`. + +> **Note:** At least one policy restriction must be specified, so `minHdcpVersion` is only "technically" optional. + +### Return value + +A {{jsxref("Promise")}} that resolves with a string indicating whether the key can be used for decryption given the specified policy. + +The string can have one of the following values: + +- `usable` + - : The key is currently usable for decryption. +- `expired` + - : The key is no longer usable for decryption because its expiration time has passed. +- `released` + - : The key has been released and is no longer available to the CDM. + However information about the key is available, such as a record of license destruction. +- `output-restricted` + - : There are output restrictions associated with the key based on the specified policy. + Media data decrypted with this key may be blocked from presentation. + The status indicates that the connection between the source and output (for example, your computer and an external display), is not trusted. + This might indicate that there are HDCP version mismatches between the source, intermediate devices, and output, or that intermediate connecting devices such as HDMI cables or video splitters are damaged or non-compliant. + An application might opt to use a higher HDCP version, content that does not require such a high version. + You should also check that intermediate devices and cables support HDCP, are connected firmly, and are not damaged. +- `output-downscaled` + - : There are output restrictions associated with the key based on the specified policy, however these restrictions might be relaxed if the content is played at a lower quality. + If this value is returned an application might play the content at a lower resolution, or it could choose to use a higher HDCP version, or use other content that does not require such a high HDCP version. +- `usable-in-future` + - : The key will become usable for decryption in future, once its start time is reached. +- `status-pending` + - : The status of the key is not yet known and is being determined. +- `internal-error` + - : The key is not currently usable for decryption because of an error in the CDM. + The application can't do anything to handle this case. + +### Exceptions + +- `TypeError` + + - : The `policy` has no defined properties (policy restrictions), or a property key is not valid. + +- `NotSupportedError` + + - : The CDM cannot determine the status for any or all of the policy restrictions. + +## Examples + +### Check if keys are usable with HDCP restriction + +This example checks if keys are usable for decrypting a particular video format when using a minimum HDCP version of `2.2`. + +> **Note:** A status of `output-restricted` when you're using an external display can be caused by hardware HDCP incompatibility issues. +> If using a laptop, you may be able to "fix" this by disconnecting the external display. + +#### HTML + +```html +

+```
+
+```css hidden
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+#### JavaScript
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
+```js
+const config = [
+  {
+    videoCapabilities: [
+      {
+        contentType: 'video/mp4; codecs="avc1.640028"',
+        encryptionScheme: "cenc",
+        robustness: "SW_SECURE_DECODE", // Widevine L3
+      },
+    ],
+  },
+];
+
+getMediaStatus(config);
+
+async function getMediaStatus(config) {
+  try {
+    const mediaKeySystemAccess = await navigator.requestMediaKeySystemAccess(
+      "com.widevine.alpha",
+      config,
+    );
+    const mediaKeys = await mediaKeySystemAccess.createMediaKeys();
+    const mediaStatus = await mediaKeys.getStatusForPolicy({
+      minHdcpVersion: "2.2",
+    });
+    log(mediaStatus);
+
+    // Get the content or fallback to an alternative if the
+    // keys are not usuable
+    if (mediaStatus === "usable") {
+      console.log("HDCP 2.2 can be enforced.");
+      // Fetch the high resolution protected content
+    } else {
+      log("HDCP 2.2 cannot be enforced");
+      // Fallback other content, get license, etc.
+    }
+  } catch (error) {
+    log(error);
+  }
+}
+```
+
+#### Results
+
+{{EmbedLiveSample("Check if keys are usable with HDCP restriction")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See Also
+
+- {{domxref("MediaKeyStatusMap.get()")}}
diff --git a/files/en-us/web/api/mediakeys/index.md b/files/en-us/web/api/mediakeys/index.md
index 1809ba4a1bbb4b7..f67f41988f860d4 100644
--- a/files/en-us/web/api/mediakeys/index.md
+++ b/files/en-us/web/api/mediakeys/index.md
@@ -17,15 +17,89 @@ None.
 
 - {{domxref("MediaKeys.createSession()")}}
   - : Returns a new {{domxref("MediaKeySession")}} object, which represents a context for message exchange with a content decryption module (CDM).
+- {{domxref("MediaKeys.getStatusForPolicy()")}}
+  - : Returns a {{jsxref("Promise")}} that resolves to a status string indicating whether the CDM would allow the presentation of encrypted media data using the keys, based on specified policy requirements.
 - {{domxref("MediaKeys.setServerCertificate()")}}
   - : Returns a {{jsxref("Promise")}} to a server certificate to be used to encrypt messages to the license server.
 
 ## Examples
 
+### Check if keys are usable with HDCP restriction
+
+This example shows how `getStatusForPolicy()` can be used to check if keys can decrypt a particular video format in a setup that has a minimum HDCP version of `2.2`.
+For more information, see the [MediaKeys: getStatusForPolicy() method](/en-US/docs/Web/API/MediaKeys/getStatusForPolicy) documentation.
+
+#### HTML
+
+```html
+

+```
+
+```css hidden
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+#### JavaScript
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = `${logElement.innerText}${text}\n`;
+  logElement.scrollTop = logElement.scrollHeight;
+}
+```
+
 ```js
-//TBD
+const config = [
+  {
+    videoCapabilities: [
+      {
+        contentType: 'video/mp4; codecs="avc1.640028"',
+        encryptionScheme: "cenc",
+        robustness: "SW_SECURE_DECODE", // Widevine L3
+      },
+    ],
+  },
+];
+
+getMediaStatus(config);
+
+async function getMediaStatus(config) {
+  try {
+    const mediaKeySystemAccess = await navigator.requestMediaKeySystemAccess(
+      "com.widevine.alpha",
+      config,
+    );
+    const mediaKeys = await mediaKeySystemAccess.createMediaKeys();
+    const mediaStatus = await mediaKeys.getStatusForPolicy({
+      minHdcpVersion: "2.2",
+    });
+    log(mediaStatus);
+
+    // Get the content or fallback to an alternative if the
+    // keys are not usuable
+    if (mediaStatus === "usable") {
+      console.log("HDCP 2.2 can be enforced.");
+      // Fetch the high resolution protected content
+    } else {
+      log("HDCP 2.2 cannot be enforced");
+      // Fallback other content, get license, etc.
+    }
+  } catch (error) {
+    log(error);
+  }
+}
 ```
 
+#### Results
+
+{{EmbedLiveSample("Check if keys are usable with HDCP restriction")}}
+
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/api/mediakeystatusmap/get/index.md b/files/en-us/web/api/mediakeystatusmap/get/index.md
index d0d889a1f15b42f..84ec33a42f8f75c 100644
--- a/files/en-us/web/api/mediakeystatusmap/get/index.md
+++ b/files/en-us/web/api/mediakeystatusmap/get/index.md
@@ -8,9 +8,9 @@ browser-compat: api.MediaKeyStatusMap.get
 
 {{APIRef("Encrypted Media Extensions")}}{{SecureContext_Header}}
 
-The **`get()`** method of the
-{{domxref("MediaKeyStatusMap")}} interface returns the value associated with the given
-key, or `undefined` if there is none.
+The **`get()`** method of the {{domxref("MediaKeyStatusMap")}} interface returns the status value associated with the given key, or `undefined` if there is none.
+
+The status value indicates whether or not the specific key can be used for decryption.
 
 ## Syntax
 
@@ -25,7 +25,34 @@ get(key)
 
 ### Return value
 
-The value associated with the given key, or `undefined`.
+A string specifying the status value associated with the given key, or `undefined`.
+
+The following status values are allowed:
+
+- `usable`
+  - : The key is currently usable for decryption.
+- `expired`
+  - : The key is no longer usable for decryption because its expiration time has passed.
+- `released`
+  - : The key has been released and is no longer available to the CDM.
+    However information about the key is available, such as a record of license destruction.
+- `output-restricted`
+  - : There are output restrictions associated with the key based on the specified policy.
+    Media data decrypted with this key may be blocked from presentation.
+    The status indicates that the connection between the source and output (for example, your computer and an external display), is not trusted.
+    This might indicate that there are HDCP version mismatches between the source, intermediate devices, and output, or that intermediate connecting devices such as HDMI cables or video splitters are damaged or non-compliant.
+    An application might opt to use a higher HDCP version, content that does not require such a high version.
+    You should also check that intermediate devices and cables support HDCP, are connected firmly, and are not damaged.
+- `output-downscaled`
+  - : There are output restrictions associated with the key based on the specified policy, however these restrictions might be relaxed if the content is played at a lower quality.
+    If this value is returned an application might play the content at a lower resolution, or it could choose to use a higher HDCP version, or use other content that does not require such a high HDCP version.
+- `usable-in-future`
+  - : The key will become usable for decryption in future, once its start time is reached.
+- `status-pending`
+  - : The status of the key is not yet known and is being determined.
+- `internal-error`
+  - : The key is not currently usable for decryption because of an error in the CDM.
+    The application can't do anything to handle this case.
 
 ## Specifications
 
diff --git a/files/en-us/web/api/mediakeystatusmap/index.md b/files/en-us/web/api/mediakeystatusmap/index.md
index b9ca82c53b8953b..6e86f3a75ef5e4c 100644
--- a/files/en-us/web/api/mediakeystatusmap/index.md
+++ b/files/en-us/web/api/mediakeystatusmap/index.md
@@ -28,7 +28,7 @@ The **`MediaKeyStatusMap`** interface of the [Encrypted Media Extensions API](/e
   - : Returns a new `Iterator` object containing keys for each element in the status map, in insertion order.
 - {{domxref("MediaKeyStatusMap.values()")}} {{ReadOnlyInline}}
   - : Returns a new `Iterator` object containing values for each element in the status map, in insertion order.
-- {{domxref("MediaKeyStatusMap.[@@iterator]()")}} {{ReadOnlyInline}}
+- `MediaKeyStatusMap[Symbol.iterator]()` {{ReadOnlyInline}}
   - : Returns a new `Iterator` object containing an array of `[key, value]` for each element in the status map, in insertion order.
 
 ## Specifications
diff --git a/files/en-us/web/api/mediakeysystemaccess/keysystem/index.md b/files/en-us/web/api/mediakeysystemaccess/keysystem/index.md
index 1e8ddb5d1da31fc..e60c5d42bd38330 100644
--- a/files/en-us/web/api/mediakeysystemaccess/keysystem/index.md
+++ b/files/en-us/web/api/mediakeysystemaccess/keysystem/index.md
@@ -8,8 +8,9 @@ browser-compat: api.MediaKeySystemAccess.keySystem
 
 {{APIRef("Encrypted Media Extensions")}}{{SecureContext_Header}}
 
-The `MediaKeySystemAccess.keySystem` read-only property returns a
-string identifying the key system being used.
+The **`keySystem`** read-only property of the {{domxref("MediaKeySystemAccess")}} interface returns a string identifying the key system being used.
+
+This is the value that was passed to {{domxref("Navigator.requestMediaKeySystemAccess()")}} when system access is requested.
 
 ## Value
 
diff --git a/files/en-us/web/api/medialist/mediatext/index.md b/files/en-us/web/api/medialist/mediatext/index.md
index 526d8b4c7b664b8..bc83cd72fc2b5d8 100644
--- a/files/en-us/web/api/medialist/mediatext/index.md
+++ b/files/en-us/web/api/medialist/mediatext/index.md
@@ -24,10 +24,7 @@ different queries separated by commas, e.g. `screen, print`. Note that the
 `mediaText` will immediately update the behavior of the
 document.
 
-Also note that is you try to set
-`mediaText` to `null`, it will be treated as an empty
-string, i.e. the value will be set to
-`""`.
+When set to the `null` value, that `null` value is converted to the empty string (`""`), so `ml.mediaText = null` is equivalent to `ml.mediaText = ""`.
 
 ## Examples
 
diff --git a/files/en-us/web/api/messageevent/index.md b/files/en-us/web/api/messageevent/index.md
index e9754c6b4779d18..45bde010b37f5e6 100644
--- a/files/en-us/web/api/messageevent/index.md
+++ b/files/en-us/web/api/messageevent/index.md
@@ -11,15 +11,16 @@ The **`MessageEvent`** interface represents a message received by a target objec
 
 This is used to represent messages in:
 
-- [Server-sent events](/en-US/docs/Web/API/Server-sent_events) (see {{domxref("EventSource.message_event")}}).
-- [Web sockets](/en-US/docs/Web/API/WebSockets_API) (see the `onmessage` property of the [WebSocket](/en-US/docs/Web/API/WebSocket) interface).
-- Cross-document messaging (see {{domxref("Window.postMessage()")}} and {{domxref("Window.message_event")}}).
-- [Channel messaging](/en-US/docs/Web/API/Channel_Messaging_API) (see {{domxref("MessagePort.postMessage()")}} and {{domxref("MessagePort.message_event")}}).
-- Cross-worker/document messaging (see the above two entries, but also {{domxref("Worker.postMessage()")}}, {{domxref("Worker.message_event")}}, {{domxref("ServiceWorkerGlobalScope.message_event")}}, etc.)
-- [Broadcast channels](/en-US/docs/Web/API/Broadcast_Channel_API) (see {{domxref("BroadcastChannel.postMessage()")}}) and {{domxref("BroadcastChannel.message_event")}}).
-- WebRTC data channels (see {{domxref("RTCDataChannel.message_event", "onmessage")}}).
-
-The action triggered by this event is defined in a function set as the event handler for the relevant `message` event (e.g. using an `onmessage` handler as listed above).
+- [Server-sent events](/en-US/docs/Web/API/Server-sent_events) (see the {{domxref("EventSource.message_event", "message")}} event of {{domxref("EventSource")}}).
+- [Web sockets](/en-US/docs/Web/API/WebSockets_API) (see the {{domxref("WebSocket.message_event", "message")}} event of {{domxref("WebSocket")}}).
+- Cross-document messaging (see {{domxref("Window.postMessage()")}} and the {{domxref("Window.message_event", "message")}} event of {{domxref("Window")}}).
+- [Channel messaging](/en-US/docs/Web/API/Channel_Messaging_API) (see {{domxref("MessagePort.postMessage()")}} and the {{domxref("MessagePort.message_event", "message")}} event of {{domxref("MessagePort")}}).
+- Cross-worker/document messaging (see the above two entries, but also {{domxref("Worker.postMessage()")}}, the {{domxref("Worker.message_event", "message")}} event of {{domxref("Worker")}}, the {{domxref("ServiceWorkerGlobalScope.message_event", "message")}} event of {{domxref("ServiceWorkerGlobalScope")}}, etc.)
+- [Broadcast channels](/en-US/docs/Web/API/Broadcast_Channel_API) (see {{domxref("BroadcastChannel.postMessage()")}} and the {{domxref("BroadcastChannel.message_event", "message")}} event of {{domxref("BroadcastChannel")}}).
+- WebRTC data channels (see the {{domxref("RTCDataChannel.message_event", "message")}} event of {{domxref("RTCDataChannel")}}).
+
+The action triggered by this event is defined in a function set as the event handler for the relevant `message` event.
+
 {{InheritanceDiagram}}
 
 ## Constructor
diff --git a/files/en-us/web/api/navigator/requestmediakeysystemaccess/index.md b/files/en-us/web/api/navigator/requestmediakeysystemaccess/index.md
index ba1365b8e6e47e4..a3d4a791e64d904 100644
--- a/files/en-us/web/api/navigator/requestmediakeysystemaccess/index.md
+++ b/files/en-us/web/api/navigator/requestmediakeysystemaccess/index.md
@@ -79,7 +79,7 @@ requestMediaKeySystemAccess(keySystem, supportedConfigurations)
 
     - `persistentState`
 
-      - : A string indicating whether whether the returned object must be able to persist session data or any other type of state.
+      - : A string indicating whether the returned object must be able to persist session data or any other type of state.
         The values are the same as for `distinctiveIdentifier` and have the same meaning: `required`, `optional` (default) ,`not-allowed`.
         Only "temporary" sessions may be created when persistent state is not allowed.
 
diff --git a/files/en-us/web/api/navigator/sendbeacon/index.md b/files/en-us/web/api/navigator/sendbeacon/index.md
index 52798f3053ef56c..28150406a305b30 100644
--- a/files/en-us/web/api/navigator/sendbeacon/index.md
+++ b/files/en-us/web/api/navigator/sendbeacon/index.md
@@ -16,7 +16,7 @@ sending analytics data to a web server, and avoids some of the problems with
 legacy techniques for sending analytics, such as the use of
 {{domxref("XMLHttpRequest","XMLHttpRequest")}}.
 
-> **Note:** For use cases that need the ability to send requests with methods other than `POST`, or to change any request properties, or that need access to the server response, instead use the [`fetch()`](/en-US/docs/Web/API/fetch) method with [`keepalive`](/en-US/docs/Web/API/RequestInit#keepalive) set to true.
+> **Note:** For use cases that need the ability to send requests with methods other than `POST`, or to change any request properties, or that need access to the server response, instead use the [`fetch()`](/en-US/docs/Web/API/Window/fetch) method with [`keepalive`](/en-US/docs/Web/API/RequestInit#keepalive) set to true.
 
 ## Syntax
 
diff --git a/files/en-us/web/api/ndefreader/write/index.md b/files/en-us/web/api/ndefreader/write/index.md
index f6c295e05d6fcc1..995c40398788c9f 100644
--- a/files/en-us/web/api/ndefreader/write/index.md
+++ b/files/en-us/web/api/ndefreader/write/index.md
@@ -23,11 +23,11 @@ write(message, options)
 
 - `message`
 
-  - : The message to be written, either a string object or literal, an {{jsxref("ArrayBuffer")}}, a {{jsxref("TypedArray")}},
+  - : The message to be written, either a string, an {{jsxref("ArrayBuffer")}}, a {{jsxref("TypedArray")}},
     a {{jsxref("DataView")}}, or an array of records. A record has the following members:
 
     - `data` {{optional_inline}}
-      - : Contains the data to be transmitted, a string object or literal, an {{jsxref("ArrayBuffer")}}, a {{jsxref("TypedArray")}},
+      - : Contains the data to be transmitted, a string, an {{jsxref("ArrayBuffer")}}, a {{jsxref("TypedArray")}},
         a {{jsxref("DataView")}}, or an array of nested records
     - `encoding` {{optional_inline}}
       - : A string specifying the record's encoding.
diff --git a/files/en-us/web/api/ndefreadingevent/ndefreadingevent/index.md b/files/en-us/web/api/ndefreadingevent/ndefreadingevent/index.md
index eb6b0e3d9d39e97..57856b2bc98141c 100644
--- a/files/en-us/web/api/ndefreadingevent/ndefreadingevent/index.md
+++ b/files/en-us/web/api/ndefreadingevent/ndefreadingevent/index.md
@@ -34,7 +34,7 @@ new NDEFReadingEvent(type, options)
       - : An object with the following members:
 
         - `data` {{optional_inline}}
-          - : Contains the data to be transmitted. It can be a string object or literal, an {{jsxref("ArrayBuffer")}}, a {{jsxref("TypedArray")}}, a {{jsxref("DataView")}}, or an array of nested records.
+          - : Contains the data to be transmitted. It can be a string, an {{jsxref("ArrayBuffer")}}, a {{jsxref("TypedArray")}}, a {{jsxref("DataView")}}, or an array of nested records.
         - `encoding` {{optional_inline}}
           - : A string specifying the record's encoding.
         - `id` {{optional_inline}}
diff --git a/files/en-us/web/api/ndefrecord/ndefrecord/index.md b/files/en-us/web/api/ndefrecord/ndefrecord/index.md
index deb2242f3cd15e5..37e2aabe465317c 100644
--- a/files/en-us/web/api/ndefrecord/ndefrecord/index.md
+++ b/files/en-us/web/api/ndefrecord/ndefrecord/index.md
@@ -28,7 +28,7 @@ new NDEFRecord(options)
   - : An object with the following properties:
 
     - `data` {{optional_inline}}
-      - : Contains the data to be transmitted. It can be a string object or literal, an {{jsxref("ArrayBuffer")}}, a {{jsxref("TypedArray")}}, a {{jsxref("DataView")}}, or an array of nested records.
+      - : Contains the data to be transmitted. It can be a string, an {{jsxref("ArrayBuffer")}}, a {{jsxref("TypedArray")}}, a {{jsxref("DataView")}}, or an array of nested records.
     - `encoding` {{optional_inline}}
       - : A string specifying the record's encoding.
     - `id` {{optional_inline}}
diff --git a/files/en-us/web/api/node/index.md b/files/en-us/web/api/node/index.md
index 98af714867b38a4..17e61e0eb6a7670 100644
--- a/files/en-us/web/api/node/index.md
+++ b/files/en-us/web/api/node/index.md
@@ -56,7 +56,7 @@ _In addition to the properties below, `Node` inherits properties from its parent
   - : Returns a string containing the name of the `Node`. The
     structure of the name will differ with the node type. E.g. An
     {{DOMxRef("HTMLElement")}} will contain the name of the corresponding tag, like
-    `'audio'` for an {{DOMxRef("HTMLAudioElement")}}, a {{DOMxRef("Text")}}
+    `'AUDIO'` for an {{DOMxRef("HTMLAudioElement")}}, a {{DOMxRef("Text")}}
     node will have the `'#text'` string, or a {{DOMxRef("Document")}} node will
     have the `'#document'` string.
 - {{DOMxRef("Node.nodeType")}} {{ReadOnlyInline}}
diff --git a/files/en-us/web/api/offscreencanvasrenderingcontext2d/index.md b/files/en-us/web/api/offscreencanvasrenderingcontext2d/index.md
index 93249505d39e021..fe477db0fdba009 100644
--- a/files/en-us/web/api/offscreencanvasrenderingcontext2d/index.md
+++ b/files/en-us/web/api/offscreencanvasrenderingcontext2d/index.md
@@ -10,7 +10,7 @@ browser-compat: api.OffscreenCanvasRenderingContext2D
 The **`OffscreenCanvasRenderingContext2D`** interface is a {{domxref("CanvasRenderingContext2D")}} rendering context for drawing to the bitmap of an `OffscreenCanvas` object.
 It is similar to the `CanvasRenderingContext2D` object, with the following differences:
 
-- there is no support for user-interface features (`drawFocusIfNeeded`, and `scrollPathIntoView`)
+- there is no support for user-interface features (`drawFocusIfNeeded`)
 - its `canvas` attribute refers to an `OffscreenCanvas` object rather than a {{HtmlElement("canvas")}} element
 - the bitmap for the placeholder {{HtmlElement("canvas")}} element belonging to the `OffscreenCanvas` object is updated during the rendering update of the `Window` or `Worker` that owns the `OffscreenCanvas`
 
@@ -49,12 +49,10 @@ The following method is new to the `OffscreenCanvasRenderingContext2D` interface
 
 ## Unsupported features
 
-The following user interface methods are **not supported** by the `OffscreenCanvasRenderingContext2D` interface:
+The following user interface method is **not supported** by the `OffscreenCanvasRenderingContext2D` interface:
 
 - {{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
   - : If a given element is focused, this method draws a focus ring around the current path.
-- {{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{Experimental_Inline}}
-  - : Scrolls the current path or a given path into the view.
 
 ## Inherited properties and methods
 
@@ -273,12 +271,10 @@ The `CanvasRenderingContext2D` rendering context contains a variety of drawing s
 
 ## Unsupported properties and methods
 
-The following methods are **not supported** in the `OffscreenCanvasRenderingContext2D` interface:
+The following method is **not supported** in the `OffscreenCanvasRenderingContext2D` interface:
 
 - {{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
   - : If a given element is focused, this method draws a focus ring around the current path.
-- {{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{Experimental_Inline}}
-  - : Scrolls the current path or a given path into the view.
 
 ## Specifications
 
diff --git a/files/en-us/web/api/pagerevealevent/index.md b/files/en-us/web/api/pagerevealevent/index.md
index 89075e9149afbfc..707cc324498943f 100644
--- a/files/en-us/web/api/pagerevealevent/index.md
+++ b/files/en-us/web/api/pagerevealevent/index.md
@@ -26,11 +26,6 @@ requestAnimationFrame(() => reveal());
 window.onpagehide = () => requestAnimationFrame(() => reveal());
 ```
 
-## Constructor
-
-- {{domxref("PageRevealEvent.PageRevealEvent", "PageRevealEvent()")}} {{experimental_inline}}
-  - : Creates a new {{domxref("PageRevealEvent")}} object instance.
-
 ## Instance properties
 
 - {{domxref("PageRevealEvent.viewTransition", "viewTransition")}} {{ReadOnlyInline}} {{Experimental_Inline}}
diff --git a/files/en-us/web/api/pagerevealevent/pagerevealevent/index.md b/files/en-us/web/api/pagerevealevent/pagerevealevent/index.md
deleted file mode 100644
index 3b87cbb0858abcc..000000000000000
--- a/files/en-us/web/api/pagerevealevent/pagerevealevent/index.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: "PageRevealEvent: PageRevealEvent() constructor"
-short-title: PageRevealEvent()
-slug: Web/API/PageRevealEvent/PageRevealEvent
-page-type: web-api-constructor
-status:
-  - experimental
-browser-compat: api.PageRevealEvent.PageRevealEvent
----
-
-{{APIRef("HTML DOM")}}{{SeeCompatTable}}
-
-The **`PageRevealEvent()`** constructor creates a new
-{{domxref("PageRevealEvent")}} object instance.
-
-## Syntax
-
-```js-nolint
-new PageRevealEvent(type, init)
-```
-
-### Parameters
-
-- `type`
-  - : A string representing the type of event. In the case of `PageRevealEvent` this is always `pagereveal`.
-- `init`
-  - : An object containing the following properties:
-    - `viewTransition` {{optional_inline}}
-      - : A {{domxref("ViewTransition")}} object representing the active view transition for the related navigation. Defaults to `null` if there is no active view transition.
-
-## Examples
-
-A developer would not use this constructor manually. A new `PageRevealEvent` object is constructed when a handler is invoked as a result of the {{domxref("Window.pagereveal_event", "pagereveal")}} event firing.
-
-## Specifications
-
-{{Specifications}}
-
-## Browser compatibility
-
-{{Compat}}
-
-## See also
-
-- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API)
diff --git a/files/en-us/web/api/pageswapevent/index.md b/files/en-us/web/api/pageswapevent/index.md
index 642b50499abedd7..274b3ea170c7523 100644
--- a/files/en-us/web/api/pageswapevent/index.md
+++ b/files/en-us/web/api/pageswapevent/index.md
@@ -13,11 +13,6 @@ The **`PageSwapEvent`** event object is made available inside handler functions
 
 The `pageswap` event is fired when you navigate across documents, when the previous document is about to unload. During a cross-document navigation, the `PageSwapEvent` event object allows you to manipulate the related [view transition](/en-US/docs/Web/API/View_Transitions_API) (providing access to the relevant {{domxref("ViewTransition")}} object) from the document being navigated _from_, if a view transition was triggered by the navigation. It also provides access to information on the navigation type and current and destination documents.
 
-## Constructor
-
-- {{domxref("PageSwapEvent.PageSwapEvent", "PageSwapEvent()")}} {{experimental_inline}}
-  - : Creates a new {{domxref("PageSwapEvent")}} object instance.
-
 ## Instance properties
 
 - {{domxref("PageSwapEvent.activation", "activation")}} {{ReadOnlyInline}} {{Experimental_Inline}}
diff --git a/files/en-us/web/api/pageswapevent/pageswapevent/index.md b/files/en-us/web/api/pageswapevent/pageswapevent/index.md
deleted file mode 100644
index e5336b3a418f2cf..000000000000000
--- a/files/en-us/web/api/pageswapevent/pageswapevent/index.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: "PageSwapEvent: PageSwapEvent() constructor"
-short-title: PageSwapEvent()
-slug: Web/API/PageSwapEvent/PageSwapEvent
-page-type: web-api-constructor
-status:
-  - experimental
-browser-compat: api.PageSwapEvent.PageSwapEvent
----
-
-{{APIRef("HTML DOM")}}{{SeeCompatTable}}
-
-The **`PageSwapEvent()`** constructor creates a new
-{{domxref("PageSwapEvent")}} object instance.
-
-## Syntax
-
-```js-nolint
-new PageSwapEvent(type, init)
-```
-
-### Parameters
-
-- `type`
-  - : A string representing the type of event. In the case of `PageSwapEvent` this is always `pageswap`.
-- `init`
-  - : An object containing the following properties:
-    - `activation`
-      - : A {{domxref("NavigationActivation")}} object representing the navigation type and current and destination document history entries. Defaults to `null` if the associated navigation is a cross-origin navigation.
-    - `viewTransition`
-      - : A {{domxref("ViewTransition")}} object representing the active view transition for the related navigation. Defaults to `null` if there is no active view transition.
-
-## Examples
-
-A developer would not use this constructor manually. A new `PageSwapEvent` object is constructed when a handler is invoked as a result of the {{domxref("Window.pageswap_event", "pageswap")}} event firing.
-
-## Specifications
-
-{{Specifications}}
-
-## Browser compatibility
-
-{{Compat}}
-
-## See also
-
-- [View Transitions API](/en-US/docs/Web/API/View_Transitions_API)
diff --git a/files/en-us/web/api/performance_api/long_animation_frame_timing/index.md b/files/en-us/web/api/performance_api/long_animation_frame_timing/index.md
index 163ce1080d0b43b..def7d6abd221016 100644
--- a/files/en-us/web/api/performance_api/long_animation_frame_timing/index.md
+++ b/files/en-us/web/api/performance_api/long_animation_frame_timing/index.md
@@ -108,7 +108,7 @@ Beyond the standard data returned by a {{domxref("PerformanceEntry")}} entry, th
 
 ## Calculating timestamps
 
-The timestamps provided in the {{domxref("PerformanceLongAnimationFrameTiming")}} class allow several further useful timings to be calculated for the the long animation frame:
+The timestamps provided in the {{domxref("PerformanceLongAnimationFrameTiming")}} class allow several further useful timings to be calculated for the long animation frame:
 
 | Timing                            | Calculation                                                              |
 | --------------------------------- | ------------------------------------------------------------------------ |
diff --git a/files/en-us/web/api/performanceobserver/observe/index.md b/files/en-us/web/api/performanceobserver/observe/index.md
index 3e40b1b30fa0d40..091130723153eae 100644
--- a/files/en-us/web/api/performanceobserver/observe/index.md
+++ b/files/en-us/web/api/performanceobserver/observe/index.md
@@ -32,7 +32,7 @@ observe(options)
       - : A {{domxref("DOMHighResTimeStamp")}} defining the threshold for {{domxref("PerformanceEventTiming")}} entries. Defaults to 104ms and is rounded to the nearest of 8ms. Lowest possible threshold is 16ms. May not be used together with the `entryTypes` option.
     - `entryTypes`
 
-      - : An array of string objects, each specifying one performance entry type to observe. May not be used together with
+      - : An array of strings, each specifying one performance entry type to observe. May not be used together with
         the "`type`", "`buffered`", or "`durationThreshold`" options.
 
         See {{domxref("PerformanceEntry.entryType")}} for a list of valid performance entry type names. Unrecognized types are ignored, though the browser may output a warning message to the console to help developers debug their code. If no valid types are found, `observe()` has no effect.
diff --git a/files/en-us/web/api/popover_api/using/index.md b/files/en-us/web/api/popover_api/using/index.md
index 675f5ecc963be82..368e0cab3566575 100644
--- a/files/en-us/web/api/popover_api/using/index.md
+++ b/files/en-us/web/api/popover_api/using/index.md
@@ -152,71 +152,6 @@ document.addEventListener("keydown", (event) => {
 
 See our [Toggle help UI example](https://mdn.github.io/dom-examples/popover-api/toggle-help-ui/) ([source](https://github.com/mdn/dom-examples/tree/main/popover-api/toggle-help-ui)) to see the popover JavaScript properties, feature detection, and `togglePopover()` method in action.
 
-## Dismissing popovers automatically via a timer
-
-Another common pattern in JavaScript is dismissing popovers automatically after a certain amount of time. You might for example want to create a system of "toast" notifications, where you have multiple actions underway at a time (for example multiple files uploading), and want to show a notification when each one succeeds or fails. For this you'll want to use manual popovers so you can show several at the same time, and use {{domxref("setTimeout()")}} to remove them. A function for handling such popovers might look like so:
-
-```js
-function makeToast(result) {
-  const popover = document.createElement("article");
-  popover.popover = "manual";
-  popover.classList.add("toast");
-  popover.classList.add("newest");
-
-  let msg;
-
-  if (result === "success") {
-    msg = "Action was successful!";
-    popover.classList.add("success");
-    successCount++;
-  } else if (result === "failure") {
-    msg = "Action failed!";
-    popover.classList.add("failure");
-    failCount++;
-  } else {
-    return;
-  }
-
-  popover.textContent = msg;
-  document.body.appendChild(popover);
-  popover.showPopover();
-
-  updateCounter();
-
-  setTimeout(() => {
-    popover.hidePopover();
-    popover.remove();
-  }, 4000);
-}
-```
-
-You can also use the {{domxref("HTMLElement.beforetoggle_event", "beforetoggle")}} event to perform a follow-up action when a popover shows or hides. In our example we execute a `moveToastsUp()` function to make the toasts all move up the screen to make way each time a new toast appears:
-
-```js
-popover.addEventListener("toggle", (event) => {
-  if (event.newState === "open") {
-    moveToastsUp();
-  }
-});
-
-function moveToastsUp() {
-  const toasts = document.querySelectorAll(".toast");
-
-  toasts.forEach((toast) => {
-    if (toast.classList.contains("newest")) {
-      toast.style.bottom = `5px`;
-      toast.classList.remove("newest");
-    } else {
-      const prevValue = toast.style.bottom.replace("px", "");
-      const newValue = parseInt(prevValue) + 50;
-      toast.style.bottom = `${newValue}px`;
-    }
-  });
-}
-```
-
-See our [Toast popover example](https://mdn.github.io/dom-examples/popover-api/toast-popovers/) ([source](https://github.com/mdn/dom-examples/tree/main/popover-api/toast-popovers)) to see the above example snippets in action, and full comments for explanation.
-
 ## Nested popovers
 
 There is an exception to the rule about not displaying multiple auto popovers at once — when they are nested inside one another. In such cases, multiple popovers are allowed to both be open at the same time, due to their relationship with each other. This pattern is supported to enable use cases such as nested popover menus.
diff --git a/files/en-us/web/api/pressureobserver/observe/index.md b/files/en-us/web/api/pressureobserver/observe/index.md
index d072367a3a030d7..974cdfe70df3d90 100644
--- a/files/en-us/web/api/pressureobserver/observe/index.md
+++ b/files/en-us/web/api/pressureobserver/observe/index.md
@@ -37,7 +37,7 @@ A {{jsxref("Promise")}} that fulfils with {{jsxref("undefined")}}.
 ### Exceptions
 
 - `NotAllowedError` {{domxref("DOMException")}}
-  - : Thrown if the the [Compute Pressure API](/en-US/docs/Web/API/Compute_Pressure_API) is disallowed by a {{httpheader('Permissions-Policy/compute-pressure','compute-pressure')}} [Permissions Policy](/en-US/docs/Web/HTTP/Permissions_Policy).
+  - : Thrown if the [Compute Pressure API](/en-US/docs/Web/API/Compute_Pressure_API) is disallowed by a {{httpheader('Permissions-Policy/compute-pressure','compute-pressure')}} [Permissions Policy](/en-US/docs/Web/HTTP/Permissions_Policy).
 - `NotSupportedError` {{domxref("DOMException")}}
   - : Thrown if the `source` parameter is not one of the supported sources for this user agent.
 
diff --git a/files/en-us/web/api/pressureobserver/pressureobserver/index.md b/files/en-us/web/api/pressureobserver/pressureobserver/index.md
index ba114429660746e..db0c76fabae464d 100644
--- a/files/en-us/web/api/pressureobserver/pressureobserver/index.md
+++ b/files/en-us/web/api/pressureobserver/pressureobserver/index.md
@@ -34,7 +34,7 @@ A new {{domxref("PressureObserver")}} object with the specified `callback` funct
 ### Exceptions
 
 - `NotAllowedError` {{domxref("DOMException")}}
-  - : Thrown if the the [Compute Pressure API](/en-US/docs/Web/API/Compute_Pressure_API) is disallowed by a {{httpheader('Permissions-Policy/compute-pressure','compute-pressure')}} [Permissions Policy](/en-US/docs/Web/HTTP/Permissions_Policy).
+  - : Thrown if the [Compute Pressure API](/en-US/docs/Web/API/Compute_Pressure_API) is disallowed by a {{httpheader('Permissions-Policy/compute-pressure','compute-pressure')}} [Permissions Policy](/en-US/docs/Web/HTTP/Permissions_Policy).
 
 ## Examples
 
diff --git a/files/en-us/web/api/pushmessagedata/bytes/index.md b/files/en-us/web/api/pushmessagedata/bytes/index.md
index 022da5bfb29ba33..776a79e4121ebf3 100644
--- a/files/en-us/web/api/pushmessagedata/bytes/index.md
+++ b/files/en-us/web/api/pushmessagedata/bytes/index.md
@@ -3,12 +3,10 @@ title: "PushMessageData: bytes() method"
 short-title: bytes()
 slug: Web/API/PushMessageData/bytes
 page-type: web-api-instance-method
-status:
-  - experimental
 browser-compat: api.PushMessageData.bytes
 ---
 
-{{APIRef("Push API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}{{SeeCompatTable}}
+{{APIRef("Push API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}}
 
 The **`bytes()`** method of the {{domxref("PushMessageData")}} interface extracts push message data as an {{jsxref("Uint8Array")}} object.
 
diff --git a/files/en-us/web/api/pushmessagedata/index.md b/files/en-us/web/api/pushmessagedata/index.md
index da603d990ba9bf6..4b475203375b4b4 100644
--- a/files/en-us/web/api/pushmessagedata/index.md
+++ b/files/en-us/web/api/pushmessagedata/index.md
@@ -23,7 +23,7 @@ None.
   - : Extracts the data as an {{jsxref("ArrayBuffer")}} object.
 - {{domxref("PushMessageData.blob()")}}
   - : Extracts the data as a {{domxref("Blob")}} object.
-- {{domxref("PushMessageData.bytes()")}} {{experimental_inline}}
+- {{domxref("PushMessageData.bytes()")}}
   - : Extracts the data as a {{jsxref("Uint8Array")}} object.
 - {{domxref("PushMessageData.json()")}}
   - : Extracts the data as a [JSON](/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) object.
diff --git a/files/en-us/web/api/readablestream/from_static/index.md b/files/en-us/web/api/readablestream/from_static/index.md
index a043134362b962c..d3464bc3da01452 100644
--- a/files/en-us/web/api/readablestream/from_static/index.md
+++ b/files/en-us/web/api/readablestream/from_static/index.md
@@ -32,7 +32,7 @@ A {{domxref("ReadableStream")}}.
 ### Exceptions
 
 - {{jsxref("TypeError")}}
-  - : Thrown if the passed parameter is not an iterable or async iterable (does not define the `@@iterator` or `@@asyncIterator` method).
+  - : Thrown if the passed parameter is not an iterable or async iterable (does not define the `[Symbol.iterator]()` or `[Symbol.asyncIterator]()` method).
     Also thrown if, during iteration, the result of the next step is not an object or is a promise that does not resolve to an object.
 
 ## Examples
diff --git a/files/en-us/web/api/readablestream/pipeto/index.md b/files/en-us/web/api/readablestream/pipeto/index.md
index 2bc2a4602448e6a..39ece98b9dabbcd 100644
--- a/files/en-us/web/api/readablestream/pipeto/index.md
+++ b/files/en-us/web/api/readablestream/pipeto/index.md
@@ -71,7 +71,7 @@ The same example, but using {{jsxref("Operators/await", "await")}}:
   // Fetch the original image
   const response = await fetch("png-logo.png");
   // Retrieve its body as ReadableStream
-  response.body
+  await response.body
     .pipeThrough(new PNGTransformStream())
     .pipeTo(new FinalDestinationStream());
 })();
diff --git a/files/en-us/web/api/request/credentials/index.md b/files/en-us/web/api/request/credentials/index.md
index 46e5c486f06049a..bd9bfd45fc114a5 100644
--- a/files/en-us/web/api/request/credentials/index.md
+++ b/files/en-us/web/api/request/credentials/index.md
@@ -8,7 +8,7 @@ browser-compat: api.Request.credentials
 
 {{APIRef("Fetch API")}}
 
-The **`credentials`** read-only property of the {{domxref("Request")}} interface reflects the value given to the {{domxref("Request.Request()", "Request()")}} constructor in the [`credentials`](/en-US/docs/Web/API/RequestInit#credentials) option, and determines whether or not the browser sends credentials with the request.
+The **`credentials`** read-only property of the {{domxref("Request")}} interface reflects the value given to the {{domxref("Request.Request()", "Request()")}} constructor in the [`credentials`](/en-US/docs/Web/API/RequestInit#credentials) option. It determines whether or not the browser sends credentials with the request, as well as whether any **`Set-Cookie`** response headers are respected.
 
 Credentials are cookies, {{glossary("TLS")}} client certificates, or authentication headers containing a username and password.
 
diff --git a/files/en-us/web/api/requestinit/index.md b/files/en-us/web/api/requestinit/index.md
index 5fbddcb75295745..52678d92dc28927 100644
--- a/files/en-us/web/api/requestinit/index.md
+++ b/files/en-us/web/api/requestinit/index.md
@@ -10,7 +10,7 @@ spec-urls: https://fetch.spec.whatwg.org/#requestinit
 
 The **`RequestInit`** dictionary of the [Fetch API](/en-US/docs/Web/API/Fetch_API) represents the set of options that can be used to configure a Fetch request.
 
-You can pass a `RequestInit` object into the {{domxref("Request.Request()", "Request()")}} constructor, or directly into the [`fetch()`](/en-US/docs/Web/API/fetch) function call.
+You can pass a `RequestInit` object into the {{domxref("Request.Request()", "Request()")}} constructor, or directly into the [`fetch()`](/en-US/docs/Web/API/Window/fetch) function call.
 
 You can also construct a `Request` with a `RequestInit`, and pass the `Request` to a `fetch()` call along with another `RequestInit`. If you do this, and the same option is set in both places, then the value passed directly into `fetch()` is used.
 
@@ -89,7 +89,7 @@ You can also construct a `Request` with a `RequestInit`, and pass the `Request`
 
 - `credentials` {{optional_inline}}
 
-  - : Controls whether or not the browser sends credentials with the request. Credentials are cookies, {{glossary("TLS")}} client certificates, or authentication headers containing a username and password. This option may be any one of the following values:
+  - : Controls whether or not the browser sends credentials with the request, as well as whether any **`Set-Cookie`** response headers are respected. Credentials are cookies, {{glossary("TLS")}} client certificates, or authentication headers containing a username and password. This option may be any one of the following values:
 
     - `omit`
       - : Never send credentials in the request or include credentials in the response.
@@ -210,7 +210,7 @@ You can also construct a `Request` with a `RequestInit`, and pass the `Request`
 
 ### Passing options into `fetch()`
 
-In this example we pass the `method`, `body`, and `headers` options directly into the [`fetch()`](/en-US/docs/Web/API/fetch) method call:
+In this example we pass the `method`, `body`, and `headers` options directly into the [`fetch()`](/en-US/docs/Web/API/Window/fetch) method call:
 
 ```js
 async function post() {
diff --git a/files/en-us/web/api/rtcaudiosourcestats/index.md b/files/en-us/web/api/rtcaudiosourcestats/index.md
index 55ce5dd787058f4..37a6c1846f3cb86 100644
--- a/files/en-us/web/api/rtcaudiosourcestats/index.md
+++ b/files/en-us/web/api/rtcaudiosourcestats/index.md
@@ -52,68 +52,24 @@ The statistics also include the accumulated total energy and total sample durati
 The totals can be used to determine the average audio level over the lifetime of the stats object.
 You can calculate a root mean square (RMS) value in the same units as `audioLevel` using the following formula:
 
-
-
-  
-    totalAudioEnergy
-    totalSamplesDuration
-  
-
-
+
+totalAudioEnergytotalSamplesDuration\sqrt{\frac{totalAudioEnergy}{totalSamplesDuration}}
+
 
 You can also use the accumulated totals to calculate the average audio level over an arbitrary time period.
 
 The total audio energy of the stats object is accumulated by adding the energy of every sample over the lifetime of the stats object, while the total duration is accumulated by adding the duration of each sample.
 The energy of each sample is determined using the following formula, where `sample_level` is the level of the sample, `max_level` is the highest-intensity encodable value, and `duration` is the duration of the sample in seconds:
 
-
-
-  duration
-  
-  
-    
-      (
-      
-        sample_level
-        max_level
-      
-      )
-    
-    2
-  
-
-
+
+duration×(sample_levelmax_level)2duration \times⁢ \left(\left(\right. \frac{sample{\_}level}{max{\_}level} \left.\right)\right)^{2}
+
 
 The average audio level between any two different `getStats()` calls, over any duration, can be calculated using the following equation:
 
-
-
-  
-    
-      
-        totalAudioEnergy
-        2
-      
-      -
-      
-        totalAudioEnergy
-        1
-      
-    
-    
-      
-        totalSamplesDuration
-        2
-      
-      -
-      
-        totalSamplesDuration
-        1
-      
-    
-  
-
-
+
+totalAudioEnergy2-totalAudioEnergy1totalSamplesDuration2-totalSamplesDuration1\sqrt{\frac{\left(totalAudioEnergy\right)_{2} - \left(totalAudioEnergy\right)_{1}}{\left(totalSamplesDuration\right)_{2} - \left(totalSamplesDuration\right)_{1}}}
+
 
 ## Examples
 
diff --git a/files/en-us/web/api/rtcaudiosourcestats/totalaudioenergy/index.md b/files/en-us/web/api/rtcaudiosourcestats/totalaudioenergy/index.md
index fcb8f5b649be3af..300edcce6ac2a4a 100644
--- a/files/en-us/web/api/rtcaudiosourcestats/totalaudioenergy/index.md
+++ b/files/en-us/web/api/rtcaudiosourcestats/totalaudioenergy/index.md
@@ -23,23 +23,9 @@ A number produced by summing the energy of every sample over the lifetime of thi
 The energy of each sample is calculated by dividing the sample's value by the highest-intensity encodable value, squaring the result, and then multiplying by the duration of the sample in seconds.
 This is shown as an equation below:
 
-
-
-  duration
-  
-  
-    
-      (
-      
-        sample_level
-        max_level
-      
-      )
-    
-    2
-  
-
-
+
+duration×(sample_levelmax_level)2duration \times⁢ \left(\left(\right. \frac{sample{\_}level}{max{\_}level} \left.\right)\right)^{2}
+
 
 Note that if multiple audio channels are used, the audio energy of a sample refers to the highest energy of any channel.
 
diff --git a/files/en-us/web/api/rtcdatachannelstats/messagessent/index.md b/files/en-us/web/api/rtcdatachannelstats/messagessent/index.md
index b71dc850ae22945..c37f64ce654ebeb 100644
--- a/files/en-us/web/api/rtcdatachannelstats/messagessent/index.md
+++ b/files/en-us/web/api/rtcdatachannelstats/messagessent/index.md
@@ -12,7 +12,7 @@ The **`messagesSent`** property of the {{domxref("RTCDataChannelStats")}} dictio
 
 ## Value
 
-A positive integer value indicating the total number of `message` events for outbound data on the the associated data channel.
+A positive integer value indicating the total number of `message` events for outbound data on the associated data channel.
 
 ## Specifications
 
diff --git a/files/en-us/web/api/rtcicecandidatestats/priority/index.md b/files/en-us/web/api/rtcicecandidatestats/priority/index.md
index 454dc376075b3e0..19f8039a52d2b01 100644
--- a/files/en-us/web/api/rtcicecandidatestats/priority/index.md
+++ b/files/en-us/web/api/rtcicecandidatestats/priority/index.md
@@ -44,28 +44,9 @@ The candidate's priority is computed using the formula (_ptype_ is
 the priority of the candidate's type and _plocal_ is the priority of
 the IP address):
 
-priority
-=
-2
-24
-×
-p
-type
-+
-2
-8
-×
-p
-local
-+
-(
-256
--
-componentID
-)
-priority\quad =\quad { 2 }^{ 24 }\times { p }_{
-type }\quad +\quad { 2 }^{ 8 }\times { p }_{ local }\quad +\quad (256\quad
--\quad componentID)
+
+priority=224×ptype+28×plocal+(256-componentID)\mathit{priority} = 2^{24} \times p_{type} + 2^{8} \times p_{local} + \left(\right. 256 - \mathit{componentID} \left.\right)
+
 
 This is equivalent to mapping the priorities of the candidate type, the local IP, and
 the component ID into various bit ranges within the 32-bit `priority`
diff --git a/files/en-us/web/api/rtcstatsreport/index.md b/files/en-us/web/api/rtcstatsreport/index.md
index 703263867b48759..61ffaff40c7885d 100644
--- a/files/en-us/web/api/rtcstatsreport/index.md
+++ b/files/en-us/web/api/rtcstatsreport/index.md
@@ -31,7 +31,7 @@ An `RTCStatsReport` instance is a read-only [`Map`-like object](/en-US/docs/Web/
   - : Returns a new [Iterator](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator) object that contains the keys (IDs) for each element in the `RTCStatsReport` object, in insertion order.
 - {{domxref("RTCStatsReport.values()")}}
   - : Returns a new [Iterator](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator) object that contains the values (statistics object) for each element in the `RTCStatsReport` object, in insertion order.
-- [`RTCStatsReport.[@@iterator]()`](/en-US/docs/Web/API/RTCStatsReport/@@iterator)
+- [`RTCStatsReport[Symbol.iterator]()`](/en-US/docs/Web/API/RTCStatsReport/Symbol.iterator)
   - : Returns a new [Iterator](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator) object that contains a two-member array of `[id, statistic-dictionary]` for each element in the `RTCStatsReport` object, in insertion order.
 
 ## Description
diff --git a/files/en-us/web/api/rtcstatsreport/keys/index.md b/files/en-us/web/api/rtcstatsreport/keys/index.md
index ca6fa8805402fe0..3e68d4e06eb5921 100644
--- a/files/en-us/web/api/rtcstatsreport/keys/index.md
+++ b/files/en-us/web/api/rtcstatsreport/keys/index.md
@@ -48,7 +48,7 @@ for (const id of stats.keys()) {
 
 Note that this examples is somewhat contrived.
 You could more easily iterate with {{domxref("RTCStatsReport.entries()","entries()")}} or {{domxref("RTCStatsReport.values()","values()")}} and not have to map the ID to a value.
-You can even iterate the {{domxref("RTCStatsReport")}} itself, as it has the [`@@iterator`](/en-US/docs/Web/API/RTCStatsReport/@@iterator) method!
+You can even iterate the {{domxref("RTCStatsReport")}} itself, as it has the [`[Symbol.iterator]()`](/en-US/docs/Web/API/RTCStatsReport/Symbol.iterator) method!
 
 ## Specifications
 
diff --git a/files/en-us/web/api/rtcstatsreport/@@iterator/index.md b/files/en-us/web/api/rtcstatsreport/symbol.iterator/index.md
similarity index 52%
rename from files/en-us/web/api/rtcstatsreport/@@iterator/index.md
rename to files/en-us/web/api/rtcstatsreport/symbol.iterator/index.md
index 4ad7bb2f06230db..730eca2552545be 100644
--- a/files/en-us/web/api/rtcstatsreport/@@iterator/index.md
+++ b/files/en-us/web/api/rtcstatsreport/symbol.iterator/index.md
@@ -1,19 +1,19 @@
 ---
-title: "RTCStatsReport: [@@iterator]() method"
-short-title: "@@iterator"
-slug: Web/API/RTCStatsReport/@@iterator
+title: "RTCStatsReport: [Symbol.iterator]() method"
+short-title: "[Symbol.iterator]"
+slug: Web/API/RTCStatsReport/Symbol.iterator
 page-type: web-api-instance-method
 browser-compat: api.RTCStatsReport.@@iterator
 ---
 
 {{APIRef("WebRTC")}}
 
-The **`[@@iterator]()`** method of the {{domxref("RTCStatsReport")}} interface implements the [iterable protocol](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) and allows statistics reports to be consumed by most syntaxes expecting iterables, such as the [spread syntax](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) and {{jsxref("Statements/for...of", "for...of")}} loops.
+The **`[Symbol.iterator]()`** method of the {{domxref("RTCStatsReport")}} interface implements the [iterable protocol](/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) and allows statistics reports to be consumed by most syntaxes expecting iterables, such as the [spread syntax](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) and {{jsxref("Statements/for...of", "for...of")}} loops.
 It returns an [iterator object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator) that yields the key-value pairs of the report in insertion order.
 
 The initial value of this property is the same function object as the initial value of the {{domxref("RTCStatsReport.entries()")}} method.
 
-The method is otherwise the same as [`Map.prototype[@@iterator]()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/@@iterator).
+The method is otherwise the same as [`Map.prototype[Symbol.iterator]()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/Symbol.iterator).
 
 ## Syntax
 
@@ -37,4 +37,4 @@ This is a new [iterable iterator object](/en-US/docs/Web/JavaScript/Reference/Gl
 ## See also
 
 - {{domxref("RTCStatsReport.entries()")}}
-- [`Map.prototype[@@iterator]()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/@@iterator)
+- [`Map.prototype[Symbol.iterator]()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/Symbol.iterator)
diff --git a/files/en-us/web/api/sensor_apis/index.md b/files/en-us/web/api/sensor_apis/index.md
index b276fd8213de589..a7b8a741e624397 100644
--- a/files/en-us/web/api/sensor_apis/index.md
+++ b/files/en-us/web/api/sensor_apis/index.md
@@ -151,27 +151,27 @@ magSensor.start();
 
 ## Interfaces
 
-- {{domxref('AbsoluteOrientationSensor')}} {{securecontext_inline}}
+- {{domxref('AbsoluteOrientationSensor')}}
   - : Describes the device's physical orientation in relation to the Earth's reference coordinate system.
-- {{domxref('Accelerometer')}} {{securecontext_inline}}
+- {{domxref('Accelerometer')}}
   - : Provides the acceleration applied to the device along all three axes.
-- {{domxref('AmbientLightSensor')}} {{securecontext_inline}}
+- {{domxref('AmbientLightSensor')}}
   - : Returns the current light level or illuminance of the ambient light around the hosting device.
-- {{domxref('GravitySensor')}} {{securecontext_inline}}
+- {{domxref('GravitySensor')}}
   - : Provides the gravity applied to the device along all three axes.
-- {{domxref('Gyroscope')}} {{securecontext_inline}}
+- {{domxref('Gyroscope')}}
   - : Provides the angular velocity of the device along all three axes.
-- {{domxref('LinearAccelerationSensor')}} {{securecontext_inline}}
+- {{domxref('LinearAccelerationSensor')}}
   - : Provides the acceleration applied to the device along all three axes, but without the contribution of gravity.
-- {{domxref('Magnetometer')}} {{securecontext_inline}}
+- {{domxref('Magnetometer')}}
   - : Provides information about the magnetic field as detected by the device's primary magnetometer sensor.
-- {{domxref('OrientationSensor')}} {{securecontext_inline}}
+- {{domxref('OrientationSensor')}}
   - : The base class for the {{domxref('AbsoluteOrientationSensor')}}. This interface cannot be used directly, instead it provides properties and methods accessed by interfaces that inherit from it.
-- {{domxref('RelativeOrientationSensor')}} {{securecontext_inline}}
+- {{domxref('RelativeOrientationSensor')}}
   - : Describes the device's physical orientation without regard to the Earth's reference coordinate system.
-- {{domxref('Sensor')}} {{securecontext_inline}}
+- {{domxref('Sensor')}}
   - : The base class for all the other sensor interfaces. This interface cannot be used directly. Instead, it provides properties, event handlers, and methods accessed by interfaces that inherit from it.
-- {{domxref('SensorErrorEvent')}} {{securecontext_inline}}
+- {{domxref('SensorErrorEvent')}}
   - : Provides information about errors thrown by a {{domxref('Sensor')}} or related interface.
 
 ## Specifications
diff --git a/files/en-us/web/api/shadowroot/innerhtml/index.md b/files/en-us/web/api/shadowroot/innerhtml/index.md
index 1fcaf1cd903f7c6..ea55fd8ec58d7d4 100644
--- a/files/en-us/web/api/shadowroot/innerhtml/index.md
+++ b/files/en-us/web/api/shadowroot/innerhtml/index.md
@@ -16,6 +16,8 @@ interface sets or returns a reference to the DOM tree inside the
 
 A string.
 
+When set to the `null` value, that `null` value is converted to the empty string (`""`), so `sr.innerHTML = null` is equivalent to `sr.innerHTML = ""`.
+
 ## Examples
 
 ```js
diff --git a/files/en-us/web/api/streams_api/index.md b/files/en-us/web/api/streams_api/index.md
index 5bd5ee9e93d47b9..4dabf8fbf4cb3d9 100644
--- a/files/en-us/web/api/streams_api/index.md
+++ b/files/en-us/web/api/streams_api/index.md
@@ -23,7 +23,7 @@ With the Streams API, you can start processing raw data with JavaScript bit by b
 
 There are more advantages too — you can detect when streams start or end, chain streams together, handle errors and cancel streams as required, and react to the speed at which the stream is being read.
 
-The usage of Streams hinges on making responses available as streams. For example, the response body returned by a successful [fetch request](/en-US/docs/Web/API/fetch) is a {{domxref("ReadableStream")}} that can be read by a reader created with {{domxref("ReadableStream.getReader()")}}.
+The usage of Streams hinges on making responses available as streams. For example, the response body returned by a successful [fetch request](/en-US/docs/Web/API/Window/fetch) is a {{domxref("ReadableStream")}} that can be read by a reader created with {{domxref("ReadableStream.getReader()")}}.
 
 More complicated uses involve creating your own stream using the {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} constructor, for example to process data inside a [service worker](/en-US/docs/Web/API/Service_Worker_API).
 
@@ -70,7 +70,7 @@ You can also write data to streams using {{domxref("WritableStream")}}.
 - {{domxref("Request")}}
   - : When a new `Request` object is constructed, you can pass it a {{domxref("ReadableStream")}} in the `body` property of its `RequestInit` dictionary. This `Request` could then be passed to a {{domxref("fetch()")}} to commence fetching the stream.
 - {{domxref("Response.body")}}
-  - : The response body returned by a successful [fetch request](/en-US/docs/Web/API/fetch) is exposed by default as a {{domxref("ReadableStream")}}, and can have a reader attached to it, etc.
+  - : The response body returned by a successful [fetch request](/en-US/docs/Web/API/Window/fetch) is exposed by default as a {{domxref("ReadableStream")}}, and can have a reader attached to it, etc.
 
 ### ByteStream-related interfaces
 
diff --git a/files/en-us/web/api/subtlecrypto/derivekey/index.md b/files/en-us/web/api/subtlecrypto/derivekey/index.md
index e43424bf618e095..dad1dd967a87eae 100644
--- a/files/en-us/web/api/subtlecrypto/derivekey/index.md
+++ b/files/en-us/web/api/subtlecrypto/derivekey/index.md
@@ -256,7 +256,7 @@ function getKey(keyMaterial, salt) {
     {
       name: "HKDF",
       salt: salt,
-      info: new Uint8Array("Encryption example"),
+      info: new TextEncoder().encode("Encryption example"),
       hash: "SHA-256",
     },
     keyMaterial,
diff --git a/files/en-us/web/api/texttrack/index.md b/files/en-us/web/api/texttrack/index.md
index a05da546c365a42..00676009ad00d19 100644
--- a/files/en-us/web/api/texttrack/index.md
+++ b/files/en-us/web/api/texttrack/index.md
@@ -7,7 +7,12 @@ browser-compat: api.TextTrack
 
 {{APIRef("WebVTT")}}
 
-The `TextTrack` interface—part of the API for handling WebVTT (text tracks on media presentations)—describes and controls the text track associated with a particular {{HTMLElement("track")}} element.
+The **`TextTrack`** interface of the [WebVTT API](/en-US/docs/Web/API/WebVTT_API) represents a text track associated with a media element.
+
+An object of this type owns the list of {{domxref("VTTCue")}} objects that will be displayed over the video at various points.
+
+`TextTrack` objects can be added to a {{domxref("HTMLVideoElement")}} or {{domxref("HTMLAudioElement")}} element using the {{domxref("HTMLMediaElement.addTrack()")}} method, which has the same effect as adding text tracks declaratively using {{htmlelement("track")}} elements inside a {{htmlelement("video")}} or {{htmlelement("audio")}} element.
+The `TextTrack` objects are stored in a {{domxref("TextTrackList")}}, which can be retrieved using the {{domxref("HTMLMediaElement.textTracks")}} property.
 
 {{InheritanceDiagram}}
 
diff --git a/files/en-us/web/api/texttrackcue/index.md b/files/en-us/web/api/texttrackcue/index.md
index 4d3d6ef38a1a8a1..6f744918d09c438 100644
--- a/files/en-us/web/api/texttrackcue/index.md
+++ b/files/en-us/web/api/texttrackcue/index.md
@@ -7,7 +7,9 @@ browser-compat: api.TextTrackCue
 
 {{APIRef("WebVTT")}}
 
-**`TextTrackCue`** is an abstract class which is used as the basis for the various derived cue types, such as {{domxref("VTTCue")}}; you will instead work with those derived types. These cues represent strings of text presented for some duration of time during the performance of a {{domxref("TextTrack")}}. The cue includes the start time (the time at which the text will be displayed) and the end time (the time at which it will be removed from the display), as well as other information.
+The **`TextTrackCue`** interface of the [WebVTT API](/en-US/docs/Web/API/WebVTT_API) is the abstract base class for the various derived cue types, such as {{domxref("VTTCue")}}; you will work with these derived types rather than the base class.
+
+These cues represent strings of text presented for some duration of time during the performance of a {{domxref("TextTrack")}}. The cue includes the start time (the time at which the text will be displayed) and the end time (the time at which it will be removed from the display), as well as other information.
 
 {{InheritanceDiagram}}
 
diff --git a/files/en-us/web/api/texttrackcuelist/index.md b/files/en-us/web/api/texttrackcuelist/index.md
index 772cc7a5ffef988..eb25d02024fba62 100644
--- a/files/en-us/web/api/texttrackcuelist/index.md
+++ b/files/en-us/web/api/texttrackcuelist/index.md
@@ -7,9 +7,10 @@ browser-compat: api.TextTrackCueList
 
 {{APIRef("WebVTT")}}
 
-The **`TextTrackCueList`** array-like object represents a dynamically updating list of {{domxref("TextTrackCue")}} objects.
+The **`TextTrackCueList`** interface of the [WebVTT API](/en-US/docs/Web/API/WebVTT_API) is an array-like object that represents a dynamically updating list of {{domxref("TextTrackCue")}} objects.
 
-This interface has no constructor. Retrieve an instance of this object with {{domxref('TextTrack.cues')}} which returns all of the cues in a {{domxref("TextTrack")}} object.
+An instance of this type is obtained from {{domxref('TextTrack.cues')}} in order to get all the cues in the {{domxref("TextTrack")}} object.
+This interface has no constructor.
 
 ## Instance properties
 
diff --git a/files/en-us/web/api/texttracklist/index.md b/files/en-us/web/api/texttracklist/index.md
index e63adce335c9ebb..45425c495ed4d9d 100644
--- a/files/en-us/web/api/texttracklist/index.md
+++ b/files/en-us/web/api/texttracklist/index.md
@@ -7,9 +7,11 @@ browser-compat: api.TextTrackList
 
 {{APIRef("HTML DOM")}}
 
-The **`TextTrackList`** interface is used to represent a list of the text tracks defined by the {{HTMLElement("track")}} element, with each track represented by a separate {{domxref("textTrack")}} object in the list.
+The **`TextTrackList`** interface is used to represent a list of the text tracks defined for the associated video or audio element, with each track represented by a separate {{domxref("textTrack")}} object in the list.
 
-Retrieve an instance of this object with the {{domxref('HTMLMediaElement.textTracks', 'textTracks')}} property of an {{domxref('HTMLMediaElement')}} object.
+Text tracks can be added to a media element declaratively using the {{HTMLElement("track")}} element or programmatically using the {{domxref('HTMLMediaElement.addTextTrack()')}} method.
+
+An instance of this object can be retrieved using the {{domxref('HTMLMediaElement.textTracks', 'textTracks')}} property of an {{domxref('HTMLMediaElement')}} object.
 
 For a given {{domxref('HTMLMediaElement')}} object _media_, the individual tracks can be accessed using:
 
diff --git a/files/en-us/web/api/trackevent/index.md b/files/en-us/web/api/trackevent/index.md
index e279cab25041e37..165fd6a5e9fe5ff 100644
--- a/files/en-us/web/api/trackevent/index.md
+++ b/files/en-us/web/api/trackevent/index.md
@@ -7,7 +7,7 @@ browser-compat: api.TrackEvent
 
 {{APIRef("HTML DOM")}}
 
-The **`TrackEvent`** interface, which is part of the HTML DOM specification, is used for events which represent changes to a set of available tracks on an HTML media element; these events are `addtrack` and `removetrack`.
+The **`TrackEvent`** interface of the [HTML DOM API](/en-US/docs/Web/API/HTML_DOM_API) is used for events which represent changes to a set of available tracks on an HTML media element; these events are `addtrack` and `removetrack`.
 
 It's important not to confuse `TrackEvent` with the {{domxref("RTCTrackEvent")}} interface, which is used for tracks which are part of an {{domxref("RTCPeerConnection")}}.
 
diff --git a/files/en-us/web/api/url/hash/index.md b/files/en-us/web/api/url/hash/index.md
index c8744c0dd137132..d5178ef94a0423a 100644
--- a/files/en-us/web/api/url/hash/index.md
+++ b/files/en-us/web/api/url/hash/index.md
@@ -8,12 +8,9 @@ browser-compat: api.URL.hash
 
 {{ APIRef("URL API") }} {{AvailableInWorkers}}
 
-The **`hash`** property of the
-{{domxref("URL")}} interface is a string containing a
-`'#'` followed by the fragment identifier of the URL.
+The **`hash`** property of the {{domxref("URL")}} interface is a string containing a `'#'` followed by the fragment identifier of the URL.
 
-The fragment is not [URL decoded](https://en.wikipedia.org/wiki/URL_encoding). If the URL does not
-have a fragment identifier, this property contains an empty string — `""`.
+The fragment is not [percent-encoded](https://en.wikipedia.org/wiki/Percent-encoding). If the URL does not have a fragment identifier, this property contains an empty string — `""`.
 
 ## Value
 
@@ -23,9 +20,9 @@ A string.
 
 ```js
 const url = new URL(
-  "https://developer.mozilla.org/en-US/docs/Web/API/URL/href#Examples",
+  "https://developer.mozilla.org/en-US/docs/Web/API/URL/href#examples",
 );
-console.log(url.hash); // Logs: '#Examples'
+console.log(url.hash); // '#examples'
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/url/searchparams/index.md b/files/en-us/web/api/url/searchparams/index.md
index b83b73b49d06625..05ca9f39b43c0aa 100644
--- a/files/en-us/web/api/url/searchparams/index.md
+++ b/files/en-us/web/api/url/searchparams/index.md
@@ -18,14 +18,14 @@ A {{domxref("URLSearchParams")}} object.
 
 ## Examples
 
-If the URL of your page is
-`https://example.com/?name=Jonathan%20Smith&age=18` you could parse out
-the `name` and `age` parameters using:
-
 ```js
-let params = new URL(document.location).searchParams;
-let name = params.get("name"); // is the string "Jonathan Smith".
-let age = parseInt(params.get("age")); // is the number 18
+const params = new URL("https://example.com/?name=Jonathan%20Smith&age=18")
+  .searchParams;
+const name = params.get("name");
+const age = parseInt(params.get("age"));
+
+console.log(`name: ${name}`); // name: Jonathan Smith
+console.log(`age: ${age}`); // age: 18
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/urlsearchparams/entries/index.md b/files/en-us/web/api/urlsearchparams/entries/index.md
index 259c8a53fc73f24..2052093581ce8b6 100644
--- a/files/en-us/web/api/urlsearchparams/entries/index.md
+++ b/files/en-us/web/api/urlsearchparams/entries/index.md
@@ -11,8 +11,7 @@ browser-compat: api.URLSearchParams.entries
 The **`entries()`** method of the
 {{domxref("URLSearchParams")}} interface returns an
 {{jsxref("Iteration_protocols",'iterator')}} allowing iteration through all key/value
-pairs contained in this object. The iterator returns key/value pairs in the same order as they appear in the query string. The key and value of each pair are
-string objects.
+pairs contained in this object. The iterator returns key/value pairs in the same order as they appear in the query string. The key and value of each pair are strings.
 
 ## Syntax
 
diff --git a/files/en-us/web/api/urlsearchparams/index.md b/files/en-us/web/api/urlsearchparams/index.md
index 79baf4556c099e1..17361e7317be174 100644
--- a/files/en-us/web/api/urlsearchparams/index.md
+++ b/files/en-us/web/api/urlsearchparams/index.md
@@ -30,7 +30,7 @@ for (const [key, value] of mySearchParams.entries()) {
 
 ## Instance methods
 
-- `URLSearchParams.[@@iterator]()`
+- `URLSearchParams[Symbol.iterator]()`
   - : Returns an {{jsxref("Iteration_protocols","iterator")}} allowing iteration through all key/value pairs contained in this object in the same order as they appear in the query string.
 - {{domxref("URLSearchParams.append()")}}
   - : Appends a specified key/value pair as a new search parameter.
diff --git a/files/en-us/web/api/urlsearchparams/keys/index.md b/files/en-us/web/api/urlsearchparams/keys/index.md
index 959ece6e31857c8..d96fbdc8aa6f5c4 100644
--- a/files/en-us/web/api/urlsearchparams/keys/index.md
+++ b/files/en-us/web/api/urlsearchparams/keys/index.md
@@ -10,8 +10,7 @@ browser-compat: api.URLSearchParams.keys
 
 The **`keys()`** method of the {{domxref("URLSearchParams")}}
 interface returns an {{jsxref("Iteration_protocols",'iterator')}} allowing iteration
-through all keys contained in this object. The keys are string
-objects.
+through all keys contained in this object. The keys are strings.
 
 ## Syntax
 
diff --git a/files/en-us/web/api/urlsearchparams/values/index.md b/files/en-us/web/api/urlsearchparams/values/index.md
index 502e692ec5b54d7..03437f7d8970d88 100644
--- a/files/en-us/web/api/urlsearchparams/values/index.md
+++ b/files/en-us/web/api/urlsearchparams/values/index.md
@@ -10,8 +10,7 @@ browser-compat: api.URLSearchParams.values
 
 The **`values()`** method of the {{domxref("URLsearchParams")}}
 interface returns an {{jsxref("Iteration_protocols",'iterator')}} allowing iteration
-through all values contained in this object. The values are string
-objects.
+through all values contained in this object. The values are strings.
 
 ## Syntax
 
diff --git a/files/en-us/web/api/validitystate/badinput/index.md b/files/en-us/web/api/validitystate/badinput/index.md
index fbca2108e204fda..7a17dc9c27cdb18 100644
--- a/files/en-us/web/api/validitystate/badinput/index.md
+++ b/files/en-us/web/api/validitystate/badinput/index.md
@@ -8,27 +8,61 @@ browser-compat: api.ValidityState.badInput
 
 {{APIRef("HTML DOM")}}
 
-The read-only **`badInput`** property of a [ValidityState](/en-US/docs/Web/API/ValidityState) object indicates if the user has provided input that the browser is unable to convert. For example, if you have a number input element whose content is a string.
+The read-only **`badInput`** property of the [ValidityState](/en-US/docs/Web/API/ValidityState) interface indicates if the user has provided input that the browser is unable to convert. For example, if you have a number input element whose content is a string.
 
 ## Value
 
-A boolean.
+A boolean that is `true` if the `ValidityState` object does not conform to the expected type.
 
 ## Examples
 
+### Detecting bad input
+
+The following example checks the validity of a [numeric input element](/en-US/docs/Web/HTML/Element/input/number).
+If the user enters text instead of a number, the element fails constraint validation, and the styles matching [`input:invalid`](/en-US/docs/Web/CSS/:invalid) are applied.
+The [`
`](/en-US/docs/Web/HTML/Element/pre) element above the input shows the validation message when the element `badInput` evaluates to `true`:
+
+```css
+input:invalid {
+  outline: red solid 3px;
+}
+```
+
+```css hidden
+body {
+  margin: 0.5rem;
+}
+pre {
+  padding: 1rem;
+  height: 2rem;
+  background-color: lightgrey;
+  outline: 1px solid grey;
+}
+```
+
 ```html
+
Validation logged here...
``` ```js -const input = document.getElementById("age"); -if (input.validity.badInput) { - console.log("Bad input detected…"); -} else { - console.log("Content of input OK."); +const userInput = document.getElementById("age"); +const logElement = document.getElementById("log"); + +function log(text) { + logElement.innerText = text; } + +userInput.addEventListener("input", () => { + userInput.reportValidity(); + if (userInput.validity.badInput) { + log("Bad input detected: " + userInput.validationMessage); + } +}); ``` +{{EmbedLiveSample("displaying_validity_state", "100%", "140")}} + ## Specifications {{Specifications}} @@ -39,5 +73,6 @@ if (input.validity.badInput) { ## See also +- ValidityState [valid](/en-US/docs/Web/API/ValidityState/valid), [customError](/en-US/docs/Web/API/ValidityState/customError) properties. - [Guide: Constraint validation](/en-US/docs/Web/HTML/Constraint_validation) - [Tutorial: Form data validation](/en-US/docs/Learn/Forms/Form_validation) diff --git a/files/en-us/web/api/validitystate/customerror/index.md b/files/en-us/web/api/validitystate/customerror/index.md new file mode 100644 index 000000000000000..4e9be20277ab3db --- /dev/null +++ b/files/en-us/web/api/validitystate/customerror/index.md @@ -0,0 +1,114 @@ +--- +title: "ValidityState: customError property" +short-title: customError +slug: Web/API/ValidityState/customError +page-type: web-api-instance-property +browser-compat: api.ValidityState.customError +--- + +{{APIRef("HTML DOM")}} + +The read-only **`customError`** property of the [`ValidityState`](/en-US/docs/Web/API/ValidityState) interface returns `true` if an element doesn't meet the validation required in the custom validity set by the element's {{domxref("HTMLObjectElement.setCustomValidity", "setCustomValidity()")}} method. + +## Value + +A boolean that is `true` if a custom error message has been set to a non-empty string. + +## Examples + +### Detecting a custom error + +In this example, {{domxref("HTMLObjectElement.setCustomValidity", "setCustomValidity()")}} sets a custom error message when a form submission contains user input that's considered invalid. +The "Validate input" button calls {{domxref("HTMLFormElement.reportValidity", "reportValidity()")}}, which displays a validation message under the element if a user enters values that do not match the [form's constraints](/en-US/docs/Web/HTML/Constraint_validation#constraint_validation_process). + +If you enter the text "good" or "fine" and try to validate the input, the field is marked invalid until the custom error message is cleared (set to an empty string). +For comparison, there is a [`minlength`](/en-US/docs/Web/HTML/Attributes/minlength) attribute on the input element that allows us to demonstrate the [`tooShort` validity state](/en-US/docs/Web/API/ValidityState/tooShort) when the user enters less than two characters. +When the value in the form control is invalid, even if there is no custom error, the input will have a red outline. + +#### HTML + +```html +
Validation failures logged here...
+ + +``` + +#### CSS + +```css +input:invalid { + border: red solid 3px; +} +``` + +```css hidden +body { + margin: 0.5rem; +} +pre { + padding: 1rem; + height: 2rem; + background-color: lightgrey; + outline: 1px solid grey; +} +``` + +#### JavaScript + +```js +const userInput = document.getElementById("userInput"); +const checkButton = document.getElementById("checkButton"); +const logElement = document.getElementById("log"); + +function log(text) { + logElement.innerText = text; +} + +const check = (input) => { + // Handle cases where input is too vague + if (input.value == "good" || input.value == "fine") { + input.setCustomValidity(`"${input.value}" is not a feeling.`); + } else { + // An empty string resets the custom validity state + input.setCustomValidity(""); + } +}; + +userInput.addEventListener("input", () => { + check(userInput); +}); + +const validateInput = () => { + userInput.reportValidity(); + if (userInput.validity.customError) { + // We can handle custom validity states here + log("Custom validity error: " + userInput.validationMessage); + } else { + log(userInput.validationMessage); + } +}; + +checkButton.addEventListener("click", validateInput); +``` + +#### Result + +{{EmbedLiveSample("detecting_a_custom_error", "100%", "140")}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- ValidityState [badInput](/en-US/docs/Web/API/ValidityState/badInput), [valid](/en-US/docs/Web/API/ValidityState/valid) properties. +- [Constraint validation](/en-US/docs/Web/HTML/Constraint_validation) +- [Forms: Data form validation](/en-US/docs/Learn/Forms/Form_validation) diff --git a/files/en-us/web/api/validitystate/index.md b/files/en-us/web/api/validitystate/index.md index 5b9210be7bed3e4..ee1e8003b9bfed3 100644 --- a/files/en-us/web/api/validitystate/index.md +++ b/files/en-us/web/api/validitystate/index.md @@ -15,7 +15,7 @@ For each of these Boolean properties, a value of `true` indicates that the speci - {{domxref("ValidityState.badInput", "badInput")}} {{ReadOnlyInline}} - : A boolean value that is `true` if the user has provided input that the browser is unable to convert. -- `customError` {{ReadOnlyInline}} +- {{domxref("ValidityState.customError", "customError")}} {{ReadOnlyInline}} - : A boolean value indicating whether the element's custom validity message has been set to a non-empty string by calling the element's {{domxref('HTMLObjectElement.setCustomValidity', 'setCustomValidity()')}} method. - {{domxref("ValidityState.patternMismatch", "patternMismatch")}} {{ReadOnlyInline}} - : A boolean value that is `true` if the value does not match the specified [`pattern`](/en-US/docs/Web/HTML/Element/input#pattern), and `false` if it does match. If `true`, the element matches the {{cssxref(":invalid")}} CSS pseudo-class. @@ -24,14 +24,14 @@ For each of these Boolean properties, a value of `true` indicates that the speci - {{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} {{ReadOnlyInline}} - : A boolean value that is `true` if the value is less than the minimum specified by the [`min`](/en-US/docs/Web/HTML/Element/input#min) attribute, or `false` if it is greater than or equal to the minimum. If `true`, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes. - {{domxref("ValidityState.stepMismatch", "stepMismatch")}} {{ReadOnlyInline}} - - : A boolean value that is `true` if the value does not fit the rules determined by the [`step`](/en-US/docs/Web/HTML/Element/input#step) attribute (that is, it's not evenly divisible by the step value), or `false` if it does fit the step rule. If `true`, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes. + - : A boolean value that is `true` if the value does not fit the rules determined by the [`step`](/en-US/docs/Web/HTML/Element/input#step) attribute (that is, it's not evenly divisible by the step value), or `false` if it does fit the step rule. If `true`, the element matches the {{cssxref(":invalid")}} CSS pseudo-class. - {{domxref("ValidityState.tooLong", "tooLong")}} {{ReadOnlyInline}} - : A boolean value that is `true` if the value exceeds the specified `maxlength` for {{domxref("HTMLInputElement")}} or {{domxref("HTMLTextAreaElement")}} objects, or `false` if its length is less than or equal to the maximum length. _Note: This property is never `true` in Gecko, because elements' values are prevented from being longer than `maxlength`._ If `true`, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes. - {{domxref("ValidityState.tooShort", "tooShort")}} {{ReadOnlyInline}} - : A boolean value that is `true` if the value fails to meet the specified `minlength` for {{domxref("HTMLInputElement")}} or {{domxref("HTMLTextAreaElement")}} objects, or `false` if its length is greater than or equal to the minimum length. If `true`, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes. - {{domxref("ValidityState.typeMismatch", "typeMismatch")}} {{ReadOnlyInline}} - : A boolean value that is `true` if the value is not in the required syntax (when [`type`](/en-US/docs/Web/HTML/Element/input#type) is `email` or `url`), or `false` if the syntax is correct. If `true`, the element matches the {{cssxref(":invalid")}} CSS pseudo-class. -- `valid` {{ReadOnlyInline}} +- {{domxref("ValidityState.valid", "valid")}} {{ReadOnlyInline}} - : A boolean value that is `true` if the element meets all its validation constraints, and is therefore considered to be valid, or `false` if it fails any constraint. If `true`, the element matches the {{cssxref(":valid")}} CSS pseudo-class; the {{cssxref(":invalid")}} CSS pseudo-class otherwise. - {{domxref("ValidityState.valueMissing", "valueMissing")}} {{ReadOnlyInline}} - : A boolean value that is `true` if the element has a [`required`](/en-US/docs/Web/HTML/Element/input#required) attribute, but no value, or `false` otherwise. If `true`, the element matches the {{cssxref(":invalid")}} CSS pseudo-class. diff --git a/files/en-us/web/api/validitystate/patternmismatch/index.md b/files/en-us/web/api/validitystate/patternmismatch/index.md index 687f592e1a84ece..b6fdfdf21f1ad8e 100644 --- a/files/en-us/web/api/validitystate/patternmismatch/index.md +++ b/files/en-us/web/api/validitystate/patternmismatch/index.md @@ -8,7 +8,7 @@ browser-compat: api.ValidityState.patternMismatch {{APIRef("HTML DOM")}} -The read-only **`patternMismatch`** property of a **[`ValidityState`](/en-US/docs/Web/API/ValidityState)** object indicates if the value of an {{HTMLElement("input")}}, after having been edited by the user, does not conform to the constraints set by the element's [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) attribute. +The read-only **`patternMismatch`** property of the [`ValidityState`](/en-US/docs/Web/API/ValidityState) interface indicates if the value of an {{HTMLElement("input")}}, after having been edited by the user, does not conform to the constraints set by the element's [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) attribute. The `patternMismatch` property will be true if and only if the following conditions are all true: @@ -16,6 +16,10 @@ The `patternMismatch` property will be true if and only if the following conditi - the [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) attribute contains a valid regular expression - the {{HTMLElement("input")}} value doesn't conform to the constraints set by the [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) value. +## Value + +A boolean that is `true` if the `ValidityState` object does not conform to the constraints. + ## Examples Given the following: diff --git a/files/en-us/web/api/validitystate/rangeoverflow/index.md b/files/en-us/web/api/validitystate/rangeoverflow/index.md index a100b7d9a48217b..45e43b429fe03e4 100644 --- a/files/en-us/web/api/validitystate/rangeoverflow/index.md +++ b/files/en-us/web/api/validitystate/rangeoverflow/index.md @@ -8,17 +8,65 @@ browser-compat: api.ValidityState.rangeOverflow {{APIRef("HTML DOM")}} -The read-only **`rangeOverflow`** property of a **[`ValidityState`](/en-US/docs/Web/API/ValidityState)** object indicates if the value of an {{HTMLElement("input")}}, after having been edited by the user, does not conform to the constraints set by the element's [`max`](/en-US/docs/Web/HTML/Attributes/max) attribute. +The read-only **`rangeOverflow`** property of the [`ValidityState`](/en-US/docs/Web/API/ValidityState) interface indicates if the value of an {{HTMLElement("input")}}, after having been edited by the user, does not conform to the constraints set by the element's [`max`](/en-US/docs/Web/HTML/Attributes/max) attribute. If the field is numeric in nature, including the {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} and {{HTMLElement("input/range", "range")}} types and a `max` value is set, if the value doesn't conform to the constraints set by the [`max`](/en-US/docs/Web/HTML/Attributes/step) value, the `rangeOverflow` property will be true. -Given the following: +## Value + +A boolean that is `true` if the `ValidityState` does not conform to the constraints. + +## Examples + +### Input with numeric overflow + +The following example checks the validity of a [numeric input element](/en-US/docs/Web/HTML/Element/input/number). +A constraint has been added using the [`max` attribute](/en-US/docs/Web/HTML/Element/input/number#max) which sets a maximum value of `18` for the input. +If the user enters a number higher than 18, the element fails constraint validation, and the styles matching {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes + +```css +/* or :invalid */ +input:out-of-range { + outline: red solid 3px; +} +``` + +```css hidden +body { + margin: 0.5rem; +} +pre { + padding: 1rem; + height: 2rem; + background-color: lightgrey; + outline: 1px solid grey; +} +``` ```html - +
Validation logged here...
+ +``` + +```js +const userInput = document.getElementById("age"); +const logElement = document.getElementById("log"); + +function log(text) { + logElement.innerText = text; +} + +userInput.addEventListener("input", () => { + userInput.reportValidity(); + if (userInput.validity.rangeOverflow) { + log("Number is too high!"); + } else { + log("Input is valid…"); + } +}); ``` -if `value > 40`, `rangeOverflow` will be true. When `true`, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes. +{{EmbedLiveSample("input_with_numeric_overflow", "100%", "140")}} ## Specifications diff --git a/files/en-us/web/api/validitystate/rangeunderflow/index.md b/files/en-us/web/api/validitystate/rangeunderflow/index.md index 4a2ea68c2a2c0be..699b98ee9788c5e 100644 --- a/files/en-us/web/api/validitystate/rangeunderflow/index.md +++ b/files/en-us/web/api/validitystate/rangeunderflow/index.md @@ -8,17 +8,65 @@ browser-compat: api.ValidityState.rangeUnderflow {{APIRef("HTML DOM")}} -The read-only **`rangeUnderflow`** property of a **[`ValidityState`](/en-US/docs/Web/API/ValidityState)** object indicates if the value of an {{HTMLElement("input")}}, after having been edited by the user, does not conform to the constraints set by the element's [`min`](/en-US/docs/Web/HTML/Attributes/min) attribute. +The read-only **`rangeUnderflow`** property of the [`ValidityState`](/en-US/docs/Web/API/ValidityState) interface indicates if the value of an {{HTMLElement("input")}}, after having been edited by the user, does not conform to the constraints set by the element's [`min`](/en-US/docs/Web/HTML/Attributes/min) attribute. If the field is numeric in nature, including the {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} and {{HTMLElement("input/range", "range")}} types and a `min` value is set, if the value doesn't conform to the constraints set by the [`min`](/en-US/docs/Web/HTML/Attributes/step) value, the `rangeUnderflow` property will be true. -Given the following: +## Value + +A boolean that is `true` if the `ValidityState` does not conform to the constraints. + +## Examples + +### Input with numeric underflow + +The following example checks the validity of a [numeric input element](/en-US/docs/Web/HTML/Element/input/number). +A constraint has been added using the [`min` attribute](/en-US/docs/Web/HTML/Element/input/number#min) which sets a minimum value of `18` for the input. +If the user enters a number lower than 18, the element fails constraint validation, and the styles matching {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes + +```css +/* or :invalid */ +input:out-of-range { + outline: red solid 3px; +} +``` + +```css hidden +body { + margin: 0.5rem; +} +pre { + padding: 1rem; + height: 2rem; + background-color: lightgrey; + outline: 1px solid grey; +} +``` ```html - +
Validation logged here...
+ +``` + +```js +const userInput = document.getElementById("age"); +const logElement = document.getElementById("log"); + +function log(text) { + logElement.innerText = text; +} + +userInput.addEventListener("input", () => { + userInput.reportValidity(); + if (userInput.validity.rangeUnderflow) { + log("Number is too low!"); + } else { + log("Valid…"); + } +}); ``` -if `value < 20`, `rangeUnderflow` will be true. When `true`, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes. +{{EmbedLiveSample("input_with_numeric_underflow", "100%", "140")}} ## Specifications diff --git a/files/en-us/web/api/validitystate/stepmismatch/index.md b/files/en-us/web/api/validitystate/stepmismatch/index.md index f5b72ab559c885d..7affc842265c5c9 100644 --- a/files/en-us/web/api/validitystate/stepmismatch/index.md +++ b/files/en-us/web/api/validitystate/stepmismatch/index.md @@ -8,19 +8,64 @@ browser-compat: api.ValidityState.stepMismatch {{APIRef("HTML DOM")}} -The read-only **`stepMismatch`** property of a **[`ValidityState`](/en-US/docs/Web/API/ValidityState)** object indicates if the value of an {{HTMLElement("input")}}, after having been edited by the user, does not conform to the constraints set by the element's `step` attribute. +The read-only **`stepMismatch`** property of the [`ValidityState`](/en-US/docs/Web/API/ValidityState) interface indicates if the value of an {{HTMLElement("input")}}, after having been edited by the user, does not conform to the constraints set by the element's `step` attribute. If the field is numeric in nature, including the {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} and {{HTMLElement("input/range", "range")}} types and the step value is not `any`, if the value don't doesn't conform to the constraints set by the [`step`](/en-US/docs/Web/HTML/Attributes/step) and [`min`](/en-US/docs/Web/HTML/Attributes/min) values, then `stepMismatch` will be true. If the remainder of the form control's value less the [`min`](/en-US/docs/Web/HTML/Attributes/min) value, divided by the [`step`](/en-US/docs/Web/HTML/Attributes/step) value (which defaults to 1 if omitted) is not zero, there is a mismatch. -Given the following: +## Value + +A boolean that is `true` if the `ValidityState` does not conform to the constraints. + +## Examples + +### Input with step mismatch + +The following example checks the validity of a [numeric input element](/en-US/docs/Web/HTML/Element/input/number). +A constraint has been added using the [`step` attribute](/en-US/docs/Web/HTML/Element/input/number#step) which means the input expects increments of 5 as values. +If the user enters a number that's not divisible by 5, the element fails constraint validation, and the styles matching {{cssxref(":invalid")}} CSS pseudo-class are applied. + +```css +input:invalid { + outline: red solid 3px; +} +``` + +```css hidden +body { + margin: 0.5rem; +} +pre { + padding: 1rem; + height: 2rem; + background-color: lightgrey; + outline: 1px solid grey; +} +``` ```html - +
Validation logged here...
+ ``` -if `(value - min) % 2 !== 0`, `stepMismatch` will be true. +```js +const userInput = document.getElementById("degrees"); +const logElement = document.getElementById("log"); + +function log(text) { + logElement.innerText = text; +} + +userInput.addEventListener("input", () => { + userInput.reportValidity(); + if (userInput.validity.stepMismatch) { + log("Input must be divisible by 5"); + } else { + log("Input is valid…"); + } +}); +``` -If true, the element matches the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-classes. +{{EmbedLiveSample("input_with_step_mismatch", "100%", "140")}} ## Specifications diff --git a/files/en-us/web/api/validitystate/toolong/index.md b/files/en-us/web/api/validitystate/toolong/index.md index 8c9f3fec04054eb..a75e64c3af643b0 100644 --- a/files/en-us/web/api/validitystate/toolong/index.md +++ b/files/en-us/web/api/validitystate/toolong/index.md @@ -8,7 +8,73 @@ browser-compat: api.ValidityState.tooLong {{APIRef("HTML DOM")}} -The read-only **`tooLong`** property of a **[`ValidityState`](/en-US/docs/Web/API/ValidityState)** object indicates if the value of an {{HTMLElement("input")}} or {{HTMLElement("textarea")}}, after having been edited by the user, exceeds the maximum code-unit length established by the element's [`maxlength`](/en-US/docs/Web/HTML/Attributes/maxlength) attribute. +The read-only **`tooLong`** property of the [`ValidityState`](/en-US/docs/Web/API/ValidityState) interface indicates if the value of an {{HTMLElement("input")}} or {{HTMLElement("textarea")}}, after having been edited by the user, exceeds the maximum code-unit length established by the element's [`maxlength`](/en-US/docs/Web/HTML/Attributes/maxlength) attribute. + +## Value + +A boolean that is `true` if the `ValidityState` does not conform to the constraints. + +## Examples + +### Textarea with too long character count + +The following example checks the validity of a [textarea element](/en-US/docs/Web/HTML/Element/textarea). +A constraint has been added using the [`maxlength` attribute](/en-US/docs/Web/HTML/Element/input/text#maxlength) so the textarea expects a maximum of 10 characters. +If there are too many characters in the textarea (which is true below), the element fails constraint validation, and the styles matching {{cssxref(":invalid")}} CSS pseudo-class are applied. + +When editing the textarea, the browser will not allow the user to add characters that would fail constraint validation of maximum character count, so at first, only deleting characters is allowed. +Newline characters are normalized and count as a single character in the maximum length calculation. + +```css +textarea:invalid { + outline: red solid 3px; +} +``` + +```css hidden +body { + margin: 0.5rem; +} +textarea { + width: 75%; +} +pre { + padding: 1rem; + height: 2rem; + background-color: lightgrey; + outline: 1px solid grey; +} +``` + +```html +
Validation logged here...
+ +``` + +```js +const userInput = document.getElementById("userText"); +const logElement = document.getElementById("log"); + +function log(text) { + logElement.innerText = text; +} + +userInput.addEventListener("input", () => { + userInput.reportValidity(); + if (userInput.validity.tooLong) { + log("Too many characters in the textarea."); + } else { + log("Input is valid…"); + } +}); +``` + +{{EmbedLiveSample("input_with_too_long_string_value", "100%", "200")}} ## Specifications diff --git a/files/en-us/web/api/validitystate/tooshort/index.md b/files/en-us/web/api/validitystate/tooshort/index.md index feebfe44d2f33e2..2305a97469b2c7d 100644 --- a/files/en-us/web/api/validitystate/tooshort/index.md +++ b/files/en-us/web/api/validitystate/tooshort/index.md @@ -8,7 +8,62 @@ browser-compat: api.ValidityState.tooShort {{APIRef("HTML DOM")}} -The read-only **`tooShort`** property of a **[`ValidityState`](/en-US/docs/Web/API/ValidityState)** object indicates if the value of an {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("output")}}, {{HTMLElement("fieldset")}} or {{HTMLElement("textarea")}}, after having been edited by the user, is less than the minimum code-unit length established by the element's `minlength` attribute. +The read-only **`tooShort`** property of the [`ValidityState`](/en-US/docs/Web/API/ValidityState) interface indicates if the value of an {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("output")}}, {{HTMLElement("fieldset")}} or {{HTMLElement("textarea")}}, after having been edited by the user, is less than the minimum code-unit length established by the element's `minlength` attribute. + +## Value + +A boolean that is `true` if the `ValidityState` does not conform to the constraints. + +## Examples + +### Input with too short string value + +The following example checks the validity of a [text input element](/en-US/docs/Web/HTML/Element/input/text). +A constraint has been added using the [`minlength` attribute](/en-US/docs/Web/HTML/Element/input/text#minlength) so the input expects a string with a minimum of 4 characters. +If the user enters a string that's too short, the element fails constraint validation, and the styles matching {{cssxref(":invalid")}} CSS pseudo-class are applied. + +```css +input:invalid { + outline: red solid 3px; +} +``` + +```css hidden +body { + margin: 0.5rem; +} +pre { + padding: 1rem; + height: 2rem; + background-color: lightgrey; + outline: 1px solid grey; +} +``` + +```html +
Validation logged here...
+ +``` + +```js +const userInput = document.getElementById("userText"); +const logElement = document.getElementById("log"); + +function log(text) { + logElement.innerText = text; +} + +userInput.addEventListener("input", () => { + userInput.reportValidity(); + if (userInput.validity.tooShort) { + log("Not enough characters entered."); + } else { + log("Input is valid…"); + } +}); +``` + +{{EmbedLiveSample("input_with_too_short_string_value", "100%", "140")}} ## Specifications diff --git a/files/en-us/web/api/validitystate/typemismatch/index.md b/files/en-us/web/api/validitystate/typemismatch/index.md index 01985d530d3a5d5..05a1f001ba24f53 100644 --- a/files/en-us/web/api/validitystate/typemismatch/index.md +++ b/files/en-us/web/api/validitystate/typemismatch/index.md @@ -8,7 +8,7 @@ browser-compat: api.ValidityState.typeMismatch {{APIRef("HTML DOM")}} -The read-only **`typeMismatch`** property of a **[`ValidityState`](/en-US/docs/Web/API/ValidityState)** object indicates if the value of an {{HTMLElement("input")}}, after having been edited by the user, does not conform to the constraints set by the element's [`type`](/en-US/docs/Web/HTML/Element/input#input_types) attribute. +The read-only **`typeMismatch`** property of the [`ValidityState`](/en-US/docs/Web/API/ValidityState) interface indicates if the value of an {{HTMLElement("input")}}, after having been edited by the user, does not conform to the constraints set by the element's [`type`](/en-US/docs/Web/HTML/Element/input#input_types) attribute. If the `type` attribute expects specific strings, such as the {{HTMLElement("input/email", "email")}} and {{HTMLElement("input/url", "url")}} types and the value doesn't conform to the constraints set by the type, the `typeMismatch` property will be true. @@ -21,21 +21,26 @@ The {{HTMLElement("input/url", "url")}} input type expects one or more valid URL | {{HTMLElement("input/email", "email")}} | `x@y` or `x@y.z` | email address, with or without [TLD](/en-US/docs/Glossary/TLD) | | {{HTMLElement("input/url", "url")}} | `x:` or `x://y.z` | protocol or full URL with protocol | +## Value + +A boolean that is `true` if the `ValidityState` does not conform to the constraints. + ## Examples -Given the following: +### Type mismatch on input element + +The `typeMismatch` occurs when there is a disconnect between the [`value`](/en-US/docs/Web/HTML/Element/input#value) expected via the [`type`](/en-US/docs/Web/HTML/Element/input#input_types) attribute and the data that is actually present. +The `typeMismatch` is only one of the many possible errors and is only relevant for the {{HTMLElement("input/email", "email")}} and {{HTMLElement("input/url", "url")}} types. +When the value provided doesn't match the expected value based on the type for other input types, you get different errors. +For example, if the {{HTMLElement("input/number", "number")}} input value is not a floating point number, the `badInput` is `true`. +If the email is [`required`](/en-US/docs/Web/HTML/Attributes/required) but is empty, the {{domxref('ValidityState.valueMissing','valueMissing')}} will be `true`. ```html +
Validation logged here...

-

-

-

``` @@ -46,11 +51,39 @@ input:invalid { } ``` -{{EmbedLiveSample("Examples", 300, 110)}} +```css hidden +body { + margin: 0.5rem; +} +pre { + padding: 1rem; + height: 2rem; + background-color: lightgrey; + outline: 1px solid grey; +} +``` + +```js +const emailInput = document.getElementById("emailInput"); +const logElement = document.getElementById("log"); -The above each produce a `typeMismatch` because the email address is just a domain and the URL has no protocol +function log(text) { + logElement.innerText = text; +} + +emailInput.addEventListener("input", () => { + emailInput.reportValidity(); + if (emailInput.validity.valid) { + log("Input OK…"); + } else if (emailInput.validity.typeMismatch) { + log("Input is not an email."); + } else { + log("Validation failed: " + emailInput.validationMessage); + } +}); +``` -The `typeMismatch` occurs when there is a disconnect between the [`value`](/en-US/docs/Web/HTML/Attributes/value) expected via the [`type`](/en-US/docs/Web/HTML/Element/input#input_types) attribute and the data that is actually present. The `typeMismatch` is only one of the many possible errors and is only relevant for the {{HTMLElement("input/email", "email")}} and {{HTMLElement("input/url", "url")}} types. When the value provided doesn't match the expected value based on the type for other input types, you get different errors. For example, if the {{HTMLElement("input/number", "number")}} input value is not a floating point number, the `badInput` is `true`. If the email is [`required`](/en-US/docs/Web/HTML/Attributes/required) but is empty, the {{domxref('ValidityState.valueMissing','valueMissing')}} will be `true`. +{{EmbedLiveSample("Examples", "100%", "160")}} ## Specifications @@ -62,6 +95,7 @@ The `typeMismatch` occurs when there is a disconnect between the [`value`](/en-U ## See also +- ValidityState [badInput](/en-US/docs/Web/API/ValidityState/badInput), [valid](/en-US/docs/Web/API/ValidityState/valid), [customError](/en-US/docs/Web/API/ValidityState/customError) properties. - [Constraint validation](/en-US/docs/Web/HTML/Constraint_validation) - [Forms: Data form validation](/en-US/docs/Learn/Forms/Form_validation) - [Regular Expressions](/en-US/docs/Web/JavaScript/Guide/Regular_expressions) diff --git a/files/en-us/web/api/validitystate/valid/index.md b/files/en-us/web/api/validitystate/valid/index.md new file mode 100644 index 000000000000000..75854267bd88942 --- /dev/null +++ b/files/en-us/web/api/validitystate/valid/index.md @@ -0,0 +1,85 @@ +--- +title: "ValidityState: valid property" +short-title: valid +slug: Web/API/ValidityState/valid +page-type: web-api-instance-property +browser-compat: api.ValidityState.valid +--- + +{{APIRef("HTML DOM")}} + +The read-only **`valid`** property of the [`ValidityState`](/en-US/docs/Web/API/ValidityState) interface indicates if the value of an {{HTMLElement("input")}} element meets all its validation constraints, and is therefore considered to be valid. + +If `true`, the element matches the {{cssxref(":valid")}} CSS pseudo-class; otherwise the {{cssxref(":invalid")}} CSS pseudo-class applies. + +## Value + +A boolean that is `true` if the `ValidityState` does conform to all the constraints. + +## Examples + +### Displaying validity state + +The following example checks the validity of a [numeric input element](/en-US/docs/Web/HTML/Element/input/number). +A constraint has been added using the [`min` attribute](/en-US/docs/Web/HTML/Element/input/number#min) which sets a minimum value of `18` for the input. +If the user enters any value that's not a number greater than 17, the element fails constraint validation, and the styles matching `input:invalid` are applied. + +```css +input:invalid { + outline: red solid 3px; +} +input:valid { + outline: palegreen solid 3px; +} +``` + +```css hidden +body { + margin: 0.5rem; +} +pre { + padding: 1rem; + height: 2rem; + background-color: lightgrey; + outline: 1px solid grey; +} +``` + +```html +
Validation logged here...
+ +``` + +```js +const userInput = document.getElementById("age"); +const logElement = document.getElementById("log"); + +function log(text) { + logElement.innerText = text; +} + +userInput.addEventListener("input", () => { + userInput.reportValidity(); + if (userInput.validity.valid) { + log("Input OK…"); + } else { + log("Bad input detected…"); + } +}); +``` + +{{EmbedLiveSample("displaying_validity_state", "100%", "140")}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- ValidityState [badInput](/en-US/docs/Web/API/ValidityState/badInput), [customError](/en-US/docs/Web/API/ValidityState/customError) properties. +- [Constraint validation](/en-US/docs/Web/HTML/Constraint_validation) +- [Forms: Data form validation](/en-US/docs/Learn/Forms/Form_validation) diff --git a/files/en-us/web/api/validitystate/valuemissing/index.md b/files/en-us/web/api/validitystate/valuemissing/index.md index ac8849b939382bd..aeefe2188af7cd9 100644 --- a/files/en-us/web/api/validitystate/valuemissing/index.md +++ b/files/en-us/web/api/validitystate/valuemissing/index.md @@ -8,10 +8,65 @@ browser-compat: api.ValidityState.valueMissing {{APIRef("HTML DOM")}} -The read-only **`valueMissing`** property of a **[`ValidityState`](/en-US/docs/Web/API/ValidityState)** object indicates if a [`required`](/en-US/docs/Web/HTML/Attributes/required) control, such as an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}}, has an empty value. +The read-only **`valueMissing`** property of the [`ValidityState`](/en-US/docs/Web/API/ValidityState) interface indicates if a [`required`](/en-US/docs/Web/HTML/Attributes/required) control, such as an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}}, has an empty value. If the `required` attribute is set, and no {{HTMLElement("option")}} is selected or a `