get.html | Explore in Territory

<!doctype html>
<meta charset="utf-8">
<title>Computed StylePropertyMap.get</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#get-a-value-from-a-stylepropertymap">
<meta name="assert" content="Test computed StylePropertyMap.get" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<body>
<div id="log">
<script>
'use strict';

test(t => {
  const styleMap = createComputedStyleMap(t, '--foo: auto');
  assert_equals(styleMap.get('--Foo'), null);
}, 'Getting a custom property not in the computed style returns null');

test(t => {
  const styleMap = createComputedStyleMap(t, 'width: 10px; height: 20px');
  assert_style_value_equals(styleMap.get('width'), new CSSUnitValue(10, 'px'));
}, 'Getting a valid property from computed style returns the correct entry');

test(t => {
  const styleMap = createComputedStyleMap(t, '--foo: auto; --bar: 10px');
  assert_style_value_equals(styleMap.get('--foo'),
      new CSSUnparsedValue(['auto']));
}, 'Getting a valid custom property from computed style 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'),
      new CSSUnitValue(1, 's'));
}, 'Getting a list-valued property from computed style returns only ' +
   'the first value');

test(t => {
  const styleMap = createComputedStyleMap(t, 'height: 20px; width: 10px;');
  assert_style_value_equals(styleMap.get('wIdTh'), new CSSUnitValue(10, 'px'));
}, 'Computed StylePropertyMap.get is not case-sensitive');

test(t => {
  const [elem, styleMap] = createElementWithComputedStyleMap(t, 'width: 10px;');
  assert_style_value_equals(styleMap.get('width'), new CSSUnitValue(10, 'px'));
  elem.style.width = '20px';
  assert_style_value_equals(styleMap.get('width'), new CSSUnitValue(20, 'px'));
}, 'Computed StylePropertyMap.get reflects updates in inline style');

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