Prototype a user-find css property to control findability of text.
Nightly-only for now waiting on CSSWG discussion.
Differential Revision: https://phabricator.services.mozilla.com/D199727
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1868316
gecko-commit: 6fdde7dce00345bc568706b0cf7de521b91ba75a
gecko-reviewers: jfkthame
diff --git a/css/css-ui/inheritance.html b/css/css-ui/inheritance.html
index 9a2efdd..1eaa901 100644
--- a/css/css-ui/inheritance.html
+++ b/css/css-ui/inheritance.html
@@ -37,6 +37,9 @@
assert_inherited('caret-color', currentColor, 'rgba(42, 53, 64, 0.75)');
assert_inherited('caret-shape', 'auto', 'bar');
assert_inherited('cursor', 'auto', 'pointer');
+if (CSS.supports('user-find', 'auto')) {
+ assert_inherited('user-find', 'auto', 'none');
+}
assert_not_inherited('nav-down', 'auto', '#foo');
assert_not_inherited('nav-left', 'auto', '#foo');
assert_not_inherited('nav-right', 'auto', '#foo');
diff --git a/css/css-ui/parsing/user-find-computed.tentative.html b/css/css-ui/parsing/user-find-computed.tentative.html
new file mode 100644
index 0000000..91c0d3f
--- /dev/null
+++ b/css/css-ui/parsing/user-find-computed.tentative.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS UI Level 4: getComputedStyle().userFind</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3460">
+<meta name="assert" content="user-find computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("user-find", "auto");
+test_computed_value("user-find", "none");
+</script>
+</body>
+</html>
diff --git a/css/css-ui/parsing/user-find-invalid.tentative.html b/css/css-ui/parsing/user-find-invalid.tentative.html
new file mode 100644
index 0000000..1d85f28
--- /dev/null
+++ b/css/css-ui/parsing/user-find-invalid.tentative.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS UI Level 4: parsing user-find with invalid values</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3460">
+<meta name="assert" content="user-find supports only the grammar 'auto | none'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("user-find", "visible");
+test_invalid_value("user-find", "never");
+test_invalid_value("user-find", "10px");
+test_invalid_value("user-find", "'none'");
+</script>
+</body>
+</html>
diff --git a/css/css-ui/parsing/user-find-valid.tentative.html b/css/css-ui/parsing/user-find-valid.tentative.html
new file mode 100644
index 0000000..ab963c2
--- /dev/null
+++ b/css/css-ui/parsing/user-find-valid.tentative.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS UI Level 4: parsing user-find with valid values</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3460">
+<meta name="assert" content="user-find supports the grammar 'auto | none'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("user-find", "auto");
+test_valid_value("user-find", "none");
+</script>
+</body>
+</html>
diff --git a/css/css-ui/user-find.tentative.html b/css/css-ui/user-find.tentative.html
new file mode 100644
index 0000000..b15d813
--- /dev/null
+++ b/css/css-ui/user-find.tentative.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<meta charset="utf-8">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3460">
+<title>Basic test for the user-find property</title>
+<body>
+<script>
+const t = async_test("Basic test for the user-find property");
+
+function testFindable(findCount, textToFind, buildDoc, description) {
+ if (typeof findCount == "boolean")
+ findCount = findCount ? 1 : 0;
+ try {
+ const iframe = document.querySelector("iframe")
+ iframe.contentDocument.documentElement.innerHTML =
+ (typeof buildDoc == "string") ? buildDoc : "";
+
+ if (typeof buildDoc == "function")
+ buildDoc(iframe.contentDocument);
+
+ iframe.contentWindow.getSelection().removeAllRanges();
+ for (let i = findCount; i >= 0; --i) {
+ const expectFindable = i != 0;
+ assert_equals(
+ iframe.contentWindow.find(textToFind),
+ expectFindable,
+ "Should be " + (expectFindable ? "" : "not ") + "findable: " + description + ", text: " + textToFind + ", iter: " + (findCount - i + 1)
+ );
+ }
+ } catch (ex) {
+ assert_unreached(ex);
+ }
+}
+
+let runTests = t.step_func_done(function() {
+ testFindable(true, "me", `
+ Find me please
+ `, "sanity test");
+
+ testFindable(false, "me", `
+ <div style="user-find: none">Do not find me please</div>
+ `, "Basic use case");
+
+ testFindable(true, "me", `
+ <div style="user-find: none">Do not find me, but <span style="user-find: auto">find me please</span></div>
+ `, "nested");
+});
+
+window.onload = function() {
+ let iframe = document.createElement("iframe");
+ iframe.onload = runTests;
+ iframe.srcdoc = "<!doctype html><html></html>";
+ document.body.appendChild(iframe);
+};
+</script>
+</body>
