src/third_party/WebKit/LayoutTests/inspector-protocol/css/css-get-media-queries.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">
   5 function test()
   6 {
   7     InspectorTest.sendCommandOrDie("DOM.enable", {});
   8     InspectorTest.sendCommandOrDie("CSS.enable", {}, onCSSEnabled);
   9
  10     function onCSSEnabled()
  11     {
  12         InspectorTest.sendCommandOrDie("CSS.getMediaQueries", {}, onMediaQueries);
  13     }
  14
  15     function onMediaQueries(response)
  16     {
  17         function mediaComparator(media1, media2)
  18         {
  19             if (media1.text < media2.text)
  20                 return -1;
  21             if (media1.text > media2.text)
  22                 return 1;
  23             return 0;
  24         }
  25         response.medias.sort(mediaComparator);
  26
  27         var styleSheetIds = [];
  28         for (var i = 0; i < response.medias.length; ++i) {
  29             var styleSheetId = response.medias[i].parentStyleSheetId;
  30             if (styleSheetId && styleSheetIds.indexOf(styleSheetId) === -1)
  31                 styleSheetIds.push(styleSheetId);
  32         }
  33         if (!styleSheetIds.length) {
  34             dumpMediaQueries(response.medias, {});
  35             return;
  36         }
  37
  38         var styleSheetTextMap = {};
  39         for (var i = 0; i < styleSheetIds.length; ++i) {
  40             var callback = i === styleSheetIds.length - 1 ? dumpMediaQueries.bind(null, response.medias, styleSheetTextMap) : null;
  41             InspectorTest.sendCommandOrDie("CSS.getStyleSheetText", {styleSheetId: styleSheetIds[i]}, onStyleSheetText.bind(null, styleSheetIds[i], styleSheetTextMap, callback));
  42         }
  43     }
  44
  45     function onStyleSheetText(styleSheetId, styleSheetTextMap, callback, response)
  46     {
  47         styleSheetTextMap[styleSheetId] = response.text;
  48         if (callback)
  49             callback();
  50     }
  51
  52     function dumpMediaQueries(medias, styleSheetTextMap)
  53     {
  54         for (var i = 0; i < medias.length; ++i) {
  55             var mediaRule = medias[i];
  56             InspectorTest.log("mediaRule #" + i);
  57             InspectorTest.log("    text: " + mediaRule.text);
  58             InspectorTest.log("    source: " + mediaRule.source);
  59             InspectorTest.log("    range: " + JSON.stringify(mediaRule.range));
  60             if (mediaRule.parentStyleSheetId && mediaRule.range)
  61                 InspectorTest.log("    computedText: " + getComputedText(styleSheetTextMap[mediaRule.parentStyleSheetId], mediaRule.range));
  62             if (!mediaRule.mediaList) {
  63                 InspectorTest.log("    mediaList is empty");
  64                 continue;
  65             }
  66             for (var j = 0; j < mediaRule.mediaList.length; ++j) {
  67                 var mediaQuery = mediaRule.mediaList[j];
  68                 var suffix = mediaRule.sourceURL.indexOf("active-media-queries.css") !== -1 ? " active: " + mediaQuery.active : "";
  69                 InspectorTest.log("    mediaQuery #" + j + suffix);
  70                 for (var k = 0; k < mediaQuery.expressions.length; ++k) {
  71                     var expression = mediaQuery.expressions[k];
  72                     InspectorTest.log("        mediaExpression #" + k);
  73                     InspectorTest.log("            feature: " + expression.feature);
  74                     InspectorTest.log("            value: " + expression.value);
  75                     InspectorTest.log("            unit: " + expression.unit);
  76                     if (expression.valueRange) {
  77                         InspectorTest.log("            valueRange: " + JSON.stringify(expression.valueRange));
  78                         if (mediaRule.parentStyleSheetId)
  79                             InspectorTest.log("            computedText: " + getComputedText(styleSheetTextMap[mediaRule.parentStyleSheetId], expression.valueRange));
  80                     }
  81                     if (expression.computedLength)
  82                         InspectorTest.log("            computed length: " + expression.computedLength);
  83                 }
  84             }
  85         }
  86         InspectorTest.completeTest();
  87     }
  88
  89     function getComputedText(text, range)
  90     {
  91         var lines = text.split("\n");
  92         var result = [];
  93         for (var line = range.startLine; line <= range.endLine; ++line) {
  94             var start = line === range.startLine ? range.startColumn : 0;
  95             var end = line === range.endLine ? range.endColumn : lines[line].length;
  96             result.push(lines[line].substring(start, end));
  97         }
  98         return result.join("\\n");
  99     }
 100 };
 101 </script>
 102 <link rel="stylesheet" media="print and (min-width: 8.5in)" href="./resources/media-queries.css"></link>
 103 <link rel="stylesheet" href="./resources/active-media-queries.css"></link>
 104 <style>
 105 @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {
 106     * {
 107         padding: 1em;
 108     }
 109
 110     @media (max-width: 200px) and (min-width: 100px) {
 111         * {
 112             margin: 1in;
 113         }
 114     }
 115 }
 116 </style>
 117 </head>
 118 <body onload="runTest()">
 119 </body>
 120 </html>