Skip to content

GitLab

T
tangled
Commit cdec7fc1 authored by Darren Shen's avatar Darren Shen Committed by Commit Bot
Browse files
Options

[css-typed-om] Add tests for the readonly part of StylePropertyMap. 

Spec: https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymapreadonly

We test get, getAll, has, iterable and getProperties through the inline
StylePropertyMap.

Currently failing:
- Custom properties seem to be returned as CSSStyleValues and not
  CSSUnparsedValues
- properties are not sorted correctly in iteration and getProperties.

Bug: 774887
Change-Id: I613329005030355e137d19063c5ad7e6247156ed
Reviewed-on: https://chromium-review.googlesource.com/722400
Commit-Queue: Darren Shen <shend@chromium.org>
Reviewed-by: default avatarRenée Wright <rjwright@chromium.org>
Cr-Commit-Position: refs/heads/master@{#512757}
parent 88e765de
Hide whitespace changes
Inline Side-by-side
Showing with 255 additions and 0 deletions
third_party/WebKit/LayoutTests/typedcssom/resources/testhelper.js
View file @ cdec7fc1
const style_value_attributes = { const style_value_attributes = {
'CSSKeywordValue': ['value'],
'CSSUnitValue': ['unit', 'value'], 'CSSUnitValue': ['unit', 'value'],
}; };
...@@ -10,3 +11,11 @@ function assert_style_value_equals(a, b) { ...@@ -10,3 +11,11 @@ function assert_style_value_equals(a, b) {
assert_equals(a[attr], b[attr], attr); assert_equals(a[attr], b[attr], attr);
} }
} }
// Compares two arrays of CSSStyleValues to check if every element is equal
function assert_style_value_array_equals(a, b) {
assert_equals(a.length, b.length);
for (let i = 0; i < a.length; i++) {
assert_style_value_equals(a[i], b[i]);
}
}
third_party/WebKit/LayoutTests/typedcssom/the-stylepropertymap/get-expected.txt 0 → 100644
View file @ cdec7fc1
This is a testharness.js-based test.
PASS Calling StylePropertyMap.get with an unsupported property throws a TypeError
PASS Calling StylePropertyMap.get with a property not in the property model returns null
PASS Calling StylePropertyMap.get with a custom property not in the property model returns null
PASS Calling StylePropertyMap.get with a valid property returns the correct entry
PASS StylePropertyMap.get with a valid property in mixed case returns the correct entry
FAIL Calling StylePropertyMap.get with a valid custom property returns the correct entry Illegal constructor
PASS Calling StylePropertyMap.get with a list-valued property returns only the first value
Harness: the test ran to completion.
third_party/WebKit/LayoutTests/typedcssom/the-stylepropertymap/get.html 0 → 100644
View file @ cdec7fc1
<!doctype html>
<meta charset="utf-8">
<title>StylePropertyMap.get tests</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#get-a-value-from-a-stylepropertymap">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../resources/testhelper.js"></script>
<div id="target" style="width: 10px; --foo: auto; transition-duration: 1s, 2s;"></div>
<script>
'use strict';
// FIXME(774933): change this to Element.attributeStyleMap
const styleMap = document.getElementById('target').styleMap;
test(() => {
assert_throws(new TypeError(), () => styleMap.get('lemon'));
}, 'Calling StylePropertyMap.get with an unsupported property throws a TypeError');
test(() => {
assert_equals(styleMap.get('height'), null);
}, 'Calling StylePropertyMap.get with a property not in the property model returns null');
test(() => {
assert_equals(styleMap.get('--Foo'), null);
}, 'Calling StylePropertyMap.get with a custom property not in the property model returns null');
test(() => {
const result = styleMap.get('width');
assert_style_value_equals(result, CSS.px(10));
}, 'Calling StylePropertyMap.get with a valid property returns the correct entry');
test(() => {
const result = styleMap.get('wIdTh');
assert_style_value_equals(result, CSS.px(10));
}, 'StylePropertyMap.get with a valid property in mixed case returns the correct entry');
test(() => {
const result = styleMap.get('--foo');
assert_style_value_equals(result, new CSSUnparsedValue('auto'));
}, 'Calling StylePropertyMap.get with a valid custom property returns the correct entry');
test(() => {
const result = styleMap.get('transition-duration');
assert_style_value_equals(result, CSS.s(1));
}, 'Calling StylePropertyMap.get with a list-valued property returns only the first value');
</script>
third_party/WebKit/LayoutTests/typedcssom/the-stylepropertymap/getAll-expected.txt 0 → 100644
View file @ cdec7fc1
This is a testharness.js-based test.
PASS Calling StylePropertyMap.getAll with an unsupported property throws a TypeError
PASS Calling StylePropertyMap.getAll with a property not in the property model returns an empty list
PASS Calling StylePropertyMap.getAll with a custom property not in the property model returns an empty list
PASS Calling StylePropertyMap.getAll with a valid property returns a single element list with the correct entry
PASS StylePropertyMap.getAll is case-insensitive
FAIL Calling StylePropertyMap.getAll with a valid custom property returns a single element list with the correct entry Illegal constructor
PASS Calling StylePropertyMap.getAll with a list-valued property returns all the values
Harness: the test ran to completion.
third_party/WebKit/LayoutTests/typedcssom/the-stylepropertymap/getAll.html 0 → 100644
View file @ cdec7fc1
<!doctype html>
<meta charset="utf-8">
<title>StylePropertyMap.getAll tests</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymap">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../resources/testhelper.js"></script>
<div id="target" style="width: 10px; --foo: auto; transition-duration: 1s, 2s;"></div>
<script>
'use strict';
// FIXME(774933): change this to Element.attributeStyleMap
const styleMap = document.getElementById('target').styleMap;
test(() => {
assert_throws(new TypeError(), () => styleMap.getAll('lemon'));
}, 'Calling StylePropertyMap.getAll with an unsupported property throws a TypeError');
test(() => {
const result = styleMap.getAll('height');
assert_equals(result.length, 0);
}, 'Calling StylePropertyMap.getAll with a property not in the property model returns an empty list');
test(() => {
const result = styleMap.getAll('--Foo');
assert_equals(result.length, 0);
}, 'Calling StylePropertyMap.getAll with a custom property not in the property model returns an empty list');
test(() => {
const result = styleMap.getAll('width');
assert_style_value_array_equals(result, [CSS.px(10)]);
}, 'Calling StylePropertyMap.getAll with a valid property returns a single element list with the correct entry');
test(() => {
const result = styleMap.getAll('wIdTh');
assert_style_value_array_equals(result, [CSS.px(10)]);
}, 'StylePropertyMap.getAll is case-insensitive');
test(() => {
const result = styleMap.getAll('--foo');
assert_style_value_array_equals(result, [new CSSUnparsedValue('auto')]);
}, 'Calling StylePropertyMap.getAll with a valid custom property returns a single element list with the correct entry');
test(() => {
const result = styleMap.getAll('transition-duration');
assert_style_value_array_equals(result, [CSS.s(1), CSS.s(2)]);
}, 'Calling StylePropertyMap.getAll with a list-valued property returns all the values');
</script>
third_party/WebKit/LayoutTests/typedcssom/the-stylepropertymap/getProperties-expected.txt 0 → 100644
View file @ cdec7fc1
This is a testharness.js-based test.
PASS Calling StylePropertyMap.getProperties on an empty property model returns a zero-length array
FAIL StylePropertyMap.getProperties returns property names in correct order assert_array_equals: property 0, expected "color" but got "--A"
Harness: the test ran to completion.
third_party/WebKit/LayoutTests/typedcssom/the-stylepropertymap/getProperties.html 0 → 100644
View file @ cdec7fc1
<!doctype html>
<meta charset="utf-8">
<title>StylePropertyMap.getProperties tests</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-getproperties">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="target-empty"></div>
<div id="target-multiple" style="--A: A; width: 0px; --C: C; transition-duration: 1s, 2s; color: red; --B: B;"></div>
<script>
'use strict';
// FIXME(774933): change .styleMap to .attributeStyleMap
test(() => {
const styleMap = document.getElementById('target-empty').styleMap;
const properties = styleMap.getProperties();
assert_equals(properties.length, 0);
}, 'Calling StylePropertyMap.getProperties on an empty property model returns a zero-length array');
test(() => {
const styleMap = document.getElementById('target-multiple').styleMap;
const properties = styleMap.getProperties();
assert_array_equals(properties,
['color', 'transition-duration', 'width', '--A', '--B', '--C']);
}, 'StylePropertyMap.getProperties returns property names in correct order');
</script>
third_party/WebKit/LayoutTests/typedcssom/the-stylepropertymap/has.html 0 → 100644
View file @ cdec7fc1
<!doctype html>
<meta charset="utf-8">
<title>StylePropertyMap.has tests</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#check-if-stylepropertymap-has-a-property">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="target" style="width: 10px; --foo: auto; background-image: url('A'), url('B')"></div>
<script>
'use strict';
// FIXME(774933): change this to Element.attributeStyleMap
const styleMap = document.getElementById('target').styleMap;
test(() => {
assert_throws(new TypeError(), () => styleMap.has('lemon'));
}, 'Calling StylePropertyMap.has with an unsupported property throws a TypeError');
const gTestCases = [
{ property: 'height', expected: false, desc: 'a property not in the property model' },
{ property: '--Foo', expected: false, desc: 'a custom property not in the property model' },
{ property: 'width', expected: true, desc: 'a valid property' },
{ property: 'wIdTh', expected: true, desc: 'a valid property in mixed case' },
{ property: '--foo', expected: true, desc: 'a valid custom property' },
{ property: 'background-image', expected: true, desc: 'a valid list-valued property' },
];
for (const {property, expected, desc} of gTestCases) {
test(() => {
assert_equals(styleMap.has(property), expected);
}, 'Calling StylePropertyMap.has with ' + desc + ' returns ' + expected);
}
</script>
third_party/WebKit/LayoutTests/typedcssom/the-stylepropertymap/iterable-expected.txt 0 → 100644
View file @ cdec7fc1
This is a testharness.js-based test.
PASS Iterating over an empty StylePropertyMap gives a zero-length array
FAIL StylePropertyMap iterates properties in correct order assert_array_equals: property 0, expected "color" but got "--A"
FAIL StylePropertyMap iterator returns CSS properties with the correct CSSStyleValue assert_equals: expected "width" but got "--C"
FAIL StylePropertyMap iterator returns list-valued properties with the correct CSSStyleValue assert_equals: expected "transition-duration" but got "width"
FAIL StylePropertyMap iterator returns custom properties with the correct CSSStyleValue assert_equals: expected "--A" but got "transition-duration"
Harness: the test ran to completion.
third_party/WebKit/LayoutTests/typedcssom/the-stylepropertymap/iterable.html 0 → 100644
View file @ cdec7fc1
<!doctype html>
<meta charset="utf-8">
<title>StylePropertyMap iterable tests</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#the-stylepropertymap">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../resources/testhelper.js"></script>
<div id="target-empty"></div>
<div id="target-multiple" style="--A: A; width: 10px; --C: C; transition-duration: 1s, 2s; color: red; --B: B;"></div>
<script>
'use strict';
test(() => {
const styleMap = document.getElementById('target-empty').styleMap;
const properties = Array.from(styleMap);
assert_equals(properties.length, 0);
}, 'Iterating over an empty StylePropertyMap gives a zero-length array');
test(() => {
const styleMap = document.getElementById('target-multiple').styleMap;
const keys = Array.from(styleMap.keys());
assert_array_equals(keys,
['color', 'transition-duration', 'width', '--A', '--B', '--C']);
}, 'StylePropertyMap iterates properties in correct order');
test(() => {
const styleMap = document.getElementById('target-multiple').styleMap;
const [key, value] = [...styleMap][2];
assert_equals(key, 'width');
assert_style_value_equals(result, CSS.px(10));
}, 'StylePropertyMap iterator returns CSS properties with the correct CSSStyleValue');
test(() => {
const styleMap = document.getElementById('target-multiple').styleMap;
const [key, result] = [...styleMap][1];
assert_equals(key, 'transition-duration');
assert_style_value_array_equals(result, [CSS.s(1), CSS.s(2)]);
}, 'StylePropertyMap iterator returns list-valued properties with the correct CSSStyleValue');
test(() => {
const styleMap = document.getElementById('target-multiple').styleMap;
const entries = [...styleMap];
assert_equals(entries.length, 6);
const custom_entries = entries.slice(3);
for (let i = 0; i < custom_entries.length; i++) {
const expected_var = ['A', 'B', 'C'][i];
const [key, result] = custom_entries[i];
assert_equals(key, '--' + expected_var);
assert_style_value_equals(result, new CSSUnparsedValue(name));
}
}, 'StylePropertyMap iterator returns custom properties with the correct CSSStyleValue');
</script>
third_party/WebKit/Source/core/css/cssom/InlineStylePropertyMap.cpp
View file @ cdec7fc1
...@@ -210,6 +210,7 @@ void InlineStylePropertyMap::remove(CSSPropertyID property_id, ...@@ -210,6 +210,7 @@ void InlineStylePropertyMap::remove(CSSPropertyID property_id,
HeapVector<StylePropertyMap::StylePropertyMapEntry> HeapVector<StylePropertyMap::StylePropertyMapEntry>
InlineStylePropertyMap::GetIterationEntries() { InlineStylePropertyMap::GetIterationEntries() {
// TODO(779841): Needs to be sorted.
DEFINE_STATIC_LOCAL(const String, kAtApply, ("@apply")); DEFINE_STATIC_LOCAL(const String, kAtApply, ("@apply"));
HeapVector<StylePropertyMap::StylePropertyMapEntry> result; HeapVector<StylePropertyMap::StylePropertyMapEntry> result;
StylePropertySet& inline_style_set = StylePropertySet& inline_style_set =
...@@ -227,6 +228,7 @@ InlineStylePropertyMap::GetIterationEntries() { ...@@ -227,6 +228,7 @@ InlineStylePropertyMap::GetIterationEntries() {
// TODO(meade): Eventually custom properties will support other types, so // TODO(meade): Eventually custom properties will support other types, so
// actually return them instead of always returning a // actually return them instead of always returning a
// CSSUnsupportedStyleValue. // CSSUnsupportedStyleValue.
// TODO(779477): Should these return CSSUnparsedValues?
value.SetCSSStyleValue( value.SetCSSStyleValue(
CSSUnsupportedStyleValue::Create(custom_declaration.CustomCSSText())); CSSUnsupportedStyleValue::Create(custom_declaration.CustomCSSText()));
} else if (property_id == CSSPropertyApplyAtRule) { } else if (property_id == CSSPropertyApplyAtRule) {
......
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