Bug 1509465 [wpt PR 14201] - CSS: WPT for :first-child :last-child, a=testonly
authorEric Willigers <ericwilligers@chromium.org>
Fri, 30 Nov 2018 18:01:52 +0000
changeset 449969 298eb79596b96ec5277d0bebc05ae3e277749847
parent 449968 dc8cbdac0d563513eab71eb537a9b8840b455721
child 449970 f7a8aa4fc477bd4fb434999f838a4de87fbe0ff4
push id110435
push userjames@hoppipolla.co.uk
push dateTue, 11 Dec 2018 15:53:47 +0000
treeherdermozilla-inbound@add833a587f5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1509465, 14201, 1348873, 610696
milestone66.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 1509465 [wpt PR 14201] - CSS: WPT for :first-child :last-child, a=testonly Automatic update from web-platform-tests CSS: WPT for :first-child :last-child Promote our :first-child :last-child invalidation layout test to WPT. https://drafts.csswg.org/selectors-4/#the-first-child-pseudo Change-Id: I3c2e1af82ef2dac58ec5bfe642b156289457bb22 Reviewed-on: https://chromium-review.googlesource.com/c/1348873 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Eric Willigers <ericwilligers@chromium.org> Cr-Commit-Position: refs/heads/master@{#610696} -- wpt-commits: 732cc9161d1302127fd4b99a50c13bdff7e253ce wpt-pr: 14201
testing/web-platform/tests/css/selectors/invalidation/first-child-last-child.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/selectors/invalidation/first-child-last-child.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Selectors Invalidation: :first-child :last-child</title>
+    <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-first-child-pseudo">
+    <meta name="assert" content="This tests that the :first-child and :last-child selectors are effective">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <style>
+      div {
+        color: black;
+      }
+      span:first-child {
+        color: blue;
+      }
+      span:last-child {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"><span>first-initially</span><span>last-initially</span></div>
+    <script>
+
+'use strict';
+const black = 'rgb(0, 0, 0)';
+const blue = 'rgb(0, 0, 255)';
+const red = 'rgb(255, 0, 0)';
+
+test(() => {
+  const target = document.querySelector('#target');
+  const first = target.firstChild;
+  assert_equals(getComputedStyle(first).color, blue);
+  target.insertAdjacentHTML('afterbegin', '\n<span>foo</span><span>bar</span>');
+  assert_equals(getComputedStyle(target.firstElementChild).color, blue);
+  assert_equals(getComputedStyle(first).color, black);
+  while (target.firstElementChild !== first)
+    target.removeChild(target.firstElementChild);
+  assert_equals(getComputedStyle(first).color, blue);
+}, 'Adding multiple nodes at once should invalidate :first-child correctly.');
+
+test(() => {
+  const target = document.querySelector('#target');
+  const last = target.lastChild;
+  assert_equals(getComputedStyle(last).color, red);
+  target.insertAdjacentHTML('beforeend', '\n<span>foo</span><span>bar</span>');
+  assert_equals(getComputedStyle(target.lastChild).color, red);
+  assert_equals(getComputedStyle(last).color, black);
+  while (target.lastChild !== last)
+    target.removeChild(target.lastChild);
+  assert_equals(getComputedStyle(last).color, red);
+}, 'Adding multiple nodes at once should invalidate :last-child correctly.');
+
+    </script>
+  </body>
+</html>