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