[css-typed-om] Add tests for the computed StylePropertyMap

Spec: https://drafts.css-houdini.org/css-typed-om-1/#computed-stylepropertymapreadonly-objects Currently failing: - Custom properties seem to be returned as CSSStyleValues and not CSSUnparsedValues Bug: 774887 Change-Id: I20a900a0d07a7c4bcce2ed02aa0e8612ebbb804e Reviewed-on: https://chromium-review.googlesource.com/737497Reviewed-by: nainar <nainar@chromium.org> Commit-Queue: Darren Shen <shend@chromium.org> Cr-Commit-Position: refs/heads/master@{#512972}

[css-typed-om] Add tests for the computed StylePropertyMap
Spec: https://drafts.css-houdini.org/css-typed-om-1/#computed-stylepropertymapreadonly-objects Currently failing: - Custom properties seem to be returned as CSSStyleValues and not CSSUnparsedValues Bug: 774887 Change-Id: I20a900a0d07a7c4bcce2ed02aa0e8612ebbb804e Reviewed-on: https://chromium-review.googlesource.com/737497Reviewed-by: nainar <nainar@chromium.org> Commit-Queue: Darren Shen <shend@chromium.org> Cr-Commit-Position: refs/heads/master@{#512972}
dac3aef5 · Darren Shen · Commit Bot · 1e7379d6 · dac3aef5 · dac3aef5
Commit dac3aef5 authored Oct 31, 2017 by Darren Shen Committed by Commit Bot Oct 31, 2017
3 changed files
--- a/third_party/WebKit/LayoutTests/typedcssom/resources/testhelper.js
+++ b/third_party/WebKit/LayoutTests/typedcssom/resources/testhelper.js
@@ -19,3 +19,10 @@ function assert_style_value_array_equals(a, b) {
    assert_style_value_equals(a[i], b[i]);
  }
 }
+// Creates a new div element with specified inline style.
+function newDivWithStyle(style) {
+  let target = document.createElement('div');
+  target.style = style;
+  return target;
+}
--- a/third_party/WebKit/LayoutTests/typedcssom/the-stylepropertymap/computed-expected.txt
+++ b/third_party/WebKit/LayoutTests/typedcssom/the-stylepropertymap/computed-expected.txt
+This is a testharness.js-based test.
+FAIL Computed StylePropertyMap contains every CSS property assert_equals: expected 298 but got 296
+PASS Computed StylePropertyMap contains CSS property declarations in style rules
+FAIL Computed StylePropertyMap contains custom property declarations in style rules Illegal constructor
+PASS Computed StylePropertyMap contains CSS property declarations in inline styles
+FAIL Computed StylePropertyMap contains custom property declarations in inline rules Illegal constructor
+PASS Computed StylePropertyMap contains computed values and not resolved values
+PASS Computed StylePropertyMap is live
+Harness: the test ran to completion.
--- a/third_party/WebKit/LayoutTests/typedcssom/the-stylepropertymap/computed.html
+++ b/third_party/WebKit/LayoutTests/typedcssom/the-stylepropertymap/computed.html
+<!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');
+// FIXME(774933): change this to Element.computedStyleMap
+const styleMap = getComputedStyleMap(target);
+test(() => {
+  const computedStyle = getComputedStyle(target);
+  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(() => {
+  let target = newDivWithStyle('width: 10px');
+  const styleMap = target.styleMap;
+  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>