third_party/WebKit/LayoutTests/inspector/elements/styles-2/metrics-box-sizing.html

   1 <html>
   2 <head>
   3
   4 <style>
   5 #border-box {
   6     box-sizing: border-box;
   7     width: 55px;
   8     height: 55px;
   9     margin: 1px;
  10     padding: 7px;
  11     border: 3px solid black;
  12 }
  13
  14 #content-box {
  15     box-sizing: content-box;
  16     width: 55px;
  17     height: 55px;
  18     margin: 1px;
  19     padding: 7px;
  20     border: 3px solid black;
  21 }
  22 </style>
  23
  24 <script src="../../../http/tests/inspector/inspector-test.js"></script>
  25 <script src="../../../http/tests/inspector/elements-test.js"></script>
  26 <script>
  27
  28 var initialize_AdditionalPreload = function() {
  29     InspectorTest.preloadModule("source_frame");
  30 }
  31
  32 function dumpDimensions()
  33 {
  34     var element;
  35
  36     element = document.getElementById("content-box");
  37     document.getElementById("output-content").textContent = "content-box rendered dimensions: " + element.offsetWidth + " x " + element.offsetHeight;
  38     element = document.getElementById("border-box");
  39     document.getElementById("output-border").textContent = "border-box rendered dimensions: " + element.offsetWidth + " x " + element.offsetHeight;
  40 }
  41
  42 function test()
  43 {
  44     var contentWidthElement;
  45     var contentHeightElement;
  46
  47     function getChildTextByClassName(element, className)
  48     {
  49         var children = element.children;
  50         for (var i = 0; i < children.length; ++i) {
  51             if (children[i].classList && children[i].classList.contains(className))
  52                 return children[i].textContent;
  53         }
  54         return null;
  55     }
  56
  57     function dumpMetrics(sectionElement)
  58     {
  59         var marginElement = sectionElement.getElementsByClassName("margin")[0];
  60         var borderElement = sectionElement.getElementsByClassName("border")[0];
  61         var paddingElement = sectionElement.getElementsByClassName("padding")[0];
  62         var contentDimensions = sectionElement.getElementsByClassName("content")[0].getElementsByTagName("span");
  63         InspectorTest.addResult("margin: " + getChildTextByClassName(marginElement, "top") + " " + getChildTextByClassName(marginElement, "right") + " " + getChildTextByClassName(marginElement, "bottom") + " " + getChildTextByClassName(marginElement, "left"));
  64         InspectorTest.addResult("border: " + getChildTextByClassName(borderElement, "top") + " " + getChildTextByClassName(borderElement, "right") + " " + getChildTextByClassName(borderElement, "bottom") + " " + getChildTextByClassName(borderElement, "left"));
  65         InspectorTest.addResult("padding: " + getChildTextByClassName(paddingElement, "top") + " " + getChildTextByClassName(paddingElement, "right") + " " + getChildTextByClassName(paddingElement, "bottom") + " " + getChildTextByClassName(paddingElement, "left"));
  66         InspectorTest.addResult("content: " + contentDimensions[0].textContent + " x " + contentDimensions[1].textContent);
  67     }
  68
  69     function createDoubleClickEvent()
  70     {
  71         var event = document.createEvent("MouseEvent");
  72         event.initMouseEvent("dblclick", true, true, null, 2, 0, 0, 0, 0, false, false, false, false, 0, null);
  73         return event;
  74     }
  75
  76     InspectorTest.runTestSuite([
  77         function testBorderBoxInit1(next)
  78         {
  79             InspectorTest.selectNodeAndWaitForStyles("border-box", next);
  80         },
  81
  82         function testBorderBoxInit2(next)
  83         {
  84             section = WebInspector.panels.elements.sidebarPanes.metrics;
  85             section.expand();
  86             InspectorTest.addSniffer(section._updateController._updateThrottler, "_processCompletedForTests", next);
  87         },
  88
  89         function testInitialBorderBoxMetrics(next)
  90         {
  91             var spanElements = section.element.getElementsByClassName("content")[0].getElementsByTagName("span");
  92             contentWidthElement = spanElements[0];
  93             contentHeightElement = spanElements[1];
  94             InspectorTest.addResult("=== Initial border-box ===");
  95             dumpMetrics(section.element);
  96             contentWidthElement.dispatchEvent(createDoubleClickEvent());
  97             contentWidthElement.textContent = "60";
  98             contentWidthElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  99             InspectorTest.runAfterPendingDispatches(next);
 100         },
 101
 102         function testModifiedBorderBoxMetrics(next)
 103         {
 104             InspectorTest.addResult("=== Modified border-box ===");
 105             dumpMetrics(section.element);
 106             next();
 107         },
 108
 109         function testContentBoxInit1(next)
 110         {
 111             InspectorTest.selectNodeWithId("content-box", next);
 112         },
 113
 114         function testContentBoxInit2(next)
 115         {
 116             section = WebInspector.panels.elements.sidebarPanes.metrics;
 117             section.expand();
 118             InspectorTest.addSniffer(section._updateController._updateThrottler, "_processCompletedForTests", next);
 119         },
 120
 121         function testInitialContentBoxMetrics(next)
 122         {
 123             var spanElements = section.element.getElementsByClassName("content")[0].getElementsByTagName("span");
 124             contentWidthElement = spanElements[0];
 125             contentHeightElement = spanElements[1];
 126             InspectorTest.addResult("=== Initial content-box ===");
 127             dumpMetrics(section.element);
 128             contentWidthElement.dispatchEvent(createDoubleClickEvent());
 129             contentWidthElement.textContent = "60";
 130             contentWidthElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
 131             InspectorTest.runAfterPendingDispatches(next);
 132             next();
 133         },
 134
 135         function testModifiedContentBoxMetrics(next)
 136         {
 137             function callback()
 138             {
 139                 next();
 140             }
 141
 142             InspectorTest.addResult("=== Modified content-box ===");
 143             dumpMetrics(section.element);
 144             InspectorTest.evaluateInPage("dumpDimensions()", callback);
 145         }
 146     ]);
 147 }
 148 </script>
 149 </head>
 150
 151 <body onload="runTest()">
 152 <p>
 153 Tests that content-box and border-box content area dimensions are handled property by the Metrics pane.
 154 </p>
 155 <div id="content-box">content-box</div>
 156 <div id="border-box">border-box</div>
 157 <div id="output-content">zzz</div>
 158 <div id="output-border">zzz</div>
 159 </body>
 160 </html>