Revision ec35b03ca5e8eec6eb1767a77f0aea13855515a3 authored by Rune Lillesveen on 29 June 2018, 22:17:37 UTC, committed by Blink WPT Bot on 29 June 2018, 22:26:52 UTC
We used to create these pseudo elements and their computed styles in Element::AttachLayoutTree when building the layout tree. Now we create or dispose these elements from style recalc, that is, UpdatePseudoElement. To make pseudo elements live through a style recalc with a layout tree re-attach we no longer clear the pseudo elements during DetachLayoutTree for performing_reattach=true. We do however need to clear the pseudo elements which do not get a layout object for the re-attach. That is done in AttachLayoutTree for the originating element when the originating element does not generate a layout box. We stop using the pseudo style cache on ComputedStyle for PseudoElements and instead return the ComputedStyle when creating the pseudo element and store it as non-attached style which can later be retrieved when attaching the layout object. An effect of this change is that we can detect transitions on pseudo elements when ancestors display types changes and causes re-attachment. That is issue 836140. ::first-letter may still be generated during layout tree building, and the ::first-letter layout structure may still be updated during style recalc. Bug: 836126, 836140 Change-Id: Iafad705b7a7b988d4c1598e8a126ce0d79c5873d Reviewed-on: https://chromium-review.googlesource.com/1112244 Commit-Queue: Rune Lillesveen <futhark@chromium.org> Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Cr-Commit-Position: refs/heads/master@{#571665}
1 parent c360ca0
DOMRect-001.html
<!DOCTYPE html>
<html>
<head>
<title>Geometry Interfaces: DOMRect and DOMRectReadOnly interface tests</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com" />
<link rel="help" href="http://www.w3.org/TR/geometry-1/#DOMRect">
<link rel="help" href="http://www.w3.org/TR/geometry-1/#dom-domrect">
<link rel="help" href="http://www.w3.org/TR/geometry-1/#dom-domrectreadonly">
<link rel="help" href="http://www.w3.org/TR/geometry-1/#dom-domrect-domrect">
<link rel="help" href="http://www.w3.org/TR/geometry-1/#dom-domrectreadonly-domrect-x">
<link rel="help" href="http://www.w3.org/TR/geometry-1/#dom-domrectreadonly-domrect-y">
<link rel="help" href="http://www.w3.org/TR/geometry-1/#dom-domrectreadonly-domrect-width">
<link rel="help" href="http://www.w3.org/TR/geometry-1/#dom-domrectreadonly-domrect-height">
<link rel="help" href="http://www.w3.org/TR/geometry-1/#dom-domrectreadonly-domrect-top">
<link rel="help" href="http://www.w3.org/TR/geometry-1/#dom-domrectreadonly-domrect-left">
<link rel="help" href="http://www.w3.org/TR/geometry-1/#dom-domrectreadonly-domrect-right">
<link rel="help" href="http://www.w3.org/TR/geometry-1/#dom-domrectreadonly-domrect-bottom">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<p>Test DOMRect and DOMRectReadOnly interfaces</p>
<div id="log"></div>
<script>
testConstructor(DOMRect);
testConstructor(DOMRectReadOnly);
test(function() {
var r = new DOMRect();
r.top = 5;
assert_equals(r.top, 0, "Expected value for top is 0");
r.right = 5;
assert_equals(r.right, 0, "Expected value for right is 0");
r.bottom = 5;
assert_equals(r.bottom, 0, "Expected value for bottom is 0");
r.left = 5;
assert_equals(r.left, 0, "Expected value for left is 0");
},'testSetReadOnlyAttributes');
test(function() {
var r = new DOMRect();
r.x = 5;
assert_equals(r.x, 5, "Expected value for x is 5");
assert_equals(r.left, 5, "Expected value for left is 5");
assert_equals(r.right, 5, "Expected value for right is 5");
r.y = 5;
assert_equals(r.y, 5, "Expected value for y is 5");
assert_equals(r.top, 5, "Expected value for top is 5");
assert_equals(r.bottom, 5, "Expected value for bottom is 5");
r.width = 5;
assert_equals(r.width, 5, "Expected value for width is 5");
assert_equals(r.left, 5, "Expected value for left is 5");
assert_equals(r.right, 10, "Expected value for right is 10");
r.height = 5;
assert_equals(r.height, 5, "Expected value for height is 5");
assert_equals(r.top, 5, "Expected value for top is 5");
assert_equals(r.bottom, 10, "Expected value for bottom is 10");
},'testSetAttributes');
test(function() {
var r = new DOMRectReadOnly();
r.top = 5;
assert_equals(r.top, 0, "Expected value for top is 0");
assert_equals(r.y, 0, "Expected value for y is 0");
assert_equals(r.bottom, 0, "Expected value for bottom is 0");
r.right = 5;
assert_equals(r.right, 0, "Expected value for right is 0");
assert_equals(r.x, 0, "Expected value for x is 0");
assert_equals(r.left, 0, "Expected value for left is 0");
r.bottom = 5;
assert_equals(r.bottom, 0, "Expected value for bottom is 0");
assert_equals(r.y, 0, "Expected value for y is 0");
assert_equals(r.top, 0, "Expected value for top is 0");
r.left = 5;
assert_equals(r.left, 0, "Expected value for left is 0");
assert_equals(r.x, 0, "Expected value for x is 0");
assert_equals(r.right, 0, "Expected value for right is 0");
},'testReadOnlySetReadOnlyAttributes');
test(function() {
var r = new DOMRectReadOnly();
r.x = 0;
assert_equals(r.x, 0, "Expected value for x is 0");
assert_equals(r.left, 0, "Expected value for left is 0");
assert_equals(r.right, 0, "Expected value for right is 0");
r.y = 0;
assert_equals(r.y, 0, "Expected value for y is 0");
assert_equals(r.top, 0, "Expected value for top is 0");
assert_equals(r.bottom, 0, "Expected value for bottom is 0");
r.width = 0;
assert_equals(r.width, 0, "Expected value for width is 0");
assert_equals(r.x, 0, "Expected value for x is 0");
assert_equals(r.right, 0, "Expected value for right is 0");
r.height = 0;
assert_equals(r.height, 0, "Expected value for height is 0");
assert_equals(r.y, 0, "Expected value for y is 0");
assert_equals(r.bottom, 0, "Expected value for bottom is 0");
},'testReadOnlySetAttributes');
function testConstructor(constructor) {
var prefix = constructor === DOMRect ? 'testConstructor' : 'testReadOnlyConstructor';
test(function() {
checkDOMRect(new constructor(),
{ x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 });
}, prefix + '0');
test(function() {
checkDOMRect(new constructor(1),
{ x: 1, y: 0, width: 0, height: 0, top: 0, right: 1, bottom: 0, left: 1 });
}, prefix + '1');
test(function() {
checkDOMRect(new constructor(1, 2),
{ x: 1, y: 2, width: 0, height: 0, top: 2, right: 1, bottom: 2, left: 1 });
}, prefix + '2');
test(function() {
checkDOMRect(new constructor(1, 2, 3),
{ x: 1, y: 2, width: 3, height: 0, top: 2, right: 4, bottom: 2, left: 1 });
}, prefix + '3');
test(function() {
checkDOMRect(new constructor(1, 2, 3, 4),
{ x: 1, y: 2, width: 3, height: 4, top: 2, right: 4, bottom: 6, left: 1 });
}, prefix + '4');
test(function() {
checkDOMRect(new constructor(1, 2, 3, 4, 5),
{ x: 1, y: 2, width: 3, height: 4, top: 2, right: 4, bottom: 6, left: 1 });
}, prefix + '5');
test(function() {
checkDOMRect(new constructor(2, 2, -4, 4),
{ x: 2, y: 2, width: -4, height: 4, top: 2, right: 2, bottom: 6, left: -2 });
}, prefix + 'NegativeWidth');
test(function() {
checkDOMRect(new constructor(2, 2, 4, -4),
{ x: 2, y: 2, width: 4, height: -4, top: -2, right: 6, bottom: 2, left: 2 });
}, prefix + 'NegativeHeight');
test(function() {
checkDOMRect(new constructor(2, 2, -4, -4),
{ x: 2, y: 2, width: -4, height: -4, top: -2, right: 2, bottom: 2, left: -2 });
}, prefix + 'NegativeWidthHeight');
test(function() {
checkDOMRect(new constructor(0, 0, undefined, 4),
{ x: 0, y: 0, width: 0, height: 4, top: 0, right: 0, bottom: 4, left: 0 });
}, prefix + 'Undefined1');
test(function() {
checkDOMRect(new constructor(NaN, Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY, null),
{ x: NaN, y: -Infinity, width: Infinity, height: 0, top: -Infinity, right: NaN, bottom: -Infinity, left: NaN });
}, prefix + 'Undefined2');
test(function() {
checkDOMRect(new constructor("1", "2", "3", "4"),
{ x: 1, y: 2, width: 3, height: 4, top: 2, right: 4, bottom: 6, left: 1 });
}, prefix + 'String1');
test(function() {
checkDOMRect(new constructor("a", "b", "c", "d"),
{ x: NaN, y: NaN, width: NaN, height: NaN, top: NaN, right: NaN, bottom: NaN, left: NaN });
}, prefix + 'String2');
}
function checkDOMRect(r, exp) {
assert_equals(r.x, exp.x, "Expected value for x is " + exp.x);
assert_equals(r.y, exp.y, "Expected value for y is " + exp.y);
assert_equals(r.width, exp.width, "Expected value for width is " + exp.width);
assert_equals(r.height, exp.height, "Expected value for height is " + exp.height);
assert_equals(r.top, exp.top, "Expected value for top is " + exp.top);
assert_equals(r.left, exp.left, "Expected value for left is " + exp.left);
assert_equals(r.bottom, exp.bottom, "Expected value for bottom is " + exp.bottom);
assert_equals(r.right, exp.right, "Expected value for right is " + exp.right);
}
</script>
</body>
</html>
![swh spinner](/static/img/swh-spinner.gif)
Computing file changes ...