Fix scroll origin, overflow rects, and coordinate flipping for flexbox.

third_party/WebKit/LayoutTests/css3/flexbox/resources/scrollbars.js

+var flexDirections = ["row", "row-reverse", "column", "column-reverse"];
+var textDirections = ["ltr", "rtl"];
+var writingModes = ["horizontal", "flipped-blocks", "flipped-lines"];
+
+var createLeafNode = (i) => {
+  var flexItem = document.createElement("div");
+  flexItem.className = "leaf" + i;
+  var contentItem = document.createElement("div");
+  contentItem.innerHTML = i;
+  flexItem.appendChild(contentItem);
+  return flexItem;
+}
+
+var createContentNode = (flexDirection, textDirection, writingMode) => {
+  var flexNode = document.createElement("div");
+  flexNode.className = "flex " + flexDirection;
+  flexNode.title = "flex-direction: " + flexDirection + "; direction: " + textDirection + "; writing-mode: " + writingMode;
+  for (var i = 1; i < 4; i++)
+    flexNode.appendChild(createLeafNode(i));
+  var marginShim = document.createElement("div");
+  return flexNode;
+}
+
+var createContainerNode = (flexDirection, textDirection, writingMode) => {
+  var containerNode = document.createElement("div");
+  containerNode.className = "container " + textDirection + " " + writingMode;
+  containerNode.appendChild(createContentNode(flexDirection, textDirection, writingMode));
+  return containerNode;
+}
+
+var createContainerRow = (flexDirection) => {
+  var containerRow = document.createElement("div");
+  containerRow.className = "container-row";
+  var rowLabel = document.createElement("div");
+  rowLabel.className = "vertical-header horizontal " + flexDirection;
+  rowLabel.innerHTML = flexDirection;
+  containerRow.appendChild(rowLabel);
+  textDirections.forEach((textDirection) => {
+    writingModes.forEach((writingMode) => {
+      var containerNode = createContainerNode(flexDirection, textDirection, writingMode);
+      containerRow.appendChild(containerNode);
+    });
+  });
+  return containerRow;
+}