Bug 1631601 [wpt PR 23125] - [css-logical] Include logical properties when iterating a computed style, a=testonly
authorOriol Brufau <obrufau@igalia.com>
Tue, 28 Apr 2020 11:33:34 +0000
changeset 527543 a541c061c4fbe7f0ed36cad2cfe9affbec5236a3
parent 527542 f016ab30013b235661e8aa9f4f86e09cb98ff522
child 527544 9749430bf8700af19f53f1f4b39bb2fff68a611f
push id114723
push userarchaeopteryx@coole-files.de
push dateFri, 01 May 2020 14:54:07 +0000
treeherderautoland@8f743729a39b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1631601, 23125, 1072180, 2153442, 760732
milestone77.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1631601 [wpt PR 23125] - [css-logical] Include logical properties when iterating a computed style, a=testonly Automatic update from web-platform-tests [css-logical] Include logical properties when iterating a computed style The logical properties were not added into kComputedPropertyArray, so they were skipped when iterating a computed CSSStyleDeclaration like [...getComputedStyle(document.body)]. BUG=1072180 TEST=external/wpt/css/css-logical/getComputedStyle-listing.html TEST=external/wpt/css/cssom/cssstyledeclaration-csstext.html TEST=external/wpt/css/cssom/cssstyledeclaration-custom-properties.html TEST=fast/css/getComputedStyle/computed-style-listing.html TEST=fast/css/getComputedStyle/computed-style-without-renderer-listing.html TEST=svg/css/getComputedStyle-listing.html Change-Id: Ia83ac8608b2b98601f454653900e76f89291b4aa Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2153442 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Commit-Queue: Oriol Brufau <obrufau@igalia.com> Cr-Commit-Position: refs/heads/master@{#760732} -- wpt-commits: 17b3f85c94583270571b8b8e4a8815d664dbb1c8 wpt-pr: 23125
testing/web-platform/tests/css/css-logical/getComputedStyle-listing.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/getComputedStyle-listing.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Logical Properties: computed style listing</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#margin-properties">
+<meta name="assert" content="This test checks that the logical properties are properly exposed in a computed CSSStyleDeclaration." />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="log"></div>
+
+<script>
+function hasProperty(object, property) {
+  // This checks the [[HasProperty]] internal method.
+  return property in object;
+}
+
+function hasPropertyValue(object, property) {
+  // This checks the [[Get]] internal method.
+  return object[property] !== undefined;
+}
+
+function hasPropertyDescriptor(object, property) {
+  // This checks [[GetOwnProperty]], iterating the prototype chain.
+  while (object) {
+    if (Reflect.getOwnPropertyDescriptor(object, property)) {
+      return true;
+    }
+    object = Reflect.getPrototypeOf(object);
+  }
+  return false;
+}
+
+function hasPropertyKey(object, property) {
+  // This checks [[OwnPropertyKeys]], iterating the prototype chain.
+  while (object) {
+    if (Reflect.ownKeys(object).includes(property)) {
+      return true;
+    }
+    object = Reflect.getPrototypeOf(object);
+  }
+  return false;
+}
+
+function hasItem(object, item) {
+  // This checks the CSSStyleDeclaration::item WebIDL getter.
+  for (let i = 0; i < object.length; ++i) {
+    if (object.item(i) === item) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function check(property) {
+  const cs = getComputedStyle(document.body);
+  const camelCase = property.replace(/-(.)/g, (_, b) => b.toUpperCase());
+  test(function() {
+    assert_true(hasProperty(cs, property) || hasProperty(cs, camelCase),
+      `The computed style has the property ${property} or ${camelCase}.`);
+    assert_true(hasPropertyValue(cs, property) || hasPropertyValue(cs, camelCase),
+      `The computed style has a value for for the property ${property} or ${camelCase}.`);
+    assert_true(hasPropertyDescriptor(cs, property) || hasPropertyDescriptor(cs, camelCase),
+      `The computed style has a property descriptor for ${property} or ${camelCase}.`);
+    assert_true(hasPropertyKey(cs, property) || hasPropertyKey(cs, camelCase),
+      `The computed style contains ${property} or ${camelCase} in the property list.`);
+    assert_true(hasItem(cs, property) || hasItem(cs, camelCase),
+      `The computed style contains the item ${property} or ${camelCase}.`);
+  }, property);
+}
+
+check("border-block-end-color");
+check("border-block-end-style");
+check("border-block-end-width");
+check("border-block-start-color");
+check("border-block-start-style");
+check("border-block-start-width");
+check("border-inline-end-color");
+check("border-inline-end-style");
+check("border-inline-end-width");
+check("border-inline-start-color");
+check("border-inline-start-style");
+check("border-inline-start-width");
+
+check("inset-block-start");
+check("inset-block-end");
+check("inset-inline-start");
+check("inset-inline-end");
+
+check("margin-block-start");
+check("margin-block-end");
+check("margin-inline-start");
+check("margin-inline-end");
+
+check("padding-block-start");
+check("padding-block-end");
+check("padding-inline-start");
+check("padding-inline-end");
+
+check("block-size");
+check("inline-size");
+check("max-block-size");
+check("max-inline-size");
+check("min-block-size");
+check("min-inline-size");
+</script>