Fredrik Söderquist
57a8c59810
Automatic update from web-platform-tests Remove the ShapeBox::kMissing value A missing <shape-box> for a <basic-shape> is the same as 'margin-box'. Removing the kMissing value makes the code a bit simpler. It affects the serialization of the computed value, but since the parser produces a canonical form where 'margin-box' will be treated the same as no <shape-box>, this won't be observable, but mirror the parser's behavior. This simplifies the related animation code quite a bit, and makes following cleanups easier. Add basic WPT coverage for computed shape-outside with different <shape-box> values since none were found in a cursory search. Bug: 530077400 Change-Id: I649d15646f6f1dafc6e2460352e35f2a6f9af65c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/8030562 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Fredrik Söderquist <fs@opera.com> Cr-Commit-Position: refs/heads/main@{#1655951} -- wpt-commits: 6281c469a478b518cbe6e636f96bb1aa0f678255 wpt-pr: 61029
64 lines
4.1 KiB
HTML
64 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>CSS Shapes Module Level 1: getComputedStyle().shapeOutside</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-outside-property">
|
|
<meta name="assert" content="shape-outside computed value is as specified.">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/css/support/computed-testcommon.js"></script>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
#target {
|
|
font-size: 40px;
|
|
}
|
|
</style>
|
|
<div>
|
|
<div id="target"></div>
|
|
</div>
|
|
<script>
|
|
// TODO: Add inset() tests
|
|
test_computed_value("shape-outside", "rect(0px 3em 2% 1px)", "inset(0px calc(100% - 120px) 98% 1px)");
|
|
test_computed_value("shape-outside", "rect(0px calc(100% - 20px) 2% 3em)", "inset(0px calc(0% + 20px) 98% 120px)");
|
|
test_computed_value("shape-outside", "rect(10px 20px 30px 25px round 20% / 0px 1px 2% 3em)", "inset(10px calc(100% - 20px) calc(100% - 30px) 25px round 20% / 0px 1px 2% 120px)");
|
|
|
|
test_computed_value("shape-outside", "circle(at 10% 20%)");
|
|
test_computed_value("shape-outside", "circle(at calc(75% + 0px) calc(75% + 0px))", "circle(at 75% 75%)");
|
|
test_computed_value("shape-outside", "circle(calc(10px + 0.5em) at -50% 50%) border-box", "circle(30px at -50% 50%) border-box");
|
|
test_computed_value("shape-outside", "circle(calc(10px - 0.5em) at 50% -50%) border-box", "circle(0px at 50% -50%) border-box");
|
|
test_computed_value("shape-outside", "circle(at top 0% right calc(10% * sign(1em - 1px)))", "circle(at 90% 0%)");
|
|
test_computed_value("shape-outside", "circle(at top 0% right calc(10% * sibling-index()))", "circle(at 90% 0%)");
|
|
|
|
test_computed_value("shape-outside", "ellipse(60% closest-side at 50% 50%)");
|
|
test_computed_value("shape-outside", "ellipse(calc(10px + 0.5em) calc(10px - 0.5em) at -50% 50%) padding-box", "ellipse(30px 0px at -50% 50%) padding-box");
|
|
test_computed_value("shape-outside", "ellipse(calc(10px - 0.5em) calc(10px + 0.5em) at 50% -50%) border-box", "ellipse(0px 30px at 50% -50%) border-box");
|
|
|
|
test_computed_value("shape-outside", "polygon(evenodd, -10px -20px, -30px -40px, -50px -60px) margin-box", "polygon(evenodd, -10px -20px, -30px -40px, -50px -60px)");
|
|
test_computed_value("shape-outside", "polygon(10% 20%, 30% 40%, 50% 60%) content-box");
|
|
test_computed_value("shape-outside", "polygon(calc(10px - 0.5em) 20%, 30% 40%, 50% calc(10px - 0.5em))", "polygon(-10px 20%, 30% 40%, 50% -10px)");
|
|
|
|
test_computed_value("shape-outside", "path('M 10 10 h 80 v 80 h -80 Z')", 'path("M 10 10 H 90 V 90 H 10 Z")');
|
|
test_computed_value("shape-outside", "path('M10,10h80v80h-80z')", 'path("M 10 10 H 90 V 90 H 10 Z")');
|
|
test_computed_value("shape-outside", "path(evenodd, 'M10,10h80v80h-80zM25,25h50v50h-50z')", 'path(evenodd, "M 10 10 H 90 V 90 H 10 Z M 25 25 H 75 V 75 H 25 Z")');
|
|
test_computed_value("shape-outside", "path(nonzero, 'M10,10h80v80h-80z')", 'path("M 10 10 H 90 V 90 H 10 Z")');
|
|
test_computed_value("shape-outside", "path('M0,0L100,0L100,100Z')", 'path("M 0 0 L 100 0 L 100 100 Z")');
|
|
test_computed_value("shape-outside", "path('M0,0C30,60,70,60,100,0')", 'path("M 0 0 C 30 60 70 60 100 0")');
|
|
test_computed_value("shape-outside", "path('M0,0Q50,100,100,0')", 'path("M 0 0 Q 50 100 100 0")');
|
|
test_computed_value("shape-outside", "path('M0,0A25,25,0,0,1,50,0')", 'path("M 0 0 A 25 25 0 0 1 50 0")');
|
|
|
|
test_computed_value("shape-outside", "shape(from 20px 40px, line to 20px 30px)");
|
|
test_computed_value("shape-outside", "shape(from 0 0, line to 100% 100%)", "shape(from 0px 0px, line to 100% 100%)");
|
|
test_computed_value("shape-outside", "shape(from 20px 40px, smooth to center 20%)", "shape(from 20px 40px, smooth to 50% 20%)");
|
|
test_computed_value("shape-outside", "shape(from 20px 40px, line to 100px 40px, line to 100px 100px, close)");
|
|
test_computed_value("shape-outside", "shape(from 1em 2em, line to 3em 1em)", "shape(from 40px 80px, line to 120px 40px)");
|
|
|
|
test_computed_value("shape-outside", "circle() content-box");
|
|
test_computed_value("shape-outside", "circle() padding-box");
|
|
test_computed_value("shape-outside", "circle() border-box");
|
|
test_computed_value("shape-outside", "circle() margin-box", "circle()");
|
|
</script>
|
|
</body>
|
|
</html>
|