testing/web-platform/tests/css/css-text-decor/text-emphasis-style-none-001.xht

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml">
   4         <head>
   5                 <title>CSS Test: text-emphasis-style - none - basic cases</title>
   6                 <link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" />
   7                 <link rel="help" title="CSS Text Level 3: 11.2.1.  Emphasis Mark Style: the ‘text-emphasis-style’ property" href="http://www.w3.org/TR/css-text-3/#text-emphasis-style" />
   8                 <link rel="match" href="reference/text-emphasis-style-none-001-ref.xht"/>
   9                 <meta name="flags" content="" />
  10                 <meta name="assert" content="This property applies emphasis marks to the element's text. " />
  11                 <style type="text/css"><![CDATA[
  12                                 .parent
  13                                 {
  14                                         border: solid 1px gray;
  15                                         font-size: 2em;
  16                                         width: 10em;
  17                                 }
  18                                 #test
  19                                 {
  20                                         text-emphasis-style: none;
  21                                 }
  22                 ]]></style>
  23                 <script type="text/javascript">
  24                         //      <![CDATA[
  25                                         // Set Font Family to 'IPAMincho'
  26                                         function setFontFamily () {
  27                                                 var fontName = 'IPAMincho';
  28                                                 var divs = document.getElementsByTagName('div');
  29                                                 var i = 0;
  30                                                 var div;
  31                                                 while (i < divs.length) {
  32                                                         div = divs.item(i);
  33                                                         if (div.className == 'parent') {
  34                                                                 div.style.fontFamily = fontName;
  35                                                         }
  36                                                         i++;
  37                                                 }
  38                                         }
  39                         //      ]]>
  40                 </script>
  41         </head>
  42         <body>
  43                 <div>
  44                         <p>Test passes if a pair of upper and lower "Filler Text" in the square box is identical.</p>
  45                         none
  46                         <div class="parent">
  47                                 <div><span id="test">Filler</span> Text</div>
  48                                 <br />
  49                                 <div>Filler Text</div>
  50                         </div>
  51                         <p class="fontChange" style="display: block;">
  52                                         If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and apply it.
  53                                         <button type="button" onclick="setFontFamily()">
  54                                                 Apply
  55                                         </button>
  56                         </p>
  57                         <script type="text/javascript">
  58                                 if (document.getElementById) {
  59                                         document.getElementById('fontChange').style.display = 'block'
  60                                 }
  61                         </script>
  62                 </div>
  63         </body>
  64 </html>