blob: 53e51c59d73136de7c667388dd6bad00a0d8f08a [file] [log] [blame]
<!DOCTYPE html>
<meta charset="utf-8">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="resources/shadow-dom.js"></script>
<div id="container">
<h2>dir=rtl inherits into shadow trees</h2>
<div id="dir-rtl-inherits" dir="rtl" data-dir-expected="rtl">
<template>
<div id="target">The dir=rtl of host should inherit to shadow trees</div>
</template>
</div>
<div>
<div id="dir-rtl-distributed" data-dir-expected="rtl">dir=rtl in shadow trees apply to distributed content</div>
<template>
<div dir="rtl"><content></content></div>
</template>
</div>
<div>
<div id="dir-rtl-final" data-dir-expected="rtl">dir=rtl in shadow trees apply to distributed content</div>
<template>
<content></content>
</template>
<template>
<div dir="rtl"><content></content></div>
</template>
</div>
<div>
<div id="dir-rtl-redistributed-multilevel" data-dir-expected="rtl">dir=rtl in shadow trees apply to distributed content</div>
<template>
<div>
<content></content>
<template>
<div dir="rtl"><content></content></div>
</template>
</div>
</template>
</div>
<div id="dir-rtl-older">
<template>
<div id="target" data-dir-expected="rtl">Distributed from older shadow roots</div>
</template>
<template>
<div dir="rtl"><shadow></shadow></div>
</template>
</div>
<div>
<div id="dir-rtl-redistributed" data-dir-expected="rtl">Re-distributed</div>
<template>
<content></content>
</template>
<template>
<div dir="rtl"><shadow></shadow></div>
</template>
</div>
<h2>dir=auto determines the first character in the flat tree</h2>
<div id="dir-auto-english" dir="auto" data-dir-expected="ltr">
<template>English text</template>
</div>
<div id="dir-auto-hebrew" dir="auto" data-dir-expected="rtl">
<template>מקור השם עברית</template>
</div>
<div id="dir-auto-hebrew-span" dir="auto" data-dir-expected="rtl">
<template><span>מקור השם עברית</span></template>
</div>
<div id="dir-auto-distributed-english" dir="auto" data-dir-expected="ltr">
<span>מקור השם עברית</span>
<span id="e">English text</span>
<template>
<content select="#e"></content>
</template>
</div>
<div id="dir-auto-distributed-hebrew" dir="auto" data-dir-expected="rtl">
<span>English text</span>
<span id="h">מקור השם עברית</span>
<template>
<content select="#h"></content>
</template>
</div>
<div id="dir-auto-final-english" dir="auto" data-dir-expected="ltr">
<span>מקור השם עברית</span>
<span id="e">English text</span>
<template>
<content select="#e"></content>
</template>
<template>
<content select="#e"></content>
</template>
</div>
<div id="dir-auto-final-hebrew" dir="auto" data-dir-expected="rtl">
<span>English text</span>
<span id="h">מקור השם עברית</span>
<template>
<content select="#h"></content>
</template>
<template>
<content select="#h"></content>
</template>
</div>
<div id="dir-auto-multilevel-english" dir="auto" data-dir-expected="ltr">
<span>מקור השם עברית</span>
<span id="e">English text</span>
<template>
<div>
<content></content>
<template>
<content select="#e"></content>
</template>
</div>
</template>
</div>
<div id="dir-auto-multilevel-hebrew" dir="auto" data-dir-expected="rtl">
<span>English text</span>
<span id="h">מקור השם עברית</span>
<template>
<div>
<content></content>
<template>
<content select="#h"></content>
</template>
</div>
</template>
</div>
<div id="dir-auto-older-english" dir="auto" data-dir-expected="ltr">
<span>מקור השם עברית</span>
<template>
<span>English text</span>
</template>
<template>
<shadow></shadow>
</template>
</div>
<div id="dir-auto-older-hebrew" dir="auto" data-dir-expected="rtl">
<span>English text</span>
<template>
<span>מקור השם עברית</span>
</template>
<template>
<shadow></shadow>
</template>
</div>
<div id="dir-auto-redistributed-english" dir="auto" data-dir-expected="ltr">
<span>מקור השם עברית</span>
<span id="e">English text</span>
<template>
<div><content select="#e"></content></div>
</template>
<template>
<shadow></shadow>
</template>
</div>
<div id="dir-auto-redistributed-hebrew" dir="auto" data-dir-expected="rtl">
<span>English text</span>
<span id="h">מקור השם עברית</span>
<template>
<div><content select="#h"></content></div>
</template>
<template>
<shadow></shadow>
</template>
</div>
</div>
<script>
convertTemplatesToShadowRootsWithin(container);
// Test dir="rtl" inherits in shadow trees
test(function () {
assert_direction("dir=rtl", getNodeInComposedTree("dir-rtl-inherits/target"));
}, "dir=rtl inherits into shadow trees");
test(function () {
assert_direction("dir=rtl", getNodeInComposedTree("dir-rtl-distributed"));
}, "dir=rtl applies to the distributed content");
test(function () {
assert_direction("dir=rtl", getNodeInComposedTree("dir-rtl-final"));
}, "dir=rtl applies to the distributed content with multiple shadow roots");
test(function () {
assert_direction("dir=rtl", getNodeInComposedTree("dir-rtl-redistributed-multilevel"));
}, "dir=rtl applies to the distributed content (multiple levels)");
test(function () {
assert_direction("dir=rtl", getNodeInComposedTree("dir-rtl-older/target"));
}, "dir=rtl applies to the content in older shadow roots");
test(function () {
assert_direction("dir=rtl", getNodeInComposedTree("dir-rtl-redistributed"));
}, "dir=rtl applies to the re-distributed content through older shadow roots");
// Test dir="auto" inherits in shadow trees
// dir="auto" calculates the directionality by the first character
test(function () {
assert_direction("English text", getNodeInComposedTree("dir-auto-english"));
assert_direction("Hebrew text", getNodeInComposedTree("dir-auto-hebrew"));
assert_direction("Hebrew text", getNodeInComposedTree("dir-auto-hebrew-span"));
}, "dir=auto the first character in the shadow trees");
test(function () {
assert_direction("English text", getNodeInComposedTree("dir-auto-distributed-english"));
assert_direction("Hebrew text", getNodeInComposedTree("dir-auto-distributed-hebrew"));
}, "dir=auto the first character in the distributed content");
test(function () {
assert_direction("English text", getNodeInComposedTree("dir-auto-final-english"));
assert_direction("Hebrew text", getNodeInComposedTree("dir-auto-final-hebrew"));
}, "dir=auto the first character in the distributed content with multiple shadow roots");
test(function () {
assert_direction("English text", getNodeInComposedTree("dir-auto-multilevel-english"));
assert_direction("Hebrew text", getNodeInComposedTree("dir-auto-multilevel-hebrew"));
}, "dir=auto the first character in the distributed content with multiple levels of shadow roots");
test(function () {
assert_direction("English text", getNodeInComposedTree("dir-auto-older-english"));
assert_direction("Hebrew text", getNodeInComposedTree("dir-auto-older-hebrew"));
}, "dir=auto the first character in the distributed content from older shadow roots");
test(function () {
assert_direction("English text", getNodeInComposedTree("dir-auto-redistributed-english"));
assert_direction("Hebrew text", getNodeInComposedTree("dir-auto-redistributed-hebrew"));
}, "dir=auto the first character in the re-distributed content through older shadow roots");
function assert_direction(description, elementToTest) {
elementToTest.style.webkitBorderStart = "5px solid green";
elementToTest.style.webkitBorderEnd = "5px solid red";
var actualColor = document.defaultView.getComputedStyle(elementToTest).getPropertyValue("border-right-color");
var dirExpected = elementToTest.dataset.dirExpected;
switch (dirExpected) {
case "ltr":
assert_equals(actualColor, "rgb(255, 0, 0)", description + " should be left-to-right");
break;
case "rtl":
assert_equals(actualColor, "rgb(0, 128, 0)", description + " should be right-to-left");
break;
default:
break;
}
}
if (window.testRunner)
container.style.display = "none";
</script>