[css-typed-om] Upstream style property map tests as tentative

This patch upstreams style property map tests as tentative WPTs. We modified the include paths to match WPT. Our plan is to eventually clean up these tests and remove the tentative label. TBR=nainar@chromium.org Bug: 774887 Change-Id: I20e6e025e9a78678db4e63ce3a82905d0fa3b20d
web-platform-tests · Jan 18, 2018 · 3e4355e · 3e4355e
1 parent 60f818c
commit 3e4355e
Show file tree

Hide file tree

Showing 25 changed files with 1,245 additions and 0 deletions.
diff --git a/css/css-typed-om/the-stylepropertymap/computed/computed.tentative.html b/css/css-typed-om/the-stylepropertymap/computed/computed.tentative.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Computed StylePropertyMap tests</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#computed-stylepropertymapreadonly-objects">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<style>#target { height: 10px; --foo: auto; }</style>
+<div style="width: 50px">
+  <div id="target" style="top: 5px; --bar: 5; width: 50%;"></div>
+</div>
+<script>
+'use strict';
+
+const target = document.getElementById('target');
+const styleMap = target.computedStyleMap();
+
+// FIXME(crbug.com/788904): Test currently fails because the 'content' property returns
+// incorrect initial CSS value.
+test(() => {
+  const computedStyle = [...getComputedStyle(target)].sort();
+  const properties = styleMap.getProperties();
+
+  // Two extra entries for custom properties
+  assert_equals(properties.length, computedStyle.length + 2);
+  for (let i = 0; i < computedStyle.length; i++) {
+    assert_equals(properties[i], computedStyle[i]);
+    assert_not_equals(styleMap.get(computedStyle[i]), null);
+    assert_not_equals(styleMap.getAll(computedStyle[i]).length, 0);
+    assert_true(styleMap.has(computedStyle[i]));
+  }
+}, 'Computed StylePropertyMap contains every CSS property');
+
+test(() => {
+  const result = styleMap.get('height');
+  assert_style_value_equals(result, CSS.px(10));
+}, 'Computed StylePropertyMap contains CSS property declarations in style rules');
+
+test(() => {
+  const result = styleMap.get('--foo');
+  assert_style_value_equals(result, new CSSUnparsedValue(' auto'));
+}, 'Computed StylePropertyMap contains custom property declarations in style rules');
+
+test(() => {
+  const result = styleMap.get('top');
+  assert_style_value_equals(result, CSS.px(5));
+}, 'Computed StylePropertyMap contains CSS property declarations in inline styles');
+
+test(() => {
+  const result = styleMap.get('--bar');
+  assert_style_value_equals(result, new CSSUnparsedValue(' 5'));
+}, 'Computed StylePropertyMap contains custom property declarations in inline rules');
+
+test(() => {
+  const computedStyle = getComputedStyle(target);
+  assert_equals(computedStyle.width, '25px');
+
+  const result = styleMap.get('width');
+  assert_style_value_equals(result, CSS.percent(50));
+}, 'Computed StylePropertyMap contains computed values and not resolved values');
+
+test(t => {
+  let target = createDivWithStyle(t, 'width: 10px');
+  const styleMap = target.attributeStyleMap;
+  assert_style_value_equals(styleMap.get('width'), CSS.px(10));
+
+  target.style.width = '20px';
+  assert_style_value_equals(styleMap.get('width'), CSS.px(20));
+}, 'Computed StylePropertyMap is live');
+
+</script>
diff --git a/css/css-typed-om/the-stylepropertymap/computed/get.tentative.html b/css/css-typed-om/the-stylepropertymap/computed/get.tentative.html
@@ -0,0 +1,42 @@
+<!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>
+<body>
+<script>
+'use strict';
+
+test(t => {
+  const styleMap = createComputedStyleMap(t);
+  assert_throws(new TypeError(), () => styleMap.get('lemon'));
+}, 'Calling StylePropertyMap.get with an unsupported property throws a TypeError');
+
+test(t => {
+  const styleMap = createComputedStyleMap(t, '--foo: auto');
+  assert_equals(styleMap.get('--Foo'), null);
+}, 'Calling StylePropertyMap.get with a custom property not in the property model returns null');
+
+test(t => {
+  const styleMap = createComputedStyleMap(t, 'width: 10px; height: 20px');
+  assert_style_value_equals(styleMap.get('width'), CSS.px(10));
+}, 'Calling StylePropertyMap.get with a valid property returns the correct entry');
+
+test(t => {
+  const styleMap = createComputedStyleMap(t, 'height: 20px; width: 10px;');
+  assert_style_value_equals(styleMap.get('wIdTh'), CSS.px(10));
+}, 'StylePropertyMap.get with a valid property in mixed case returns the correct entry');
+
+test(t => {
+  const styleMap = createComputedStyleMap(t, '--foo: auto; --bar: 10px');
+  assert_style_value_equals(styleMap.get('--foo'), new CSSUnparsedValue(' auto'));
+}, 'Calling StylePropertyMap.get with a valid custom property returns the correct entry');
+
+test(t => {
+  const styleMap = createComputedStyleMap(t, 'width: 10px; transition-duration: 1s, 2s; height: 10px;');
+  assert_style_value_equals(styleMap.get('transition-duration'), CSS.s(1));
+}, 'Calling StylePropertyMap.get with a list-valued property returns only the first value');
+
+</script>
diff --git a/css/css-typed-om/the-stylepropertymap/computed/getAll.tentative.html b/css/css-typed-om/the-stylepropertymap/computed/getAll.tentative.html
@@ -0,0 +1,42 @@
+<!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>
+<body>
+<script>
+'use strict';
+
+test(t => {
+  const styleMap = createComputedStyleMap(t);
+  assert_throws(new TypeError(), () => styleMap.getAll('lemon'));
+}, 'Calling StylePropertyMap.getAll with an unsupported property throws a TypeError');
+
+test(t => {
+  const styleMap = createComputedStyleMap(t, '--foo: auto');
+  assert_style_value_array_equals(styleMap.getAll('--Foo'), []);
+}, 'Calling StylePropertyMap.getAll with a custom property not in the property model returns an empty list');
+
+test(t => {
+  const styleMap = createComputedStyleMap(t, 'width: 10px; height: 20px');
+  assert_style_value_array_equals(styleMap.getAll('width'), [CSS.px(10)]);
+}, 'Calling StylePropertyMap.getAll with a valid property returns a single element list with the correct entry');
+
+test(t => {
+  const styleMap = createComputedStyleMap(t, 'height: 20px; width: 10px');
+  assert_style_value_array_equals(styleMap.getAll('wIdTh'), [CSS.px(10)]);
+}, 'StylePropertyMap.getAll is case-insensitive');
+
+test(t => {
+  const styleMap = createComputedStyleMap(t, '--foo: auto; --bar: 10px');
+  assert_style_value_array_equals(styleMap.getAll('--foo'), [new CSSUnparsedValue(' auto')]);
+}, 'Calling StylePropertyMap.getAll with a valid custom property returns a single element list with the correct entry');
+
+test(t => {
+  const styleMap = createComputedStyleMap(t, 'width: 10px; transition-duration: 1s, 2s; height: 20px');
+  assert_style_value_array_equals(styleMap.getAll('transition-duration'), [CSS.s(1), CSS.s(2)]);
+}, 'Calling StylePropertyMap.getAll with a list-valued property returns all the values');
+
+</script>
diff --git a/css/css-typed-om/the-stylepropertymap/computed/getProperties.tentative.html b/css/css-typed-om/the-stylepropertymap/computed/getProperties.tentative.html
@@ -0,0 +1,18 @@
+<!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>
+<script src="../../resources/testhelper.js"></script>
+<body>
+<script>
+'use strict';
+
+test(t => {
+  const styleMap = createComputedStyleMap(t, '--A: A; width: 0px; --C: C; transition-duration: 1s, 2s; color: red; --B: B;');
+  const expectedProperties = [...getComputedStyle(document.body)].sort().concat('--A', '--B', '--C');
+  assert_array_equals(styleMap.getProperties(), expectedProperties);
+}, 'StylePropertyMap.getProperties returns property names in correct order');
+
+</script>
diff --git a/css/css-typed-om/the-stylepropertymap/computed/has.tentative.html b/css/css-typed-om/the-stylepropertymap/computed/has.tentative.html
@@ -0,0 +1,32 @@
+<!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>
+<script src="../../resources/testhelper.js"></script>
+<body>
+<script>
+'use strict';
+
+test(t => {
+  const styleMap = createComputedStyleMap(t);
+  assert_throws(new TypeError(), () => styleMap.has('lemon'));
+}, 'Calling StylePropertyMap.has with an unsupported property throws a TypeError');
+
+const gTestCases = [
+  { 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: 'transition-duration', expected: true, desc: 'a valid list-valued property' },
+];
+
+for (const {property, expected, desc} of gTestCases) {
+  test(t => {
+    const styleMap = createComputedStyleMap(t, 'width: 10px; --foo: auto; transition-duration: 1s, 2s');
+    assert_equals(styleMap.has(property), expected);
+  }, 'Calling StylePropertyMap.has with ' + desc + ' returns ' + expected);
+}
+
+</script>
diff --git a/css/css-typed-om/the-stylepropertymap/computed/iterable.tentative.html b/css/css-typed-om/the-stylepropertymap/computed/iterable.tentative.html
@@ -0,0 +1,42 @@
+<!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>
+<body>
+<script>
+'use strict';
+
+function findInStyleMap(styleMap, property) {
+  const index = [...styleMap.keys()].indexOf(property);
+  if (index == -1)
+    return null;
+  return [...styleMap.values()][index];
+}
+
+test(t => {
+  const styleMap = createComputedStyleMap(t, '--A: A; width: 10px; --C: C; transition-duration: 1s, 2s; color: red; --B: B;');
+  const expectedKeys = [...getComputedStyle(document.body)].sort().concat('--A', '--B', '--C');
+  assert_array_equals([...styleMap.keys()], expectedKeys);
+}, 'StylePropertyMap iterates properties in correct order');
+
+test(t => {
+  const styleMap = createComputedStyleMap(t, 'width: 10px; transition-duration: 1s, 2s; height: 20px');
+  assert_style_value_equals(findInStyleMap(styleMap, 'width'), CSS.px(10));
+}, 'StylePropertyMap iterator returns CSS properties with the correct CSSStyleValue');
+
+test(t => {
+  const styleMap = createComputedStyleMap(t, 'width: 10px; transition-duration: 1s, 2s; height: 20px');
+  assert_style_value_array_equals(findInStyleMap(styleMap, 'transition-duration'), [CSS.s(1), CSS.s(2)]);
+}, 'StylePropertyMap iterator returns list-valued properties with the correct CSSStyleValue');
+
+test(t => {
+  const styleMap = createComputedStyleMap(t, '--A: A; --C: C; color: red; --B: B;');
+  assert_style_value_equals(findInStyleMap(styleMap, '--A'), new CSSUnparsedValue(' A'));
+  assert_style_value_equals(findInStyleMap(styleMap, '--B'), new CSSUnparsedValue(' B'));
+  assert_style_value_equals(findInStyleMap(styleMap, '--C'), new CSSUnparsedValue(' C'));
+}, 'StylePropertyMap iterator returns custom properties with the correct CSSStyleValue');
+
+</script>
diff --git a/css/css-typed-om/the-stylepropertymap/declared/append.tentative.html b/css/css-typed-om/the-stylepropertymap/declared/append.tentative.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>StylePropertyMap.append tests</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#append-to-a-stylepropertymap">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<body>
+<script>
+'use strict';
+
+const gInvalidTestCases = [
+  { property: 'lemon', values: ['ade'], desc: 'an unsupported property name' },
+  { property: null, values: ['foo'], desc: 'an null property name' },
+  { property: 'width', values: ['10px'], desc: 'a property that is not list valued' },
+  { property: 'transition-duration', values: [CSS.px(10)], desc: 'an invalid CSSStyleValue' },
+  { property: 'transition-duration', values: ['10px'], desc: 'an invalid String value' },
+  { property: 'transition-duration', values: [CSS.s(1), '10px', CSS.px(10)], desc: 'a mix of valid and invalid values' },
+];
+
+for (const {property, values, desc} of gInvalidTestCases) {
+  test(t => {
+    let styleMap = createDeclaredStyleMap(t, '');
+    assert_throws(new TypeError(), () => styleMap.append(property, ...values));
+  }, 'Calling StylePropertyMap.append with ' + desc + ' throws TypeError');
+}
+
+test(t => {
+  let styleMap = createDeclaredStyleMap(t, '');
+
+  styleMap.append('transition-duration', CSS.s(1), '2s');
+  assert_style_value_array_equals(styleMap.getAll('transition-duration'),
+      [CSS.s(1), CSS.s(2)]);
+
+  styleMap.append('transition-duration', '3s', CSS.s(4));
+  assert_style_value_array_equals(styleMap.getAll('transition-duration'),
+      [CSS.s(1), CSS.s(2), CSS.s(3), CSS.s(4)]);
+}, 'Appending a list-valued property with CSSStyleValue or String updates its values');
+
+test(t => {
+  let styleMap = createDeclaredStyleMap(t, '');
+
+  styleMap.append('transition-duration', '1s, 2s');
+  assert_style_value_array_equals(styleMap.getAll('transition-duration'),
+      [CSS.s(1), CSS.s(2)]);
+
+  styleMap.append('transition-duration', '3s, 4s');
+  assert_style_value_array_equals(styleMap.getAll('transition-duration'),
+      [CSS.s(1), CSS.s(2), CSS.s(3), CSS.s(4)]);
+}, 'Appending a list-valued property with list-valued string updates its values');
+
+test(t => {
+  let styleMap = createDeclaredStyleMap(t, 'transition-duration: 5s, 10s');
+
+  styleMap.append('tRaNsItIoN-dUrAtIoN', '1s', CSS.s(2));
+  const result = styleMap.getAll('transition-duration');
+  assert_style_value_array_equals(result,
+      [CSS.s(5), CSS.s(10), CSS.s(1), CSS.s(2)]);
+}, 'StylePropertyMap.append is case-insensitive');
+
+</script>
diff --git a/css/css-typed-om/the-stylepropertymap/declared/declared.tentative.html b/css/css-typed-om/the-stylepropertymap/declared/declared.tentative.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Declared StylePropertyMap tests</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#declared-stylepropertymap-objects">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<style>
+div {
+  height: 10px;
+  width: 50%;
+  width: 'lemon';
+  --foo: auto;
+  transition-duration: 1s, 2s;
+  color: 10;
+}
+
+#target {
+  height: 20px;
+  --foo: 1s;
+  width: 10%;
+}
+</style>
+<div style="width: 50px">
+  <div id="target" style="top: 5px; --bar: auto;"></div>
+</div>
+<script>
+'use strict';
+
+const target = document.getElementById('target');
+const styleMap = document.styleSheets[0].rules[0].attributeStyleMap;
+
+test(() => {
+  const properties = styleMap.getProperties();
+  assert_array_equals(properties, ['height', 'transition-duration', 'width', '--foo']);
+}, 'Declared StylePropertyMap only contains properties in the style rule');
+
+test(() => {
+  assert_style_value_equals(styleMap.get('height'), CSS.px(10));
+}, 'Declared StylePropertyMap contains CSS property declarations in style rules');
+
+test(() => {
+  assert_equals(styleMap.get('top'), null);
+  assert_equals(styleMap.get('--bar'), null);
+}, 'Declared StylePropertyMap does not contain inline styles');
+
+test(() => {
+  assert_style_value_equals(styleMap.get('--foo'), new CSSUnparsedValue(' auto'));
+}, 'Declared StylePropertyMap contains custom property declarations');
+
+test(() => {
+  assert_equals(styleMap.get('color'), null);
+}, 'Declared StylePropertyMap does not contain properties with invalid values');
+
+test(() => {
+  assert_style_value_equals(styleMap.get('width'), CSS.percent(50));
+}, 'Declared StylePropertyMap contains properties with their last valid value');
+
+test(() => {
+  const style = document.createElement('style');
+  document.head.appendChild(style);
+
+  style.sheet.insertRule('.test { width: 10px; }');
+  let rule = style.sheet.rules[0];
+
+  let styleMap = rule.attributeStyleMap;
+  assert_style_value_equals(styleMap.get('width'), CSS.px(10));
+
+  rule.style.width = '20px';
+  assert_style_value_equals(styleMap.get('width'), CSS.px(20));
+
+  styleMap.set('width', CSS.px(30));
+  assert_equals(rule.cssText, '.test { width: 30px; }');
+}, 'Declared StylePropertyMap is live');
+
+</script>