Skip to content

8358454: Wrong <br> tags in cssref.html #1820

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mstr2 wants to merge 1 commit into from
Closed

8358454: Wrong <br> tags in cssref.html #1820

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions modules/javafx.graphics/src/main/docs/javafx/scene/doc-files/cssref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -737,7 +737,7 @@ <h3><a id="introtransitions">Transitions</a></h3>
<th class="propertyname" scope="row">transition</th>
<td class="value">
&lt;single-transition&gt;#
<br/><br/>
<br><br>
<strong>where</strong> &lt;single&#8209;transition&gt; = [ none | all | &lt;custom&#8209;ident&gt; ] ||
<a href="#typeduration" class="typelink">&lt;duration&gt;</a> ||
<a href="#typeeasingfunction" class="typelink">&lt;easing&#8209;function&gt;</a> ||
Expand Down Expand Up @@ -765,14 +765,14 @@ <h3><a id="introtransitions">Transitions</a></h3>
<h4>Example</h4>
<p>A button that smoothly changes its opacity on mouse-hover can be defined in a stylesheet like this:</p>
<p class="example">
.button {</br>
&nbsp;&nbsp;&nbsp; -fx-opacity: 0.8;</br>
&nbsp;&nbsp;&nbsp; transition-property: -fx-opacity;</br>
&nbsp;&nbsp;&nbsp; transition-duration: 0.5s;</br>
}</br>
</br>
.button:hover {</br>
&nbsp;&nbsp;&nbsp; -fx-opacity: 1;</br>
.button {<br>
&nbsp;&nbsp;&nbsp; -fx-opacity: 0.8;<br>
&nbsp;&nbsp;&nbsp; transition-property: -fx-opacity;<br>
&nbsp;&nbsp;&nbsp; transition-duration: 0.5s;<br>
}<br>
<br>
.button:hover {<br>
&nbsp;&nbsp;&nbsp; -fx-opacity: 1;<br>
}
</p>

Expand Down Expand Up @@ -1679,12 +1679,12 @@ <h4>Color Functions <span class="grammar" style="font-size: smaller;">&lt;color-

<h3><a id="typeeasingfunction">&lt;easing-function&gt;</a></h3>
<p class="grammar">linear | &lt;cubic-bezier-easing-function&gt; | &lt;step-easing-function&gt; | &lt;fx-easing-function&gt;</p>
<p><strong>Linear</strong> <span class="grammar" style="font-size: smaller;">linear</span><br/>
<p><strong>Linear</strong> <span class="grammar" style="font-size: smaller;">linear</span><br>
Copy link
Contributor

@andy-goryachev-oracle andy-goryachev-oracle Jun 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is Linear looks like plain linear but Cubic Bézier Easing Functions has triangular brackets <cubic-bezier-easing-function>?

Copy link
Collaborator Author

@mstr2 mstr2 Jun 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

linear is a concrete value, whereas <cubic-bezier-easing-function> is defined later to be one of five possible concrete values.

The linear easing function is a simple linear mapping from the input progress value to the output progress value.</p>
<figure style="display: inline-block">
<img src="easing-linear.svg" width="200" alt="Linear easing function">
</figure>
<p><strong>Cubic Bézier Easing Functions</strong> <span class="grammar" style="font-size: smaller;">&lt;cubic-bezier-easing-function&gt;</span></br></p>
<p><strong>Cubic Bézier Easing Functions</strong> <span class="grammar" style="font-size: smaller;">&lt;cubic-bezier-easing-function&gt;</span><br></p>
<p class="grammar">ease | ease-in | ease-out | ease-in-out | cubic-bezier(<a href="#typenumber" class="typelink">&lt;number&nbsp;[0,1]&gt;</a>, <a href="#typenumber" class="typelink">&lt;number&gt;</a>, <a href="#typenumber" class="typelink">&lt;number&nbsp;[0,1]&gt;</a>, <a href="#typenumber" class="typelink">&lt;number&gt;</a>)</p>
<p>The values have the following meaning:</p>
<table style="margin-left: 40px;">
Expand Down Expand Up @@ -1730,11 +1730,11 @@ <h3><a id="typeeasingfunction">&lt;easing-function&gt;</a></h3>
<tr>
<td style="width: 120px; vertical-align: top"><span class="grammar">steps</span></td>
<td>defines a step function with <a href="#typenumber" class="typelink">&lt;integer&gt;</a> intervals
and an optional <span class="grammar">&lt;step-position&gt;</span>;<br/>if omitted,
and an optional <span class="grammar">&lt;step-position&gt;</span>;<br>if omitted,
Copy link
Contributor

@andy-goryachev-oracle andy-goryachev-oracle Jun 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

possible future enhancement: add thin grid lines to the tables, similar to other tables.

<span class="grammar">end</span> is implied</span>
</td>
</tr>
<tr><td><br/></td></tr>
<tr><td><br></td></tr>
<tr>
<td style="width: 120px; vertical-align: top"><span class="grammar">jump-start</span></td>
<td>the interval starts with a rise point when the input progress value is 0</td>
Expand Down Expand Up @@ -1778,7 +1778,7 @@ <h3><a id="typeeasingfunction">&lt;easing-function&gt;</a></h3>
<img src="easing-stepboth.svg" width="200" alt="jump-both easing function">
<figcaption style="margin-left: 30px" class="grammar">steps(3, jump-both)</figcaption>
</figure>
<p><strong>SMIL 3.0 Easing Functions</strong> <span class="grammar" style="font-size: smaller;">&lt;fx-easing-function&gt;</span></br></p>
<p><strong>SMIL 3.0 Easing Functions</strong> <span class="grammar" style="font-size: smaller;">&lt;fx-easing-function&gt;</span><br></p>
<p class="grammar">-fx-ease-in | -fx-ease-out | -fx-ease-both</p>
<p>The values have the following meaning:</p>
<table style="margin-left: 40px;">
Expand Down