src/third_party/WebKit/LayoutTests/inspector/styles/css-outline.html

   1 <html>
   2 <head>
   3 <script src="../../http/tests/inspector/inspector-test.js"></script>
   4 <style id="styler">
   5 @import url("some-url-to-load-css.css") print;
   6 @charset "ISO-8859-15";
   7 @namespace svg url(http://www.w3.org/2000/svg);
   8 @font-face {
   9     font-family: "Example Font";
  10     src: url("http://www.example.com/fonts/example");
  11 }
  12
  13 @page {
  14     margin: 1in 1.5in;
  15 }
  16 @page :right {
  17     margin-right: 5cm; /* right pages only */
  18 }
  19 @page :first {
  20     margin-top: 8cm; /* extra top margin on the first page */
  21 }
  22
  23 div { color: red }
  24 #fluffy {
  25     border: 1px solid black;
  26     z-index: 1;
  27 }
  28 input:-moz-placeholder { text-overflow: ellipsis; }
  29 .class-name, p /* style all paragraphs as well */ {
  30     border-color: blue;
  31     -lol-cats: "dogs" /* unexisting property */
  32 }
  33
  34 @keyframes identifier {
  35     0% { top: 0; left: 0; }
  36     30% { top: 50px; }
  37     68%, 72% { left: 50px; }
  38     100% { top: 100px; left: 100%; }
  39 }
  40
  41 svg|a {
  42     text-decoration: underline;
  43 }
  44
  45 @media (max-width:500px) {
  46     span {
  47         -webkit-border-radius: 10px;
  48         font-family: "Example Font"
  49     }
  50 }
  51 </style>
  52 <script>
  53
  54 function getCSS()
  55 {
  56     return document.querySelector("#styler").textContent;
  57 }
  58
  59 function test()
  60 {
  61     setTimeout(InspectorTest.completeTest.bind(InspectorTest), 1000);
  62     var worker = new Worker("ScriptFormatterWorker.js");
  63     worker.onmessage = onWorkerMessage;
  64     worker.onerror = onWorkerError;
  65
  66     function onWorkerMessage(event)
  67     {
  68         InspectorTest.addObject(event.data);
  69         InspectorTest.completeTest();
  70     }
  71
  72     function onWorkerError(event)
  73     {
  74         InspectorTest.addResult("Error in worker: " + event.data);
  75         InspectorTest.completeTest();
  76     }
  77
  78     function onStyleFetched(result)
  79     {
  80         worker.postMessage({ method: "cssOutline", params: { content: result.value } });
  81     }
  82
  83     InspectorTest.evaluateInPage("getCSS()", onStyleFetched);
  84 }
  85
  86 </script>
  87
  88 </head>
  89
  90 <body onload="runTest()">
  91 <p>The test verifies the CSS outline functionality.</p>
  92 </body>
  93 </html>