Bug 1461461 [wpt PR 10994] - [LayoutNG] Fix min/max sizes during layout and intrinsic passes., a=testonly
authorIan Kilpatrick <ikilpatrick@chromium.org>
Sat, 19 May 2018 20:36:45 +0000
changeset 419085 6d59c2e00ab1554c91cd700eedf09266e0d6d688
parent 419084 5ec35f197df64c2c1901fd05999e837bb1349175
child 419086 3f948b66292b54df4972b90ca78c5cc30e25b03a
push id34026
push userapavel@mozilla.com
push dateMon, 21 May 2018 09:47:33 +0000
treeherdermozilla-central@dc1868d255be [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1461461, 10994, 635619, 1056291, 559171
milestone62.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 1461461 [wpt PR 10994] - [LayoutNG] Fix min/max sizes during layout and intrinsic passes., a=testonly Automatic update from web-platform-tests[LayoutNG] Fix min/max sizes during layout and intrinsic passes. Essentially this boils down to during min/max auto/percent/calc should be treated the same, either being border+padding or infinity. And during layout they should be taken into account. I added some tests which now match FF/Edge (004,005) which LayoutNG matches, but existing layout fails. The primary difference is change by passing kContent into ResolveBlockLength during the ComputeBlockSizeForFragment function. Bug: 635619 Cq-Include-Trybots: master.tryserver.chromium.linux:linux_layout_tests_layout_ng Change-Id: I4e0c171a0e29ea5d85a742d85df001647813c1f3 Reviewed-on: https://chromium-review.googlesource.com/1056291 Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#559171} -- wpt-commits: b06b08091c6a39d88957db2389727524258a3140 wpt-pr: 10994
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-004-ref.html
testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-004.html
testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-005-ref.html
testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-005.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -128522,16 +128522,40 @@
       [
        "/css/css-sizing/intrinsic-percent-non-replaced-002-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-sizing/intrinsic-percent-non-replaced-004.html": [
+    [
+     "/css/css-sizing/intrinsic-percent-non-replaced-004.html",
+     [
+      [
+       "/css/css-sizing/intrinsic-percent-non-replaced-004-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-sizing/intrinsic-percent-non-replaced-005.html": [
+    [
+     "/css/css-sizing/intrinsic-percent-non-replaced-005.html",
+     [
+      [
+       "/css/css-sizing/intrinsic-percent-non-replaced-005-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-style-attr/style-attr-braces-001.xht": [
     [
      "/css/css-style-attr/style-attr-braces-001.xht",
      [
       [
        "/css/css-style-attr/reference/ref-green-on-green.xht",
        "=="
       ]
@@ -254812,16 +254836,26 @@
      {}
     ]
    ],
    "css/css-sizing/intrinsic-percent-non-replaced-002-ref.html": [
     [
      {}
     ]
    ],
+   "css/css-sizing/intrinsic-percent-non-replaced-004-ref.html": [
+    [
+     {}
+    ]
+   ],
+   "css/css-sizing/intrinsic-percent-non-replaced-005-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/css-speech/OWNERS": [
     [
      {}
     ]
    ],
    "css/css-style-attr/OWNERS": [
     [
      {}
@@ -519051,16 +519085,32 @@
   "css/css-sizing/intrinsic-percent-non-replaced-002.html": [
    "9d9c514c876bb9aa2c577dbd15c14358e7b0d0c4",
    "visual"
   ],
   "css/css-sizing/intrinsic-percent-non-replaced-003.html": [
    "43d44ad3a75e6abb9d66d06c3cdc71dbcb366651",
    "reftest"
   ],
+  "css/css-sizing/intrinsic-percent-non-replaced-004-ref.html": [
+   "4b93517397b4332b3062804e2d6047afdd169fae",
+   "support"
+  ],
+  "css/css-sizing/intrinsic-percent-non-replaced-004.html": [
+   "42bc0191ff3ba22c5ceb377f1bc68131d652509e",
+   "reftest"
+  ],
+  "css/css-sizing/intrinsic-percent-non-replaced-005-ref.html": [
+   "a2cd75ab26376e74e26414013fc34b8e7fdb1a68",
+   "support"
+  ],
+  "css/css-sizing/intrinsic-percent-non-replaced-005.html": [
+   "33aa880de7eb7c4128022871dfd5e2895be30dcc",
+   "reftest"
+  ],
   "css/css-speech/Integer.html": [
    "8db91e711b22ead393b1d9a18c224a7f838b85b0",
    "manual"
   ],
   "css/css-speech/OWNERS": [
    "3275f13bf63e920a63a84777b91a1e5d35019c0f",
    "support"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-004-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<title>Reference</title>
+
+<style>
+  /* establish context */
+  .container {
+    clear: both;
+    padding: 10px;
+    width: 0;
+  }
+
+  span {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background-color: blue;
+  }
+
+  /* visualize size contribution */
+  .container > div {
+    float: left;
+    border: solid orange 20px;
+    border-style: none solid;
+  }
+  .container > div > div {
+    border-right: solid 20px aqua;
+    writing-mode: vertical-rl;
+    width: 40px;
+    height: 20px;
+  }
+
+  /* controls for min-width */
+  /* content = 100% = 80px = 4ch + border */
+  /* choose sizes that are larger than content to see if how they take effect */
+  .container > div > .raw-percent {
+    width: 120px;
+  }
+  .container > div > .calc-percent,
+  .container > div > .no-percent {
+    width: 160px;
+  }
+</style>
+
+<!-- calculating min-content widths -->
+<div class='container'>
+  <div><div class="control"><span></span></div></div>
+</div>
+<div class='container'>
+  <div style='width: 60px;'><div class="raw-percent"><span></span></div></div>
+</div>
+<div class='container'>
+  <div style='width: 60px;'><div class="calc-percent"><span></span></div></div>
+</div>
+<div class='container'>
+  <div><div class="no-percent"><span></span></div></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-004.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<title>Percentages of width on non-replaced blocks are ignored for intrinsic sizing and resolved afterwards</title>
+<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-contribution">
+<link rel="match" href="intrinsic-percent-non-replaced-004-ref.html">
+
+<style>
+  /* establish context */
+  .container {
+    clear: both;
+    padding: 10px;
+    width: 0;
+  }
+
+  span {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background-color: blue;
+  }
+
+  /* visualize size contribution */
+  .container > div {
+    float: left;
+    border: solid orange 20px;
+    border-style: none solid;
+  }
+  .container > div > div {
+    border-right: solid 20px aqua;
+    writing-mode: vertical-rl;
+    width: 40px;
+    height: 20px;
+  }
+
+  /* test width */
+  /* content = 100% = 60px = 40px + border */
+  /* choose sizes that are different than content to see if how they take effect */
+  .raw-percent {
+    min-width: 200%;
+  }
+  .calc-percent {
+    min-width: calc(160px + 0%);
+  }
+  .no-percent {
+    min-width: 160px;
+  }
+</style>
+
+<!-- calculating min-content widths -->
+<div class='container'>
+  <div><div class="control"><span></span></div></div>
+</div>
+<div class='container'>
+  <div><div class="raw-percent"><span></span></div></div>
+</div>
+<div class='container'>
+  <div><div class="calc-percent"><span></span></div></div>
+</div>
+<div class='container'>
+  <div><div class="no-percent"><span></span></div></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-005-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<title>Reference</title>
+
+<style>
+  /* establish context */
+  .container {
+    clear: both;
+    padding: 10px;
+    width: 0;
+  }
+
+  span {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background-color: blue;
+  }
+
+  /* visualize size contribution */
+  .container > div {
+    float: left;
+    border: solid orange 20px;
+    border-style: none solid;
+  }
+  .container > div > div {
+    border-right: solid 20px aqua;
+    writing-mode: vertical-rl;
+    width: 80px;
+    height: 20px;
+  }
+
+  /* test width */
+  /* content = 100% = 100px = 80px + border */
+  /* choose sizes that are different than content to see if how they take effect */
+  .container > div > .raw-percent {
+    width: 50px;
+  }
+  .container > div > .calc-percent,
+  .container > div > .no-percent {
+    width: 40px;
+  }
+</style>
+
+<!-- calculating min-content widths -->
+<div class='container'>
+  <div><div class="control"><span></span></div></div>
+</div>
+<div class='container'>
+  <div style='width: 100px;'><div class="raw-percent"><span></span></div></div>
+</div>
+<div class='container'>
+  <div style='width: 100px;'><div class="calc-percent"><span></span></div></div>
+</div>
+<div class='container'>
+  <div><div class="no-percent"><span></span></div></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-sizing/intrinsic-percent-non-replaced-005.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<title>Percentages of width on non-replaced blocks are ignored for intrinsic sizing and resolved afterwards</title>
+<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-contribution">
+<link rel="match" href="intrinsic-percent-non-replaced-005-ref.html">
+
+<style>
+  /* establish context */
+  .container {
+    clear: both;
+    padding: 10px;
+    width: 0;
+  }
+
+  span {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background-color: blue;
+  }
+
+  /* visualize size contribution */
+  .container > div {
+    float: left;
+    border: solid orange 20px;
+    border-style: none solid;
+  }
+  .container > div > div {
+    border-right: solid 20px aqua;
+    writing-mode: vertical-rl;
+    width: 80px;
+    height: 20px;
+  }
+
+  /* test width */
+  /* content = 100% = 100px = 80px + border */
+  /* choose sizes that are different than content to see if how they take effect */
+  .raw-percent {
+    max-width: 50%;
+  }
+  .calc-percent {
+    max-width: calc(40px + 0%);
+  }
+  .no-percent {
+    max-width: 40px;
+  }
+</style>
+
+<!-- calculating min-content widths -->
+<div class='container'>
+  <div><div class="control"><span></span></div></div>
+</div>
+<div class='container'>
+  <div><div class="raw-percent"><span></span></div></div>
+</div>
+<div class='container'>
+  <div><div class="calc-percent"><span></span></div></div>
+</div>
+<div class='container'>
+  <div><div class="no-percent"><span></span></div></div>
+</div>