| OLD | NEW |
|---|
| (Empty) |
| 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 rendere
d 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(classNam
e)) | |
| 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(marginEleme
nt, "top") + " " + getChildTextByClassName(marginElement, "right") + " " + getCh
ildTextByClassName(marginElement, "bottom") + " " + getChildTextByClassName(marg
inElement, "left")); | |
| 60 InspectorTest.addResult("border: " + getChildTextByClassName(borderEleme
nt, "top") + " " + getChildTextByClassName(borderElement, "right") + " " + getCh
ildTextByClassName(borderElement, "bottom") + " " + getChildTextByClassName(bord
erElement, "left")); | |
| 61 InspectorTest.addResult("padding: " + getChildTextByClassName(paddingEle
ment, "top") + " " + getChildTextByClassName(paddingElement, "right") + " " + ge
tChildTextByClassName(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.addSniffer(section._updateController._updateThrottler,
"_processCompletedForTests", 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("Ente
r")); | |
| 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.addSniffer(section._updateController._updateThrottler,
"_processCompletedForTests", 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("Ente
r")); | |
| 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 proper
ty 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> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1158883003:
DevTools: shard inspector/elements tests for faster execution. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk