<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
section {
position: relative;
display: inline-block;
width: 300px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}
img {
position: absolute;
left: 0px;
top: 50px;
width: 280px;
height: 80px;
}
</style>
</head>
<body>
<section>
<h2>ltr image, rtl alt</h2>
<img dir="ltr" alt="یا" src="about:blank">
</section>
<section>
<h2>rtl image, rtl alt</h2>
<img dir="rtl" alt="یا" src="about:blank">
</section>
<section>
<h2>ltr image, ltr alt</h2>
<img dir="ltr" alt="alt" src="about:blank">
</section>
<section>
<h2>rtl image, ltr alt</h2>
<img dir="rtl" alt="alt" src="about:blank">
</section>
<section>
<h2>ltr image, weak alt</h2>
<img dir="ltr" alt=".," src="about:blank">
</section>
<section>
<h2>rtl image, weak alt</h2>
<img dir="rtl" alt=".," src="about:blank">
</section>
<section>
<h2>ltr image, mixed alt</h2>
<img dir="ltr" alt="یاexampleیا" src="about:blank">
</section>
<section>
<h2>rtl image, mixed alt</h2>
<img dir="rtl" alt="یاexampleیا" src="about:blank">
</section>
<p>
Tests that image alt text takes directionality into account.
</p>
</body>
</html>
Codebase Browser
chromium