Skip to content

Commit 8fc6d2f

Browse files
noamrchromium-wpt-export-bot
noamr
authored and
chromium-wpt-export-bot
committed
Support corner-shape with shape-outside
Take the curvature into account when computing the BoxShape when there is a corner-shape, and apply the correct exponent when intercepting. Bug: 402437726 Change-Id: Ia92727700c376805829e2edadd31e85f85e2820d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6543988 Commit-Queue: Noam Rosenthal <[email protected]> Reviewed-by: Fredrik Söderquist <[email protected]> Cr-Commit-Position: refs/heads/main@{#1460143}
1 parent abd9a16 commit 8fc6d2f

File tree

2 files changed

+142
-0
lines changed

2 files changed

+142
-0
lines changed

‎css/css-borders/tentative/corner-shape/corner-shape-outside-left.html

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<title>shape-outside with corner-shape: notch</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
4+
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shape">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<style>
8+
body {
9+
margin: 0;
10+
}
11+
.container {
12+
width: 200px;
13+
line-height: 0;
14+
}
15+
16+
.shape {
17+
float: left;
18+
shape-outside: border-box;
19+
border-radius: 48%;
20+
box-sizing: content-box;
21+
height: 40px;
22+
width: 40px;
23+
padding: 20px;
24+
border: 20px solid lightgreen;
25+
margin: 20px;
26+
background-color: orange;
27+
}
28+
29+
.box {
30+
display: inline-block;
31+
width: 60px;
32+
background-color: blue;
33+
}
34+
35+
.longbox {
36+
display: inline-block;
37+
width: 200px;
38+
height: 20px;
39+
background-color: blue;
40+
}
41+
</style>
42+
43+
<main class="container">
44+
<div class="shape"></div>
45+
<div class="longbox"></div> <!-- Saturate the margin space -->
46+
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
47+
<div class="box" style="height: 36px;"></div>
48+
<div class="box" style="height: 36px;"></div>
49+
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
50+
<div class="longbox"></div> <!-- Saturate the margin space -->
51+
</main>
52+
53+
<script>
54+
function shape_outside_corner_shape_test(corner_shape, expected) {
55+
test(() => {
56+
const shape = document.querySelector(".shape");
57+
shape.style.setProperty("corner-shape", corner_shape);
58+
const actual = Array.from(document.querySelectorAll(".container .box")).map(b => b.getBoundingClientRect().x);
59+
assert_array_approx_equals(actual, expected, 2);
60+
}, `corner-shape: ${corner_shape} with shape-outside`);
61+
}
62+
63+
shape_outside_corner_shape_test("notch", [82, 140, 140, 82]);
64+
shape_outside_corner_shape_test("bevel", [106, 140, 140, 106]);
65+
shape_outside_corner_shape_test("notch bevel", [106, 140, 140, 82]);
66+
shape_outside_corner_shape_test("round", [130, 140, 140, 130]);
67+
shape_outside_corner_shape_test("square", [140, 140, 140, 140]);
68+
shape_outside_corner_shape_test("scoop", [88, 140, 140, 88]);
69+
shape_outside_corner_shape_test("superellipse(1.5)", [135, 140, 140, 135]);
70+
shape_outside_corner_shape_test("superellipse(-.8)", [88, 140, 140, 88]);
71+
</script>

‎css/css-borders/tentative/corner-shape/corner-shape-outside-right.html

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<title>shape-outside with corner-shape: notch</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">
4+
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shape">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<style>
8+
body {
9+
margin: 0;
10+
}
11+
.container {
12+
direction: rtl;
13+
width: 200px;
14+
line-height: 0;
15+
}
16+
17+
.shape {
18+
float: right;
19+
shape-outside: border-box;
20+
border-radius: 50%;
21+
box-sizing: content-box;
22+
height: 40px;
23+
width: 40px;
24+
padding: 20px;
25+
border: 20px solid lightgreen;
26+
margin: 20px;
27+
background-color: orange;
28+
}
29+
30+
.box {
31+
display: inline-block;
32+
width: 60px;
33+
background-color: blue;
34+
}
35+
36+
.longbox {
37+
display: inline-block;
38+
width: 200px;
39+
height: 20px;
40+
background-color: blue;
41+
}
42+
</style>
43+
44+
<main class="container">
45+
<div class="shape"></div>
46+
<div class="longbox"></div> <!-- Saturate the margin space -->
47+
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
48+
<div class="box" style="height: 36px;"></div>
49+
<div class="box" style="height: 36px;"></div>
50+
<div class="box" style="height: 24px;"></div> <!-- Box at corner -->
51+
<div class="longbox"></div> <!-- Saturate the margin space -->
52+
</main>
53+
54+
<script>
55+
function shape_outside_corner_shape_test(corner_shape, expected) {
56+
test(() => {
57+
const shape = document.querySelector(".shape");
58+
shape.style.setProperty("corner-shape", corner_shape);
59+
const actual = Array.from(document.querySelectorAll(".container .box")).map(b => b.getBoundingClientRect().right);
60+
assert_array_approx_equals(actual, expected, 2);
61+
}, `corner-shape: ${corner_shape} with shape-outside`);
62+
}
63+
shape_outside_corner_shape_test("notch", [120, 60, 60, 120]);
64+
shape_outside_corner_shape_test("bevel", [96, 60, 60, 96]);
65+
shape_outside_corner_shape_test("notch bevel", [120, 60, 60, 96]);
66+
shape_outside_corner_shape_test("round", [72, 60, 60, 72]);
67+
shape_outside_corner_shape_test("square", [60, 60, 60, 60]);
68+
shape_outside_corner_shape_test("scoop", [114, 60, 60, 114]);
69+
shape_outside_corner_shape_test("superellipse(1.5)", [65, 60, 60, 65]);
70+
shape_outside_corner_shape_test("superellipse(-.8)", [112, 60, 60, 112]);
71+
</script>

0 commit comments

Comments
 (0)