testing/web-platform/tests/css/selectors/selectors-dir-selector-rtl-001.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>CSS Selectors Level 4 Test: basic support for dir(rtl)</title>
   5     <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com">
   6     <link rel="help" href="http://www.w3.org/TR/selectors4/#dir-pseudo">
   7     <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
   8     <meta name="flags" content="">
   9     <meta name="assert" content="The :dir(rtl) pseudo-class matches an elment that has a directionality of right-to-left (rtl). Since the div element has dir=rtl, the selector matches.">
  10     <style type="text/css">
  11        div {
  12            width: 100px;
  13            height: 100px;
  14            background-color: red;
  15        }
  16
  17        div:dir(rtl) {
  18            background-color: green;
  19        }
  20     </style>
  21 </head>
  22 <body>
  23     <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
  24     <div dir="rtl"></div>
  25 </body>
  26 </html>