Commit 7076b259 authored by Rob Buis's avatar Rob Buis Committed by Commit Bot

Serialize border-image inline style

Serialize border-image inline style by implementing the serializing
logic for it in StylePropertySerializer::GetPropertyValue.

Bug: 825568

Change-Id: Ibaa18dadc41bb7aa735ab5e1384615b5d2270a2c
Reviewed-on: https://chromium-review.googlesource.com/990721
Commit-Queue: Rob Buis <rob.buis@samsung.com>
Reviewed-by: default avatarTimothy Loh <timloh@chromium.org>
Cr-Commit-Position: refs/heads/master@{#551310}
parent c026bc84
This is a testharness.js-based test.
FAIL e.style['border-image'] = "none" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "stretch" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "none 100% / 1 / 0 stretch" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "url(\"http://www.example.com/\") 1 2 3 4 fill" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "url(\"http://www.example.com/\") 1 2 3 4 fill / 1 / 0 stretch" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "url(\"http://www.example.com/\")" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "repeat round" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "none repeat round" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "space" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "none space space" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "none 100% / 1 / 0 space" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "1" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "none 1 1 1 1" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "none 1 / 1 / 0 stretch" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "url(\"http://www.example.com/\") 1 2% 3 4%" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "url(\"http://www.example.com/\") 1 2% 3 4% fill" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "url(\"http://www.example.com/\") fill 1 2% 3 4%" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "1 / 1px" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "1 2% 3 4% / 2%" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "1 2% 3 4% fill / 3" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "fill 1 2% 3 4% / auto" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "1 / 1px 2% 3 auto" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "1 / / 1px" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "1 2% 3 4% / / 2" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "url(\"http://www.example.com/\") 1 2% 3 4% fill / / 1px 2 3px 4" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "1 / 1px / 1px" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "1 2% 3 4% / 2% / 2" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "1 2% 3 4% fill / 3 / 1px 2 3px 4" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "1 / auto / 1px" should set the property value assert_not_equals: property should be set got disallowed value ""
FAIL e.style['border-image'] = "1 2% 3 4% / 1px 2% 3 auto / 2" should set the property value assert_not_equals: property should be set got disallowed value ""
PASS e.style['border-image'] = "none" should set the property value
FAIL e.style['border-image'] = "stretch" should set the property value assert_true: serialization should be sound expected true got false
PASS e.style['border-image'] = "none 100% / 1 / 0 stretch" should set the property value
PASS e.style['border-image'] = "url(\"http://www.example.com/\") 1 2 3 4 fill" should set the property value
PASS e.style['border-image'] = "url(\"http://www.example.com/\") 1 2 3 4 fill / 1 / 0 stretch" should set the property value
PASS e.style['border-image'] = "url(\"http://www.example.com/\")" should set the property value
PASS e.style['border-image'] = "repeat round" should set the property value
PASS e.style['border-image'] = "none repeat round" should set the property value
PASS e.style['border-image'] = "space" should set the property value
FAIL e.style['border-image'] = "none space space" should set the property value assert_true: serialization should be sound expected true got false
PASS e.style['border-image'] = "none 100% / 1 / 0 space" should set the property value
PASS e.style['border-image'] = "1" should set the property value
FAIL e.style['border-image'] = "none 1 1 1 1" should set the property value assert_true: serialization should be sound expected true got false
PASS e.style['border-image'] = "none 1 / 1 / 0 stretch" should set the property value
PASS e.style['border-image'] = "url(\"http://www.example.com/\") 1 2% 3 4%" should set the property value
PASS e.style['border-image'] = "url(\"http://www.example.com/\") 1 2% 3 4% fill" should set the property value
PASS e.style['border-image'] = "url(\"http://www.example.com/\") fill 1 2% 3 4%" should set the property value
PASS e.style['border-image'] = "1 / 1px" should set the property value
PASS e.style['border-image'] = "1 2% 3 4% / 2%" should set the property value
PASS e.style['border-image'] = "1 2% 3 4% fill / 3" should set the property value
PASS e.style['border-image'] = "fill 1 2% 3 4% / auto" should set the property value
PASS e.style['border-image'] = "1 / 1px 2% 3 auto" should set the property value
FAIL e.style['border-image'] = "1 / / 1px" should set the property value assert_true: serialization should be sound expected true got false
FAIL e.style['border-image'] = "1 2% 3 4% / / 2" should set the property value assert_true: serialization should be sound expected true got false
FAIL e.style['border-image'] = "url(\"http://www.example.com/\") 1 2% 3 4% fill / / 1px 2 3px 4" should set the property value assert_true: serialization should be sound expected true got false
PASS e.style['border-image'] = "1 / 1px / 1px" should set the property value
PASS e.style['border-image'] = "1 2% 3 4% / 2% / 2" should set the property value
PASS e.style['border-image'] = "1 2% 3 4% fill / 3 / 1px 2 3px 4" should set the property value
PASS e.style['border-image'] = "1 / auto / 1px" should set the property value
PASS e.style['border-image'] = "1 2% 3 4% / 1px 2% 3 auto / 2" should set the property value
Harness: the test ran to completion.
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
test(function() {
var div = document.createElement('div');
div.setAttribute('style', 'border-image: round');
assert_equals(div.style.borderImageRepeat, 'round');
assert_equals(div.style.borderImageSlice, 'initial');
assert_equals(div.style.borderImage, 'round');
div.setAttribute('style', 'border-image: url("https://example.com/") 1% 2% 3% 4% fill / 5px 6px 7px 8px / 9px 10px 11px 12px round space');
assert_equals(div.style.borderImageRepeat, 'round space');
assert_equals(div.style.borderImageSlice, '1% 2% 3% 4% fill');
assert_equals(div.style.borderImage, 'url(\"https://example.com/\") 1% 2% 3% 4% fill / 5px 6px 7px 8px / 9px 10px 11px 12px round space');
}, 'Ensure border-image shorthand property initializes longhand properties such as border-image-repeat and border-image-slice');
</script>
CONSOLE MESSAGE: line 4: border-image-source: url("images/shadow-border.png"); border-image-slice: 10; border-image-width: initial; border-image-outset: initial; border-image-repeat: stretch;
CONSOLE MESSAGE: line 4: border-image: url("images/shadow-border.png") 10 stretch;
This test should not crash
......@@ -319,6 +319,9 @@ static bool AllowInitialInShorthand(CSSPropertyID property_id) {
case CSSPropertyBorderRight:
case CSSPropertyBorderBottom:
case CSSPropertyBorderLeft:
// TODO(rob.buis): temporary, makes invalid output until crbug.com/772772 is
// fixed
case CSSPropertyBorderImage:
case CSSPropertyOutline:
case CSSPropertyColumnRule:
case CSSPropertyColumns:
......@@ -427,6 +430,8 @@ String StylePropertySerializer::GetPropertyValue(
return GetLayeredShorthandValue(backgroundShorthand());
case CSSPropertyBorder:
return BorderPropertyValue();
case CSSPropertyBorderImage:
return BorderImagePropertyValue();
case CSSPropertyBorderTop:
return GetShorthandValue(borderTopShorthand());
case CSSPropertyBorderRight:
......@@ -988,6 +993,27 @@ String StylePropertySerializer::BorderPropertyValue() const {
return result.IsEmpty() ? String() : result.ToString();
}
String StylePropertySerializer::BorderImagePropertyValue() const {
StringBuilder result;
const CSSProperty* properties[] = {
&GetCSSPropertyBorderImageSource(), &GetCSSPropertyBorderImageSlice(),
&GetCSSPropertyBorderImageWidth(), &GetCSSPropertyBorderImageOutset(),
&GetCSSPropertyBorderImageRepeat()};
size_t length = arraysize(properties);
for (size_t i = 0; i < length; ++i) {
const CSSValue& value = *property_set_.GetPropertyCSSValue(*properties[i]);
String value_text = value.CssText();
if (value.IsInitialValue())
continue;
if (!result.IsEmpty())
result.Append(" ");
if (i == 2 | i == 3)
result.Append("/ ");
result.Append(value_text);
}
return result.ToString();
}
static void AppendBackgroundRepeatValue(StringBuilder& builder,
const CSSValue& repeat_xcss_value,
const CSSValue& repeat_ycss_value) {
......
......@@ -46,6 +46,7 @@ class StylePropertySerializer {
String GetCommonValue(const StylePropertyShorthand&) const;
String GetAlignmentShorthandValue(const StylePropertyShorthand&) const;
String BorderPropertyValue() const;
String BorderImagePropertyValue() const;
String GetLayeredShorthandValue(const StylePropertyShorthand&) const;
String Get2Values(const StylePropertyShorthand&) const;
String Get4Values(const StylePropertyShorthand&) const;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment