commit 262a201051c3b0fe3721294d2d9add089d977e6c
parent 97ca91022e7633860956700ec3ce56945794b543
Author: Andy Paicu <andypaicu@chromium.org>
Date: Fri, 28 Nov 2025 14:53:22 +0000
Bug 2002837 [wpt PR 56329] - Create a `<usermedia>` element to allow experimentation specific to ..., a=testonly
Automatic update from web-platform-tests
Create a `<usermedia>` element to allow experimentation specific to ...
camera and microphone capability-aware elements. Initially this element
will have the exact same functionality as the current permission
element, but it allows us to iterate on the design to make something
better tailored for camera/microphone, while still providing the core
functionality for sites to experiment and provide feedback on.
The geolocation element is launching in M144, and the permission element
will soon be deprecated, therefore some of the verbose feature checks
will soon be simplified.
I added some of the permission element WPT tests as a sanity check. Work
will soon follow to migrate all permission elements tests to either
geolocation or usermedia element tests.
Also drive-by fix some tests which required https to use the
test_driver.
Fixed: 462059159
Change-Id: I56090f57d83d4994891fb6251913984d35df051e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7207362
Reviewed-by: Thomas Nguyen <tungnh@chromium.org>
Reviewed-by: Robert Flack <flackr@chromium.org>
Reviewed-by: Mike West <mkwst@chromium.org>
Reviewed-by: Peter Conn <peconn@chromium.org>
Commit-Queue: Andy Paicu <andypaicu@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1551127}
--
wpt-commits: efa7f392251218ddc34732a2ed11e1d73774a763
wpt-pr: 56329
Diffstat:
4 files changed, 185 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/html/semantics/permission-element/usermedia/invalid-css-properties.tentative.html b/testing/web-platform/tests/html/semantics/permission-element/usermedia/invalid-css-properties.tentative.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<link rel="help" href="https://github.com/WICG/PEPC/blob/main/explainer.md#locking-the-pepc-style">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<!--The usermedia element does not allow certain CSS properties
+-->
+<style>
+ #id1 {
+ border-image: url('test-url');
+ background-image: url('test-url');
+ clip-path: circle(10px);
+ filter: blur(10px);
+ mask: url('test-url');
+ padding-left: 10px; /* this is not allowed because width is not set to 'auto' */
+ width: 200px;
+ transform: rotate(10);
+ border: 0px;
+ cursor: none;
+ content-visibility: hidden;
+ contain: size;
+ corner-shape: notch;
+ corner-top-left-shape: scoop;
+ corner-top-right-shape: bevel;
+ corner-bottom-left-shape: squircle;
+ corner-bottom-right-shape: square;
+ }
+</style>
+
+<usermedia id="id1" type="camera"></usermedia>
+
+<script>
+ test(function(){
+ var el_with_negatives = document.getElementById("id1");
+ assert_equals(getComputedStyle(el_with_negatives).borderImage, "none", "border-image");
+ assert_equals(getComputedStyle(el_with_negatives).backgroundImage, "none", "background-image");
+ assert_equals(getComputedStyle(el_with_negatives).clipPath, "none", "clip-path");
+ assert_equals(getComputedStyle(el_with_negatives).filter, "none", "filter");
+ assert_equals(getComputedStyle(el_with_negatives).mask, "none", "mask");
+ assert_equals(getComputedStyle(el_with_negatives).paddingLeft, "0px", "padding-left");
+ assert_equals(getComputedStyle(el_with_negatives).transform, "none", "transform");
+ assert_equals(getComputedStyle(el_with_negatives).cursor, "pointer", "cursor");
+ assert_equals(getComputedStyle(el_with_negatives).contentVisibility, "visible", "content-visibility");
+ assert_equals(getComputedStyle(el_with_negatives).contain, "none", "contain");
+ assert_equals(getComputedStyle(el_with_negatives).cornerShape, "round", "corner-shape");
+ assert_equals(getComputedStyle(el_with_negatives).cornerTopLeftShape, "round", "corner-top-left-shape");
+ assert_equals(getComputedStyle(el_with_negatives).cornerTopRightShape, "round", "corner-top-right-shape");
+ assert_equals(getComputedStyle(el_with_negatives).cornerBottomLeftShape, "round", "corner-bottom-left-shape");
+ assert_equals(getComputedStyle(el_with_negatives).cornerBottomRightShape, "round", "corner-bottom-right-shape");
+ }, "None of the listed properties should be applied");
+</script>
+</body>
diff --git a/testing/web-platform/tests/html/semantics/permission-element/usermedia/lang-attribute-update.html b/testing/web-platform/tests/html/semantics/permission-element/usermedia/lang-attribute-update.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<meta charset=utf-8>
+<link rel="help" href="https://github.com/WICG/PEPC/blob/main/explainer.md#locking-the-pepc-style">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<body>
+ <div id="el1" lang="en">
+ <div id="el2" lang="en">
+ <div>
+ <usermedia id="usermedia-element" type="camera" style="width:fit-content"></usermedia>
+ </div>
+ </div>
+ </div>
+
+<script>
+ // Since the `lang` attribute is inherited, but the actual inherited value
+ // isn't available via IDL, there's no direct way to check that it gets
+ // invalidated and updated when changes are made. As such, this test looks
+ // for side-effects of changing the language, such as changing the rendered
+ // size of the element.
+ promise_test(async() => {
+ var usermedia_element = document.getElementById("usermedia-element");
+ const initial_width = usermedia_element.offsetWidth;
+ let widths = new Set();
+ widths.add(initial_width);
+ const outer_lang_div = document.getElementById("el1");
+ const inner_lang_div = document.getElementById("el2");
+
+ // Changing the lang of the outer div should not have any effect as it is
+ // shadowed by the inner div.
+ outer_lang_div.lang = "de";
+ assert_equals(usermedia_element.offsetWidth, initial_width);
+
+ // The width of the usermedia element should change due to the changed
+ // language of the inner element. Try a couple languages to make sure one
+ // of them has a different size.
+ ['de','hu','fr-AG','es'].forEach(lang => {
+ inner_lang_div.lang = lang;
+ widths.add(usermedia_element.offsetWidth);
+ });
+ assert_true(widths.size > 1);
+
+ }, "UserMedia element should dynamically change text when the lang attribute changes")
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/semantics/permission-element/usermedia/no-children-rendered.tentative.html b/testing/web-platform/tests/html/semantics/permission-element/usermedia/no-children-rendered.tentative.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<link rel="help" href="https://github.com/WICG/PEPC/blob/main/explainer.md#locking-the-pepc-style">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<!-- The usermedia element is not a void element. Its children do not render. -->
+
+<!-- This tests for implementations that used to have no end tag for the usermedia element
+ In those implementations there would be 2 usermedia elements in this div. -->
+<div id="usermedia-element-div">
+ <usermedia type="camera">
+ <usermedia type="microphone">
+</div>
+
+<usermedia id="mic" type="microphone">This is some text</usermedia>
+
+<!-- The usermedia element does not automatically close <p> tags -->
+<p id="paragraph">Foo <usermedia type="camera">bar</usermedia> baz</p>
+
+<script>
+ test(function(){
+ assert_equals(1, document.getElementById("usermedia-element-div").childElementCount);
+ assert_equals('', document.getElementById("mic").innerText);
+ assert_equals('This is some text', document.getElementById("mic").textContent);
+ assert_equals('This is some text', document.getElementById("mic").innerHTML);
+ assert_equals(4, document.body.childElementCount); //div, usermedia, script, p
+ assert_equals('Foo bar baz', document.getElementById("paragraph").textContent);
+ }, "The usermedia element should have no end tag or contents");
+</script>
+</body>
diff --git a/testing/web-platform/tests/html/semantics/permission-element/usermedia/no-focus.tentative.html b/testing/web-platform/tests/html/semantics/permission-element/usermedia/no-focus.tentative.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<link rel="help" href="https://github.com/WICG/PEPC/blob/main/explainer.md#locking-the-pepc-style">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<body>
+<!-- The usermedia element should not be focusable by script.
+-->
+<usermedia tabindex="0" id="valid_usermedia_element" type="camera"></usermedia>
+
+<span tabindex="0" id="focusable_span">This is some text</span>
+
+<!-- style needed to allow the invalid element to have a width -->
+<usermedia style="width: auto; padding-left: 10px" tabindex="0" id="invalid_usermedia_element" type="invalid"></usermedia>
+
+<script>
+ promise_test(async() => {
+ invalid_usermedia_element.focus();
+ assert_equals(document.activeElement, invalid_usermedia_element,
+ "Invalid usermedia element should be focusable");
+
+ focusable_span.focus();
+ valid_usermedia_element.focus();
+ assert_equals(document.activeElement, focusable_span,
+ "UserMedia element should not be focused.");
+
+ focusable_span.focus();
+ await test_driver.bless('Focus with user activation', () => {
+ valid_usermedia_element.focus();
+ });
+ assert_equals(document.activeElement, valid_usermedia_element,
+ "Focus is allowed with user activation");
+
+ focusable_span.focus();
+ actions = new test_driver.Actions()
+ .pointerMove(1, 1, {origin: valid_usermedia_element})
+ .pointerDown()
+ .addTick();
+ await actions.send();
+ assert_equals(document.activeElement, valid_usermedia_element,
+ "Users can focus the element");
+
+ focusable_span.focus();
+ assert_equals(document.activeElement, focusable_span,
+ "Other element should be focused");
+}, "UserMedia element is not focusable by script without user activation");
+</script>
+</body>
