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