80 lines
3.0 KiB
HTML
80 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<style>
|
|
.resultsDiv {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
-moz-column-width: 13em;
|
|
-moz-column-gap: 5em;
|
|
-webkit-columns:1 1px; /* Make as many (overflowing) columns as necessary, but keep them as narrow as possible */
|
|
-webkit-column-gap: 5em;
|
|
-webkit-column-fill: auto;
|
|
columns:1 1px;
|
|
column-gap: 5em;
|
|
column-fill: auto;
|
|
height: 400px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>This table shows unicode-bidi: isolate behavior (in red) with display: inline-block behavior overlapping in green. You should see no red in this test! Behavior between these two methods should be identical for non-wrapping strings, assuming unicode-bidi: isolate is implemented and functioning correctly.</div>
|
|
|
|
<div id="resultsContainer" style="position: relative">
|
|
<div id="actual" style="color: red" class="resultsDiv"></div>
|
|
<div id="expected" style="color: green;" class="resultsDiv"></div>
|
|
</div>
|
|
|
|
<script>
|
|
var seed = 0;
|
|
|
|
var neutrals = ['"', ")", "("];
|
|
var strongRTLs = ['ש', 'נ', 'ב', 'ג', 'ק', 'כ', 'ע'];
|
|
var strongLTRs = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
|
|
var neutral = function() { return neutrals[seed++ % neutrals.length]; }
|
|
var strongRTL = function() { return strongRTLs[seed++ % strongRTLs.length]; }
|
|
var strongLTR = function() { return strongLTRs[seed++ % strongLTRs.length]; }
|
|
var charClassExamples = [neutral, strongRTL, strongLTR];
|
|
var possibleDirs = ['ltr', 'rtl'];
|
|
|
|
var testStyle = "unicode-bidi: -webkit-isolate";
|
|
var controlStyle = "display: inline-block";
|
|
|
|
for (outerDirIndex in possibleDirs) {
|
|
var outerDir = possibleDirs[outerDirIndex];
|
|
for (beforeSpanIndex in charClassExamples) {
|
|
var beforeSpan = charClassExamples[beforeSpanIndex];
|
|
for (spanDirIndex in possibleDirs) {
|
|
var spanDir = possibleDirs[spanDirIndex];
|
|
for (inSpanIndex in charClassExamples) {
|
|
var inSpan = charClassExamples[inSpanIndex];
|
|
for (afterSpanIndex in charClassExamples) {
|
|
var afterSpan = charClassExamples[afterSpanIndex];
|
|
function caseWithStyle(spanStyle) {
|
|
seed = 0;
|
|
var outerDiv = document.createElement("div");
|
|
outerDiv.dir = outerDir;
|
|
outerDiv.appendChild(document.createTextNode(beforeSpan()));
|
|
var span = document.createElement("span");
|
|
span.dir = spanDir;
|
|
span.setAttribute("style", spanStyle)
|
|
span.appendChild(document.createTextNode(inSpan()));
|
|
outerDiv.appendChild(span);
|
|
outerDiv.appendChild(document.createTextNode(afterSpan()));
|
|
return outerDiv;
|
|
}
|
|
expected.appendChild(caseWithStyle(controlStyle));
|
|
actual.appendChild(caseWithStyle(testStyle));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</table>
|
|
</body>
|
|
</html>
|