<!DOCTYPE HTML>
<title>The "systemLanguage" attribute match user preferred languages</title>
<link rel="help" href="https://www.w3.org/TR/SVG2/struct.html#ConditionalProcessingSystemLanguageAttribute">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<svg>
<switch id="myswitch">
</switch>
</svg>
<script>
test(() => {
	internals.setUserPreferredLanguages(["es"]);
	testRunner.setAcceptLanguages("en-US,en");

	var text1 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
	text1.setAttribute('systemLanguage', 'es, de');
	text1.textContent = 'Español';

	var text2 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
	text2.setAttribute('systemLanguage', 'de, it, en-GB');
	text2.textContent = 'English';

	var myswitch = document.getElementById("myswitch");
	myswitch.appendChild(text1);
	myswitch.appendChild(text2);

	assert_greater_than(text2.getBoundingClientRect().width, 0);
	assert_equals(text1.getBoundingClientRect().width, 0);

	myswitch.removeChild(text1);
	myswitch.removeChild(text2);

	testRunner.setAcceptLanguages("it, en-AU");

	myswitch.appendChild(text1);
	myswitch.appendChild(text2);

	assert_greater_than(text2.getBoundingClientRect().width, 0);
	assert_equals(text1.getBoundingClientRect().width, 0);
});
</script>