Bug 1514990 - Rotate flex item sizing outline for items whose main axis direction is vertical-bt. r=pbro

Differential Revision: https://phabricator.services.mozilla.com/D14975

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_rotates_for_different_writing_modes.js

@@ -13,24 +13,24 @@ add_task(async function() {
   const { inspector, flexboxInspector } = await openLayoutView();
   const { document: doc } = flexboxInspector;
 
-  info("Check that a vertical row flex item rotates to vertical-tb.");
+  info("Check that the row flex item rotated to vertical-bt.");
   let onFlexItemOutlineRendered = waitForDOM(doc,
     ".flex-outline-container .flex-outline");
-  await selectNode(".row.vertical.item", inspector);
+  await selectNode(".row.vertical-bt.item", inspector);
   let [flexOutline] = await onFlexItemOutlineRendered;
 
-  ok(flexOutline.classList.contains("vertical-tb"),
-    "Horizontal item outline orientation has been rotated to vertical-tb.");
+  ok(flexOutline.classList.contains("vertical-bt"),
+    "Row outline has been rotated to vertical-bt.");
 
-  info("Check that a vertical-rl column flex item rotates to horizontal-rl.");
+  info("Check that the column flex item rotated to horizontal-rl.");
   onFlexItemOutlineRendered = waitForDOM(doc,
     ".flex-outline-container .flex-outline");
-  await selectNode(".column.vertical.item", inspector);
+  await selectNode(".column.horizontal-rl.item", inspector);
   await waitUntil(() => {
     flexOutline =
       doc.querySelector(".flex-outline-container .flex-outline.horizontal-rl");
     return flexOutline;
   });
 
-  ok(true, "Vertical-rl item outline orientation has been rotated to horizontal-rl.");
+  ok(true, "Column outline has been rotated to horizontal-rl.");
 });

devtools/client/inspector/flexbox/test/browser_flexbox_sizing_info_for_different_writing_modes.js

@@ -18,7 +18,7 @@ async function checkFlexItemDimension(inspector, store, doc, selector, expected)
   await onUpdate;
 
   info("Check that the minimum size section shows the correct dimension.");
-  const [sectionMinRowItem] = [...doc.querySelectorAll(".flex-item-sizing .section.min")];
+  const sectionMinRowItem = doc.querySelector(".flex-item-sizing .section.min");
   const minDimension = sectionMinRowItem.querySelector(".css-property-link");
 
   ok(minDimension.textContent.includes(expected),
@@ -31,11 +31,13 @@ add_task(async function() {
   const { document: doc, store } = flexboxInspector;
 
   await checkFlexItemDimension(inspector, store, doc,
-    ".row.vertical.item", "min-height");
+    ".row.vertical-rl.item", "min-height");
   await checkFlexItemDimension(inspector, store, doc,
-    ".column.vertical.item", "min-width");
+    ".column.vertical-tb.item", "min-height");
   await checkFlexItemDimension(inspector, store, doc,
-    ".row.horizontal.item", "min-width");
+    ".row.vertical-bt.item", "min-height");
   await checkFlexItemDimension(inspector, store, doc,
-    ".column.horizontal.item", "min-height");
+    ".column.horizontal-rl.item", "min-width");
+  await checkFlexItemDimension(inspector, store, doc,
+    ".row.horizontal-lr.item", "min-width");
 });

devtools/client/inspector/flexbox/test/doc_flexbox_writing_modes.html

@@ -5,28 +5,36 @@
   display: flex;
 }
 
-.flex-container.vertical-writing-mode {
+.flex-container.vertical-rl {
   writing-mode: vertical-rl;
 }
 
+.flex-container.sideways-lr {
+  writing-mode: sideways-lr;
+}
+
 .column {
   flex-direction: column;
 }
 
 .item {
   min-width: 300px;
-  min-height: 200px;
+  min-height: 300px;
 }
+
 </style>
-<div class="flex-container vertical-writing-mode">
-  <span class="row vertical item">Vertical Row Content</span>
-</div>
-<div class="flex-container vertical-writing-mode column">
-  <span class="column vertical item">Vertical Column Content</span>
-</div>
-<div class="flex-container">
-  <span class="row horizontal item">Horizontal Row Content</span>
+<div class="flex-container vertical-rl">
+  <span class="row vertical-rl item">Vertical-tb Row content</span>
 </div>
 <div class="flex-container column">
-  <span class="column horizontal item">Horizontal Column Content</span>
+  <span class="column vertical-tb item">Vertical-tb Column Content</span>
+</div>
+<div class="flex-container sideways-lr">
+  <span class="row vertical-bt item">Vertical-bt Row Content</span>
+</div>
+<div class="flex-container vertical-rl column">
+  <span class="column horizontal-rl item">Horizontal-rl Column Content</span>
+</div>
+<div class="flex-container">
+  <span class="row horizontal-lr item">Horizontal-lr Row Content</span>
 </div>

devtools/client/themes/layout.css

@@ -282,6 +282,14 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
 
 .flex-outline.vertical-tb {
   transform: translate(50%, -2em) rotate(.25turn);
+}
+
+.flex-outline.vertical-bt {
+  transform:translate(50%, 12em) rotate(0.75turn);
+}
+
+.flex-outline.vertical-tb,
+.flex-outline.vertical-bt {
   transform-origin: center left;
   flex-basis: 150px;
   margin-bottom: 120px;
@@ -325,6 +333,10 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
   transform: rotate(-.25turn);
 }
 
+.flex-outline.vertical-bt .flex-outline-final.clamped::after {
+  transform: rotate(-.75turn);
+}
+
 .flex-outline-basis {
   position: relative;
   border: 3px dotted var(--flex-basis-outline-border-color);
@@ -408,6 +420,11 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
   justify-self: start;
 }
 
+.flex-outline.vertical-bt .flex-outline-point {
+  transform: rotate(180deg);
+  justify-content: end;
+}
+
 .flex-outline-point.basis,
 .flex-outline-point.basisfinal,
 .flex-outline.horizontal-rl .flex-outline-point.basis,
@@ -464,7 +481,8 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
   border-width: 0;
 }
 
-.flex-outline.vertical-tb .flex-outline-point::before {
+.flex-outline.vertical-tb .flex-outline-point::before,
+.flex-outline.vertical-bt .flex-outline-point::before {
   padding: 0;
   writing-mode: sideways-lr;
 }
@@ -481,12 +499,16 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
 }
 
 .flex-outline.horizontal-rl .flex-outline-point.min::before,
-.flex-outline.horizontal-rl .flex-outline-point.max::before {
+.flex-outline.horizontal-rl .flex-outline-point.max::before,
+.flex-outline.vertical-bt .flex-outline-point.min::before,
+.flex-outline.vertical-bt .flex-outline-point.max::before {
   bottom: -37px;
 }
 
 .flex-outline.vertical-tb .flex-outline-point.max::before,
-.flex-outline.vertical-tb .flex-outline-point.min::before {
+.flex-outline.vertical-tb .flex-outline-point.min::before,
+.flex-outline.vertical-bt .flex-outline-point.max::before,
+.flex-outline.vertical-bt .flex-outline-point.min::before {
   text-indent: -12px;
 }
 
@@ -496,7 +518,10 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
 .flex-outline.shrinking .flex-outline-point.basis::before,
 .flex-outline.horizontal-rl .flex-outline-point.basis::before,
 .flex-outline.horizontal-rl .flex-outline-point.basisfinal::before,
-.flex-outline.horizontal-rl.shrinking .flex-outline-point.final::before {
+.flex-outline.horizontal-rl.shrinking .flex-outline-point.final::before,
+.flex-outline.vertical-bt .flex-outline-point.basis::before,
+.flex-outline.vertical-bt .flex-outline-point.basisfinal::before,
+.flex-outline.vertical-bt.shrinking .flex-outline-point.final::before {
   border-width: 0 0 0 1px;
 }
 
@@ -506,7 +531,11 @@ html[dir="rtl"] .flex-item-list .devtools-button::after {
 .flex-outline-point.basisfinal::before,
 .flex-outline.horizontal-rl .flex-outline-point.final::before,
 .flex-outline.horizontal-rl .flex-outline-point.min::before,
-.flex-outline.horizontal-rl .flex-outline-point.max::before {
+.flex-outline.horizontal-rl .flex-outline-point.max::before,
+.flex-outline.vertical-bt.shrinking .flex-outline-point.basis::before,
+.flex-outline.vertical-bt .flex-outline-point.final::before,
+.flex-outline.vertical-bt .flex-outline-point.min::before,
+.flex-outline.vertical-bt .flex-outline-point.max::before {
   border-width: 0 1px 0 0;
 }