mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-12-07 21:59:54 +00:00
LibWeb: Implement the translate attribute
This commit is contained in:
Callum Law
Jelle Raaijmakers
parent
4b3715ccba
commit
279913a223
Notes:
github-actions[bot]
2025-05-23 12:35:07 +00:00
Author: https://github.com/Calme1709
Commit: 279913a223
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4855
Reviewed-by: https://github.com/gmta ✅
24 changed files with 399 additions and 1 deletions
|
|
@ -0,0 +1,6 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Pass In the default case, ie. with no translate attribute in the page, javascript will detect the translation mode of text as translate-enabled.
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Pass If the translate attribute is set to yes, javascript will detect the translation mode of text as translate-enabled.
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Pass If the translate attribute is set to no, javascript will detect the translation mode of text as no-translate.
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Pass If the translate attribute is set to no, javascript will detect the translation mode of elements inside that element with no translate flag as no-translate.
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Pass If the translate attribute is set to yes on an element inside an element with the translate attribute set to no, javascript will detect the translation mode of text in the inner element as translate-enabled.
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Pass If the translate attribute is set to a null string, javascript will detect the translation mode of text as translate-enabled.
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Pass keyword yes
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 5 tests
|
||||
|
||||
5 Pass
|
||||
Pass No parent node
|
||||
Pass DocumentFragment parent node
|
||||
Pass ShadowRoot parent node whose shadow host has translate=yes
|
||||
Pass ShadowRoot parent node whose shadow host has translate=no
|
||||
Pass Document parent node
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 3 tests
|
||||
|
||||
3 Pass
|
||||
Pass Non-HTML elements default to translate-enabled
|
||||
Pass Non-HTML elements inherit their parent's translation-enabled state
|
||||
Pass Non-HTML elements inherit their parent's no-translation state
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>no translate attribute</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-translate-attribute'>
|
||||
<script src="../../../../resources/testharness.js"></script>
|
||||
<script src="../../../../resources/testharnessreport.js"></script>
|
||||
<style type='text/css'>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<div class="test"><div id="box"> </div></div>
|
||||
|
||||
|
||||
<script>
|
||||
test(function() {
|
||||
assert_true(document.getElementById('box').translate);
|
||||
}, "In the default case, ie. with no translate attribute in the page, javascript will detect the translation mode of text as translate-enabled.");
|
||||
</script>
|
||||
|
||||
<div id='log'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>translate=yes</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-translate-attribute'>
|
||||
<script src="../../../../resources/testharness.js"></script>
|
||||
<script src="../../../../resources/testharnessreport.js"></script>
|
||||
<style type='text/css'>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<div class="test"><div id="box" translate="yes"> </div></div>
|
||||
|
||||
|
||||
<script>
|
||||
test(function() {
|
||||
assert_true(document.getElementById('box').translate);
|
||||
}, "If the translate attribute is set to yes, javascript will detect the translation mode of text as translate-enabled.");
|
||||
</script>
|
||||
|
||||
<div id='log'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>translate=no</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-translate-attribute'>
|
||||
<script src="../../../../resources/testharness.js"></script>
|
||||
<script src="../../../../resources/testharnessreport.js"></script>
|
||||
<style type='text/css'>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<div class="test"><div id="box" translate="no"> </div></div>
|
||||
|
||||
|
||||
<script>
|
||||
test(function() {
|
||||
assert_false(document.getElementById('box').translate);
|
||||
}, "If the translate attribute is set to no, javascript will detect the translation mode of text as no-translate.");
|
||||
</script>
|
||||
|
||||
<div id='log'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>translate inherits no</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-translate-attribute'>
|
||||
<script src="../../../../resources/testharness.js"></script>
|
||||
<script src="../../../../resources/testharnessreport.js"></script>
|
||||
<style type='text/css'>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<div class="test"><div id="box" translate="no"> <span id="spantest"> </span></div></div>
|
||||
|
||||
|
||||
<script>
|
||||
test(function() {
|
||||
assert_false(document.getElementById('spantest').translate);
|
||||
}, "If the translate attribute is set to no, javascript will detect the translation mode of elements inside that element with no translate flag as no-translate.");
|
||||
</script>
|
||||
|
||||
<div id='log'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>translate=yes inside translate=no</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-translate-attribute'>
|
||||
<script src="../../../../resources/testharness.js"></script>
|
||||
<script src="../../../../resources/testharnessreport.js"></script>
|
||||
<style type='text/css'>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<div class="test"><div id="box" translate="no"> <span id="spantest" translate="yes"> </span></div></div>
|
||||
|
||||
|
||||
<script>
|
||||
test(function() {
|
||||
assert_true(document.getElementById('spantest').translate);
|
||||
}, "If the translate attribute is set to yes on an element inside an element with the translate attribute set to no, javascript will detect the translation mode of text in the inner element as translate-enabled.");
|
||||
</script>
|
||||
|
||||
<div id='log'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>translate=""</title>
|
||||
<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'>
|
||||
<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-translate-attribute'>
|
||||
<script src="../../../../resources/testharness.js"></script>
|
||||
<script src="../../../../resources/testharnessreport.js"></script>
|
||||
<style type='text/css'>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<div class="test" translate="no"><div id="box" translate=""> </div></div>
|
||||
|
||||
|
||||
<script>
|
||||
test(function() {
|
||||
assert_true(document.getElementById('box').translate);
|
||||
}, "If the translate attribute is set to a null string, javascript will detect the translation mode of text as translate-enabled.");
|
||||
</script>
|
||||
|
||||
<div id='log'></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#attr-translate">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#enumerated-attribute">
|
||||
<meta name="assert" content="@translate values are ASCII case-insensitive">
|
||||
<script src="../../../../resources/testharness.js"></script>
|
||||
<script src="../../../../resources/testharnessreport.js"></script>
|
||||
<!--
|
||||
We wrap the <span> elements under test with <div> elements so the invalid
|
||||
value default (inherit) can be distinguished from true through the IDL
|
||||
attribute. The inherit state would otherwise yield true because inheritance
|
||||
would go all the way to :root, whose translation mode is translate-enabled
|
||||
because it’s also in the inherit state.
|
||||
-->
|
||||
<div translate="no"><span translate="yes"></span></div>
|
||||
<div translate="no"><span translate="YeS"></span></div>
|
||||
<div translate="no"><span translate="yeſ"></span></div>
|
||||
<script>
|
||||
const span = document.querySelectorAll("span");
|
||||
|
||||
test(() => {
|
||||
assert_equals(span[0].translate, true, "lowercase valid");
|
||||
assert_equals(span[1].translate, true, "mixed case valid");
|
||||
assert_equals(span[2].translate, false, "non-ASCII invalid");
|
||||
}, "keyword yes");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>The translate attribute inherit state when there's no parent element</title>
|
||||
<script src="../../../../resources/testharness.js"></script>
|
||||
<script src="../../../../resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(() => {
|
||||
const div = document.createElement("div");
|
||||
assert_true(div.translate);
|
||||
}, 'No parent node');
|
||||
|
||||
test(() => {
|
||||
const div = document.createElement("div");
|
||||
const frag = document.createDocumentFragment();
|
||||
frag.append(div);
|
||||
assert_true(div.translate);
|
||||
}, 'DocumentFragment parent node');
|
||||
|
||||
for (const translateValue of ['yes', 'no']) {
|
||||
test(() => {
|
||||
const div = document.createElement("div");
|
||||
const myElement = document.createElement("my-element");
|
||||
myElement.setAttribute('translate', translateValue);
|
||||
myElement.attachShadow({mode: 'open'});
|
||||
myElement.shadowRoot.append(div);
|
||||
assert_true(div.translate);
|
||||
}, `ShadowRoot parent node whose shadow host has translate=${translateValue}`);
|
||||
}
|
||||
|
||||
test(() => {
|
||||
assert_true(document.documentElement.translate);
|
||||
}, 'Document parent node');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Non-HTML elements have a translation mode</title>
|
||||
<script src="../../../../resources/testharness.js"></script>
|
||||
<script src="../../../../resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(() => {
|
||||
const svgContainer = document.createElement("svg");
|
||||
const foreignObject = document.createElement("foreignObject");
|
||||
svgContainer.appendChild(foreignObject);
|
||||
const div = document.createElement("div");
|
||||
foreignObject.appendChild(div);
|
||||
|
||||
assert_true(div.translate);
|
||||
}, 'Non-HTML elements default to translate-enabled');
|
||||
|
||||
test(() => {
|
||||
const outerDiv = document.createElement("div");
|
||||
outerDiv.translate = true;
|
||||
assert_true(outerDiv.translate);
|
||||
|
||||
const svgContainer = document.createElement("svg");
|
||||
outerDiv.appendChild(svgContainer);
|
||||
const foreignObject = document.createElement("foreignObject");
|
||||
svgContainer.appendChild(foreignObject);
|
||||
const div = document.createElement("div");
|
||||
foreignObject.appendChild(div);
|
||||
|
||||
assert_true(div.translate);
|
||||
}, "Non-HTML elements inherit their parent's translation-enabled state");
|
||||
|
||||
test(() => {
|
||||
const outerDiv = document.createElement("div");
|
||||
outerDiv.translate = false;
|
||||
assert_false(outerDiv.translate);
|
||||
|
||||
const svgContainer = document.createElement("svg");
|
||||
outerDiv.appendChild(svgContainer);
|
||||
const foreignObject = document.createElement("foreignObject");
|
||||
svgContainer.appendChild(foreignObject);
|
||||
const div = document.createElement("div");
|
||||
foreignObject.appendChild(div);
|
||||
|
||||
assert_false(div.translate);
|
||||
}, "Non-HTML elements inherit their parent's no-translation state");
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue