iterable.tentative.html | Explore in Territory

<!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];
}

// Puts normal CSS properties before vendor prefixed ones
function comparePropertyNames(a, b) {
  if (a.startsWith('-') == b.startsWith('-'))
    return a < b ? -1 : 1;
  return b.startsWith('-') ? -1 : 1;
}

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(comparePropertyNames).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_array_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_array_equals(findInStyleMap(styleMap, '--A'), [new CSSUnparsedValue(['A'])]);
  assert_style_value_array_equals(findInStyleMap(styleMap, '--B'), [new CSSUnparsedValue(['B'])]);
  assert_style_value_array_equals(findInStyleMap(styleMap, '--C'), [new CSSUnparsedValue(['C'])]);
}, 'StylePropertyMap iterator returns custom properties with the correct CSSStyleValue');

test(t => {
  // This is to test for https://github.com/w3c/css-houdini-drafts/issues/700
  const styleMap = createComputedStyleMap(t, '--豈: 豈; --💩: 💩;');
  const keys = [...styleMap.keys()];

  assert_array_equals(keys.slice(-2), ['--💩', '--豈']);
}, 'Computed StylePropertyMap sorts custom properties in increasing ' +
   'code-point order');

</script>
chromium/third_party/blink/web_tests/external/wpt/css/css-typed-om/the-stylepropertymap/computed/iterable.tentative.html
