Skip to content

GitLab

T
tangled
Commit 3a9145f3 authored by Alex Rudenko's avatar Alex Rudenko Committed by Commit Bot
Browse files
Options

Fix grid label positioning within iframes 

This CL adds calls to FramePointToViewport when generating
absolute label positions to ensure that labels are
properly positioned within iframes.

Screenshot: https://i.imgur.com/DDMvChr.png
Fixed: 1116324
Change-Id: I7ae1e720eb99e3e0b0394b838a7d0b7e660901dd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2359033
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: default avatarPeter Marshall <petermarshall@chromium.org>
Cr-Commit-Position: refs/heads/master@{#799283}
parent b37e1d9b
Hide whitespace changes
Inline Side-by-side
Showing with 400 additions and 34 deletions
third_party/blink/renderer/core/inspector/inspector_highlight.cc
View file @ 3a9145f3
......@@ -31,6 +31,7 @@
#include "third_party/blink/renderer/core/page/page.h"
#include "third_party/blink/renderer/core/style/computed_style_constants.h"
#include "third_party/blink/renderer/core/style/grid_positions_resolver.h"
#include "third_party/blink/renderer/platform/geometry/float_point.h"
#include "third_party/blink/renderer/platform/geometry/layout_unit.h"
#include "third_party/blink/renderer/platform/graphics/path.h"
#include "third_party/blink/renderer/platform/web_test_support.h"
......@@ -419,10 +420,15 @@ PhysicalOffset Transpose(PhysicalOffset& offset) {
return PhysicalOffset(offset.top, offset.left);
}
PhysicalOffset LocalToAbsolutePoint(LayoutGrid* layout_grid,
PhysicalOffset LocalToAbsolutePoint(Node* node,
PhysicalOffset local,
float scale) {
PhysicalOffset abs_number_pos = layout_grid->LocalToAbsolutePoint(local);
LayoutObject* layout_object = node->GetLayoutObject();
LayoutGrid* layout_grid = ToLayoutGrid(layout_object);
FloatPoint local_in_frame = FramePointToViewport(
node->GetDocument().View(), FloatPoint(local.left, local.top));
PhysicalOffset abs_number_pos = layout_grid->LocalToAbsolutePoint(
PhysicalOffset::FromFloatPointRound(local_in_frame));
abs_number_pos.Scale(scale);
return abs_number_pos;
}
......@@ -437,11 +443,13 @@ std::unique_ptr<protocol::DictionaryValue> BuildPosition(
}
std::unique_ptr<protocol::ListValue> BuildGridTrackSizes(
LayoutGrid* layout_grid,
Node* node,
GridTrackSizingDirection direction,
float scale,
LayoutUnit gap,
const Vector<String>* authored_values) {
LayoutObject* layout_object = node->GetLayoutObject();
LayoutGrid* layout_grid = ToLayoutGrid(layout_object);
std::unique_ptr<protocol::ListValue> sizes = protocol::ListValue::create();
const Vector<LayoutUnit>& positions = direction == kForRows
? layout_grid->RowPositions()
......@@ -462,7 +470,7 @@ std::unique_ptr<protocol::ListValue> BuildGridTrackSizes(
if (direction == kForRows)
track_size_pos = Transpose(track_size_pos);
std::unique_ptr<protocol::DictionaryValue> size_info =
BuildPosition(LocalToAbsolutePoint(layout_grid, track_size_pos, scale));
BuildPosition(LocalToAbsolutePoint(node, track_size_pos, scale));
size_info->setDouble("computedSize", adjusted_size);
if (i - 1 < authored_values->size()) {
size_info->setString("authoredSize", authored_values->at(i - 1));
......@@ -474,11 +482,14 @@ std::unique_ptr<protocol::ListValue> BuildGridTrackSizes(
}
std::unique_ptr<protocol::ListValue> BuildGridPositiveLineNumberPositions(
LayoutGrid* layout_grid,
Node* node,
const Vector<LayoutUnit>& track_positions,
const LayoutUnit& grid_gap,
GridTrackSizingDirection direction,
float scale) {
LayoutObject* layout_object = node->GetLayoutObject();
LayoutGrid* layout_grid = ToLayoutGrid(layout_object);
std::unique_ptr<protocol::ListValue> number_positions =
protocol::ListValue::create();
......@@ -504,19 +515,22 @@ std::unique_ptr<protocol::ListValue> BuildGridPositiveLineNumberPositions(
alt_axis_pos);
if (direction == kForRows)
number_position = Transpose(number_position);
number_positions->pushValue(BuildPosition(
LocalToAbsolutePoint(layout_grid, number_position, scale)));
number_positions->pushValue(
BuildPosition(LocalToAbsolutePoint(node, number_position, scale)));
}
return number_positions;
}
std::unique_ptr<protocol::ListValue> BuildGridNegativeLineNumberPositions(
LayoutGrid* layout_grid,
Node* node,
const Vector<LayoutUnit>& trackPositions,
const LayoutUnit& grid_gap,
GridTrackSizingDirection direction,
float scale) {
LayoutObject* layout_object = node->GetLayoutObject();
LayoutGrid* layout_grid = ToLayoutGrid(layout_object);
std::unique_ptr<protocol::ListValue> number_positions =
protocol::ListValue::create();
......@@ -539,7 +553,7 @@ std::unique_ptr<protocol::ListValue> BuildGridNegativeLineNumberPositions(
if (direction == kForRows)
number_position = Transpose(number_position);
number_positions->pushValue(
BuildPosition(LocalToAbsolutePoint(layout_grid, number_position, scale)));
BuildPosition(LocalToAbsolutePoint(node, number_position, scale)));
// Then go line by line, calculating the offset to fall in the middle of gaps
// if needed.
......@@ -553,16 +567,19 @@ std::unique_ptr<protocol::ListValue> BuildGridNegativeLineNumberPositions(
alt_axis_pos);
if (direction == kForRows)
number_position = Transpose(number_position);
number_positions->pushValue(BuildPosition(
LocalToAbsolutePoint(layout_grid, number_position, scale)));
number_positions->pushValue(
BuildPosition(LocalToAbsolutePoint(node, number_position, scale)));
}
return number_positions;
}
std::unique_ptr<protocol::DictionaryValue> BuildAreaNamePaths(
LayoutGrid* layout_grid,
float scale) {
std::unique_ptr<protocol::DictionaryValue> BuildAreaNamePaths(Node* node,
float scale) {
LayoutObject* layout_object = node->GetLayoutObject();
LayoutGrid* layout_grid = ToLayoutGrid(layout_object);
LocalFrameView* containing_view = node->GetDocument().View();
std::unique_ptr<protocol::DictionaryValue> area_paths =
protocol::DictionaryValue::create();
......@@ -594,7 +611,7 @@ std::unique_ptr<protocol::DictionaryValue> BuildAreaNamePaths(
end_row - start_row - row_gap_offset);
PhysicalRect area_rect(position, size);
FloatQuad area_quad = layout_grid->LocalRectToAbsoluteQuad(area_rect);
FrameQuadToViewport(containing_view, area_quad);
PathBuilder area_builder;
area_builder.AppendPath(QuadToPath(area_quad), scale);
......@@ -605,9 +622,12 @@ std::unique_ptr<protocol::DictionaryValue> BuildAreaNamePaths(
}
std::unique_ptr<protocol::ListValue> BuildGridLineNames(
LayoutGrid* layout_grid,
Node* node,
GridTrackSizingDirection direction,
float scale) {
LayoutObject* layout_object = node->GetLayoutObject();
LayoutGrid* layout_grid = ToLayoutGrid(layout_object);
std::unique_ptr<protocol::ListValue> lines = protocol::ListValue::create();
const Vector<LayoutUnit>& tracks = direction == kForColumns
......@@ -637,8 +657,8 @@ std::unique_ptr<protocol::ListValue> BuildGridLineNames(
if (direction == kForRows)
line_name_pos = Transpose(line_name_pos);
std::unique_ptr<protocol::DictionaryValue> line = BuildPosition(
LocalToAbsolutePoint(layout_grid, line_name_pos, scale));
std::unique_ptr<protocol::DictionaryValue> line =
BuildPosition(LocalToAbsolutePoint(node, line_name_pos, scale));
line->setString("name", name);
......@@ -764,11 +784,11 @@ std::unique_ptr<protocol::DictionaryValue> BuildGridInfo(
grid_info->setValue(
"columnTrackSizes",
BuildGridTrackSizes(layout_grid, kForColumns, scale, column_gap,
BuildGridTrackSizes(node, kForColumns, scale, column_gap,
&column_authored_values));
grid_info->setValue("rowTrackSizes",
BuildGridTrackSizes(layout_grid, kForRows, scale,
row_gap, &row_authored_values));
BuildGridTrackSizes(node, kForRows, scale, row_gap,
&row_authored_values));
}
PathBuilder row_builder;
......@@ -838,35 +858,33 @@ std::unique_ptr<protocol::DictionaryValue> BuildGridInfo(
if (grid_highlight_config.show_positive_line_numbers) {
grid_info->setValue("positiveRowLineNumberPositions",
BuildGridPositiveLineNumberPositions(
layout_grid, rows, row_gap, kForRows, scale));
grid_info->setValue(
"positiveColumnLineNumberPositions",
BuildGridPositiveLineNumberPositions(layout_grid, columns, column_gap,
kForColumns, scale));
node, rows, row_gap, kForRows, scale));
grid_info->setValue("positiveColumnLineNumberPositions",
BuildGridPositiveLineNumberPositions(
node, columns, column_gap, kForColumns, scale));
}
// Negative Row and column Line positions
if (grid_highlight_config.show_negative_line_numbers) {
grid_info->setValue("negativeRowLineNumberPositions",
BuildGridNegativeLineNumberPositions(
layout_grid, rows, row_gap, kForRows, scale));
grid_info->setValue(
"negativeColumnLineNumberPositions",
BuildGridNegativeLineNumberPositions(layout_grid, columns, column_gap,
kForColumns, scale));
node, rows, row_gap, kForRows, scale));
grid_info->setValue("negativeColumnLineNumberPositions",
BuildGridNegativeLineNumberPositions(
node, columns, column_gap, kForColumns, scale));
}
// Area names
if (grid_highlight_config.show_area_names) {
grid_info->setValue("areaNames", BuildAreaNamePaths(layout_grid, scale));
grid_info->setValue("areaNames", BuildAreaNamePaths(node, scale));
}
// line names
if (grid_highlight_config.show_line_names) {
grid_info->setValue("rowLineNameOffsets",
BuildGridLineNames(layout_grid, kForRows, scale));
BuildGridLineNames(node, kForRows, scale));
grid_info->setValue("columnLineNameOffsets",
BuildGridLineNames(layout_grid, kForColumns, scale));
BuildGridLineNames(node, kForColumns, scale));
}
// Grid border
......
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-persistent-grid-iframe-expected.txt 0 → 100644
View file @ 3a9145f3
This test verifies that persistent grid in iframe are positioned correctly.
{
"gridHighlights": [
{
"rotationAngle": 0,
"columnTrackSizes": [
{
"x": 158,
"y": 98,
"computedSize": 120,
"authoredSize": "120px"
},
{
"x": 288,
"y": 98,
"computedSize": 120,
"authoredSize": "120px"
},
{
"x": 418,
"y": 98,
"computedSize": 120,
"authoredSize": "120px"
}
],
"rowTrackSizes": [
{
"x": 98,
"y": 220.5,
"computedSize": 245,
"authoredSize": "1fr"
},
{
"x": 98,
"y": 475.5,
"computedSize": 245,
"authoredSize": "1fr"
}
],
"rows": [
"M",
98,
98,
"L",
478,
98,
"M",
478,
343,
"L",
98,
343,
"M",
98,
353,
"L",
478,
353,
"M",
478,
598,
"L",
98,
598
],
"rowGaps": [
"M",
98,
343,
"L",
478,
343,
"L",
478,
353,
"L",
98,
353,
"Z"
],
"columns": [
"M",
98,
98,
"L",
98,
598,
"M",
218,
598,
"L",
218,
98,
"M",
228,
98,
"L",
228,
598,
"M",
348,
598,
"L",
348,
98,
"M",
358,
98,
"L",
358,
598,
"M",
478,
598,
"L",
478,
98
],
"columnGaps": [
"M",
218,
98,
"L",
228,
98,
"L",
228,
598,
"L",
218,
598,
"Z",
"M",
348,
98,
"L",
358,
98,
"L",
358,
598,
"L",
348,
598,
"Z"
],
"positiveRowLineNumberPositions": [
{
"x": 98,
"y": 98
},
{
"x": 98,
"y": 348
},
{
"x": 98,
"y": 598
}
],
"positiveColumnLineNumberPositions": [
{
"x": 98,
"y": 98
},
{
"x": 223,
"y": 98
},
{
"x": 353,
"y": 98
},
{
"x": 478,
"y": 98
}
],
"negativeRowLineNumberPositions": [
{
"x": 478,
"y": 98
},
{
"x": 478,
"y": 348
},
{
"x": 478,
"y": 598
}
],
"negativeColumnLineNumberPositions": [
{
"x": 98,
"y": 598
},
{
"x": 223,
"y": 598
},
{
"x": 353,
"y": 598
},
{
"x": 478,
"y": 598
}
],
"areaNames": {
"header": [
"M",
228,
98,
"L",
478,
98,
"L",
478,
343,
"L",
228,
343,
"Z"
],
"sidebar": [
"M",
98,
353,
"L",
218,
353,
"L",
218,
598,
"L",
98,
598,
"Z"
],
"content": [
"M",
228,
353,
"L",
478,
353,
"L",
478,
598,
"L",
228,
598,
"Z"
]
},
"rowLineNameOffsets": [
{
"x": 98,
"y": 598,
"name": "sidebar-end"
},
{
"x": 98,
"y": 348,
"name": "sidebar-start"
},
{
"x": 98,
"y": 348,
"name": "content-start"
},
{
"x": 98,
"y": 348,
"name": "header-end"
},
{
"x": 98,
"y": 598,
"name": "content-end"
},
{
"x": 98,
"y": 98,
"name": "header-start"
}
],
"columnLineNameOffsets": [],
"gridBorder": [
"M",
98,
98,
"L",
478,
98,
"L",
478,
598,
"L",
98,
598,
"Z"
],
"gridHighlightConfig": {
"gridBorderDash": false,
"rowLineDash": true,
"columnLineDash": true,
"showGridExtensionLines": true,
"showPositiveLineNumbers": true,
"showNegativeLineNumbers": true,
"showAreaNames": true,
"showLineNames": true,
"gridBorderColor": "rgba(255, 0, 0, 0)",
"rowLineColor": "rgba(128, 0, 0, 0)",
"columnLineColor": "rgba(128, 0, 0, 0)",
"rowGapColor": "rgba(0, 255, 0, 0)",
"columnGapColor": "rgba(0, 0, 255, 0)",
"rowHatchColor": "rgba(255, 255, 255, 0)",
"columnHatchColor": "rgba(128, 128, 128, 0)",
"areaBorderColor": "rgba(255, 0, 0, 0)"
},
"isPrimaryGrid": true
}
]
}
third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-persistent-grid-iframe.js 0 → 100644
View file @ 3a9145f3
// Copyright 2020 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
(async function() {
TestRunner.addResult(`This test verifies that persistent grid in iframe are positioned correctly.\n`);
await TestRunner.loadModule('elements_test_runner');
await TestRunner.showPanel('elements');
await TestRunner.loadHTML(`
<!DOCTYPE html>
<iframe style="margin: 5em; width: 600px; height: 600px;" srcdoc="<style>div{width:500px;height:500px;display: grid;grid-gap: 10px;grid-template-columns: 120px 120px 120px;grid-template-areas:'....... header header' 'sidebar content content'; background-color: #fff; color: #444;grid-template-rows:1fr 1fr;</style><div id='grid'>"></iframe>
`);
await new Promise(resolve => {
ElementsTestRunner.dumpInspectorGridHighlightsJSON(['grid'], resolve);
});
TestRunner.completeTest();
})();
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment