Commit 1205957d authored by Darren Shen's avatar Darren Shen Committed by Commit Bot

[css-typed-om] Support remaining multi-col properties.

To support column-count which takes <integer>s, we had implement integer
handling as resolved by:
https://github.com/w3c/css-houdini-drafts/issues/574#issuecomment-366845604

Basically, a non-integer passed to <integer> is 'out of range', so we
wrap it in a calc(). Coincidentally, column-count also needs to be
positive, so we had to change ComputedStyle::SetColumnCount to clamp.
Note that this doesn't change CSSOM behaviour, as the parser
would've rejected non-positive values so ComputedStyle only gets
positive values. Since Typed OM skips parsing, we have to clamp in
ComputedStyle as well.

Bug: 820299
Change-Id: Ia56e4bdb55826e72d46c66666addda168dea3d2a
Reviewed-on: https://chromium-review.googlesource.com/1001084Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Commit-Queue: Darren Shen <shend@chromium.org>
Cr-Commit-Position: refs/heads/master@{#550058}
parent d25dff4d
<!doctype html>
<meta charset="utf-8">
<title>'column-count' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<script src="resources/testsuite.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
runPropertyTests('column-count', [
{ syntax: 'auto' },
// FIXME: This should say <integer>, but the test harness currently
// doesn't support <integer> data type.
{
syntax: '<number>',
// column-count needs to be a positive integer
specified: (input, result) => {
if (input instanceof CSSUnitValue && (!Number.isInteger(input.value) || input.value < 1))
assert_style_value_equals(result, new CSSMathSum(input));
else
assert_style_value_equals(result, input);
},
computed: (input, result) => {
const number = input.to('number');
if (number < 1)
assert_style_value_equals(result, new CSSUnitValue(1, 'number'));
else if (!Number.isInteger(number.value))
assert_style_value_equals(result, new CSSUnitValue(Math.round(number.value), 'number'));
else
assert_style_value_equals(result, number);
}
},
]);
</script>
<!doctype html>
<meta charset="utf-8">
<title>'column-rule-style' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<script src="resources/testsuite.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
runPropertyTests('column-rule-style', [
{ syntax: 'none' },
{ syntax: 'hidden' },
{ syntax: 'dotted' },
{ syntax: 'dashed' },
{ syntax: 'solid' },
{ syntax: 'double' },
{ syntax: 'groove' },
{ syntax: 'ridge' },
{ syntax: 'inset' },
{ syntax: 'outset' }
]);
</script>
<!doctype html>
<meta charset="utf-8">
<title>'column-rule-width' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<script src="resources/testsuite.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
function assert_is_zero_px(result) {
assert_style_value_equals(result, new CSSUnitValue(0, 'px'));
}
runPropertyTests('column-rule-width', [
// Computed value is 0 when column-rule-style is 'none'.
// FIXME: Add separate test where column-rule-style is not 'none' or 'hidden'.
{
syntax: 'thin',
computed: (_, result) => assert_is_zero_px(result)
},
{
syntax: 'medium',
computed: (_, result) => assert_is_zero_px(result)
},
{
syntax: 'thick',
computed: (_, result) => assert_is_zero_px(result)
},
{
syntax: '<length>',
specified: assert_is_equal_with_range_handling,
computed: (_, result) => assert_is_zero_px(result)
},
]);
</script>
...@@ -3306,6 +3306,8 @@ ...@@ -3306,6 +3306,8 @@
type_name: "unsigned short", type_name: "unsigned short",
computed_style_custom_functions: ["setter"], computed_style_custom_functions: ["setter"],
custom_apply_functions_all: true, custom_apply_functions_all: true,
keywords: ["auto"],
typedom_types: ["Keyword", "Number"]
}, },
{ {
name: "column-gap", name: "column-gap",
...@@ -3358,6 +3360,7 @@ ...@@ -3358,6 +3360,7 @@
], ],
default_value: "none", default_value: "none",
type_name: "EBorderStyle", type_name: "EBorderStyle",
typedom_types: ["Keyword"]
}, },
{ {
name: "column-rule-width", name: "column-rule-width",
...@@ -3370,6 +3373,8 @@ ...@@ -3370,6 +3373,8 @@
type_name: "LayoutUnit", type_name: "LayoutUnit",
computed_style_custom_functions: ["initial", "getter", "setter"], computed_style_custom_functions: ["initial", "getter", "setter"],
converter: "ConvertLineWidth<unsigned short>", converter: "ConvertLineWidth<unsigned short>",
keywords: ["thin", "medium", "thick"],
typedom_types: ["Keyword", "Length"],
}, },
{ {
name: "column-span", name: "column-span",
......
...@@ -44,7 +44,10 @@ bool IsValueOutOfRangeForProperty(CSSPropertyID property_id, double value) { ...@@ -44,7 +44,10 @@ bool IsValueOutOfRangeForProperty(CSSPropertyID property_id, double value) {
// For non-length properties and special cases. // For non-length properties and special cases.
switch (property_id) { switch (property_id) {
case CSSPropertyColumnCount:
return round(value) != value || value < 1;
case CSSPropertyBlockSize: case CSSPropertyBlockSize:
case CSSPropertyColumnRuleWidth:
case CSSPropertyFlexGrow: case CSSPropertyFlexGrow:
case CSSPropertyFlexShrink: case CSSPropertyFlexShrink:
case CSSPropertyFontSize: case CSSPropertyFontSize:
......
...@@ -513,7 +513,7 @@ class ComputedStyle : public ComputedStyleBase, ...@@ -513,7 +513,7 @@ class ComputedStyle : public ComputedStyleBase,
// column-count (aka -webkit-column-count) // column-count (aka -webkit-column-count)
void SetColumnCount(unsigned short c) { void SetColumnCount(unsigned short c) {
SetHasAutoColumnCountInternal(false); SetHasAutoColumnCountInternal(false);
SetColumnCountInternal(c); SetColumnCountInternal(clampTo<unsigned short>(c, 1));
} }
void SetHasAutoColumnCount() { void SetHasAutoColumnCount() {
SetHasAutoColumnCountInternal(true); SetHasAutoColumnCountInternal(true);
......
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