diff --git a/devtools/test_dashboard/devtools.js b/devtools/test_dashboard/devtools.js
index 1ac054a7118..7e4f500b9a6 100644
--- a/devtools/test_dashboard/devtools.js
+++ b/devtools/test_dashboard/devtools.js
@@ -178,11 +178,16 @@ var fuse = new Fuse(mocks, {
}]
});
-var searchBar = document.getElementById('mocks-search');
+var transformInput = document.getElementById('css-transform');
+var mockInput = document.getElementById('mocks-search');
var mocksList = document.getElementById('mocks-list');
var plotArea = document.getElementById('plots');
-searchBar.addEventListener('keyup', debounce(searchMocks, 250));
+mockInput.addEventListener('keyup', debounce(searchMocks, 250));
+
+transformInput.addEventListener('keyup', function(e) {
+ plotArea.style.transform = e.target.value;
+});
function debounce(func, wait, immediate) {
var timeout;
@@ -230,7 +235,16 @@ function searchMocks(e) {
var listWidth = mocksList.getBoundingClientRect().width;
var plotAreaWidth = Math.floor(window.innerWidth - listWidth);
- plotArea.setAttribute('style', 'width: ' + plotAreaWidth + 'px;');
+
+ var allStyles = [
+ 'width: ' + plotAreaWidth + 'px;'
+ ];
+
+ if(transformInput.value !== '') {
+ allStyles.push('transform: ' + transformInput.value + ';');
+ }
+
+ plotArea.setAttribute('style', allStyles.join(' '));
});
}
diff --git a/devtools/test_dashboard/index-strict.html b/devtools/test_dashboard/index-strict.html
index 8319eea4a41..db6c43b49db 100644
--- a/devtools/test_dashboard/index-strict.html
+++ b/devtools/test_dashboard/index-strict.html
@@ -13,6 +13,7 @@
+
diff --git a/devtools/test_dashboard/index.html b/devtools/test_dashboard/index.html
index fe335072628..b27740efc25 100644
--- a/devtools/test_dashboard/index.html
+++ b/devtools/test_dashboard/index.html
@@ -11,6 +11,7 @@
+