Bug 1457123 [wpt PR 10651] - [css-writing-modes] Fix percentages on orthogonal replaced children, a=testonly
authorManuel Rego Casasnovas <rego@igalia.com>
Tue, 01 May 2018 17:15:30 +0000
changeset 472715 31618713ad32df5a44c960ee6f803ffb3274a6cf
parent 472714 7adf755878120657fc17e21f0276e0099787c366
child 472716 3d12a72b808449110c58a51690abfdc9731b64d2
push id1728
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:12:27 +0000
treeherdermozilla-release@c296fde26f5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1457123, 10651, 837146, 1029852, 554731
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1457123 [wpt PR 10651] - [css-writing-modes] Fix percentages on orthogonal replaced children, a=testonly Automatic update from web-platform-tests[css-writing-modes] Fix percentages on orthogonal replaced children This patch modifies LayoutBox::ComputeReplacedLogicalWidth|HeightUsing() so it's aware of the orthogonal flow cases. For example to compute the relative widths of replaced elements, if the element direction is perpendicular to its containing block it should use the containing block height instead of the width. BUG=837146 TEST=external/wpt/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001.html Change-Id: I655c984703e2073be9a3a649ac79a63f8c136cc0 Reviewed-on: https://chromium-review.googlesource.com/1029852 Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com> Cr-Commit-Position: refs/heads/master@{#554731} -- wpt-commits: 435b33acfe825349ac7c18262a8e0b11e2be38e5 wpt-pr: 10651
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001-ref.html
testing/web-platform/tests/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -160434,16 +160434,28 @@
       [
        "/css/css-writing-modes/sizing-orthogonal-percentage-margin-007-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-writing-modes/sizing-percentages-replaced-orthogonal-001.html": [
+    [
+     "/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001.html",
+     [
+      [
+       "/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-writing-modes/svg-aliasing-001.html": [
     [
      "/css/css-writing-modes/svg-aliasing-001.html",
      [
       [
        "/css/css-writing-modes/reference/svg-aliasing-001-ref.html",
        "=="
       ]
@@ -262906,16 +262918,21 @@
      {}
     ]
    ],
    "css/css-writing-modes/sizing-orthogonal-percentage-margin-007-ref.html": [
     [
      {}
     ]
    ],
+   "css/css-writing-modes/sizing-percentages-replaced-orthogonal-001-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/css-writing-modes/support/100x100-lime.png": [
     [
      {}
     ]
    ],
    "css/css-writing-modes/support/100x100-red.png": [
     [
      {}
@@ -538355,16 +538372,24 @@
   "css/css-writing-modes/sizing-orthogonal-percentage-margin-007.html": [
    "b4a0abd69a69f19ef671042ee972a7fe62675fc6",
    "reftest"
   ],
   "css/css-writing-modes/sizing-orthogonal-percentage-margin-008.html": [
    "2543ef7b6e41b2b0614c32167f4e0a85319dae0c",
    "reftest"
   ],
+  "css/css-writing-modes/sizing-percentages-replaced-orthogonal-001-ref.html": [
+   "59177963e949b6c60b3e919f87de243a5ca24522",
+   "support"
+  ],
+  "css/css-writing-modes/sizing-percentages-replaced-orthogonal-001.html": [
+   "c558b746bdc80a28371146de9a54ba4822e91088",
+   "reftest"
+  ],
   "css/css-writing-modes/support/100x100-lime.png": [
    "b02fc2d0ad1d95a2aeb6011022e63928841b183f",
    "support"
   ],
   "css/css-writing-modes/support/100x100-red.png": [
    "6fdfe9cdb3f6aca4564a08e443784e3abd952b52",
    "support"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Percentage size on orthogonal replaced elements</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+.container {
+  display: inline-block;
+  border: solid 5px black;
+  margin: 10px;
+  vertical-align: top;
+  width: 200px;
+  height: 100px;
+}
+
+img {
+  display: block;
+  width: 200px;
+  height: 100px;
+}
+
+</style>
+
+<p>The test passes if you see four filled lime rectangles with black border and <strong>no red</strong>.</p>
+
+<div class="container">
+  <img src="support/100x100-lime.png" />
+</div>
+
+<div class="container">
+  <img src="support/100x100-lime.png" />
+</div>
+
+<div class="container">
+  <img src="support/100x100-lime.png" />
+</div>
+
+<div class="container">
+  <img src="support/100x100-lime.png" />
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Writing Modes Test: Percentage size on orthogonal replaced elements</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#orthogonal-auto">
+<link rel="match" href="sizing-percentages-replaced-orthogonal-001-ref.html">
+<meta name="assert" content="Checks that orthogonal replaced elements resolve properly their percentage sizes against the expected axis from their containing block.">
+<style>
+.container {
+  display: inline-block;
+  border: solid 5px black;
+  margin: 10px;
+  vertical-align: top;
+  width: 200px;
+  height: 100px;
+  background: red;
+}
+
+img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.horizontalTB { writing-mode: horizontal-tb; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL {  writing-mode: vertical-rl; }
+</style>
+
+<p>The test passes if you see four filled lime rectangles with black border and <strong>no red</strong>.</p>
+
+<div class="container horizontalTB">
+  <img class="verticalLR" src="support/100x100-lime.png" />
+</div>
+
+<div class="container horizontalTB">
+  <img class="verticalRL" src="support/100x100-lime.png" />
+</div>
+
+<div class="container verticalLR">
+  <img class="horizontalTB" src="support/100x100-lime.png" />
+</div>
+
+<div class="container verticalRL">
+  <img class="horizontalTB" src="support/100x100-lime.png" />
+</div>