Bug 1517521 - Handle calc() on border-image-width correctly. r=dholbert
authorEmilio Cobos Álvarez <emilio@crisal.io>
Fri, 04 Jan 2019 00:41:09 +0000
changeset 509588 a1ee2a2f51eaecf36039204880365b5ba6e823eb
parent 509587 bb585305f98b14ecb79a2767ce50619f49169653
child 509589 98d8d27b7fdfb53f562ce4372e5b022dbe3f6a37
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1517521
milestone66.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 1517521 - Handle calc() on border-image-width correctly. r=dholbert Right now it asserts, no bueno. Differential Revision: https://phabricator.services.mozilla.com/D15666
layout/painting/nsCSSRenderingBorders.cpp
layout/style/test/property_database.js
testing/web-platform/tests/css/css-backgrounds/border-image-calc-ref.html
testing/web-platform/tests/css/css-backgrounds/border-image-calc.html
--- a/layout/painting/nsCSSRenderingBorders.cpp
+++ b/layout/painting/nsCSSRenderingBorders.cpp
@@ -3767,16 +3767,19 @@ nsCSSBorderImageRenderer::nsCSSBorderIma
         value = coord.GetPercentValue() * borderDimension;
         break;
       case eStyleUnit_Factor:
         value = coord.GetFactorValue() * borderWidths.Side(s);
         break;
       case eStyleUnit_Auto:  // same as the slice value, in CSS pixels
         value = mSlice.Side(s);
         break;
+      case eStyleUnit_Calc:
+        value = std::max(0, coord.ComputeComputedCalc(borderDimension));
+        break;
       default:
         MOZ_ASSERT_UNREACHABLE(
             "unexpected CSS unit for border image area "
             "division");
         value = 0;
         break;
     }
     // NSToCoordRoundWithClamp rounds towards infinity, but that's OK
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -1404,17 +1404,17 @@ var gCSSProperties = {
     invalid_values: [ "-10%", "-10", "10 10 10 10 10", "10 10 10 10 -10", "10px", "-10px", "fill", "fill fill 10px", "10px fill fill" ]
   },
   "border-image-width": {
     domProp: "borderImageWidth",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     applies_to_first_letter: true,
     initial_values: [ "1", "1 1 1 1" ],
-    other_values: [ "0", "0%", "0px", "auto auto auto auto", "10 10% auto 15px", "10px 10px 10px 10px", "10", "10 10", "10 10 10" ],
+    other_values: [ "0", "0%", "0px", "auto auto auto auto", "10 10% auto 15px", "10px 10px 10px 10px", "10", "10 10", "10 10 10", "calc(10px)", "calc(10px + 5%)" ],
     invalid_values: [ "-10", "-10px", "-10%", "10 10 10 10 10", "10 10 10 10 auto", "auto auto auto auto auto", "10px calc(nonsense)", "1px red" ],
     unbalanced_values: [ "10px calc(" ]
   },
   "border-image-outset": {
     domProp: "borderImageOutset",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     applies_to_first_letter: true,
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/border-image-calc-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  #test {
+    background-color: green;
+    width: 200px;
+    height: 200px;
+  }
+</style>
+<p>Test passes if there is a green 200px times 200px square.</p>
+<div id="test"></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/border-image-calc.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<title>CSS Test: border-image honors calc() lengths / percentages</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://bugzil.la/1517521">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#border-image-width">
+<link rel="match" href="border-image-calc-ref.html">
+<style>
+  #test {
+    background-color: red;
+    border: 100px solid red;
+    border-image-slice: 10;
+    border-image-source: url("support/green_color.png");
+    border-image-width: 100px calc(100px) calc(100%) calc(50% + 50px);
+    height: 0;
+    width: 0;
+  }
+</style>
+<p>Test passes if there is a green 200px times 200px square.</p>
+<div id="test"></div>