third_party/WebKit/LayoutTests/inspector-protocol/css/css-get-platform-fonts.html

   1 <html>
   2 <head>
   3 <script type="text/javascript" src="../../http/tests/inspector-protocol/inspector-protocol-test.js"></script>
   4 <script type="text/javascript" src="../../http/tests/inspector-protocol/css-protocol-test.js"></script>
   5 <script type="text/javascript" src="../../http/tests/inspector-protocol/dom-protocol-test.js"></script>
   6 <script type="text/javascript">
   7
   8 function test()
   9 {
  10     var documentNodeId;
  11
  12     InspectorTest.requestDocumentNodeId(onDocumentNodeId);
  13
  14     function onDocumentNodeId(nodeId)
  15     {
  16         documentNodeId = nodeId;
  17         InspectorTest.runTestSuite([
  18             function testFirstLetterPseudoClass(next)
  19             {
  20                 platformFontsForElementWithSelector("#fancy", next);
  21             },
  22
  23             function testSelectElementPlatformFonts(next)
  24             {
  25                 platformFontsForElementWithSelector("select", next);
  26             }
  27         ]);
  28     }
  29
  30
  31     function platformFontsForElementWithSelector(selector, callback)
  32     {
  33         InspectorTest.requestNodeId(documentNodeId, selector, onNodeId);
  34
  35         function onNodeId(nodeId)
  36         {
  37             InspectorTest.sendCommandOrDie("CSS.getPlatformFontsForNode", { nodeId: nodeId }, onGotComputedFonts);
  38         }
  39
  40         function onGotComputedFonts(response)
  41         {
  42             dumpComputedFonts(response);
  43             callback();
  44         }
  45     }
  46
  47     function dumpComputedFonts(response)
  48     {
  49         var fonts = response.fonts;
  50         fonts.sort(function(a, b) {
  51             return b.glyphCount - a.glyphCount;
  52         });
  53         for (var i = 0; i < fonts.length; ++i)
  54             fonts[i].familyName = "<Some-family-name-" + i + ">";
  55         InspectorTest.log(JSON.stringify(fonts));
  56     }
  57 };
  58
  59 window.addEventListener("DOMContentLoaded", function () {
  60     runTest();
  61 }, false);
  62
  63 </script>
  64 <style>
  65     #fancy {
  66         font-family: 'Arial';
  67         background-color: gray;
  68     }
  69     #fancy:first-letter {
  70         font-family: 'Times New Roman';
  71         font-size: 400%;
  72         background-color: blue;
  73     }
  74
  75     #fancy:first-line {
  76         font-family: 'Courier New';
  77         background-color: yellow;
  78     }
  79 </style>
  80 </head>
  81 <body>
  82
  83 <div id="fancy">
  84 7chars.<br>
  85 Some line with 29 characters.
  86 </div>
  87 <select>
  88     <option>Short</option>
  89     <option selected>Option with a lot of chars.</option>
  90 </select>
  91
  92 </body>
  93 </html>